/* ============================================================================
SMARTIN JOBS - capa de marca y rediseno visual sobre Vikunja.
Se inyecta desde el nginx del borde: NO se modifica ni un byte del codigo de
Vikunja, asi que una actualizacion de la herramienta no deshace esto.
La mayor parte del trabajo no se hace tapando clases, sino redefiniendo las
VARIABLES con las que la propia aplicacion se pinta (--primary, --text,
--card-background...). Asi el cambio alcanza pantallas que nunca hemos visto y
no se rompe cuando cambien el maquetado.
============================================================================ */
/* ---------------------------------------------------------------- 1. Paleta */
:root {
/* Identidad del cliente (clientes/001_Chinalco/_marca/IDENTIDAD.md) */
--sj-navy: #0E1A2C;
--sj-azul: #B8862B;
--sj-azul-alto: #9A6B20;
--sj-cian: #B8862B;
--sj-claro: #E8CB7A;
/* Semaforo: cumplido, riesgo, bloqueo */
--sj-verde: #4E7A5A;
--sj-ambar: #C06A2E;
--sj-rojo: #B3443B;
/* Neutros, ligeramente frios para que casen con el azul */
--sj-papel: #FFFFFF;
--sj-fondo: #F8F5EF;
--sj-fondo-2: #EFE9DF;
--sj-linea: #E4DCCF;
--sj-linea-2: #D6CBB8;
--sj-tinta: #0E1A2C;
--sj-tinta-2: #5A6472;
--sj-tinta-3: #8B95A3;
/* Geometria casi recta: es lo que da el aire editorial. Las esquinas muy redondeadas
tiran a "aplicacion de movil"; estas tiran a documento impreso. */
--sj-radio: 6px;
--sj-radio-s: 4px;
/* Sombras apenas insinuadas: el papel se separa del fondo por el filo, no por el bulto. */
--sj-sombra: 0 1px 1px rgba(14, 26, 44, .04);
--sj-sombra-m: 0 1px 2px rgba(14, 26, 44, .05), 0 6px 16px rgba(14, 26, 44, .07);
--sj-sombra-g: 0 2px 6px rgba(14, 26, 44, .07), 0 14px 30px rgba(14, 26, 44, .11);
--sj-trans: 140ms cubic-bezier(.2, .7, .4, 1);
/* Serif para los titulares y las cifras; la de sistema para la interfaz. Georgia esta
en todos los equipos, asi que no hay que descargar nada de fuera. */
--sj-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
/* Tema claro: lo que ve el equipo por omision. */
html:not(.dark) {
--primary: var(--sj-azul);
--primary-dark: var(--sj-azul-alto);
--site-background: var(--sj-fondo);
--card-background: var(--sj-papel);
--text: var(--sj-tinta);
--grey-50: var(--sj-fondo);
--grey-100: var(--sj-fondo-2);
--grey-200: var(--sj-linea);
--grey-300: var(--sj-linea-2);
--grey-500: var(--sj-tinta-3);
--grey-700: var(--sj-tinta-2);
--grey-800: var(--sj-tinta);
--link: var(--sj-cian);
}
/* Tema oscuro: mismo acento corporativo, sin perder el contraste. */
html.dark {
--primary: var(--sj-claro);
--primary-dark: #A9D3F2;
--link: var(--sj-claro);
}
/* ---------------------------------------------------------------- 2. Base */
body {
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: .005em;
}
html:not(.dark) body { background: var(--sj-fondo); color: var(--sj-tinta); }
/* Que se vea DONDE esta el foco al tabular: accesibilidad y sensacion de solidez. */
:focus-visible {
outline: 2px solid var(--sj-azul);
outline-offset: 2px;
border-radius: 4px;
}
::selection { background: var(--sj-claro); color: var(--sj-navy); }
/* Barras de desplazamiento discretas, no las gruesas del sistema. */
* { scrollbar-width: thin; scrollbar-color: var(--sj-linea-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--sj-linea-2); border-radius: 6px;
border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--sj-tinta-3); background-clip: content-box; }
/* ---------------------------------------------------------------- 3. Logotipo */
svg.logo { visibility: hidden !important; }
*:has(> svg.logo) {
display: inline-block;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
}
html:not(.dark) *:has(> svg.logo) { background-image: url("/marca/logo.svg"); }
html.dark *:has(> svg.logo) { background-image: url("/marca/logo-claro.svg"); }
.login *:has(> svg.logo),
.content-auth *:has(> svg.logo) { background-position: center; }
/* El enlace "Powered by Vikunja" del pie del menu. */
.menu-bottom-link, a[href*="vikunja.io"] { display: none !important; }
/* ---------------------------------------------------------------- 4. Cabecera */
html:not(.dark) .navbar {
background: var(--sj-papel) !important;
border-bottom: 1px solid var(--sj-linea);
box-shadow: var(--sj-sombra);
}
.navbar { height: 60px; }
html:not(.dark) .navbar a,
html:not(.dark) .navbar button,
html:not(.dark) .navbar .username { color: var(--sj-tinta-2); }
/* El titulo del proyecto, que es lo que de verdad situa a la persona. */
html:not(.dark) .navbar h1,
html:not(.dark) .navbar .project-title {
color: var(--sj-navy);
font-weight: 650;
letter-spacing: -.01em;
}
/* ---------------------------------------------------------------- 5. Menu lateral */
html:not(.dark) .menu-container {
background: var(--sj-papel);
border-right: 1px solid var(--sj-linea);
}
.menu-container .menu-label {
text-transform: uppercase;
letter-spacing: .09em;
font-size: 11px;
font-weight: 700;
color: var(--sj-tinta-3);
}
.menu-container .menu-list a {
border-radius: var(--sj-radio-s);
padding: 8px 12px;
font-weight: 500;
transition: background var(--sj-trans), color var(--sj-trans);
}
html:not(.dark) .menu-container .menu-list a { color: var(--sj-tinta-2); }
html:not(.dark) .menu-container .menu-list a:hover {
background: var(--sj-fondo-2);
color: var(--sj-navy);
}
html:not(.dark) .menu-container .menu-list a.router-link-active,
html:not(.dark) .menu-container .menu-list a.is-active {
background: #F3EBDB;
color: var(--sj-azul-alto);
font-weight: 650;
box-shadow: inset 3px 0 0 var(--sj-azul);
}
/* ---------------------------------------------------------------- 6. Tablero */
/* Las columnas: cada una su propia superficie, con el encabezado fijo arriba. */
.bucket {
border-radius: var(--sj-radio) !important;
border: 1px solid var(--sj-linea);
box-shadow: var(--sj-sombra);
transition: box-shadow var(--sj-trans);
}
html:not(.dark) .bucket { background: var(--sj-fondo-2) !important; }
.bucket-header {
padding: 14px 14px 10px !important;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
position: sticky;
top: 0;
z-index: 2;
backdrop-filter: blur(6px);
}
html:not(.dark) .bucket-header { color: var(--sj-tinta-2); background: inherit; }
/* Un filo de color por columna: se lee el estado de un vistazo, sin leer el texto. */
.bucket:nth-of-type(1) { box-shadow: inset 0 3px 0 var(--sj-tinta-3), var(--sj-sombra); }
.bucket:nth-of-type(2) { box-shadow: inset 0 3px 0 var(--sj-azul), var(--sj-sombra); }
.bucket:nth-of-type(3) { box-shadow: inset 0 3px 0 var(--sj-rojo), var(--sj-sombra); }
.bucket:nth-of-type(4) { box-shadow: inset 0 3px 0 var(--sj-ambar), var(--sj-sombra); }
.bucket:nth-of-type(5) { box-shadow: inset 0 3px 0 var(--sj-verde), var(--sj-sombra); }
/* Las tarjetas: lo que mas se mira y lo que mas se toca. */
.task.kanban-card {
border-radius: var(--sj-radio-s) !important;
border: 1px solid var(--sj-linea) !important;
box-shadow: var(--sj-sombra) !important;
padding: 2px !important;
transition: transform var(--sj-trans), box-shadow var(--sj-trans), border-color var(--sj-trans);
cursor: grab;
}
html:not(.dark) .task.kanban-card { background: var(--sj-papel) !important; }
.task.kanban-card:hover {
transform: translateY(-2px);
box-shadow: var(--sj-sombra-m) !important;
border-color: var(--sj-linea-2) !important;
}
.task.kanban-card:active { cursor: grabbing; transform: scale(.995); }
.kanban-card h3 { margin: 2px 0 6px; line-height: 1.35; }
.kanban-card__title-link {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.005em;
text-decoration: none;
}
html:not(.dark) .kanban-card__title-link { color: var(--sj-tinta); }
.kanban-card__title-link:hover { color: var(--sj-azul-alto); }
/* El numero de la tarea: presente pero callado. */
.task-id {
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: .03em;
color: var(--sj-tinta-3);
}
/* Mientras se arrastra, que se note que la tarjeta esta "en el aire". */
.sortable-ghost { opacity: .35 !important; }
.sortable-chosen { box-shadow: var(--sj-sombra-g) !important; transform: rotate(1.4deg); }
/* ---------------------------------------------------------------- 7. Senales */
/* Prioridad: pastilla legible, no un texto rojo suelto. */
.priority-label {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
background: #F6E7E2;
color: var(--sj-rojo);
}
html.dark .priority-label { background: rgba(179, 68, 59, .18); }
.priority-label .icon, .priority-label svg { width: 11px; height: 11px; }
/* "Hecho" */
.is-done {
background: #E9EFE7 !important;
color: var(--sj-verde) !important;
border-radius: 999px !important;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
font-size: 10.5px;
padding: 2px 9px !important;
}
html.dark .is-done { background: rgba(78, 122, 90, .2) !important; }
/* Vencimiento */
.task .due-date, .kanban-card .due-date {
border-radius: 999px;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
background: var(--sj-fondo-2);
color: var(--sj-tinta-2);
}
.task .due-date.overdue, .kanban-card .due-date.overdue {
background: #F6E7E2; color: var(--sj-rojo);
}
/* Barra de avance: fina, redondeada y del azul de la casa. */
progress, .progress {
height: 5px !important;
border-radius: 999px !important;
overflow: hidden;
border: 0;
}
progress::-webkit-progress-bar { background: var(--sj-linea); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--sj-azul); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--sj-azul); border-radius: 999px; }
/* Etiquetas */
.tag, .label {
border-radius: 999px !important;
font-size: 11px;
font-weight: 600;
padding: 2px 9px !important;
}
/* ---------------------------------------------------------------- 8. Controles */
.button, button.button, a.button {
border-radius: 3px !important;
font-weight: 600;
letter-spacing: .01em;
transition: background var(--sj-trans), box-shadow var(--sj-trans), transform var(--sj-trans);
}
.button:active { transform: translateY(1px); }
.button.is-primary, button.is-primary {
background: var(--sj-azul) !important;
border-color: var(--sj-azul) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(184, 134, 43, .35);
}
.button.is-primary:hover, button.is-primary:hover {
background: var(--sj-azul-alto) !important;
border-color: var(--sj-azul-alto) !important;
}
/* El "+ Anadir una tarea" de cada columna: invitador, no un enlace perdido. */
.bucket-footer .button, .bucket .add-task-button {
width: 100%;
justify-content: center;
border-radius: var(--sj-radio-s) !important;
border: 1px dashed var(--sj-linea-2) !important;
background: transparent !important;
color: var(--sj-tinta-2) !important;
font-weight: 600;
}
.bucket-footer .button:hover, .bucket .add-task-button:hover {
background: var(--sj-papel) !important;
border-color: var(--sj-azul) !important;
color: var(--sj-azul-alto) !important;
}
input, textarea, select, .input, .textarea {
border-radius: var(--sj-radio-s) !important;
transition: border-color var(--sj-trans), box-shadow var(--sj-trans);
}
html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) .input {
border-color: var(--sj-linea-2) !important;
}
input:focus, textarea:focus, .input:focus {
border-color: var(--sj-azul) !important;
box-shadow: 0 0 0 3px rgba(184, 134, 43, .15) !important;
}
/* Selector de vista (Lista / Cronograma / Tabla / Tablero) */
.switch-view, .switch-view-container {
background: var(--sj-fondo-2);
border-radius: 999px !important;
padding: 3px;
gap: 2px;
}
.switch-view .button, .switch-view a {
border-radius: 999px !important;
font-size: 13px;
font-weight: 600;
padding: 5px 14px !important;
border: 0 !important;
background: transparent !important;
color: var(--sj-tinta-2) !important;
}
.switch-view .button.is-primary, .switch-view a.is-active, .switch-view a.router-link-active {
background: var(--sj-papel) !important;
color: var(--sj-navy) !important;
box-shadow: var(--sj-sombra);
}
/* ---------------------------------------------------------------- 9. Tarjetas y listas */
.card {
border-radius: var(--sj-radio) !important;
border: 1px solid var(--sj-linea) !important;
box-shadow: var(--sj-sombra) !important;
}
html:not(.dark) .card { background: var(--sj-papel) !important; }
.card-header { border-bottom: 1px solid var(--sj-linea) !important; box-shadow: none !important; }
.card-header-title { font-weight: 650; letter-spacing: -.01em; color: var(--sj-navy); }
/* Filas de la vista Lista: que la vista de cada dia tambien se sienta cuidada. */
.tasks .task,
.task-list .task {
border-radius: var(--sj-radio-s);
padding: 10px 12px !important;
transition: background var(--sj-trans);
}
html:not(.dark) .tasks .task:hover,
html:not(.dark) .task-list .task:hover { background: var(--sj-fondo-2); }
table.table th {
text-transform: uppercase;
font-size: 11px;
letter-spacing: .07em;
color: var(--sj-tinta-3);
font-weight: 700;
}
/* ---------------------------------------------------------------- 10. Detalles */
h1, h2, h3, .title, .subtitle { letter-spacing: -.015em; }
html:not(.dark) h1, html:not(.dark) .title { color: var(--sj-navy); }
/* El titular grande de cada pantalla, en serif: es lo que cambia el tono de toda la
interfaz de "panel de control" a "documento de trabajo". */
.app-content h1,
.app-content > .content > h1,
.navbar h1 {
font-family: var(--sj-display);
font-weight: 400;
letter-spacing: -.01em;
}
/* Menos ruido: el mensaje de "no hay nada aqui" en gris, no en negro. */
.has-no-tasks, .no-tasks, .nothing { color: var(--sj-tinta-3); }
/* La ventana de detalle de una tarea, que es donde se escribe el avance. */
.task-view { border-radius: var(--sj-radio) !important; }
.modal-content, .modal-card { border-radius: var(--sj-radio) !important; overflow: hidden; }
/* Quien prefiera menos animacion, que tenga menos animacion. */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
.task.kanban-card:hover { transform: none; }
}
/* ============================================================================
11. Ajuste fino del tablero, hecho mirando el maquetado real (2026-10-26).
============================================================================ */
/* El titulo de cada columna es un : el acento de color va por nth-child, y con la
especificidad de li.bucket para que no lo pise la regla general. */
li.bucket { border-top: 3px solid transparent !important; }
li.bucket:nth-child(1) { border-top-color: var(--sj-tinta-3) !important; } /* Pendiente */
li.bucket:nth-child(2) { border-top-color: var(--sj-azul) !important; } /* En curso */
li.bucket:nth-child(3) { border-top-color: var(--sj-rojo) !important; } /* Bloqueado */
li.bucket:nth-child(4) { border-top-color: var(--sj-ambar) !important; } /* En revision */
li.bucket:nth-child(5) { border-top-color: var(--sj-verde) !important; } /* Culminado */
/* Columnas con una anchura que respire. */
li.bucket { min-width: 290px; }
/* Dentro de la tarjeta: aire, y una jerarquia clara entre codigo, titulo y señales. */
.kanban-card .p-2 { padding: 12px 13px 11px !important; }
.kanban-card .task-id {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
color: var(--sj-tinta-3);
}
.kanban-card h3 { margin: 1px 0 9px !important; }
.kanban-card__title-link { font-size: 14.5px; line-height: 1.38; }
/* La barra de avance venia gruesa y gris. */
.kanban-card progress,
.kanban-card .progress {
height: 4px !important;
margin: 2px 0 8px !important;
background: var(--sj-linea) !important;
accent-color: var(--sj-azul);
}
/* Los iconitos de pie de tarjeta (descripcion, adjuntos) llevaban marco de boton. */
.kanban-card .footer .icon,
.kanban-card .task-footer .icon,
.kanban-card .p-2 > div:last-child .icon {
background: transparent !important;
border: 0 !important;
color: var(--sj-tinta-3) !important;
}
/* El tablero, con un fondo que da profundidad sin llamar la atencion. */
html:not(.dark) .kanban {
background: linear-gradient(180deg, var(--sj-fondo) 0%, #EEF3F9 100%);
}
.kanban-bucket-container { gap: 14px; align-items: flex-start; }
/* La columna no tiene por que llegar hasta el suelo cuando esta vacia. */
li.bucket { max-height: calc(100vh - 150px); }
/* ============================================================================
13. Pantalla de entrada: fuera la fauna de Vikunja.
Son dos imagenes de fondo suyas, no elementos, por eso se cambian por CSS:
.no-auth-wrapper -> la llama de dibujos de abajo a la izquierda
section.image -> la foto de vicunas de la cabecera
============================================================================ */
.no-auth-wrapper {
background-image: url("/marca/robot.svg") !important;
background-repeat: no-repeat !important;
background-position: 26px bottom !important;
background-size: auto 190px !important;
}
section.image {
background-image: url("/marca/panel-entrada.svg") !important;
background-size: cover !important;
background-position: center !important;
}
/* El "Welcome Back!" sobre la foto: en castellano y con mejor asiento. */
section.image .hero-text,
section.image h2,
section.image p { display: none !important; }
/* En pantallas estrechas el robot estorba mas que acompana. */
@media (max-width: 760px), (max-height: 620px) {
.no-auth-wrapper { background-image: none !important; }
}