/* ===== smartin-jobs.css ===== */
/* ============================================================================
   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:      #0B1930;
  --sj-azul:      #087AA8;
  --sj-azul-alto: #066288;
  --sj-cian:      #087AA8;
  --sj-claro:     #7FD3EF;

  /* Semaforo: cumplido, riesgo, bloqueo */
  --sj-verde:  #0E7A64;
  --sj-ambar:  #9A6B12;
  --sj-rojo:   #C0444A;

  /* Neutros, ligeramente frios para que casen con el azul */
  --sj-papel:   #FFFFFF;
  --sj-fondo:   #F5F8FC;
  --sj-fondo-2: #E7EEF7;
  --sj-linea:   #DCE5EF;
  --sj-linea-2: #C4D2E0;
  --sj-tinta:   #0B1930;
  --sj-tinta-2: #60738A;
  --sj-tinta-3: #8094AA;

  /* 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(11, 25, 48, .04);
  --sj-sombra-m:  0 1px 2px rgba(11, 25, 48, .05), 0 6px 16px rgba(11, 25, 48, .07);
  --sj-sombra-g:  0 2px 6px rgba(11, 25, 48, .07), 0 14px 30px rgba(11, 25, 48, .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?v=202611040630"); }
html.dark      *:has(> svg.logo) { background-image: url("/marca/logo-claro.svg?v=202611040630"); }

.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: #E9F0F8;
  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: #FBE9EA;
  color: var(--sj-rojo);
}
html.dark .priority-label { background: rgba(192, 68, 74, .18); }
.priority-label .icon, .priority-label svg { width: 11px; height: 11px; }

/* "Hecho" */
.is-done {
  background: #E2F4F0 !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(14, 122, 100, .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: #FBE9EA; 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(8, 122, 168, .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(8, 122, 168, .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 <h2 class="title input">: la clase `input` de Bulma
   le pone marco y fondo, y parecia un campo de formulario en vez de un encabezado.
   Se deja como titulo, y solo se comporta como campo cuando lo vas a editar. */
.bucket-header .title.input {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  height: auto !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sj-tinta-2) !important;
  transition: background var(--sj-trans), border-color var(--sj-trans);
}
.bucket-header .title.input:hover { background: rgba(255, 255, 255, .7) !important; }
.bucket-header .title.input:focus {
  background: var(--sj-papel) !important;
  border-color: var(--sj-azul) !important;
  box-shadow: 0 0 0 3px rgba(8, 122, 168, .15) !important;
}
html.dark .bucket-header .title.input:hover { background: rgba(255, 255, 255, .08) !important; }

/* Las columnas son <li class="bucket">: 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?v=202611040630") !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?v=202611040630") !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; }

/* El panel decorativo es mas alto que ancho; con `cover` se recortaba justo por
   el nombre. Que entre entero aunque sobre aire a los lados. */
section.image {
  background-size: contain !important;
  /* `no-repeat` NO es opcional aqui. Con `contain` la imagen no llena la caja, y
     sin esta linea el fondo se repite en mosaico: en un movil el panel salia con
     el logo escrito muchas veces. Fallo propio, visto en un telefono real. */
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* Con `contain` sobra aire alrededor; sin este color se veia el gris del
     armazon, no el panel. La aplicacion lo fija con mas peso, de ahi el
     !important. */
  background-color: #0B1930 !important;
}

/* En un telefono el panel decorativo no decora: roba la mitad de la pantalla al
   formulario y hace que la entrada parezca una pantalla de ordenador encogida.
   Fuera, y el formulario a todo el ancho. */
@media (max-width: 768px), (max-height: 560px) {
  section.image { display: none !important; }
  .no-auth-wrapper .noauth-container,
  .no-auth-wrapper .content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .no-auth-wrapper > .content,
  .no-auth-wrapper .columns { flex-direction: column !important; display: block !important; }
}

/* En pantallas estrechas el robot de fondo estorba mas que acompana.
   OJO: el armazon reserva 240 px de relleno inferior PARA ese robot. Quitar la
   imagen sin quitar el relleno dejaba un vacio enorme bajo el formulario, y era
   la causa de que la pantalla de entrada se viera rota en un movil. */
@media (max-width: 760px), (max-height: 620px) {
  .no-auth-wrapper {
    background-image: none !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 48rem) {
  /* El formulario, a todo el ancho util y con aire respirable. */
  .no-auth-wrapper .content { padding: 1.25rem 1.1rem 1.5rem; max-width: 100%; }
  .no-auth-wrapper .noauth-container { width: 100%; }
  /* Un boton de accion a media caja se falla con el pulgar: a todo lo ancho.
     No basta con ponerle width: el boton vive dentro de un `.control` que es un
     elemento flexible dimensionado al contenido (medido: 234 px dentro de una
     caja de 355), asi que hay que estirar el contenedor, no el boton. */
  .no-auth-wrapper .field.is-grouped {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }
  .no-auth-wrapper .field.is-grouped > .control { flex: 1 1 auto; width: 100%; }
  .no-auth-wrapper .button.is-primary { width: 100%; }
  /* Ese bloque salia pegado a la derecha y partido en tres lineas. El culpable
     es `.api-url-info`, no un parrafo suelto: se encontro mirando que elementos
     computaban text-align a la derecha, no adivinando. */
  .no-auth-wrapper .api-url-info,
  .no-auth-wrapper .legal-links,
  .no-auth-wrapper .content p,
  .no-auth-wrapper .has-text-right { text-align: left !important; }
  .no-auth-wrapper .logo { margin-inline: auto; }
}

/* ---- filas de tarea en pantallas estrechas ------------------------------
   La fila es un flex con los extremos centrados verticalmente. Cuando el
   titulo ocupa dos o tres lineas -lo normal en un movil- la casilla y la
   estrella quedaban a media altura y la fila parecia rota. Se alinean con la
   PRIMERA linea, que es donde el ojo las busca. */

.task.single-task > span:first-child,
.task.single-task > .fav,
.task.single-task > button.fav {
  align-self: flex-start;
  margin-top: .1rem;
}

@media (max-width: 48rem) {
  /* El titulo manda: que pueda partirse por donde sea antes que desbordar. */
  .task.single-task .tasktext { overflow-wrap: anywhere; }
  /* Las etiquetas, debajo del titulo y no intercaladas a media frase. */
  .task.single-task .label-wrapper { display: inline-flex; flex-wrap: wrap; gap: .2rem; }
}

/* La pantalla de etiquetas usa una rejilla con margenes NEGATIVOS, que en un
   movil se sale 4 px por la derecha y deja la pagina temblando en horizontal.
   Medido a 390 px: era el unico desborde que quedaba en toda la aplicacion. */
@media (max-width: 48rem) {
  .labels-list > .columns,
  .labels-list .columns { margin-left: 0; margin-right: 0; }
  .labels-list .column { padding-left: .4rem; padding-right: .4rem; }
}

/* ============================================================================
   14. La pantalla de carga.

   La aplicacion muestra, mientras arranca, un logo a pantalla completa con el
   texto "<producto> is loading...". Dos problemas: el texto llega a escribir el
   nombre del producto original antes de que la traduccion lo alcance -una fuga
   de marca de libro- y un cartel grande con el logo hace que una espera de
   segundo y medio parezca mucho mas larga.

   Se tapan el logo y el texto por CSS, no por guion: asi NUNCA llegan a verse,
   no hay carrera que perder. En su lugar, el robot dando un par de botes.
   ========================================================================== */

.vikunja-loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Tres capas, de abajo arriba: un degradado celeste acero, una luz suave
     arriba a la izquierda y un tejido diagonal muy tenue. El tejido son dos
     degradados repetidos cruzados: da textura de tela sin cargar ninguna
     imagen, asi que no cuesta ni una peticion durante el arranque. */
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(11, 25, 48,.035) 0 2px, transparent 2px 6px),
    radial-gradient(120% 90% at 22% 14%, rgba(255,255,255,.62), transparent 62%),
    linear-gradient(158deg, #EAF1F7 0%, #D2E0EB 42%, #B5C9DA 100%) !important;
}
html.dark .vikunja-loading {
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 2px, transparent 2px 6px),
    radial-gradient(120% 90% at 22% 14%, rgba(120,160,195,.22), transparent 62%),
    linear-gradient(158deg, #12324C 0%, #0E2740 48%, #081525 100%) !important;
}

/* Fuera el logo y el texto de la herramienta: sean los que sean, no se ven. */
.vikunja-loading > * { display: none !important; }

/* El simbolo de la marca, grande y translucido, respirando despacio. Nada de
   carteles ni de texto: una espera corta no necesita que se la anuncie. */
.vikunja-loading::after {
  content: "";
  width: min(38vw, 11rem);
  height: min(38vw, 11rem);
  /* El simbolo sin su placa: el icono normal lleva fondo oscuro y sobre el
     celeste se leia como una caja gris en medio. */
  background: url("/marca/marca-carga.svg?v=202611040630") center / contain no-repeat;
  opacity: .4;
  animation: sj-carga 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
html.dark .vikunja-loading::after { opacity: .5; filter: invert(1) hue-rotate(180deg); }

@keyframes sj-carga {
  0%, 100% { transform: scale(.955) rotate(0deg);   opacity: .30 }
  50%      { transform: scale(1)    rotate(8deg);   opacity: .48 }
}

/* Quien pida menos movimiento ve el simbolo quieto. */
@media (prefers-reduced-motion: reduce) {
  .vikunja-loading::after { animation: none; opacity: .4; }
}

/* ============================================================================
   15. Pantalla de importacion.
   El logo de "exportar/importar nuestros propios datos" es la llama de la
   herramienta, y su texto alternativo decia "Vikunja Export" -visible para un
   lector de pantalla y si la imagen no carga-. Se sustituye por el simbolo de
   la marca; el texto alternativo lo arregla el diccionario del guion.
   ========================================================================== */

.migration-service-link img[alt="Vikunja Export"],
.migration-service-link img[alt="SMARTIN JOBS Export"],
.migration-service-link img[alt="Copia de SMARTIN JOBS"] {
  content: url("/marca/icono.svg?v=202611040630");
  border-radius: 12px;
}

/* ============================================================================
   El semaforo de la plataforma, en la paleta de ODJIT.

   Sus pastillas de prioridad traen colores propios -naranja #FF851B y rojo
   #CC0B00- que no estan en ninguna paleta nuestra y cantan al lado del cian.
   Se visten aqui. Los tonos del brief son los del relleno; para el TEXTO se
   usan variantes mas oscuras del mismo tono, porque los del brief no llegan al
   minimo legible sobre el fondo blanco roto (medido: ambar 1,72:1 y rojo
   3,65:1 frente al 4,5:1 que hace falta).
   ========================================================================== */

.priority-label.not-so-high,
.priority-label.not-so-high .icon,
.priority-label.not-so-high svg {
  color: var(--sj-ambar, #9A6B12) !important;
}
.priority-label.high-priority,
.priority-label.high-priority .icon,
.priority-label.high-priority svg {
  color: var(--sj-rojo, #C0444A) !important;
}
.priority-label.low-priority,
.priority-label.low-priority .icon,
.priority-label.low-priority svg {
  color: var(--sj-tinta-3, #8094AA) !important;
}

/* ============================================================================
   Pulido del tablero kanban (2026-10-28).

   Solo estilo: nada de esto toca el arrastre ni el orden de las columnas.
   El criterio es el de las tarjetas tipo Trello que se leen bien: el numero
   de la tarea como dato pequeno y no como titulo, elevacion suave al pasar,
   y el filo de siempre en reposo.
   ========================================================================== */

.kanban .task {
  border: 1px solid var(--sj-linea, #dce5ef);
  box-shadow: var(--sj-sombra, 0 1px 1px rgba(11, 25, 48, .04));
  transition: box-shadow 140ms, transform 140ms, border-color 140ms;
}
.kanban .task:hover {
  transform: translateY(-1px);
  border-color: var(--sj-linea-2, #c4d2e0);
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .07));
}
/* La que se esta arrastrando, claramente en la mano. */
.kanban .task.is-dragging,
.kanban .task:active {
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
}

/* El "#6": es una referencia, no el titular. */
.kanban .task .task-identifier,
.task-identifier {
  color: var(--sj-tinta-3, #8094aa);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Cabecera de columna: el rotulo respira y la cuenta se ve. */
.bucket .title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--sj-tinta-2, #60738a);
}

/* Terminar una tarea se nota: la fila se apaga con calma, no de golpe. */
.task .tasktext,
.task .tasktext * {
  transition: opacity 240ms, color 240ms;
}
.task.done .tasktext { opacity: .55; }

/* Foco de teclado visible en toda la aplicacion, del color de accion. */
a:focus-visible,
button:focus-visible,
.task:focus-visible {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
}

/* ============================================================================
   Estado vacio con cara (2026-10-28).

   El "proyecto vacio" era un parrafo gris en cursiva. Ahora lo acompana el
   robot de la marca, tenue: un hueco con cara invita a estrenarlo; un parrafo
   gris parece un error. Solo CSS sobre el parrafo que la plataforma ya pinta.
   ========================================================================== */

p.has-text-centered.has-text-grey.is-italic {
  display: block;
  padding-block-start: 128px !important;
  background: url("/marca/robot.svg?v=202611040630") no-repeat center top/96px auto;
  opacity: .85;
  font-style: normal;
  color: var(--sj-tinta-2, #60738a);
}
p.has-text-centered.has-text-grey.is-italic .button-link {
  color: var(--sj-azul, #087aa8);
  font-weight: 600;
}

/* ============================================================================
   Barrido visual (2026-10-28): los detalles que separan "aplicacion vestida"
   de "producto". Todo CSS, nada de logica.
   ========================================================================== */

/* --- Seleccion de texto del color de la casa --- */

::selection { background: rgba(8, 122, 168, .18); }

/* --- El menu lateral dice donde estas --- */

aside .menu-list a,
.menu-container .menu-list a { transition: background-color 120ms, color 120ms; }
aside .menu-list a:hover { background: var(--sj-fondo-2, #e7eef7); }
aside .menu-list a.router-link-exact-active,
aside .menu-list a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--sj-azul, #087aa8);
}

/* --- La columna de acciones de la ficha, a media voz -----------------------
   22 botones blancos a grito de MAYUSCULAS pesaban mas que la tarea misma.
   Mismos botones, tono de indice: sin caja hasta que el raton pregunta. */

.task-view .column.is-one-third .base-button {
  justify-content: flex-start;
  box-shadow: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sj-tinta-2, #60738a);
  font-size: .78rem;
  letter-spacing: .01em;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.task-view .column.is-one-third .base-button:hover {
  background: var(--sj-papel, #fff);
  border-color: var(--sj-linea, #dce5ef);
  color: var(--sj-tinta, #0b1930);
}
/* Menos la accion principal, que debe seguir siendo un boton de verdad. */
.task-view .column.is-one-third .base-button.is-success,
.task-view .column.is-one-third .base-button[class*="done"] {
  background: var(--sj-verde, #0e7a64);
  border-color: var(--sj-verde, #0e7a64);
  color: #fff;
  box-shadow: var(--sj-sombra, 0 1px 1px rgba(11, 25, 48, .04));
}
.task-view .column.is-one-third .base-button.is-success:hover {
  filter: brightness(1.06);
}

/* --- Menus desplegables de la plataforma, con el filo de la casa --- */

.dropdown-menu .dropdown-content,
.multiselect__content-wrapper {
  border: 1px solid var(--sj-linea-2, #c4d2e0);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
  border-radius: var(--sj-radio, 6px);
}

/* --- Las notificaciones emergentes de la plataforma --- */

.notification {
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
}

/* ============================================================================
   El tablero cabe en la pantalla, y cada columna se desplaza sola.

   Medido el 2026-10-29: la columna media 691 px y se salia 178 por debajo de
   la ventana; `.tasks` tenia overflow-y auto pero nunca se activaba porque
   nada limitaba la altura. Se limita aqui; `--sj-kb-alto` lo mide sj-vistas.js
   (la altura disponible depende de donde empiece el tablero, y eso CSS no
   sabe medirlo).
   ========================================================================== */

.kanban {
  /* Con !important porque la regla de la aplicacion gana por especificidad:
     sin el, la variable se escribia pero la altura seguia siendo la suya
     (medido: var = 300 px, altura real = 572). */
  height: var(--sj-kb-alto, calc(100dvh - 180px)) !important;
  align-items: flex-start;
}
.kanban .bucket {
  display: flex;
  flex-direction: column;
  /* En PIXELES, no en porcentaje. El `max-height: calc(100% - 16px)` de la
     plataforma no llegaba a limitar nada -experimento del 2026-10-29: con el
     porcentaje la columna media 541 px; poniendole los mismos 284 px a mano,
     se limitaba y la lista empezaba a desplazarse-. La misma variable que da
     altura al tablero se la quita aqui. */
  max-height: calc(var(--sj-kb-alto, 520px) - 16px) !important;
}
/* `min-height: 0` es lo que permite encoger a un hijo de flex por debajo de
   su contenido; sin el, la lista vuelve a empujar la columna hacia abajo. */
.kanban .bucket .tasks {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Sombras de desplazamiento: dicen que hay MAS sin ocupar sitio ni pedir
     JavaScript. El truco esta en `background-attachment`: las dos capas
     blancas van `local` -se mueven con el contenido- y las dos sombras van
     `scroll` -quietas-, asi que una sombra solo asoma cuando su tapa blanca
     se ha ido, es decir cuando queda contenido en esa direccion. Hacia falta:
     la barra de 9 px es tan palida que no se ve que la columna sigue.        */
  background:
    linear-gradient(var(--sj-fondo-2, #E7EEF7) 30%, rgba(231, 238, 247, 0)) top / 100% 18px,
    linear-gradient(rgba(231, 238, 247, 0), var(--sj-fondo-2, #E7EEF7) 70%) bottom / 100% 18px,
    radial-gradient(farthest-side at 50% 0, rgba(11, 25, 48, .14), transparent) top / 100% 7px,
    radial-gradient(farthest-side at 50% 100%, rgba(11, 25, 48, .14), transparent) bottom / 100% 7px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Y la barra, visible: en una columna que se desplaza, una barra de 9 px casi
   transparente es lo mismo que no tenerla. */
.kanban .bucket .tasks::-webkit-scrollbar { width: 8px; }
.kanban .bucket .tasks::-webkit-scrollbar-thumb {
  background-color: var(--sj-linea-2, #C4D2E0);
  border: 2px solid transparent;
}
.kanban .bucket .tasks:hover::-webkit-scrollbar-thumb {
  background-color: var(--sj-tinta-3, #8094AA);
}
/* La cabecera de la columna y el "anadir una tarea" no se desplazan con las
   tarjetas: se quedan donde se buscan. */
.kanban .bucket .bucket-header,
.kanban .bucket .bucket-footer { flex: 0 0 auto; }

/* ============================================================================
   Selector de vista: un control segmentado de verdad.

   La aplicacion lo pintaba blanco sobre blanco -el fondo del contenedor y el
   de la pestana activa eran el mismo color-, asi que no se veia cual estaba
   puesta. Ahora el raíl es gris azulado y la activa es papel con sombra: el
   contraste es lo que hace legible un segmentado.
   ========================================================================== */

.switch-view {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 3px !important;
  background: var(--sj-fondo-2, #E7EEF7) !important;
  border: 1px solid var(--sj-linea, #DCE5EF) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.switch-view-container { background: transparent !important; }

.switch-view a,
.switch-view .button {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 5px 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sj-tinta-2, #60738A) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: background-color 140ms, color 140ms;
}
.switch-view a:hover,
.switch-view .button:hover {
  background: rgba(255, 255, 255, .6) !important;
  color: var(--sj-tinta, #0B1930) !important;
}
.switch-view a.is-active,
.switch-view a.router-link-active,
.switch-view .button.is-primary {
  background: var(--sj-papel, #fff) !important;
  color: var(--sj-navy, #0B1930) !important;
  box-shadow: 0 1px 2px rgba(11, 25, 48, .10), 0 0 0 1px rgba(11, 25, 48, .04) !important;
}

/* Un icono por vista, para reconocerlas sin leer. Van por posicion porque el
   orden de las vistas es el de la plataforma y es estable (Lista, Cronograma,
   Tabla, Tablero); si algun dia cambia, lo que se pierde es el icono, no la
   navegacion. */
.switch-view a::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--i) center/contain no-repeat;
  mask: var(--i) center/contain no-repeat;
  opacity: .85;
}
.switch-view a:nth-child(1) {
  --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h10' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
}
.switch-view a:nth-child(2) {
  --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h11M6 12h13M3 18h9' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
}
.switch-view a:nth-child(3) {
  --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18v14H3z M3 10h18 M9 5v14' stroke='black' stroke-width='2' fill='none'/></svg>");
}
.switch-view a:nth-child(4) {
  --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h5v16H4z M15 4h5v10h-5z' stroke='black' stroke-width='2' fill='none' stroke-linejoin='round'/></svg>");
}

@media (max-width: 560px) {
  /* En el telefono manda el nombre: el icono se queda, el relleno se aprieta. */
  .switch-view a, .switch-view .button { padding: 5px 9px !important; font-size: .72rem !important; }
}

/* ===== sj-resumen.css ===== */
/* ============================================================================
   SMARTIN JOBS - panel de RESUMEN de la portada (lo pinta sj-resumen.js).
   Va aparte de smartin-jobs.css porque es interfaz NUESTRA, no un retoque de la
   herramienta: conviene poder tocarla sin rozar el resto.
   ============================================================================ */

/* Con resumen, la portada deja de ir centrada y el saludo de la herramienta sobra:
   el nuestro dice lo mismo y ademas la fecha y la semana. */
html.sj-con-resumen .app-content.home .content.has-text-centered { text-align: left !important; }
html.sj-con-resumen .app-content.home .content > h1 { display: none; }
html.sj-con-resumen .app-content.home { max-width: 1080px; margin: 0 auto; }

#sj-resumen { margin: 4px 0 26px; }

/* ---------------------------------------------------------------- saludo */

.sj-hola {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.sj-hola h1 {
  margin: 0;
  font-family: var(--sj-display);
  font-size: 31px;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--sj-navy);
}
html.dark .sj-hola h1 { color: #EFF4FA; }
.sj-hola p {
  margin: 4px 0 0;
  color: var(--sj-tinta-3);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.sj-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 3px;
  background: var(--sj-azul);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(8, 122, 168, .4);
  transition: background var(--sj-trans), transform var(--sj-trans), box-shadow var(--sj-trans);
}
.sj-boton:hover {
  background: var(--sj-azul-alto);
  transform: translateY(-1px);
  box-shadow: var(--sj-sombra-m);
}
.sj-boton svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- cifras */

.sj-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}

.sj-cifra {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 14px;
  align-items: center;
  padding: 18px 18px 16px;
  border-radius: var(--sj-radio);
  border: 1px solid var(--sj-linea);
  background: var(--sj-papel);
  box-shadow: var(--sj-sombra);
  overflow: hidden;
  transition: transform var(--sj-trans), box-shadow var(--sj-trans);
}
html.dark .sj-cifra { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.sj-cifra:hover { transform: translateY(-2px); box-shadow: var(--sj-sombra-m); }

/* Filo de color a la izquierda: identifica la cifra sin tener que leerla. */
.sj-cifra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }

.sj-cifra__icono {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.sj-cifra__icono svg { width: 21px; height: 21px; }

.sj-cifra__num {
  font-family: var(--sj-display);
  font-size: 33px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sj-navy);
}
html.dark .sj-cifra__num { color: #EFF4FA; }

.sj-cifra__etq { font-size: 13px; font-weight: 650; color: var(--sj-tinta-2); margin-top: 3px; }
.sj-cifra__pie { font-size: 11.5px; color: var(--sj-tinta-3); }

.sj-roja::before  { background: var(--sj-rojo); }
.sj-ambar::before { background: var(--sj-ambar); }
.sj-azul::before  { background: var(--sj-tinta); }
.sj-verde::before { background: var(--sj-verde); }

.sj-roja  .sj-cifra__icono { background: #FBE9EA; color: var(--sj-rojo); }
.sj-ambar .sj-cifra__icono { background: #FCF1D9; color: var(--sj-ambar); }
.sj-azul  .sj-cifra__icono { background: #E3EAF2; color: var(--sj-tinta); }
.sj-verde .sj-cifra__icono { background: #E2F4F0; color: var(--sj-verde); }

html.dark .sj-roja  .sj-cifra__icono { background: rgba(192, 68, 74, .18); }
html.dark .sj-ambar .sj-cifra__icono { background: rgba(154, 107, 18, .2); }
html.dark .sj-azul  .sj-cifra__icono { background: rgba(255, 255, 255, .12); }
html.dark .sj-verde .sj-cifra__icono { background: rgba(14, 122, 100, .2); }

/* ---------------------------------------------------------------- bloques */

.sj-bloque { margin: 0 0 24px; }
.sj-bloque > h2 {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sj-tinta-3);
}

.sj-lista {
  border-radius: var(--sj-radio);
  border: 1px solid var(--sj-linea);
  background: var(--sj-papel);
  box-shadow: var(--sj-sombra);
  overflow: hidden;
}
html.dark .sj-lista { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }

.sj-tarea {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sj-linea);
  text-decoration: none !important;
  color: inherit !important;
  transition: background var(--sj-trans);
}
html.dark .sj-tarea { border-color: rgba(255, 255, 255, .08); }
.sj-tarea:last-child { border-bottom: 0; }
.sj-tarea:hover { background: var(--sj-fondo-2); }
html.dark .sj-tarea:hover { background: rgba(255, 255, 255, .05); }

.sj-pri {
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.sj-pri--P1 { background: #FBE9EA; color: var(--sj-rojo); }
.sj-pri--P2 { background: #FCF1D9; color: var(--sj-ambar); }
.sj-pri--P3 { background: #E3EAF2; color: var(--sj-tinta-2); }
.sj-pri--P4, .sj-pri--vacia { background: var(--sj-fondo-2); color: var(--sj-tinta-3); }
html.dark .sj-pri--P1 { background: rgba(192, 68, 74, .2); }
html.dark .sj-pri--P2 { background: rgba(154, 107, 18, .2); }
html.dark .sj-pri--P3 { background: rgba(8, 122, 168, .25); }

.sj-tarea__txt {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sj-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .sj-tarea__txt { color: #E6EDF5; }
.sj-cod { color: var(--sj-tinta-3); font-weight: 700; font-size: 12px; letter-spacing: .03em; }

.sj-tarea__proy {
  font-size: 11.5px;
  color: var(--sj-tinta-3);
  background: var(--sj-fondo-2);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .sj-tarea__proy { background: rgba(255, 255, 255, .07); }

.sj-cuando {
  font-size: 12px;
  font-weight: 650;
  color: var(--sj-tinta-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 62px;
  text-align: right;
}
.sj-tarea--tarde .sj-cuando { color: var(--sj-rojo); }

/* ---------------------------------------------------------------- nada pendiente */

.sj-vacio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: var(--sj-radio);
  border: 1px dashed var(--sj-linea-2);
  background: var(--sj-papel);
  color: var(--sj-tinta-2);
}
html.dark .sj-vacio { background: rgba(255, 255, 255, .04); }
.sj-vacio svg { width: 26px; height: 26px; color: var(--sj-verde); flex: none; }
.sj-vacio p { margin: 0; font-size: 14.5px; }

/* ---------------------------------------------------------------- tableros */

.sj-proys { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }

.sj-proy {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto auto;
  gap: 5px 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--sj-radio);
  border: 1px solid var(--sj-linea);
  background: var(--sj-papel);
  box-shadow: var(--sj-sombra);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform var(--sj-trans), box-shadow var(--sj-trans), border-color var(--sj-trans);
}
html.dark .sj-proy { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.sj-proy:hover { transform: translateY(-2px); box-shadow: var(--sj-sombra-m); border-color: var(--sj-linea-2); }

.sj-proy__ico {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #E9F0F8;
  color: var(--sj-azul);
}
.sj-proy__ico svg { width: 19px; height: 19px; }
html.dark .sj-proy__ico { background: rgba(8, 122, 168, .22); }

.sj-proy__nom { font-family: var(--sj-display); font-size: 17px; font-weight: 400; color: var(--sj-navy); }
html.dark .sj-proy__nom { color: #EFF4FA; }

.sj-proy__barra {
  height: 6px;
  border-radius: 999px;
  background: var(--sj-fondo-2);
  overflow: hidden;
  grid-column: 2;
}
html.dark .sj-proy__barra { background: rgba(255, 255, 255, .1); }
.sj-proy__barra i { display: block; height: 100%; background: var(--sj-azul); border-radius: 999px; }
.sj-proy__pct { grid-column: 2; font-size: 11.5px; color: var(--sj-tinta-3); }

/* ---------------------------------------------------------------- estrecho */

@media (max-width: 720px) {
  .sj-hola h1 { font-size: 22px; }
  .sj-tarea { grid-template-columns: 36px 1fr auto; }
  .sj-tarea__proy { display: none; }
}

/* En un movil, `minmax(190px, 1fr)` solo deja caber UNA columna (2x190 no entra
   en los ~350 px utiles), asi que las cuatro cifras salian una debajo de otra,
   enormes y con medio ancho vacio. A partir de aqui se fuerzan dos columnas y la
   tarjeta se compacta: cuatro cifras de un vistazo es justo el sentido del
   resumen. Medido a 390 px. */
@media (max-width: 560px) {
  .sj-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }
  .sj-cifra {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: 12px 12px 11px;
    text-align: left;
  }
  /* El icono pasa a esquina: ocupa menos y el numero manda. */
  .sj-cifra > :first-child {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .5;
  }
  .sj-cifra b, .sj-cifra strong { font-size: 1.6rem; line-height: 1.1; }
  .sj-cifra small { font-size: .68rem; }

  .sj-proys { grid-template-columns: 1fr; }
  .sj-bloque > h2 { font-size: .72rem; }
}

/* ---------------------------------------------------------------- terminadas */

/* Se ven, pero no compiten con lo que queda por hacer: tono mas bajo y el titulo
   tachado. Lo hecho se celebra de un vistazo, no se lee linea a linea. */

.sj-bloque > h2 .sj-cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--sj-fondo-2);
  color: var(--sj-tinta-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 1px;
}
html.dark .sj-bloque > h2 .sj-cuenta { background: rgba(255, 255, 255, .1); }

.sj-tarea--hecha .sj-tarea__txt {
  color: var(--sj-tinta-3);
  text-decoration: line-through;
  text-decoration-color: var(--sj-linea-2);
  text-decoration-thickness: 1.5px;
}
.sj-tarea--hecha .sj-cod {
  color: var(--sj-linea-2);
  text-decoration: none;   /* el codigo identifica la tarea: tacharlo la hace ilegible */
  display: inline-block;
}

.sj-tic {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #E2F4F0;
  color: var(--sj-verde);
}
.sj-tic svg { width: 15px; height: 15px; }
html.dark .sj-tic { background: rgba(14, 122, 100, .2); }

.sj-cuando--semana { color: var(--sj-verde); }

.sj-mas {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--sj-tinta-3);
}

/* ---- nada de portada a medio vestir -------------------------------------
   La portada de serie se pintaba primero y, medio segundo despues, aparecia el
   resumen encima: se veia la version simple y luego saltaba a la buena. Ahora
   el contenido de la portada espera tapado hasta que el resumen esta puesto.

   Dos salidas para que nunca quede un hueco: `sj-con-resumen` cuando el bloque
   entra, y `sj-sin-resumen` si falla o tarda mas de cinco segundos. Si el guion
   no llegara a correr siquiera, la regla no se aplica -el selector exige una de
   las dos clases para ocultar- y la portada se ve como siempre. */

html:not(.sj-con-resumen):not(.sj-sin-resumen).sj-esperando main.home .content {
  opacity: 0;
}
main.home .content {
  transition: opacity 160ms ease-out;
}

/* ---- cifras desplegables ------------------------------------------------
   Una cifra sin las tareas que la componen obliga a ir a buscarlas: se lee
   "2 criticas P1" y hay que filtrar a mano para saber cuales son. */

.sj-cifra--abre {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.sj-cifra--abre:hover { border-color: var(--sj-azul, #087AA8); }
.sj-cifra--abre:focus-visible { outline: 2px solid var(--sj-azul, #087AA8); outline-offset: 2px; }

.sj-cifra__chev {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #95A5B8;
  transition: transform 160ms ease;
}
.sj-cifra__chev svg { width: 15px; height: 15px; display: block; }
.sj-cifra--abre[aria-expanded="true"] .sj-cifra__chev { transform: rotate(180deg); }

.sj-detalles { margin-top: -18px; }
.sj-cifra__detalle {
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--sj-linea);
  border-radius: var(--sj-radio);
  background: var(--sj-papel, #fff);
}
html.dark .sj-cifra__detalle { background: #17395A; border-color: rgba(255,255,255,.12); }
.sj-cifra__detalle[hidden] { display: none; }

.sj-cifra__titulo {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #95A5B8;
}

/* ---- el pulso -----------------------------------------------------------
   Catorce dias de cierres. Hecho con divs y alturas en porcentaje: son catorce
   barras, y una libreria de graficos para esto seria pagar mucho por poco. */

.sj-pulso h2 { display: flex; align-items: baseline; gap: 8px; }
.sj-pulso__pie {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #95A5B8;
}

.sj-pulso__grafico {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 5px;
  height: 92px;
  padding: 8px 12px 0;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea);
  border-radius: var(--sj-radio);
}
html.dark .sj-pulso__grafico { background: #17395A; border-color: rgba(255,255,255,.12); }

.sj-pulso__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 4px;
}
.sj-pulso__col i {
  font-style: normal;
  font-size: 9.5px;
  color: #A6BCD2;
}
.sj-pulso__col--finde i { color: #C6D3E1; }
.sj-pulso__col--ahora i { color: var(--sj-azul); font-weight: 700; }

.sj-pulso__barra {
  position: relative;
  width: 100%;
  max-width: 26px;
  border-radius: 3px 3px 0 0;
  background: var(--sj-linea, #DCE5EF);
  transition: height 300ms cubic-bezier(.2, .7, .4, 1);
}
.sj-pulso__col--ahora .sj-pulso__barra {
  background: linear-gradient(180deg, var(--sj-claro, #7FD3EF), var(--sj-azul, #087AA8));
}
.sj-pulso__col:not(.sj-pulso__col--ahora) .sj-pulso__barra {
  background: linear-gradient(180deg, #C4D2E0, #AEC2D6);
}
.sj-pulso__barra span {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-pulso__barra span { color: #DDE7F1; }

@media (max-width: 560px) {
  .sj-pulso__grafico { height: 76px; gap: 3px; padding: 8px 8px 0; }
  .sj-pulso__col i { font-size: 8.5px; }
}

/* ---------------------------------------------------------------- filtros

   Tres desplegables encima de la lista en curso: quien, que equipo y en que
   orden. Discretos a proposito -son un mando, no un titulo- y en una sola fila
   mientras quepan; en el telefono se reparten en dos.                       */

.sj-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: -.2rem 0 .8rem;
}

.sj-filtro {
  padding: 3px 26px 3px 10px;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 999px;
  background: var(--sj-papel, #fff) no-repeat right .6rem center/8px
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238b95a3'/%3E%3C/svg%3E");
  color: var(--sj-tinta-2, #60738A);
  font: inherit;
  font-size: .76rem;
  line-height: 1.6;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sj-filtro:hover { border-color: var(--sj-linea-2, #C4D2E0); }
.sj-filtro:focus-visible {
  outline: 2px solid var(--sj-azul, #087AA8);
  outline-offset: 1px;
}

.sj-filtro__limpia {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sj-tinta-3, #8094AA);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.sj-filtro__limpia:hover { color: var(--sj-azul-alto, #066288); }

@media (max-width: 560px) {
  .sj-filtro { flex: 1 1 45%; }
}

/* "Lo mio" y el estado encendido de cualquier filtro. */
.sj-filtro--mio {
  font-weight: 700;
  /* Es un boton, no un desplegable: fuera la flecha que trae el estilo base. */
  background-image: none;
  padding-inline-end: 10px;
}
.sj-filtro--on,
.sj-filtro--on:hover {
  background-color: var(--sj-azul, #087aa8);
  border-color: var(--sj-azul, #087aa8);
  color: #fff;
}

/* La casilla de cerrar, en la propia lista --------------------------------
   Va dentro del enlace -es donde la mano la busca- pero corta el clic: pulsarla
   cierra la tarea, no la abre. */
/* La fila es una rejilla de cuatro columnas (40px 1fr auto auto). La casilla
   anade una quinta celda: sin darle su columna, la prioridad se estiraba y la
   fecha saltaba de linea (visto en pantalla el 2026-11-02). Solo a las filas
   que la llevan: las terminadas no tienen casilla. */
.sj-tarea:has(.sj-marca) { grid-template-columns: 20px 40px 1fr auto auto; }

.sj-marca {
  flex: none;
  width: 17px;
  height: 17px;
  margin-right: 0.1rem;
  padding: 0;
  border: 1.5px solid var(--sj-linea-2, #c4d2e0);
  border-radius: 3px;
  background: var(--card-background, #fff);
  cursor: pointer;
  position: relative;
}
.sj-marca:hover { border-color: var(--sj-verde, #0e7a64); }
.sj-marca:hover::after {
  content: "✓";
  position: absolute;
  inset: -3px 0 0 1px;
  font-size: 12px;
  line-height: 1;
  color: var(--sj-verde, #0e7a64);
}
.sj-marca:focus-visible { outline: 2px solid var(--sj-azul, #087aa8); outline-offset: 1px; }
.sj-marca--yendo { border-color: var(--sj-verde, #0e7a64); background: var(--sj-verde, #0e7a64); }

.sj-tarea--cerrada { opacity: 0.5; }
.sj-tarea--cerrada .sj-tarea__txt { text-decoration: line-through; }
.sj-tarea--fallo { box-shadow: inset 2px 0 0 var(--sj-rojo, #c0444a); }

/* Las terminadas, recogidas ------------------------------------------------
   Son catorce y ya estan hechas: ocupaban media pantalla por encima de los
   tableros. Se ven con un boton, y entonces se ven TODAS, no ocho y un "y 6
   mas" que no lleva a ningun sitio. */
.sj-bloque--plegado .sj-lista--plegable { display: none; }

.sj-plegar {
  margin-left: 0.5rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sj-azul, #087aa8);
  background: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  padding: 0 0 1px;
  cursor: pointer;
}
.sj-plegar:hover { color: var(--sj-azul-alto, #066288); }

/* Dos vistas de "Lo que toca": por proyectos o por tareas -------------------
   Por proyectos sale de serie, porque es como se trabaja: el proyecto delante
   y sus tareas colgando. */
.sj-vistas {
  display: inline-flex;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  overflow: hidden;
  margin-right: 0.3rem;
}
.sj-vista {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  background: var(--card-background, #fff);
  color: var(--grey-500, #6e8299);
  cursor: pointer;
}
.sj-vista + .sj-vista { border-left: 1px solid var(--sj-linea, #dce5ef); }
.sj-vista--on {
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font-weight: 600;
}

.sj-grupo { border-bottom: 1px solid var(--sj-linea, #dce5ef); }
.sj-grupo:last-child { border-bottom: 0; }

.sj-grupo__cab {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid var(--sj-gr-color, transparent);
  cursor: pointer;
}
.sj-grupo__cab:hover { background: var(--sj-sup-2, #edf3fa); }

.sj-grupo__flecha {
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid var(--grey-400, #8496a8);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(90deg);
  transition: transform 0.12s;
}
.sj-grupo--plegado .sj-grupo__flecha { transform: rotate(0deg); }

.sj-grupo__nom {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.98rem;
  color: var(--text, #0b1930);
}
.sj-grupo__kpi {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--sj-gr-color, var(--grey-400, #8496a8));
}
.sj-grupo__av { font-size: 0.76rem; color: var(--grey-400, #8496a8); }
.sj-grupo__cuenta {
  margin-left: auto;
  flex: none;
  font-family: Georgia, serif;
  font-size: 0.86rem;
  color: var(--grey-500, #6e8299);
  background: var(--sj-sup, #e7eef7);
  border-radius: 10px;
  padding: 0.05rem 0.5rem;
}
.sj-grupo--plegado .sj-grupo__lista { display: none; }
.sj-grupo__lista .sj-tarea { padding-left: 2.2rem; }

/* Las tarjetas de tablero, con su color ------------------------------------
   El color sale del propio tablero (o de su nombre) y aparece en tres sitios:
   el filo de arriba, el icono y la barra de avance. El dibujo del fondo se
   genera en el guion a partir de ese mismo color, asi que la tarjeta es una
   sola cosa y no un collage. */
.sj-proy {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--sj-p-color, var(--sj-linea, #dce5ef));
}
/* El papel tapiz va en una capa propia y NO en el fondo de la tarjeta: asi se
   le puede bajar la tinta con `opacity` sin desvaer el texto, que es lo que
   pasaria tinendo el fondo. Se repite como un papel de verdad. */
.sj-proy::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Tres capas, de arriba abajo:

       1. un VELO claro en diagonal, denso donde empieza el texto y disuelto al
          llegar al borde derecho. Sin el, el titulo cae encima de lo que haya
          salido en el recorte -un camion, una figura oscura- y se lee a saltos.
       2. la FOTO mezclada en `luminosity` contra el color del tablero: la foto
          pone las formas y el tablero pone el tono. Asi sale un pastel del color
          de cada tablero en vez de la mancha gris que daba la foto sola
          (medido en la web el 2026-11-02, primera version: gris).
       3. el dibujo de respaldo, por si la foto no llega: la tarjeta tiene papel
          igualmente en vez de quedarse plana.

     La opacidad final es baja a proposito. El papel se nota al mirar la tarjeta
     y desaparece al leerla, que es justo el encargo: la funcionalidad primero. */
  background-image:
    linear-gradient(104deg, var(--sj-papel, #fff) 0 30%, rgba(255, 255, 255, 0) 82%),
    var(--sj-p-foto, none),
    linear-gradient(var(--sj-p-color, #888), var(--sj-p-color, #888)),
    var(--sj-p-fondo, none);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 118px 118px;
  background-position: center, center, center, 0 0;
  background-blend-mode: normal, luminosity, normal, normal;
  opacity: 0.34;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.sj-proy:hover::before { opacity: 0.5; }
/* El contenido, por encima del papel. */
.sj-proy > * { position: relative; z-index: 1; }
.sj-proy:hover { border-color: var(--sj-p-color, var(--sj-linea-2)); }

.sj-proy .sj-proy__ico {
  color: var(--sj-p-color, var(--grey-500, #6e8299));
  background: color-mix(in srgb, var(--sj-p-color, #6e8299) 12%, transparent);
  border-radius: 6px;
}
.sj-proy .sj-proy__barra i { background: var(--sj-p-color, var(--sj-azul, #087aa8)); }

/* El boton de poner imagen: discreto, y solo cuando la mano esta encima. */
.sj-proy__img {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font: inherit;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.14rem 0.42rem;
  border-radius: 3px;
  border: 1px solid var(--sj-linea, #dce5ef);
  background: var(--card-background, #fff);
  color: var(--grey-400, #8496a8);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.sj-proy:hover .sj-proy__img,
.sj-proy__img:focus-visible { opacity: 1; }
.sj-proy__img:hover { color: var(--sj-p-color, #087aa8); border-color: currentColor; }

/* Si el tablero tiene SU imagen subida, el dibujo se aparta para no mezclarse
   con ella en el resto de pantallas. OJO: aqui NO se pinta la imagen real
   -pedirla lleva credencial y no vale un url() en CSS-; la tarjeta queda con su
   color plano. Habia un `.sj-proy__fondoReal` de una version que si la pintaba,
   pero ningun guion creaba ya ese nodo: era CSS muerto y se quito el 2026-11-04. */
.sj-proy--suya { background-image: none; }

/* La fila del PROYECTO dentro de su propio grupo ---------------------------

   Dentro de un grupo conviven el proyecto y sus tareas, y hasta ahora se veian
   iguales. Se pidio distinguirlos: *"que tambien veas que algunos son
   proyectos y estos llevan varias tareas"* (2026-11-02).

   No se grita: un filo del color del grupo, el titulo con el serif de los
   titulares y una etiqueta que dice lo que es y cuantas lleva. Lo justo para
   que el ojo separe el padre de los hijos sin que la lista pierda su ritmo. */
.sj-tarea--jefe {
  border-left: 3px solid var(--sj-gr-color, var(--sj-azul, #087aa8));
  background: color-mix(in srgb, var(--sj-gr-color, #087aa8) 4%, transparent);
}
.sj-tarea--jefe .sj-tarea__txt {
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.02em;
}
.sj-tarea__jefe {
  justify-self: end;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sj-gr-color, #087aa8) 40%, transparent);
  color: var(--sj-gr-color, var(--sj-azul, #087aa8));
  font-size: 0.74em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== sj-chat.css ===== */
/* ============================================================================
   SMARTIN JOBS - el asistente. Boton flotante y ventana de conversacion.
   ============================================================================ */

#sj-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* ---------------------------------------------------------------- el boton */

/* El boton de abrir ES el robot y se define una sola vez, en el bloque del
   robot de mas abajo. Aqui solo lo que no depende de su dibujo. */
.sj-chat__abrir:focus-visible { outline: 2px solid var(--sj-oro-vivo, #0A96CE); outline-offset: 6px; border-radius: 12px; }

/* ---------------------------------------------------------------- la ventana */

.sj-chat__panel[hidden] { display: none; }
.sj-chat__panel {
  width: min(430px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(11, 25, 48, .12), 0 24px 60px rgba(11, 25, 48, .2);
  overflow: hidden;
}
html.dark .sj-chat__panel { background: #12324C; border-color: rgba(255,255,255,.12); }

.sj-chat__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sj-tinta, #0B1930);
  color: #fff;
}
.sj-chat__cab b { font-size: 15px; font-weight: 650; display: block; }
.sj-chat__cab span { font-size: 11.5px; color: #A3B4C6; }
.sj-chat__cerrar {
  background: transparent; border: 0; color: #A3B4C6; cursor: pointer;
  padding: 6px; border-radius: 4px; display: grid; place-items: center;
}
.sj-chat__cerrar:hover { background: rgba(255,255,255,.1); color: #fff; }
.sj-chat__cerrar svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- el hilo */

.sj-chat__hilo {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--sj-fondo, #F5F8FC);
}
html.dark .sj-chat__hilo { background: #0A1A2B; }

.sj-chat__bienvenida p {
  margin: 0 0 14px;
  color: var(--sj-tinta-2, #60738A);
  font-size: 14px;
  line-height: 1.55;
}
.sj-chat__sug {
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 6px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0B1930);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.sj-chat__sug:hover { border-color: var(--sj-oro, #087AA8); background: #F7FAFD; }
html.dark .sj-chat__sug { background: rgba(255,255,255,.05); color: #E6EDF5; border-color: rgba(255,255,255,.12); }

.sj-chat__msg {
  max-width: 94%;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.sj-chat__msg p { margin: 0 0 8px; }
.sj-chat__msg p:last-child { margin-bottom: 0; }
.sj-chat__msg ul { margin: 0 0 8px; padding-left: 19px; }
.sj-chat__msg li { margin: 3px 0; }
.sj-chat__msg b { font-weight: 650; }

.sj-chat__msg--yo {
  align-self: flex-end;
  background: var(--sj-tinta, #0B1930);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.sj-chat__msg--el {
  align-self: flex-start;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0B1930);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-bottom-left-radius: 3px;
}
html.dark .sj-chat__msg--el { background: rgba(255,255,255,.06); color: #E6EDF5; border-color: rgba(255,255,255,.1); }

/* El codigo de tarea, como pastilla: se distingue de la prosa. */
.sj-chat__cod {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #E9F0F8;
  color: var(--sj-oro, #087AA8);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 1px;
}
html.dark .sj-chat__cod { background: rgba(8, 122, 168,.22); color: #7FD3EF; }

a.sj-chat__cod { text-decoration: none; transition: background 140ms, color 140ms; }
a.sj-chat__cod:hover { background: var(--sj-oro, #087AA8); color: #fff; }

/* Un codigo que el modelo nombro pero que NO existe: se ve distinto a proposito. */
.sj-chat__cod--muerto {
  background: #FBE9EA;
  color: #A3333A;
  text-decoration: line-through;
}

/* ---------------------------------------------------------------- pensando */

.sj-chat__puntos { display: inline-flex; gap: 5px; padding: 2px 0; }
.sj-chat__puntos i {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--sj-tinta-3, #8094AA);
  animation: sj-latido 1.2s infinite ease-in-out;
}
.sj-chat__puntos i:nth-child(2) { animation-delay: .15s; }
.sj-chat__puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes sj-latido { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------------------------------------------------------------- avisos y acciones */

.sj-chat__aviso {
  margin-top: 8px !important;
  padding: 9px 11px;
  border-radius: 6px;
  background: #FBE9EA;
  color: #A3333A;
  font-size: 13px;
  border-left: 3px solid var(--sj-rojo, #C0444A);
}
html.dark .sj-chat__aviso { background: rgba(192, 68, 74,.2); color: #F0BCBE; }

.sj-chat__accion {
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 6px;
  border: 1px dashed var(--sj-oro, #087AA8);
  background: #F7FAFD;
}
html.dark .sj-chat__accion { background: rgba(8, 122, 168,.12); }
.sj-chat__accion p { margin: 0 0 9px; font-size: 13.5px; }
.sj-chat__accion div { display: flex; gap: 8px; }
.sj-chat__accion button {
  padding: 7px 14px; border-radius: 3px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.sj-chat__si { background: var(--sj-oro, #087AA8); color: #fff; }
.sj-chat__si:hover { background: var(--sj-oro-alto, #066288); }
.sj-chat__no { background: transparent; border-color: var(--sj-linea-2, #C4D2E0) !important; color: var(--sj-tinta-2, #60738A); }
.sj-chat__nota { color: var(--sj-tinta-3, #8094AA); font-size: 13px; margin: 0 !important; }
.sj-chat__hecho { color: var(--sj-verde, #0E7A64); font-size: 13.5px; margin: 0 !important; font-weight: 600; }
.sj-chat__hecho a { color: inherit; }

/* ---------------------------------------------------------------- escribir */

.sj-chat__pie {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid var(--sj-linea, #DCE5EF);
  background: var(--sj-papel, #fff);
}
html.dark .sj-chat__pie { background: #12324C; border-color: rgba(255,255,255,.1); }

.sj-chat__pie textarea {
  flex: 1;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  max-height: 130px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-chat__pie textarea { background: rgba(255,255,255,.06); color: #E6EDF5; border-color: rgba(255,255,255,.14); }
.sj-chat__pie textarea:focus {
  outline: none;
  border-color: var(--sj-oro, #087AA8);
  box-shadow: 0 0 0 3px rgba(8, 122, 168, .15);
}

.sj-chat__pie button[type=submit] {
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 6px;
  background: var(--sj-oro, #087AA8);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background 140ms;
}
.sj-chat__pie button[type=submit]:hover { background: var(--sj-oro-alto, #066288); }
.sj-chat__pie button[type=submit] svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- estrecho */

@media (max-width: 560px) {
  #sj-chat { right: 12px; bottom: 12px; left: 12px; }
  .sj-chat__panel { width: 100%; height: min(78vh, 560px); }
  .sj-chat__abrir { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-chat__abrir, .sj-chat__puntos i { transition: none; animation: none; }
}

/* ============================================================================
   El robot. Es el boton del chat y vive siempre en la esquina.
   Las animaciones son lentas y cortas a proposito: algo que se mueve sin parar en
   la esquina de la pantalla cansa en diez minutos.
   ============================================================================ */

.sj-robot__wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.sj-chat__abrir {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 0;
}

/* Con el panel abierto desaparece el robot grande: ya esta en la cabecera. */
#sj-chat.sj-chat--abierto .sj-robot__wrap { display: none; }

.sj-robot { width: 124px; height: 146px; overflow: visible; }
.sj-robot--boton { filter: drop-shadow(0 8px 18px rgba(11, 25, 48, .22)); }
.sj-robot__sombra { fill: #0B1930; opacity: .10; }

/* Respira: sube y baja muy poco, muy despacio. */
.sj-robot--boton .sj-robot__cuerpo {
  transform-origin: 85px 190px;
  animation: sj-respira 4.2s ease-in-out infinite;
}
@keyframes sj-respira {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-7px) }
}

/* Parpadea de vez en cuando. */
.sj-robot__ojos { transform-origin: 85px 67px; animation: sj-parpadeo 6.5s infinite; }
@keyframes sj-parpadeo {
  0%, 92%, 100% { transform: scaleY(1) }
  95%           { transform: scaleY(.1) }
}

/* La antena late. */
.sj-robot__antena { animation: sj-late 2.6s ease-in-out infinite; transform-origin: 85px 9px; }
@keyframes sj-late {
  0%, 100% { opacity: .55; transform: scale(1) }
  50%      { opacity: 1;   transform: scale(1.22) }
}

.sj-chat__abrir:hover .sj-robot--boton { filter: drop-shadow(0 12px 24px rgba(11, 25, 48,.3)); }
.sj-chat__abrir:hover .sj-robot__cuerpo { animation-duration: 2.1s; }

/* Mientras espera respuesta, el simbolo del pecho gira. */
/* El simbolo del pecho es el logo Orbita: orbita SIEMPRE, despacio. Antes solo
   giraba mientras el asistente pensaba y en reposo parecia una pieza rota. */
.sj-robot__orbita { transform-origin: 0 0; animation: sj-gira 14s linear infinite; }
.sj-chat__abrir:hover .sj-robot__orbita { animation-duration: 7s; }
/* Al preguntar acelera: es la señal de que esta trabajando. */
#sj-chat.sj-chat--pensando .sj-robot__orbita { animation-duration: 1.6s; }
@keyframes sj-gira { to { transform: rotate(360deg) } }

/* ---------------------------------------------------------------- el bocadillo */

.sj-robot__burbuja {
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 12px 12px 3px 12px;
  background: var(--sj-tinta, #0B1930);
  color: #EFF4FA;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(11, 25, 48, .24);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms, transform 320ms;
}
.sj-robot__burbuja--entra { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------- en la cabecera */

.sj-robot--cabecera { width: 42px; height: 50px; flex: none; }
.sj-robot--cabecera .sj-robot__sombra { display: none; }
#sj-chat.sj-chat--pensando .sj-robot--cabecera .sj-robot__cuerpo {
  animation: sj-respira 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sj-robot__cuerpo, .sj-robot__ojos, .sj-robot__antena, .sj-robot__orbita { animation: none !important; }
  .sj-robot__burbuja { transition: none; }
}

/* En pantallas bajas el robot se encoge: no puede comerse la esquina util. */
@media (max-height: 620px), (max-width: 560px) {
  .sj-robot { width: 86px; height: 102px; }
  .sj-robot__burbuja { max-width: 200px; font-size: 12.5px; }
}

/* Las fichas de pregunta rapida viven sobre el campo, no dentro de la bienvenida:
   se responden sin motor (en milisegundos) y tienen que estar siempre a mano. */
.sj-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--sj-linea, #DCE5EF);
}
html.dark .sj-chat__chips { border-color: rgba(255,255,255,.1); }
.sj-chat__chips .sj-chat__sug {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---- el robot pensando --------------------------------------------------
   La burbuja de espera lleva al propio robot en pequeno. Con el panel abierto
   el robot grande de la esquina esta oculto, asi que sin esto lo unico que se
   veia durante la espera eran tres puntos genericos. */

.sj-chat__msg--el.sj-chat__pensando {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  box-shadow: none;
  padding-left: 0;
}
.sj-robot--pensando { width: 2.1rem; height: 2.5rem; flex: none; }

/* Mientras piensa, la antena va mas viva y el simbolo del pecho acelera: la
   velocidad es la que dice que esta trabajando. */
#sj-chat.sj-chat--pensando .sj-robot--pensando .sj-robot__antena {
  animation-duration: .9s;
}

/* La propuesta de cambio, campo por campo: quien confirma tiene que leer
   exactamente que se va a tocar, no un "actualizar tarea" generico. */
.sj-chat__accion ul {
  margin: .4rem 0 .6rem;
  padding-left: 1.1rem;
  font-size: .82rem;
  line-height: 1.6;
}
.sj-chat__accion li { margin: 0; }
.sj-chat__ojo { color: var(--sj-ambar, #9A6B12); font-weight: 600; }

/* Borrar es definitivo en esta plataforma: la confirmacion no puede parecerse a
   la de cualquier otro cambio, o se pulsa por inercia. */
.sj-chat__peligro {
  margin: .4rem 0 .2rem;
  padding: .45rem .6rem;
  border-left: 3px solid var(--sj-rojo, #C0444A);
  background: rgba(192, 68, 74, .08);
  font-size: .78rem;
  line-height: 1.5;
  color: #A3333A;
}
html.dark .sj-chat__peligro { color: #E9A1A4; }
.sj-chat__si--peligro { background: var(--sj-rojo, #C0444A) !important; }

/* Teclear la palabra antes de borrar. Un boton rojo se pulsa igual de rapido que
   uno dorado; escribir obliga a parar un segundo, que es lo que hace falta
   cuando no hay papelera a la que volver. */
.sj-chat__jurar {
  display: block;
  margin: .5rem 0 .6rem;
  font-size: .8rem;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-chat__jurar { color: #DDE7F1; }
.sj-chat__jurar input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .35rem .5rem;
  border: 1px solid var(--sj-rojo, #C0444A);
  border-radius: 5px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: .85rem;
}
html.dark .sj-chat__jurar input { background: #12324C; }
.sj-chat__si[disabled] { opacity: .45; cursor: not-allowed; }

/* Cuando la frase no dice el tablero, se pregunta en la propia ficha en vez de
   adivinarlo: una tarea en el tablero equivocado es una tarea perdida. */
.sj-chat__donde { display: inline-flex; align-items: center; gap: .3rem; }
.sj-chat__tablero {
  padding: .15rem .35rem;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 5px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  max-width: 12rem;
}
html.dark .sj-chat__tablero { background: #12324C; border-color: rgba(255,255,255,.14); }

/* ---- la arroba ----------------------------------------------------------
   Lista de gente al escribir @. Se coloca sobre el campo, no debajo: debajo
   queda fuera del panel y en un movil ni se ve. */

.sj-arroba {
  position: absolute;
  bottom: calc(100% + .3rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 13rem;
  overflow-y: auto;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 8px;
  box-shadow: 0 -6px 24px rgba(11, 25, 48, .16);
}
html.dark .sj-arroba { background: #17395A; border-color: rgba(255,255,255,.12); }
.sj-arroba[hidden] { display: none; }

.sj-arroba__op {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  width: 100%;
  padding: .4rem .6rem;
  border: 0;
  background: none;
  color: var(--sj-tinta, #0B1930);
  font: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
}
html.dark .sj-arroba__op { color: #DDE7F1; }
.sj-arroba__op span { font-size: .74rem; color: #7E8EA1; }
.sj-arroba__op--on, .sj-arroba__op:hover { background: var(--sj-fondo-2, #EDF3FA); }
html.dark .sj-arroba__op--on, html.dark .sj-arroba__op:hover { background: rgba(255,255,255,.07); }

/* El pie es el ancla de la lista de la arroba, que se posiciona sobre el. */
.sj-chat__pie { position: relative; }

/* ===== sj-organigrama.css ===== */
/* ============================================================================
   SMARTIN JOBS - Organigrama. Arbol con lineas de conexion hechas con bordes:
   sin libreria de dibujo, sin SVG que recalcular al cambiar de tamano.
   ========================================================================== */

#sj-org {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
#sj-org[hidden] { display: none; }

.sj-org__fondo {
  position: absolute;
  inset: 0;
  background: rgba(11, 25, 48, .55);
  backdrop-filter: blur(2px);
}

.sj-org__panel {
  position: relative;
  width: min(1100px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(11, 25, 48, .3);
  overflow: hidden;
}
html.dark .sj-org__panel { background: #12324C; border-color: rgba(255,255,255,.12); }

.sj-org__panel > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--sj-linea, #DCE5EF);
}
html.dark .sj-org__panel > header { border-color: rgba(255,255,255,.1); }
.sj-org__panel h2 {
  margin: 0;
  flex: 1;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__panel h2 { color: #EDF3FA; }

.sj-org__cerrar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; cursor: pointer;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__cerrar { color: #EDF3FA; }
.sj-org__cerrar:hover { background: rgba(11, 25, 48,.08); }
.sj-org__cerrar svg { width: 18px; height: 18px; }

.sj-org__aviso {
  margin: 0;
  padding: 10px 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #566E82;
  background: rgba(10, 150, 206, .10);
  border-bottom: 1px solid var(--sj-linea, #DCE5EF);
}
html.dark .sj-org__aviso { color: #BDCDDD; border-color: rgba(255,255,255,.1); }

.sj-org__aviso-error {
  margin: 0;
  padding: 10px 18px;
  font-size: 13px;
  color: #fff;
  background: var(--sj-rojo, #C0444A);
}
.sj-org__aviso-error[hidden] { display: none; }

.sj-org__cuerpo {
  flex: 1;
  overflow: auto;          /* el arbol crece a lo ancho: que ruede el, no la pagina */
  padding: 26px 18px 34px;
}
.sj-org__nada {
  margin: 40px auto;
  max-width: 420px;
  text-align: center;
  color: #6B7F94;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- el arbol ----------------------------------------------------------- */

.sj-org__arbol, .sj-org__hijos {
  display: flex;
  justify-content: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sj-org__nodo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
}
.sj-org__arbol > .sj-org__nodo { padding-top: 0; }

/* Linea vertical de cada hijo hacia su barra horizontal. */
.sj-org__nodo::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 22px;
  background: var(--sj-linea, #C4D2E0);
}
.sj-org__arbol > .sj-org__nodo::before { display: none; }

/* Barra horizontal que une a los hermanos. */
.sj-org__hijos {
  position: relative;
  margin-top: 22px;
}
.sj-org__hijos::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 0; right: 0;
  height: 1px;
  background: var(--sj-linea, #C4D2E0);
}
/* Un hijo unico no necesita barra: queda una linea recta. */
.sj-org__hijos:has(> .sj-org__nodo:only-child)::before { display: none; }
/* Los extremos de la barra no deben sobresalir del primer y ultimo hijo. */
.sj-org__hijos > .sj-org__nodo:first-child::after,
.sj-org__hijos > .sj-org__nodo:last-child::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 50%;
  height: 1px;
  background: var(--sj-papel, #fff);
}
html.dark .sj-org__hijos > .sj-org__nodo:first-child::after,
html.dark .sj-org__hijos > .sj-org__nodo:last-child::after { background: #12324C; }
.sj-org__hijos > .sj-org__nodo:first-child::after { left: 0; }
.sj-org__hijos > .sj-org__nodo:last-child::after { right: 0; }
.sj-org__hijos > .sj-org__nodo:only-child::after { display: none; }

/* Linea que baja de un padre hacia sus hijos. */
.sj-org__nodo:has(> .sj-org__hijos)::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--sj-linea, #C4D2E0);
}

/* ---- la caja de cada equipo --------------------------------------------- */

.sj-org__caja {
  width: 232px;
  padding: 13px 14px 11px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-top: 3px solid var(--sj-azul, #087AA8);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 25, 48,.05), 0 8px 20px rgba(11, 25, 48,.07);
}
html.dark .sj-org__caja { background: #17395A; border-color: rgba(255,255,255,.12); }

.sj-org__caja h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__caja h3 { color: #EDF3FA; }

.sj-org__desc {
  margin: 0 0 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #74879B;
}

.sj-org__lider {
  margin: 0 0 7px;
  font-size: 12.5px;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__lider { color: #DDE7F1; }
.sj-org__lider span {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--sj-azul, #087AA8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sj-org__gente {
  display: block;
  list-style: disc;
  margin: 0 0 9px;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #4E6578;
}
html.dark .sj-org__gente { color: #B8C9DA; }
.sj-org__gente i { color: #7E8EA1; font-style: normal; font-size: 11px; }

.sj-org__vacio {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #7E8EA1;
}

.sj-org__dep {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7E8EA1;
}
.sj-org__dep select {
  width: 100%;
  margin-top: 3px;
  padding: 5px 6px;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 5px;
  background: var(--sj-fondo, #F5F8FC);
  color: var(--sj-tinta, #0B1930);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
html.dark .sj-org__dep select {
  background: #102B47; color: #DDE7F1; border-color: rgba(255,255,255,.14);
}
.sj-org__dep select:disabled { opacity: .5; }

@media (max-width: 720px) {
  .sj-org__arbol, .sj-org__hijos { flex-direction: column; align-items: center; }
  .sj-org__hijos::before { display: none; }
  .sj-org__caja { width: min(300px, calc(100vw - 70px)); }
}

/* ---- vista por persona --------------------------------------------------
   El arbol responde "quien esta en este equipo"; esta tabla responde la otra
   mitad: "de que es lider esta persona y donde es solo miembro". */

.sj-org__personas {
  max-width: 860px;
  margin: 40px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--sj-linea, #DCE5EF);
}
html.dark .sj-org__personas { border-color: rgba(255,255,255,.1); }
.sj-org__personas h3 {
  margin: 0 0 12px;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__personas h3 { color: #EDF3FA; }

.sj-org__personas table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sj-org__personas th {
  padding: 6px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7E8EA1;
  border-bottom: 1px solid var(--sj-linea, #DCE5EF);
}
.sj-org__personas td {
  padding: 9px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--sj-linea, #E6EDF6);
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-org__personas th,
html.dark .sj-org__personas td { border-color: rgba(255,255,255,.08); }
html.dark .sj-org__personas td { color: #DDE7F1; }
.sj-org__personas td span:not(.sj-org__et) {
  display: block;
  font-size: 11px;
  color: #7E8EA1;
}
.sj-org__personas i { color: #95A5B8; font-style: normal; }

.sj-org__et {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sj-fondo-2, #EDF3FA);
  color: #4E6578;
  font-size: 11.5px;
}
html.dark .sj-org__et { background: rgba(255,255,255,.08); color: #C4D2E0; }
.sj-org__et--lider { background: var(--sj-azul, #087AA8); color: #fff; font-weight: 600; }

/* ---- la direccion -------------------------------------------------------
   Una PERSONA por encima de los equipos. Se distingue de una caja de equipo
   para que no se lea como "un equipo mas llamado Martin". */

.sj-org__caja--jefe {
  width: 268px;
  border-top-color: var(--sj-tinta, #0B1930);
  background: var(--sj-tinta, #0B1930);
  text-align: center;
}
html.dark .sj-org__caja--jefe { background: #081525; border-color: rgba(255,255,255,.18); }
.sj-org__caja--jefe h3 { color: #fff; font-size: 15.5px; }
html.dark .sj-org__caja--jefe h3 { color: #fff; }

.sj-org__cargo {
  margin: 2px 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sj-claro, #7FD3EF);
}
.sj-org__alcance {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

/* ======================================================================
   Cadena de mando: bloques de persona, editor y barra de aplicar.
   ====================================================================== */

.sj-org__mando { margin-block-start: 1.6rem; }
.sj-org__mando h3 {
  margin: 0 0 .25rem;
  font-family: var(--sj-display, Georgia, serif);
  font-weight: 400;
}
.sj-org__nota {
  margin: 0 0 .9rem;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .78rem;
}
.sj-org__nota b { color: var(--sj-ambar, #9A6B12); }

.sj-org__p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra, 0 1px 1px rgba(11, 25, 48, .04));
  cursor: grab;
  transition: box-shadow 120ms, border-color 120ms, transform 120ms;
}
.sj-org__p:hover {
  border-color: var(--sj-azul, #087AA8);
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .07));
}
.sj-org__p:active { cursor: grabbing; }
.sj-org__p--jefe { border-width: 2px; border-color: var(--sj-tinta, #0B1930); }
.sj-org__p--sobre {
  border-color: var(--sj-azul, #087AA8);
  box-shadow: 0 0 0 3px rgba(8, 122, 168, .25);
  transform: scale(1.03);
}
.sj-org__p > i {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--g, #087AA8);
}
.sj-org__p b { display: block; font-size: .84rem; color: var(--sj-tinta, #0B1930); }
.sj-org__p em {
  display: block;
  font-style: normal;
  font-size: .68rem;
  color: var(--sj-tinta-3, #8094AA);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-org__lapiz {
  text-decoration: none;
  color: var(--sj-linea-2, #C4D2E0);
  font-size: .8rem;
  cursor: pointer;
}
.sj-org__p:hover .sj-org__lapiz { color: var(--sj-azul, #087AA8); }

/* ------------------------------------------------------------- editor */

.sj-org__editor {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(340px, 92%);
  padding: 16px 18px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .2));
}
.sj-org__editor h4 {
  margin: 0 0 .6rem;
  font-family: var(--sj-display, Georgia, serif);
  font-weight: 400;
  font-size: 1.05rem;
}
.sj-org__editor label {
  display: block;
  margin-block-end: .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sj-tinta-3, #8094AA);
}
.sj-org__editor input,
.sj-org__editor select {
  display: block;
  width: 100%;
  margin-block-start: .25rem;
  padding: .45rem .6rem;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 3px;
  font: inherit;
  font-size: .86rem;
  color: var(--sj-tinta, #0B1930);
  background: var(--sj-papel, #fff);
}
.sj-org__editor-nota {
  margin: .2rem 0 .8rem;
  font-size: .72rem;
  color: var(--sj-ambar, #9A6B12);
}
.sj-org__editor-botones { display: flex; gap: 8px; }
.sj-org__guardar {
  flex: 1;
  padding: .5rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul, #087AA8);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sj-org__guardar:hover { background: var(--sj-azul-alto, #066288); }
.sj-org__cancelar {
  padding: .5rem .9rem;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  color: var(--sj-tinta-2, #60738A);
  cursor: pointer;
}

/* ------------------------------------------------- barra de aplicar */

.sj-org__aplicar {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 1rem;
  padding: 10px 14px;
  background: var(--sj-navy, #0B1930);
  border-radius: var(--sj-radio, 6px);
  color: #fff;
  font-size: .8rem;
}
.sj-org__aplicar button {
  flex: 0 0 auto;
  padding: .4rem .8rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul-vivo, #0A96CE);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ======================================================================
   Las cajas de equipo, ahora manipulables.
   ====================================================================== */

.sj-org__caja { position: relative; cursor: grab; }
.sj-org__caja:active { cursor: grabbing; }
.sj-org__caja--sobre {
  border-color: var(--sj-azul, #087AA8) !important;
  box-shadow: 0 0 0 3px rgba(8, 122, 168, .25);
}
.sj-org__arbol--sobre {
  outline: 2px dashed var(--sj-linea-2, #C4D2E0);
  outline-offset: 6px;
  border-radius: var(--sj-radio, 6px);
}

.sj-org__lapiz--eq {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  text-decoration: none;
  color: var(--sj-linea-2, #C4D2E0);
  font-size: .85rem;
  cursor: pointer;
}
.sj-org__caja:hover .sj-org__lapiz--eq { color: var(--sj-azul, #087AA8); }

/* ------------------------------------------------- editor del equipo */

.sj-org__editor--eq { width: min(380px, 94%); }

.sj-org__miembros {
  margin: 0 0 .8rem;
  padding: 0;
  list-style: none;
  max-height: 210px;
  overflow-y: auto;
}
.sj-org__miembros li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .35rem 0;
  border-block-end: 1px solid var(--sj-linea, #DCE5EF);
  font-size: .85rem;
}
.sj-org__miembros li:last-child { border-block-end: 0; }
.sj-org__miembros b { flex: 1; font-weight: 600; color: var(--sj-tinta, #0B1930); }

.sj-org__mandar {
  padding: 2px 9px;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 999px;
  background: transparent;
  color: var(--sj-tinta-3, #8094AA);
  font: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.sj-org__mandar:hover { border-color: var(--sj-azul, #087AA8); color: var(--sj-azul, #087AA8); }
.sj-org__mandar--si {
  background: var(--sj-azul, #087AA8);
  border-color: var(--sj-azul, #087AA8);
  color: #fff;
}

.sj-org__sacar {
  border: 0;
  background: transparent;
  color: var(--sj-linea-2, #C4D2E0);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.sj-org__miembros li:hover .sj-org__sacar { color: var(--sj-rojo, #C0444A); }
.sj-org__sacar--confirma {
  color: #fff !important;
  background: var(--sj-rojo, #C0444A);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ===== sj-equipos.css ===== */
/* ============================================================================
   SMARTIN JOBS - Equipos y etiquetas.

   Dos cosas distintas en un mismo fichero porque van juntas en la cabeza de
   quien usa esto: "que se vea quien es quien" y "que las tareas se lean de un
   vistazo". Todo con unidades relativas y rejillas que se pliegan solas: la
   pantalla se usa igual en un movil que en el monitor de la oficina.
   ========================================================================== */

/* ---- la pantalla de equipos --------------------------------------------- */

.sj-eq__oculto { display: none !important; }

/* El listado de serie se esconde desde el PRIMER pintado, no cuando el guion
   termina de trabajar. Antes se veia la pantalla antigua y, medio segundo
   despues, cambiaba de golpe a la nueva: ese parpadeo es lo que se queria
   quitar. El selector se apoya en la clase que la aplicacion pone en <main>
   para cada ruta (`teams.index`), que es un unico token y por eso casa con ~=.

   Si el asistente no respondiera, `sj-eq-sin-datos` devuelve la vista de serie:
   mejor la pantalla antigua que ninguna. */
main[class~="teams.index"] .card { display: none; }
html.sj-eq-sin-datos main[class~="teams.index"] .card { display: block; }

.sj-eq {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.sj-eq__direccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: var(--sj-tinta, #0B1930);
}
.sj-eq__direccion .sj-eq__nombre { color: #fff; }
.sj-eq__direccion .sj-eq__nombre i { color: var(--sj-claro, #7FD3EF); }
.sj-eq__alcance {
  margin-left: auto;
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
}

/* Rejilla que se pliega sola: sin consultas de medios para el numero de
   columnas, lo decide el ancho disponible. */
.sj-eq__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}

.sj-eq__caja {
  padding: 1rem 1.05rem 1.1rem;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-top: 3px solid var(--sj-azul, #087AA8);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11, 25, 48, .05), 0 10px 24px rgba(11, 25, 48, .06);
  transition: transform 140ms cubic-bezier(.2, .7, .4, 1), box-shadow 140ms;
}
.sj-eq__caja:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11, 25, 48, .07), 0 16px 34px rgba(11, 25, 48, .1);
}
html.dark .sj-eq__caja { background: #17395A; border-color: rgba(255,255,255,.12); }

.sj-eq__caja > header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .5rem;
}
.sj-eq__caja h3 {
  flex: 1;
  margin: 0;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sj-tinta, #0B1930);
}
html.dark .sj-eq__caja h3 { color: #EDF3FA; }
.sj-eq__cuenta {
  flex: none;
  font-size: .72rem;
  color: #7E8EA1;
  white-space: nowrap;
}
.sj-eq__desc {
  margin: 0 0 .7rem;
  font-size: .8rem;
  line-height: 1.5;
  color: #74879B;
}

.sj-eq__bloque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  padding-top: .6rem;
  border-top: 1px solid var(--sj-linea, #E6EDF6);
}
html.dark .sj-eq__bloque { border-color: rgba(255,255,255,.08); }
.sj-eq__rotulo {
  flex: 0 0 100%;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #95A5B8;
}
.sj-eq__nada { font-size: .8rem; color: #95A5B8; }

.sj-eq__persona {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: 100%;
}
.sj-eq__avatar {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sj-eq__persona--jefe .sj-eq__avatar {
  width: 2rem;
  height: 2rem;
  font-size: .74rem;
  box-shadow: 0 0 0 2px var(--sj-claro, #7FD3EF);
}
.sj-eq__nombre {
  min-width: 0;
  font-size: .85rem;
  line-height: 1.25;
  color: var(--sj-tinta, #0B1930);
  overflow-wrap: anywhere;
}
html.dark .sj-eq__nombre { color: #DDE7F1; }
.sj-eq__nombre i {
  display: block;
  font-style: normal;
  font-size: .68rem;
  color: #7E8EA1;
}

.sj-eq__pie {
  margin: 1.4rem 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: #74879B;
}
.sj-eq__ver {
  margin-left: .35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-azul, #087AA8);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- etiquetas al estilo de una lista de tareas moderna ------------------
   La almohadilla la pone el CSS, no el dato: asi el nombre guardado sigue
   siendo "dashboard" y se puede buscar y filtrar sin arrastrar el simbolo. */

.labels .tag,
.label-wrapper .tag {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: .12rem .5rem .12rem .42rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
}
.labels .tag::before,
.label-wrapper .tag::before {
  content: "#";
  margin-right: .12rem;
  opacity: .62;
  font-weight: 700;
}
/* El boton de quitar de dentro de la etiqueta no lleva almohadilla. */
.labels .tag .delete::before,
.label-wrapper .tag .delete::before { content: none; }

/* En el tablero las tarjetas son pequenas: etiquetas mas discretas para que no
   tapen el titulo, que es lo que se lee. */
.kanban-card .labels .tag,
.kanban-card .label-wrapper .tag {
  padding: .05rem .42rem .05rem .34rem;
  font-size: .66rem;
}

/* ---- que todo quepa en un movil ----------------------------------------- */

@media (max-width: 48rem) {
  .sj-eq { padding-left: .75rem; padding-right: .75rem; }
  .sj-eq__direccion { flex-direction: column; align-items: flex-start; }
  .sj-eq__alcance { margin-left: 0; }

  /* El tablero kanban de serie se sale a lo ancho en pantallas pequenas: que
     ruede el tablero, nunca la pagina entera. */
  .kanban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .kanban .bucket { scroll-snap-align: start; min-width: 15rem; }

  /* Las barras de herramientas de cada vista se apilan en vez de recortarse. */
  .project-header,
  .switch-view-container { flex-wrap: wrap; gap: .4rem; }

  /* Tablas anchas (vista Tabla) dentro de su propio desplazamiento. */
  .table-view, .has-horizontal-overflow { overflow-x: auto; }
}

/* Objetivos de pulsacion comodos con el dedo. Solo donde hace falta: una tarea
   que se marca sin querer es peor que un boton un poco mas grande. */
@media (pointer: coarse) {
  .sj-eq__ver { padding: .3rem 0; }
  .fancycheckbox, .task .fancycheckbox span { min-height: 1.6rem; }
}

/* ===== sj-escribir.css ===== */
/* ============================================================================
   SMARTIN JOBS - escritura asistida en el campo de alta.

   Dos piezas: el MENU que sale al teclear @ # o !, y la tira de FICHAS con lo
   que se ha entendido. Ninguna de las dos empuja el contenido de la pagina:
   ambas van en posicion absoluta sobre el campo, porque si al escribir se
   moviera el boton de "Anadir" el usuario pulsaria otra cosa.
   ========================================================================== */

.sj-esc { position: relative; }

/* ------------------------------------------------------------------- menu */

.sj-esc__menu {
  position: absolute;
  z-index: 60;
  /* Debajo de las fichas, no encima: la lista tapaba justo el renglon que dice
     con que titulo va a quedar la tarea, que es lo que hay que comprobar. */
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-width: min(360px, 90vw);
  padding: 4px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
  overflow: hidden;
}
.sj-esc__menu[hidden] { display: none; }

.sj-esc__op {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--sj-radio-s, 4px);
  background: transparent;
  font: inherit;
  font-size: .86rem;
  color: var(--sj-tinta, #0B1930);
  text-align: left;
  cursor: pointer;
}
.sj-esc__op:hover,
.sj-esc__op--on { background: var(--sj-fondo-2, #E7EEF7); }

.sj-esc__op b { font-weight: 600; }
.sj-esc__op span {
  margin-left: auto;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.sj-esc__op i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* ----------------------------------------------------------------- fichas */

.sj-esc__fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 7px 9px;
  background: var(--sj-fondo, #F5F8FC);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: var(--sj-radio, 6px);
  font-size: .78rem;
  line-height: 1.5;
}
.sj-esc__fichas[hidden] { display: none; }

.sj-esc__rotulo {
  color: var(--sj-tinta-3, #8094AA);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
}
.sj-esc__titulo {
  color: var(--sj-tinta, #0B1930);
  font-weight: 600;
  /* El titulo puede ser largo: que se corte el, no las fichas, que son el
     dato que el usuario necesita comprobar de un vistazo. */
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sj-esc__ficha {
  --c: var(--sj-tinta-2, #60738A);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: color-mix(in srgb, var(--c) 78%, #000);
  font-weight: 600;
  white-space: nowrap;
}
.sj-esc__ficha--quien  { --c: var(--sj-azul,  #087AA8); }
.sj-esc__ficha--cuando { --c: var(--sj-verde, #0E7A64); }
.sj-esc__ficha--pri    { --c: var(--sj-ambar, #9A6B12); }
.sj-esc__ficha--equipo { --c: var(--sj-navy,  #0B1930); }
.sj-esc__ficha--repite { --c: var(--sj-azul,  #087AA8); }

/* --------------------------------------------------------------- telefono */

@media (max-width: 640px) {
  .sj-esc__menu { min-width: 0; width: 100%; }
  .sj-esc__titulo { max-width: 100%; }
  .sj-esc__fichas { font-size: .74rem; }
}

/* ===== sj-personas.css ===== */
/* ============================================================================
   SMARTIN JOBS - el nombre del responsable, cuando hay sitio.

   La plataforma esconde el nombre al lado del circulo (`display: none`) y deja
   solo la inicial. Aqui se destapa, pero con cabeza: en una pantalla estrecha
   el nombre empujaria el titulo de la tarea a una segunda linea, asi que por
   debajo de 900 px vuelve a verse solo el circulo, que es lo que pedia el
   usuario: "nombre y apellido donde sobre espacio, iniciales cuando no".

   Hace falta !important: la regla de la aplicacion lleva su atributo de ambito
   (`[data-v-...]`) y gana por especificidad a cualquier selector de clases.
   ========================================================================== */

.assignees-list .user .username,
.task-view .user .username {
  display: inline !important;
  margin-inline-start: .35rem;
  color: var(--sj-tinta-2, #60738A);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Con el nombre al lado, los circulos ya no pueden solaparse como hacia la
   plataforma: se pisarian las letras. Se separan, y nada mas: ni recuadro ni
   fondo. La fila tiene que seguir siendo una fila, no una tira de etiquetas. */
.assignees-list .assignee:not(:first-child) {
  margin-inline-start: .55rem !important;
}

/* En el detalle el campo de responsables ocupa toda la columna y no compite
   con nada: ahi el nombre va entero, grande y oscuro. Una inicial en un campo
   de 400 px era desaprovechar el sitio y esconder el dato. */
.task-view .user .username {
  font-size: .9rem;
  font-weight: 600;
  color: var(--sj-tinta, #0B1930);
}
.task-view .assignees-list .assignee { margin-block-end: .25rem; }

@media (max-width: 900px) {
  .assignees-list .user .username { display: none !important; }
  /* Sin nombre vuelven a solaparse: ocupan menos y se entienden igual. */
  .assignees-list .assignee:not(:first-child) { margin-inline-start: -.5rem !important; }
  /* Menos el detalle, que tiene toda la anchura para el. */
  .task-view .assignees-list .user .username { display: inline !important; }
}

/* ---------------------------------------------------- cambiar de equipo */

.sj-equipo-cambiar {
  margin-inline-start: .4rem;
  padding: 1px 8px;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 999px;
  background: transparent;
  color: var(--sj-tinta-3, #8094AA);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.sj-equipo-cambiar:hover {
  color: var(--sj-azul-alto, #066288);
  border-color: var(--sj-azul, #087AA8);
}

/* ===== sj-perfil.css ===== */
/* ============================================================================
   SMARTIN JOBS - tarjeta de perfil y cara de las personas.
   ========================================================================== */

/* Quien tiene tarjeta, lo dice el cursor. */
[data-sj-usuario] { cursor: pointer; }
.sj-rap[data-sj-usuario],
header [data-sj-usuario],
.navbar [data-sj-usuario] { cursor: inherit; }

/* ----------------------------------------------------------------- velo */

.sj-pf__velo {
  position: fixed;
  inset: 0;
  /* La ficha flotante de la plataforma vive en un z-index de miles: la
     tarjeta tiene que poder abrirse DESDE ella, asi que va por encima.
     Medido el 2026-10-28: con 120 la tarjeta se creaba y no se veia. */
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 25, 48, .38);
  backdrop-filter: blur(2px);
}

/* -------------------------------------------------------------- tarjeta */

.sj-pf {
  position: relative;
  width: min(380px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--sj-papel, #fff);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .2));
  animation: sj-pf-entra 160ms cubic-bezier(.2, .7, .4, 1);
}
@keyframes sj-pf-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* La banda del color de la persona: la tarjeta ES suya desde el primer
   vistazo, antes de leer nada. */
.sj-pf__banda {
  height: 64px;
  border-radius: var(--sj-radio, 6px) var(--sj-radio, 6px) 0 0;
}

.sj-pf__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.sj-pf__x:hover { background: rgba(255, 255, 255, .34); }

.sj-pf__cab {
  padding: 0 20px 14px;
  text-align: center;
}
.sj-pf__cara {
  width: 76px;
  height: 76px;
  margin-top: -38px;
  border: 4px solid var(--sj-papel, #fff);
  border-radius: 50%;
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .1));
}
.sj-pf__nombre {
  margin: .5rem 0 0;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-pf__rol {
  margin: .15rem 0 0;
  min-height: 1.1em;
  color: var(--sj-azul-alto, #066288);
  font-size: .82rem;
  font-weight: 600;
}
.sj-pf__cuenta {
  margin: .1rem 0 0;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .76rem;
}

/* ----------------------------------------------------------------- cifras */

.sj-pf__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--sj-linea, #dce5ef);
}
.sj-pf__cifras > div {
  padding: .7rem .4rem;
  text-align: center;
}
.sj-pf__cifras > div + div { border-inline-start: 1px solid var(--sj-linea, #dce5ef); }
.sj-pf__cifras b {
  display: block;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-pf__cifras span {
  display: block;
  margin-top: .1rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ------------------------------------------------------------------ lista */

.sj-pf__lista { padding: .7rem 20px .2rem; }
.sj-pf__rotulo {
  margin: 0 0 .35rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sj-pf__lista a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .42rem .5rem;
  margin: 0 -.5rem;
  border-radius: var(--sj-radio-s, 4px);
  color: var(--sj-tinta, #0b1930);
  font-size: .84rem;
  text-decoration: none;
}
.sj-pf__lista a:hover { background: var(--sj-fondo-2, #e7eef7); }
.sj-pf__lista a i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sj-linea-2, #c4d2e0);
}
.sj-pf__lista a i.sj-pf__pri--urge { background: var(--sj-rojo, #c0444a); }
.sj-pf__lista a i.sj-pf__pri--alta { background: var(--sj-ambar, #9a6b12); }
.sj-pf__lista a span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-pf__lista a time {
  color: var(--sj-tinta-3, #8094aa);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.sj-pf__vacio {
  margin: .2rem 0 .4rem;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .82rem;
}

/* -------------------------------------------------------------------- pie */

.sj-pf__pie { padding: .8rem 20px 18px; }
.sj-pf__ver {
  width: 100%;
  padding: .55rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color 140ms;
}
.sj-pf__ver:hover { background: var(--sj-azul-alto, #066288); }

/* ===== sj-paleta.css ===== */
/* ============================================================================
   SMARTIN JOBS - paleta de mandos (Ctrl+K) y chip de vencimiento del kanban.
   ========================================================================== */

.sj-pal__velo {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(11, 25, 48, .38);
  backdrop-filter: blur(2px);
}

.sj-pal {
  width: min(560px, 94vw);
  background: var(--sj-papel, #fff);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .2));
  overflow: hidden;
  animation: sj-pal-entra 140ms cubic-bezier(.2, .7, .4, 1);
}
@keyframes sj-pal-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sj-pal__campo {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-block-end: 1px solid var(--sj-linea, #dce5ef);
  font: inherit;
  font-size: 1rem;
  color: var(--sj-tinta, #0b1930);
  outline: none;
  background: transparent;
}
.sj-pal__campo::placeholder { color: var(--sj-tinta-3, #8094aa); }

.sj-pal__lista {
  max-height: min(430px, 55vh);
  overflow-y: auto;
  padding: 6px;
}

.sj-pal__fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--sj-radio-s, 4px);
  background: transparent;
  font: inherit;
  font-size: .88rem;
  color: var(--sj-tinta, #0b1930);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sj-pal__fila--on,
.sj-pal__fila:hover { background: var(--sj-fondo-2, #e7eef7); }
.sj-pal__fila--hecha { opacity: .55; }
.sj-pal__fila--hecha span { text-decoration: line-through; }

.sj-pal__fila span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-pal__fila span b { font-weight: 700; color: var(--sj-tinta-2, #60738a); }
.sj-pal__fila time,
.sj-pal__fila em {
  color: var(--sj-tinta-3, #8094aa);
  font-size: .72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La pista "Ctrl+Enter" solo en la fila activa: en todas seria ruido. */
.sj-pal__pista {
  display: none;
  padding: 1px 6px;
  border: 1px solid var(--sj-linea-2, #c4d2e0);
  border-radius: 4px;
  background: var(--sj-fondo, #f5f8fc);
  color: var(--sj-tinta-3, #8094aa);
  font-family: inherit;
  font-size: .64rem;
  white-space: nowrap;
}
.sj-pal__fila--on .sj-pal__pista { display: inline-block; }

.sj-pal__tipo {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sj-linea-2, #c4d2e0);
}
.sj-pal__tipo--tarea   { background: var(--sj-azul, #087aa8); }
.sj-pal__tipo--tablero { border-radius: 2px; background: var(--sj-tinta-2, #60738a); }
.sj-pal__tipo--mas     { background: var(--sj-verde, #0e7a64); }

.sj-pal__cara {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.sj-pal__fila--crear span b { color: var(--sj-verde, #0e7a64); }

.sj-pal__nada {
  margin: 0;
  padding: 18px 14px;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .84rem;
}

.sj-pal__pie {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-block-start: 1px solid var(--sj-linea, #dce5ef);
  background: var(--sj-fondo, #f5f8fc);
  color: var(--sj-tinta-3, #8094aa);
  font-size: .68rem;
}

/* ------------------------------------ la fecha en la tarjeta del kanban

   La plataforma ya pinta su chip .due-date cuando la tarea tiene fecha (la
   primera auditoria no lo vio: ninguna tarjeta la tenia puesta). Aqui solo se
   viste con la paleta; .overdue es su propia clase para lo vencido.        */

.kanban .task .due-date {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--sj-fondo-2, #e7eef7);
  color: var(--sj-tinta-2, #60738a);
  font-size: .7rem;
  font-weight: 600;
}
.kanban .task .due-date.overdue,
.kanban .task.overdue .due-date {
  background: #FBE9EA;
  color: var(--sj-rojo, #c0444a);
}

/* ---------------------------------------------- marcar hecha, con gusto */

.fancy-checkbox svg,
.fancy-checkbox input + span {
  transition: transform 120ms cubic-bezier(.2, .7, .4, 1);
}
.fancy-checkbox:hover svg { transform: scale(1.08); }
.fancy-checkbox:active svg { transform: scale(1.18); }

/* ------------------------------------------------- oferta de avisos */

.sj-not__oferta {
  position: fixed;
  z-index: 80;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #c4d2e0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
  font-size: .8rem;
  color: var(--sj-tinta-2, #60738a);
}
.sj-not__oferta p { margin: 0; line-height: 1.4; }
.sj-not__si {
  flex: 0 0 auto;
  padding: .4rem .7rem;
  border: 0;
  border-radius: 3px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-not__si:hover { background: var(--sj-azul-alto, #066288); }
.sj-not__no {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--sj-tinta-3, #8094aa);
  font-size: .8rem;
  cursor: pointer;
}

/* ===== sj-rapido.css ===== */
/* ============================================================================
   SMARTIN JOBS - mandos de edicion rapida sobre las filas de tareas.

   Regla de la casa: no se anade ni un elemento a las listas. Lo que ya se ve
   -la prioridad, la cara del responsable, la fecha, las etiquetas- es lo que
   se pulsa. La primera version metia una pastilla propia en cada fila y la
   lista se volvio ilegible: dos prioridades por tarea y el titulo desplazado.
   ========================================================================== */

/* ======================================================================
   Mandos y menu de la edicion rapida.
   ====================================================================== */

/* Cualquier dato de la fila que se pueda cambiar se comporta como un boton:
   el cursor y un leve realce lo dicen, sin anadir mas tinta a la lista. */
.sj-rap {
  cursor: pointer;
  border-block-end: 1px dotted transparent;
  transition: border-color 140ms;
}
.sj-rap:hover { border-block-end-color: currentColor; }

.sj-rap__menu {
  position: fixed;
  z-index: 90;
  min-width: 230px;
  max-width: min(330px, 92vw);
  max-height: 60vh;
  padding: 4px;
  overflow-y: auto;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: var(--sj-radio, 6px);
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
}
.sj-rap__menu[hidden] { display: none; }

.sj-rap__cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px 7px;
  margin-block-end: 2px;
  border-block-end: 1px solid var(--sj-linea, #DCE5EF);
  color: var(--sj-tinta-3, #8094AA);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sj-rap__cab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sj-rap__atras {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.sj-rap__atras:hover { color: var(--sj-azul-alto, #066288); }

.sj-rap__op {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--sj-radio-s, 4px);
  background: transparent;
  font: inherit;
  font-size: .82rem;
  color: var(--sj-tinta, #0B1930);
  text-align: left;
  cursor: pointer;
}
.sj-rap__op:hover { background: var(--sj-fondo-2, #E7EEF7); }
.sj-rap__op b { font-weight: 600; }
.sj-rap__op > i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, transparent);
}
.sj-rap__op > span {
  margin-left: auto;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .72rem;
}
.sj-rap__op--tenue b { color: var(--sj-tinta-3, #8094AA); }
.sj-rap__op--yendo { opacity: .5; cursor: progress; }

/* Lo que la tarea YA tiene puesto. Marcarlo evita el gesto inutil de volver a
   elegir lo mismo, y en etiquetas dice que ese clic lo QUITA. */
.sj-rap__si {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sj-verde, #0E7A64);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sj-rap__fecha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: .82rem;
  color: var(--sj-tinta-2, #60738A);
}
.sj-rap__fecha input {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: var(--sj-radio-s, 4px);
  font: inherit;
  font-size: .8rem;
}

.sj-rap__vacio {
  padding: 10px;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .8rem;
}

/* ------------------------------------------------------------- el aviso */

.sj-rap__aviso {
  position: fixed;
  z-index: 95;
  inset-block-end: 18px;
  inset-inline-start: 50%;
  max-width: min(560px, 92vw);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--sj-navy, #0B1930);
  color: #fff;
  font-size: .82rem;
  box-shadow: var(--sj-sombra-g, 0 14px 30px rgba(11, 25, 48, .11));
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
}
.sj-rap__aviso--ve { opacity: 1; transform: translate(-50%, 0); }
.sj-rap__aviso--malo { background: #C0444A; }

/* El color de cada prioridad, solo donde se usa ya: las opciones del menu.
   No hay ninguna pastilla nuestra en las filas, asi que no hace falta nada mas. */
.sj-rap__op.sj-prio--urge  { --c: #C0444A; }
.sj-rap__op.sj-prio--alta  { --c: #9A6B12; }
.sj-rap__op.sj-prio--media { --c: #087AA8; }
.sj-rap__op.sj-prio--baja  { --c: #0E7A64; }
.sj-rap__op.sj-prio--sin   { --c: var(--sj-linea-2, #C4D2E0); }
.sj-rap__op.sj-prio--sin b { color: var(--sj-tinta-3, #8094AA); }

/* ------------------------------------------------------- subtareas */

.sj-rap__casilla {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 15px !important;
  height: 15px !important;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 3px !important;
  background: transparent !important;
  color: #fff;
  font-size: .62rem;
  line-height: 1;
}
.sj-rap__sub--si .sj-rap__casilla {
  background: var(--sj-verde, #0E7A64) !important;
  border-color: var(--sj-verde, #0E7A64);
}
.sj-rap__sub--si b {
  color: var(--sj-tinta-3, #8094AA);
  text-decoration: line-through;
}
.sj-rap__pie-sub {
  padding: 7px 9px 4px;
  border-block-start: 1px solid var(--sj-linea, #DCE5EF);
  color: var(--sj-tinta-3, #8094AA);
  font-size: .68rem;
}

/* ===== sj-ficha.css ===== */
/* ============================================================================
   SMARTIN JOBS - bloque de historial dentro de la ficha de la tarea.
   ========================================================================== */

.sj-hist {
  margin-block-start: 1.6rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--sj-linea, #DCE5EF);
}

.sj-hist__titulo {
  margin: 0 0 .7rem;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* La frase del motor va primero y se lee sola: es lo unico que mira quien
   abre quince tareas seguidas. */
.sj-hist__resumen {
  margin: 0 0 .9rem;
  padding: .7rem .9rem;
  border-inline-start: 3px solid var(--sj-azul, #087AA8);
  border-radius: 0 var(--sj-radio, 6px) var(--sj-radio, 6px) 0;
  background: var(--sj-fondo, #F5F8FC);
  color: var(--sj-tinta, #0B1930);
  font-size: .92rem;
  line-height: 1.5;
}
.sj-hist__resumen span {
  display: block;
  margin-block-end: .2rem;
  color: var(--sj-tinta-3, #8094AA);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sj-hist__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sj-hist__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .6rem;
  padding: .45rem 0;
  border-block-start: 1px solid var(--sj-linea, #DCE5EF);
  font-size: .84rem;
}
.sj-hist__lista li:first-child { border-block-start: 0; }
.sj-hist__lista b { font-weight: 600; color: var(--sj-tinta, #0B1930); }
.sj-hist__lista time {
  color: var(--sj-tinta-3, #8094AA);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.sj-hist__lista span {
  grid-column: 1 / -1;
  color: var(--sj-tinta-2, #60738A);
}

.sj-hist__nada {
  color: var(--sj-tinta-3, #8094AA);
  font-size: .82rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .sj-hist__lista li { grid-template-columns: 1fr; }
}

/* ===== sj-nueva.css ===== */
/* ============================================================================
   SMARTIN JOBS - la barra de opciones del alta rapida.
   Se pliega sola en pantallas estrechas; en un movil cada campo ocupa su fila.
   ========================================================================== */

.sj-nueva {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .55rem .9rem;
  margin: .55rem 0 0;
  padding: .65rem .8rem;
  background: var(--sj-fondo-2, #EDF3FA);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 8px;
}
html.dark .sj-nueva { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.sj-nueva__campo { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.sj-nueva__campo > span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7E8EA1;
}
.sj-nueva__campo select,
.sj-nueva__campo input {
  padding: .3rem .45rem;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 5px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0B1930);
  font: inherit;
  font-size: .8rem;
  max-width: 13rem;
}
html.dark .sj-nueva__campo select,
html.dark .sj-nueva__campo input {
  background: #12324C; color: #DDE7F1; border-color: rgba(255,255,255,.14);
}

.sj-nueva__etiquetas { position: relative; }
.sj-nueva__abrir {
  padding: .33rem .7rem;
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 999px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0B1930);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
html.dark .sj-nueva__abrir { background: #12324C; color: #DDE7F1; border-color: rgba(255,255,255,.14); }

.sj-nueva__lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + .3rem);
  left: 0;
  width: max-content;
  max-width: min(22rem, 80vw);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .55rem;
  background: var(--sj-papel, #fff);
  border: 1px solid var(--sj-linea, #DCE5EF);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(11, 25, 48, .16);
}
html.dark .sj-nueva__lista { background: #17395A; border-color: rgba(255,255,255,.12); }
.sj-nueva__lista[hidden] { display: none; }

.sj-nueva__et {
  padding: .12rem .55rem;
  border: 1px solid var(--et, #888);
  border-radius: 999px;
  background: transparent;
  color: var(--et, #888);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-nueva__et--on { background: var(--et, #888); color: #fff; }
.sj-nueva__vacio { font-size: .78rem; color: #7E8EA1; }

.sj-nueva__aviso { align-self: center; font-size: .78rem; color: var(--sj-verde, #0E7A64); }
.sj-nueva__aviso--malo { color: var(--sj-rojo, #C0444A); }
.sj-nueva__aviso[hidden] { display: none; }

@media (max-width: 48rem) {
  .sj-nueva { gap: .5rem; }
  .sj-nueva__campo { flex: 1 1 100%; }
  .sj-nueva__campo select,
  .sj-nueva__campo input { max-width: 100%; width: 100%; }
  .sj-nueva__etiquetas { flex: 1 1 100%; }
  .sj-nueva__abrir { width: 100%; }
}

/* El boton propio de la barra: hace explicito que se va a crear CON las opciones
   de al lado. Antes esto dependia del boton de la aplicacion, que hacia dos
   cosas distintas segun lo que hubiera puesto y no lo decia. */
.sj-nueva__crear {
  align-self: flex-end;
  padding: .36rem .9rem;
  border: 0;
  border-radius: 6px;
  background: var(--sj-azul, #087AA8);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.sj-nueva__crear:hover { filter: brightness(1.07); }
@media (max-width: 48rem) { .sj-nueva__crear { flex: 1 1 100%; } }

/* ===== sj-proyecto.css ===== */
/* NOTA: estas clases se llamaban `sj-proy` y chocaban con las tarjetas de
   tablero del resumen, que ya usaban ese prefijo. Como esta hoja se carga
   despues, las pisaba: las tarjetas perdian su color y su fondo (visto en
   pantalla el 2026-11-02). Aqui el prefijo es `sj-fp` (ficha de proyecto).
   ============================================================================
   La ficha del proyecto dentro de la tarea (ver sj-fpecto.js).

   Se apoya en las variables de la propia aplicacion y en las de la paleta de
   ODJIT que ya define smartin-jobs.css, con valor de respaldo por si alguna no
   estuviera: asi esto alcanza a los dos temas sin escribir dos hojas.
   El papel se separa por el filo, no por la sombra.
   ========================================================================== */

.sj-fp {
  /* La columna de detalle de la aplicacion centra e impone ancho a sus hijos:
     sin esto, los campos salian a 245 px en un panel de 790 (visto en pantalla
     el 2026-11-01). Se fuerza aqui, no se pelea con su hoja. */
  align-items: stretch;
  text-align: left;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--card-background, var(--sj-papel, #fff));
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sj-fp__cab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.sj-fp__tit {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.05rem;
  color: var(--text, var(--sj-tinta, #0b1930));
}

.sj-fp__av {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  color: var(--grey-500, #6e8299);
  font-variant-numeric: tabular-nums;
}

.sj-fp__chip {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.18rem 0.42rem;
  border-radius: 3px;
  white-space: nowrap;
}
.sj-fp__chip--ok,
.sj-fp__chip--validada { background: #e3f1ee; color: var(--sj-verde, #0e7a64); }
.sj-fp__chip--falta    { background: #f8e8e9; color: var(--sj-rojo, #c0444a); }
.sj-fp__chip--borrador { background: #f8efdc; color: var(--sj-ambar, #9a6b12); }

.sj-fp__aviso {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: #f8efdc;
  border: 1px solid var(--sj-ambar, #9a6b12);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text, #0b1930);
}
.sj-fp__aviso button {
  margin-left: 0.4rem;
  font: inherit;
  font-size: 0.82rem;
  background: none;
  border: 1px solid var(--sj-ambar, #9a6b12);
  color: var(--sj-ambar, #9a6b12);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}

.sj-fp__campo { display: flex; flex-direction: column; gap: 0.25rem;
                  align-items: stretch; width: 100%; }

.sj-fp__campo > label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--grey-500, #6e8299);
}
.sj-fp__campo > label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--grey-400, #8496a8);
}

.sj-fp textarea,
.sj-fp input[type="text"],
.sj-fp select {
  font: inherit;
  font-size: 0.93rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  color: var(--text, #0b1930);
  background: var(--site-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
  resize: vertical;
}
.sj-fp textarea:focus,
.sj-fp input[type="text"]:focus,
.sj-fp select:focus {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
  border-color: var(--sj-azul, #087aa8);
}

.sj-fp__zh { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; }
.sj-fp__zh textarea {
  flex: 1;
  font-size: 0.88rem;
  color: #c00000;          /* el mismo rojo que la linea en chino de la lamina */
  min-height: 2.6rem;
}

.sj-fp__cuenta {
  font-size: 0.72rem;
  color: var(--grey-400, #8496a8);
  font-variant-numeric: tabular-nums;
}
.sj-fp__cuenta--mal { color: var(--sj-rojo, #c0444a); font-weight: 600; }

.sj-fp__fila {
  width: 100%;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .sj-fp__fila { grid-template-columns: 1.3fr 1fr 1fr; }
}
.sj-fp__fila label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--grey-500, #6e8299);
}

.sj-fp__pie {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.sj-fp__guardar {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border: 1px solid var(--sj-azul, #087aa8);
  background: var(--sj-azul, #087aa8);
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
.sj-fp__guardar:hover {
  background: var(--sj-azul-alto, #066288);
  border-color: var(--sj-azul-alto, #066288);
}

.sj-fp__estado { font-size: 0.84rem; color: var(--grey-500, #6e8299); }
.sj-fp__estado--ok    { color: var(--sj-verde, #0e7a64); }
.sj-fp__estado--aviso { color: var(--sj-ambar, #9a6b12); }
.sj-fp__estado--mal   { color: var(--sj-rojo, #c0444a); }

/* El chino, recogido por defecto -------------------------------------------
   Solo hace falta para la lamina del CEO, asi que no ocupa sitio en la pantalla
   de todos los dias. Se despliega desde la linea del pie. */
.sj-fp--zh-off .sj-fp__zh { display: none; }

.sj-fp__zhver {
  margin-left: auto;
  font: inherit;
  font-size: 0.76rem;
  color: var(--grey-500, #6e8299);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--grey-400, #8496a8);
  padding: 0 0 1px;
  cursor: pointer;
}
.sj-fp__zhver:hover { color: var(--sj-azul, #087aa8); border-bottom-color: currentColor; }
.sj-fp__zhver:focus-visible { outline: 2px solid var(--sj-azul, #087aa8); outline-offset: 2px; }

/* Las subtareas dentro de la ficha ----------------------------------------
   Un proyecto se entiende por lo que le QUEDA, no por un porcentaje. Primero
   las pendientes; las hechas, tachadas y en tono bajo para que no compitan. */
.sj-fp__subs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  background: var(--sj-sup-2, #edf3fa);
  border-radius: 4px;
}
.sj-fp__subsCab {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--grey-500, #6e8299);
}
.sj-fp__subs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sj-fp__subs li { font-size: 0.86rem; line-height: 1.35; }
.sj-fp__subs li::before { content: "▫ "; color: var(--grey-400, #8496a8); }
.sj-fp__subs li a { color: var(--text, #0b1930); text-decoration: none; }
.sj-fp__subs li a:hover { color: var(--sj-azul, #087aa8); text-decoration: underline; }
.sj-fp__subs li b { font-weight: 600; color: var(--grey-500, #6e8299); }
/* Con el selector corto NO se veian: `.sj-fp__subs li::before` tiene mas
   especificidad que `.sj-fp__sub--ok::before`, asi que el punto ganaba al
   visto y nada salia tachado aunque la cuenta dijera "5 de 9 completadas"
   (visto en pantalla el 2026-11-02). */
.sj-fp__subs li.sj-fp__sub--ok::before {
  content: "✓ ";
  color: var(--sj-verde, #0e7a64);
  font-weight: 700;
}
.sj-fp__subs li.sj-fp__sub--ok a {
  text-decoration: line-through;
  color: var(--grey-400, #8496a8);
}
.sj-fp__sinSubs { margin: 0; font-size: 0.82rem; color: var(--grey-400, #8496a8); }

/* El orden de la columna de detalle ---------------------------------------
   Las subtareas primero -es el trabajo del dia-, la ficha del proyecto
   despues, y lo demas en su orden de siempre. Con `order` y no moviendo
   nodos: la aplicacion repinta esa columna cuando le parece. */
.sj-fp__col { display: flex; flex-direction: column; }
.sj-fp__col > * { order: 3; }
.sj-fp__col > .sj-fp__subsNativas { order: 1; }
.sj-fp__col > .sj-fp { order: 2; }

/* Ya no se repite la lista dentro de la ficha: solo la cuenta. */
.sj-fp__subs { padding: 0.45rem 0.7rem; }

/* La ficha cerrada --------------------------------------------------------

   Cerrada por defecto (ver `pinta` en sj-proyecto.js). Lo que queda es una
   barra: el titulo, el avance, lo que falta, el problema en una linea y el
   boton para abrirla. Asi las subtareas -que es lo que se mira a diario- no
   quedan sepultadas bajo una ficha que se rellena una sola vez. */
.sj-fp--plegada .sj-fp__cuerpo { display: none; }
.sj-fp:not(.sj-fp--plegada) .sj-fp__resumen { display: none; }

.sj-fp__resumen {
  margin: 6px 0 0;
  color: var(--sj-tinta-suave, #5a6b80);
  font-size: 0.92em;
  line-height: 1.45;
  /* Una linea y basta: si el problema es largo, se abre la ficha para leerlo. */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sj-fp__plegar {
  margin-left: auto;          /* al extremo, lejos de los chips informativos */
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--sj-azul, #087aa8);
  font: inherit;
  font-size: 0.85em;
  text-transform: lowercase;
  border-bottom: 1px dotted currentColor;
}
.sj-fp__plegar:hover { color: var(--sj-azul-alto, #066288); }
/* "preguntar al robot" comparte sitio y tono con "editar ficha"; solo pierde
   el empuje al extremo, que ya lo pone el primero de los dos. */
.sj-fp__robot + .sj-fp__plegar { margin-left: 10px; }
.sj-fp--plegada { padding-bottom: 12px; }

/* ===== sj-accesos.css ===== */
/* ============================================================================
   Accesos: quien es quien y que puede hacer (sj-accesos.js).

   Una lista y un formulario. Nada de tarjetas grandes ni color: esta pantalla
   se toca tres veces al ano y lo que importa es leer de un vistazo quien manda.
   El unico color es el del nivel, y solo porque distinguirlo rapido es el
   sentido de la pantalla.
   ========================================================================== */
#sj-accesos { margin: 26px 0 40px; }

.sj-acc__cab h2 {
  margin: 0 0 4px;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--sj-tinta, #0b1930);
}
.sj-acc__cab p {
  margin: 0 0 16px;
  color: var(--sj-tinta-2, #60738a);
  font-size: 0.92em;
}

.sj-acc__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio, 6px);
  background: var(--sj-papel, #fff);
  overflow: hidden;
}
.sj-acc__p {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sj-linea, #dce5ef);
}
.sj-acc__p:last-child { border-bottom: 0; }

.sj-acc__cara { width: 30px; height: 30px; border-radius: 50%; }
.sj-acc__nom { display: flex; flex-direction: column; line-height: 1.25; }
.sj-acc__nom small { color: var(--sj-tinta-3, #8094aa); font-size: 0.82em; }

.sj-acc__rol {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.76em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.sj-acc__rol--dueno   { color: var(--sj-azul, #087aa8); }
.sj-acc__rol--admin   { color: var(--sj-ambar, #9a6b12); }
.sj-acc__rol--usuario { color: var(--sj-tinta-3, #8094aa); }

.sj-acc__sel {
  padding: 5px 8px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.86em;
}
.sj-acc__sel:disabled { opacity: 0.5; }

/* ------------------------------------------------------------------- alta */

.sj-acc__alta {
  padding: 18px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio, 6px);
  background: var(--sj-fondo, #f5f8fc);
}
.sj-acc__alta h3 {
  margin: 0 0 12px;
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1.1em;
  font-weight: 400;
}
.sj-acc__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.sj-acc__campos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sj-tinta-2, #60738a);
}
.sj-acc__campos input,
.sj-acc__campos select {
  padding: 7px 10px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0b1930);
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}
.sj-acc__campos input:focus,
.sj-acc__campos select:focus {
  outline: none;
  border-color: var(--sj-azul, #087aa8);
}

.sj-acc__nota,
.sj-acc__cerrado {
  margin: 12px 0 0;
  color: var(--sj-tinta-2, #60738a);
  font-size: 0.86em;
}
.sj-acc__cerrado {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--sj-ambar, #9a6b12);
  background: var(--sj-papel, #fff);
}

.sj-acc__crear {
  margin-top: 12px;
  padding: 8px 18px;
  border: 1px solid var(--sj-azul, #087aa8);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}
.sj-acc__crear:hover { background: var(--sj-azul-alto, #066288); }

.sj-acc__estado {
  margin-left: 12px;
  font-size: 0.86em;
  color: var(--sj-tinta-2, #60738a);
}
.sj-acc__estado--mal { color: var(--sj-rojo, #c0444a); }

/* ===== sj-arrastre.css ===== */
/* ============================================================================
   Las tareas como fichas que se arrastran (sj-arrastre.js).

   El gesto tiene que verse, pero la lista NO puede convertirse en un tablero de
   juguete: se trabaja con ella todos los dias. Asi que en reposo no cambia
   nada; todo lo de aqui aparece durante el arrastre y desaparece al soltar.
   ========================================================================== */

/* La mano solo avisa de que se puede agarrar cuando el puntero esta encima. */
.sj-tarea[draggable="true"] { cursor: grab; }
.sj-tarea[draggable="true"]:active { cursor: grabbing; }

/* La ficha en viaje: se vacia de peso para que lo que se mire sea el hueco. */
.sj-arr--viajando {
  opacity: 0.4;
  transform: scale(0.99);
}

/* Mientras se guarda, la ficha se queda quieta y apagada: si algo falla, el
   aviso lo dira y la pagina se repintara con lo que diga el servidor. */
.sj-arr--guardando {
  opacity: 0.55;
  pointer-events: none;
}

/* La raya que ensena donde va a caer. Del color del grupo que la recibe, para
   que se lea como "aqui dentro" y no como una linea suelta. */
.sj-arr__raya {
  height: 0;
  margin: -1px 0;
  border-top: 2px solid var(--sj-gr-color, var(--sj-azul, #087aa8));
  border-radius: 2px;
  position: relative;
}
.sj-arr__raya::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sj-gr-color, var(--sj-azul, #087aa8));
}

/* El grupo que va a recibir la ficha. Un fondo tenue y su color en el borde:
   suficiente para saber donde se suelta, sin que la lista se mueva ni un pixel
   (cualquier cambio de alto haria bailar las filas bajo el puntero). */
.sj-grupo--recibe {
  background: color-mix(in srgb, var(--sj-gr-color, #087aa8) 7%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--sj-gr-color, #087aa8) 35%, transparent);
  border-radius: var(--sj-radio, 6px);
}

/* Durante el arrastre no se selecciona texto por accidente. */
html.sj-arrastrando, html.sj-arrastrando * {
  user-select: none;
  -webkit-user-select: none;
}

/* El aviso de lo que paso. Abajo a la izquierda, lejos del robot, que vive en
   la esquina contraria. */
.sj-arr__aviso {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  max-width: 420px;
  padding: 9px 14px;
  border-radius: var(--sj-radio, 6px);
  border: 1px solid var(--sj-linea, #dce5ef);
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta, #0b1930);
  box-shadow: var(--sj-sombra-m, 0 6px 16px rgba(11, 25, 48, .07));
  font-size: 0.9em;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sj-arr__aviso--visible { opacity: 1; transform: translateY(0); }
.sj-arr__aviso--mal {
  border-color: var(--sj-rojo, #c0444a);
  color: var(--sj-rojo, #c0444a);
}

/* Teclado: la ficha enfocada se ve, que es como se sabe cual se va a mover. */
.sj-tarea[draggable="true"]:focus-visible {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
}

/* La sangria de la ficha -----------------------------------------------------

   Una tarea puede colgar de otra, y el nivel se ve con sangria y con un codo,
   como en un esquema. Se pidio el gesto -mover de lado para cambiar de nivel-
   y un gesto cuyo resultado no se ve es un gesto que nadie usa. */
.sj-tarea[data-nivel="2"] { padding-left: calc(26px + 14px); position: relative; }
.sj-tarea[data-nivel="2"]::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 50%;
  width: 10px;
  border-left: 1px solid var(--sj-linea-2, #c4d2e0);
  border-bottom: 1px solid var(--sj-linea-2, #c4d2e0);
  border-bottom-left-radius: 4px;
  pointer-events: none;
}

/* La raya de caida dice a que nivel cae y de quien colgara. Sin las palabras,
   la sangria sola se lee como un adorno. */
.sj-arr__raya[data-dice]::after {
  content: attr(data-dice);
  position: absolute;
  left: 10px;
  top: -9px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sj-gr-color, var(--sj-azul, #087aa8));
  color: #fff;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Los dos botones de nivel en la lista de un tablero -------------------------

   Aparecen al pasar el raton por la fila: la lista ya tiene bastante encima y
   dos flechas permanentes en cada linea serian ruido. Van al final de la fila,
   lejos de la casilla y del titulo, que es donde la mano va a lo de siempre. */
.tasks .single-task { position: relative; }
.sj-niv {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.tasks .single-task:hover .sj-niv,
.tasks .single-task:focus-within .sj-niv { opacity: 1; }
.sj-niv__b {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: var(--sj-radio-s, 4px);
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta-2, #60738a);
  font-size: 0.82em;
  line-height: 1;
  cursor: pointer;
}
.sj-niv__b:hover {
  border-color: var(--sj-azul, #087aa8);
  color: var(--sj-azul, #087aa8);
}

/* ===== sj-subtarea.css ===== */
/* ============================================================================
   La linea para colgar trabajo de un proyecto (sj-subtarea.js).

   Va arriba del todo del bloque de relaciones, antes incluso del "+" de la
   plataforma: es lo que se usa a diario, y las otras diez relaciones son
   excepciones. Una sola fila, sin cabecera y sin caja propia, para que no
   parezca un formulario mas en una pagina que ya tiene varios.
   ========================================================================== */
.sj-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.sj-sub__txt {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 7px 11px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.95em;
}
.sj-sub__txt:focus {
  outline: none;
  border-color: var(--sj-azul, #087aa8);
}
.sj-sub__txt::placeholder { color: var(--grey-400, #8496a8); }
.sj-sub__txt:disabled { opacity: 0.6; }

.sj-sub__donde {
  flex: 0 1 auto;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.9em;
}

.sj-sub__add {
  padding: 7px 14px;
  border: 1px solid var(--sj-azul, #087aa8);
  border-radius: 4px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.sj-sub__add:hover { background: var(--sj-azul-alto, #066288); }

.sj-sub__estado {
  flex: 1 1 100%;
  font-size: 0.85em;
  color: var(--sj-tinta-suave, #5a6b80);
}
.sj-sub__estado--mal { color: var(--sj-rojo, #c0444a); }

/* El bloque propio, el de los proyectos que aun no tienen ninguna tarea.
   Ocupa el sitio que ocuparia el de la plataforma -encima de la ficha- para
   que el orden de la pagina no cambie el dia que aparezca el de verdad. */
.sj-fp__col > .sj-sub__solo { order: 1; }
.sj-sub__solo { margin-bottom: 18px; }
.sj-sub__tit {
  margin: 0 0 10px;
  font-size: 1.15em;
  font-weight: 400;
  color: var(--sj-tinta, #2d3f55);
}

/* El arbol de tareas del proyecto -------------------------------------------

   Se pinta con las mismas filas que el Resumen (.sj-tarea dentro de .sj-grupo)
   para que `sj-arrastre.js` lo reconozca y el gesto funcione aqui sin codigo
   nuevo. Lo de aqui es solo el hueco donde vive. */
.sj-sub__arbol { margin-top: 2px; }
.sj-sub__arbol .sj-grupo { border: 0; }

/* La lista de subtareas de la plataforma, mientras la nuestra este puesta. Se
   esconde, no se borra: si lo nuestro fallara, vuelve sola. */
.sj-sub__nativaOculta { display: none !important; }

.sj-sub__nada {
  margin: 10px 2px 2px;
  color: var(--sj-tinta-3, #8094aa);
  font-size: 0.9em;
  font-style: italic;
}

/* ===== sj-tablero.css ===== */
/* ============================================================================
   Las tarjetas de proyecto encima del tablero (ver sj-tablero.js).
   Paleta de ODJIT; el papel se separa por el filo, no por la sombra.
   El color de cada tarjeta lo pone el guion segun su KPI, en --sj-tb-color.
   ========================================================================== */

.sj-tb { margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }

.sj-tb__cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.sj-tb__titulo {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.15rem;
  color: var(--text, var(--sj-tinta, #0b1930));
}
.sj-tb__resumen { font-size: 0.82rem; color: var(--grey-500, #6e8299); }

.sj-tb__rejilla {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .sj-tb__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .sj-tb__rejilla { grid-template-columns: repeat(3, 1fr); } }

.sj-tb__tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.95rem 0.8rem 1.15rem;
  background: var(--card-background, var(--sj-papel, #fff));
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.sj-tb__tarjeta:hover {
  border-color: var(--sj-tb-color, #087aa8);
  background: var(--sj-sup-2, #edf3fa);
}
.sj-tb__tarjeta:focus-visible {
  outline: 2px solid var(--sj-tb-color, #087aa8);
  outline-offset: 2px;
}

/* El filo de color: es lo que agrupa de un vistazo los proyectos del mismo KPI. */
.sj-tb__filo {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--sj-tb-color, #087aa8);
}

.sj-tb__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.sj-tb__cab h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text, #0b1930);
}

.sj-tb__estado {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.16rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.sj-tb__estado--curso { background: #f8efdc; color: var(--sj-ambar, #9a6b12); }
.sj-tb__estado--ok    { background: #e3f1ee; color: var(--sj-verde, #0e7a64); }

.sj-tb__kpi {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--sj-tb-color, #087aa8);
}

.sj-tb__falta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--sj-rojo, #c0444a);
  font-weight: 600;
}

.sj-tb__linea {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--grey-600, #3f556e);
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* dos lineas: la tarjeta es un resumen, no la ficha */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sj-tb__linea b {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--grey-400, #8496a8);
}

.sj-tb__pie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.sj-tb__caras { display: flex; }
.sj-tb__cara {
  width: 22px; height: 22px;
  margin-right: -6px;             /* se solapan, como en cualquier equipo */
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--card-background, #fff);
  background: var(--sj-sup, #e7eef7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--grey-600, #3f556e);
}
.sj-tb__cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sj-tb__cara--vacia { color: var(--grey-400, #8496a8); font-weight: 400; }

.sj-tb__barra {
  flex: 1;
  height: 5px;
  background: var(--sj-sup, #e7eef7);
  border-radius: 3px;
  overflow: hidden;
}
.sj-tb__barra i { display: block; height: 100%; background: var(--sj-tb-color, #087aa8); }

.sj-tb__cuenta {
  font-family: Georgia, serif;
  font-size: 0.8rem;
  color: var(--grey-500, #6e8299);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== sj-lateral.css ===== */
/* ============================================================================
   Los encabezados de la barra lateral (ver sj-lateral.js).
   Etiquetas de seccion al estilo de la casa: mayusculas, 11 px, letter-spacing
   .09em. Lo que separa los bloques es el aire y un filo fino, no una caja.
   ========================================================================== */

.sj-lat__titulo {
  margin: 1.35rem 0 0.35rem;
  padding: 0.55rem 1rem 0 1.1rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-400, #8496a8);
  user-select: none;
}

/* El primero no lleva filo: ya lo separa la navegacion de arriba. */
.sj-lat__titulo[data-sj-lateral="Filtros"] { border-top: 0; margin-top: 1rem; }

.sj-lat__bloque { margin-top: 0; }

/* ===== sj-rejilla.css ===== */
/* ============================================================================
   La pagina de Proyectos: agrupada y con tarjetas que dicen algo (sj-rejilla.js).

   No se mueve ni un nodo: la aplicacion repinta la rejilla y cualquier
   reordenacion del DOM se perderia. Se agrupa con `order`, que es CSS y aguanta.

   El color y el papel tapiz de cada tarjeta llegan en variables (--sj-p-color,
   --sj-p-foto, --sj-p-fondo) puestas por el guion con window.sjTema: el MISMO
   tablero sale del MISMO color y con el MISMO papel que su tarjeta del Resumen.
   ========================================================================== */

/* ------------------------------------------------- el encabezado de la pagina */

.sj-rej__pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.1rem 0 1rem;
}
.sj-rej__pagina h1 {
  font-family: var(--sj-display, Georgia, serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--sj-navy, #0B1930);
}
.sj-rej__pagina p {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--sj-tinta-3, #8094AA);
  font-variant-numeric: tabular-nums;
}
html.dark .sj-rej__pagina h1 { color: #EFF4FA; }

/* El boton del robot: discreto, de la familia de los botones de la casa
   (radio 3 px, filo y no sombra). El azul solo aparece al pasar la mano. */
.sj-rej__robot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--sj-linea-2, #C4D2E0);
  border-radius: 3px;
  background: var(--sj-papel, #fff);
  color: var(--sj-tinta-2, #60738A);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--sj-trans, .15s), border-color var(--sj-trans, .15s);
}
.sj-rej__robot svg { width: 17px; height: 17px; }
.sj-rej__robot:hover,
.sj-rej__robot:focus-visible {
  color: var(--sj-azul, #087AA8);
  border-color: var(--sj-azul, #087AA8);
}
html.dark .sj-rej__robot { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #B8C7D9; }

/* --------------------------------------------------------------- la rejilla */

ul.project-grid.sj-rej {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
  align-items: stretch;
  /* La hoja de la aplicacion fija el alto de TODAS las filas de la rejilla,
     incluida la del titulo de grupo: de ahi el hueco de 150 px entre el titulo
     y sus tarjetas (medido en pantalla el 2026-11-01). */
  grid-auto-rows: min-content;
}

/* La cabecera de cada grupo ocupa la fila entera, con un punto del color de la
   familia: el color del GRUPO vive aqui, no pegado a cada tarjeta -el filo de
   la tarjeta es ahora del tablero, no del grupo-. */
.sj-rej__cabecera {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.9rem 0 -0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  list-style: none;
}
.sj-rej__cabecera:first-child,
.sj-rej__cabecera[data-sj-cabecera="trabajo"] { margin-top: 0; padding-top: 0; border-top: 0; }

.sj-rej__cabecera span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-400, #8496a8);
}
.sj-rej__cabecera span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 0.45rem;
  vertical-align: 0;
  background: var(--sj-linea-2, #C4D2E0);
}
[data-sj-cabecera="trabajo"] span::before  { background: var(--sj-azul, #087AA8); }
[data-sj-cabecera="equipos"] span::before  { background: var(--sj-verde, #0E7A64); }
[data-sj-cabecera="personas"] span::before { background: var(--grey-400, #8496a8); }
[data-sj-cabecera="filtros"] span::before  { background: var(--sj-ambar, #9A6B12); }

.sj-rej__cabecera small {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.78rem;
  color: var(--grey-400, #8496a8);
  font-variant-numeric: tabular-nums;
}

/* Los contenedores (Equipos, Personas) no se pintan: su contenido ya sale
   bajo su titulo, y como tarjeta solo serian ruido. */
.sj-rej--oculta { display: none !important; }

/* --------------------------------------------------------------- la tarjeta */

/* La tarjeta de la plataforma mide 150 px fijos con el titulo abajo y el resto
   hueco. Se convierte en columna: titulo arriba, y debajo lo que el guion sabe
   del tablero (abiertas, vencidas, barra de avance, caras). El alto fijo lo
   pone el propio <li>, no la tarjeta: sin la regla de abajo, la tarjeta se
   encoge por dentro y el hueco se queda igual (medido en pantalla). */
ul.project-grid.sj-rej > li.project-grid-item {
  height: auto;
  min-height: 0;
}
ul.project-grid.sj-rej .project-card {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: flex-start;
  padding: 0.8rem 0.9rem 0.75rem;
  border: 1px solid var(--sj-linea, #dce5ef);
  /* El filo de arriba es del TABLERO, el mismo que en su tarjeta del Resumen:
     asi las dos pantallas se reconocen como la misma casa. */
  border-top: 3px solid var(--sj-p-color, var(--sj-linea-2, #C4D2E0));
  border-radius: var(--sj-radio, 6px);
  background: var(--sj-papel, #fff);
}
html.dark ul.project-grid.sj-rej .project-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); border-top-color: var(--sj-p-color, rgba(255, 255, 255, .2)); }

/* El papel tapiz: la MISMA receta de tres capas que .sj-proy::before en
   sj-resumen.css (velo diagonal + foto en `luminosity` contra el color del
   tablero + dibujo de respaldo), copiada y no compartida porque cada hoja
   es de su pantalla; si se toca alla, tocar aqui. Solo en tarjetas con
   data-sj-tapiz: a un filtro sin variables, la capa del color le pondria
   un lavado gris encima (la variable cae al gris por defecto). */
ul.project-grid.sj-rej .project-card[data-sj-tapiz]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(104deg, var(--sj-papel, #fff) 0 30%, rgba(255, 255, 255, 0) 82%),
    var(--sj-p-foto, none),
    linear-gradient(var(--sj-p-color, #888), var(--sj-p-color, #888)),
    var(--sj-p-fondo, none);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 118px 118px;
  background-position: center, center, center, 0 0;
  background-blend-mode: normal, luminosity, normal, normal;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
ul.project-grid.sj-rej .project-card[data-sj-tapiz]:hover::before { opacity: 0.45; }

/* El contenido, por encima del papel; el enlace de la plataforma, encima de
   todo: la tarjeta entera sigue siendo un solo destino de click. */
ul.project-grid.sj-rej .project-card > * { position: relative; z-index: 1; }
ul.project-grid.sj-rej .project-card .project-button { position: absolute; inset: 0; z-index: 2; }

ul.project-grid.sj-rej .project-card .project-title {
  font-family: var(--sj-display, Georgia, serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sj-navy, #0B1930);
  order: -1;                      /* arriba, no al fondo */
}
html.dark ul.project-grid.sj-rej .project-card .project-title { color: #EFF4FA; }
ul.project-grid.sj-rej .project-card .project-background { display: none; }
ul.project-grid.sj-rej .project-card:hover {
  border-color: var(--sj-p-color, var(--sj-azul, #087aa8));
}

/* ------------------------------------------------------ lo que dice la tarjeta */

.sj-rej__info {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: auto;               /* pegado abajo; el titulo respira arriba */
  padding-top: 0.35rem;
}
.sj-rej__linea { font-size: 0.74rem; color: var(--sj-tinta-2, #60738A); }
.sj-rej__linea--vacia { color: var(--sj-tinta-3, #8094AA); font-style: italic; }
.sj-rej__venc { color: var(--sj-rojo, #C0444A); font-weight: 600; }
html.dark .sj-rej__linea { color: #B8C7D9; }

.sj-rej__barra {
  height: 5px;
  border-radius: 999px;
  background: var(--sj-fondo-2, #E7EEF7);
  overflow: hidden;
}
html.dark .sj-rej__barra { background: rgba(255, 255, 255, .1); }
.sj-rej__barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sj-p-color, var(--sj-azul, #087AA8));
}

.sj-rej__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 22px;
}
.sj-rej__cuenta {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.8rem;
  color: var(--sj-tinta-2, #60738A);
  font-variant-numeric: tabular-nums;
}
html.dark .sj-rej__cuenta { color: #B8C7D9; }

.sj-rej__caras { display: flex; align-items: center; }
.sj-rej__cara {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  margin-left: -6px;
  border: 1.5px solid var(--sj-papel, #fff);
  background: var(--sj-fondo-2, #E7EEF7);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--sj-tinta-2, #60738A);
}
.sj-rej__cara:first-child { margin-left: 0; }
.sj-rej__cara img { width: 100%; height: 100%; display: block; }
.sj-rej__cara--mas { font-size: 9.5px; letter-spacing: -0.02em; }
html.dark .sj-rej__cara { border-color: #1a2636; }

/* ------------------------------------------------------------------ filtros */

/* Un filtro es una vista guardada, no trabajo: tarjeta compacta, sin serif y
   sin numeros fingidos, con el ambar de la familia solo como acento.
   Los selectores repiten `ul.project-grid.sj-rej` a proposito: las reglas base
   de la tarjeta lo llevan y pesan 0-4-1; con `.sj-rej--filtros .project-card` a
   secas (0-2-1) los filtros se quedaban a 96 px y en serif (medido en la web
   el 2026-11-02 con los estilos inyectados a mano). */
ul.project-grid.sj-rej .sj-rej--filtros .project-card {
  min-height: 0;
  padding: 0.55rem 0.8rem;
  border-top-width: 1px;
}
ul.project-grid.sj-rej .sj-rej--filtros .project-card .project-title {
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--sj-tinta-2, #60738A);
}
ul.project-grid.sj-rej .sj-rej--filtros .project-card:hover {
  border-color: var(--sj-ambar, #9A6B12);
}
ul.project-grid.sj-rej .sj-rej--filtros .project-card:hover .project-title { color: var(--sj-tinta, #0B1930); }
html.dark ul.project-grid.sj-rej .sj-rej--filtros .project-card:hover .project-title { color: #EFF4FA; }

/* ===== sj-kanban.css ===== */
/* ============================================================================
   Las tarjetas del kanban, con la cara de su proyecto (ver sj-kanban.js).
   Se adorna la tarjeta de la plataforma; no se dibuja otra, para que arrastrar
   entre columnas siga siendo suyo.
   ========================================================================== */

.task.kanban-card.sj-kan {
  /* Una franja arriba y un filo a la izquierda, los dos del color del KPI: con
     solo el filo de 4 px el color no se leia en una columna estrecha. */
  border-left: 4px solid var(--sj-kan-color, #6e8299);
  border-top: 3px solid var(--sj-kan-color, #6e8299);
  padding-left: 2px;
}
.task.kanban-card.sj-kan:hover {
  box-shadow: 0 0 0 1px var(--sj-kan-color, #6e8299);
}

.sj-kan__extra {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sj-kan__kpi {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sj-kan-color, #6e8299);
  /* El KPI sobre un lavado de su propio color: se reconoce el grupo de un
     vistazo sin leer la palabra. */
  background: color-mix(in srgb, var(--sj-kan-color, #6e8299) 12%, transparent);
  padding: 0.14rem 0.4rem;
  border-radius: 3px;
}

.sj-kan__dolor {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--grey-500, #6e8299);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sj-kan__pie { display: flex; align-items: center; gap: 0.45rem; }

.sj-kan__caras { display: flex; flex: none; }
.sj-kan__cara {
  width: 19px; height: 19px;
  margin-right: -5px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--card-background, #fff);
  background: var(--sj-sup, #e7eef7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--grey-600, #3f556e);
}
.sj-kan__cara img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sj-kan__barra {
  flex: 1;
  height: 4px;
  background: var(--sj-sup, #e7eef7);
  border-radius: 3px;
  overflow: hidden;
}
.sj-kan__barra i { display: block; height: 100%; background: var(--sj-kan-color, #087aa8); }

.sj-kan__cuenta {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.72rem;
  color: var(--grey-500, #6e8299);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.sj-kan__falta {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sj-rojo, #c0444a);
}

/* El proyecto recien creado. No es un error ni un aviso rojo: es un proyecto
   que acaba de nacer, asi que se marca en el gris de la interfaz y se le dice a
   la persona lo unico que tiene que hacer con el. */
.sj-kan__kpi--nuevo {
  background: var(--sj-tenue, #eef2f7);
  color: var(--sj-tinta-suave, #5a6b80);
  border: 1px dashed var(--sj-linea, #cfd9e4);
}
.sj-kan__dolor--pide {
  color: var(--sj-tinta-suave, #6b7a8d);
  font-style: italic;
}

/* El robot vive fijo en la esquina inferior derecha (sj-chat.css) y TAPABA las
   tarjetas de la ultima columna: senalado en la revision del 2026-11-02 y
   medido entonces (el muneco son ~146x146 px sobre la esquina). No se mueve el
   robot -es la puerta del asistente en todas las pantallas-: se deja un hueco
   al final del carril, del ancho del muneco, para que la ultima columna pueda
   desplazarse y leerse entera. Las dos formas porque el contenedor del kanban
   es un flex con desplazamiento horizontal y algun navegador ignora el padding
   final de un contenedor que se desplaza; el ::after es un hijo de verdad y no
   se lo salta nadie. */
.kanban { padding-right: 170px; }
.kanban::after { content: ""; flex: 0 0 170px; }
@media (max-height: 620px), (max-width: 560px) {
  /* El robot encoge en pantallas chicas (sj-chat.css): el hueco tambien. */
  .kanban { padding-right: 120px; }
  .kanban::after { flex-basis: 120px; }
}

/* ===== sj-etiquetas.css ===== */
/* ============================================================================
   Las etiquetas con su simbolo y por familias (ver sj-etiquetas.js).
   ========================================================================== */

.sj-et__ico {
  margin-right: 0.28em;
  font-size: 0.92em;
  line-height: 1;
  /* El simbolo no se colorea con el color de la etiqueta: pierde su dibujo. */
  filter: saturate(1.1);
}

/* En la pantalla de etiquetas: una rejilla con sus titulos de familia. */
.labels-list.sj-et__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.sj-et__fam {
  flex-basis: 100%;
  margin: 1.1rem 0 0.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.sj-et__fam:first-child,
.sj-et__fam[data-sj-fam="trabajo"] { margin-top: 0.2rem; padding-top: 0; border-top: 0; }

.sj-et__fam span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-400, #8496a8);
}
.sj-et__fam small {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.78rem;
  color: var(--grey-400, #8496a8);
  font-variant-numeric: tabular-nums;
}

/* Un poco mas de aire dentro del chip, que con el simbolo iba apretado. */
.labels-list.sj-et__lista .tag { padding-left: 0.5em; padding-right: 0.6em; }

/* ===== sj-highlights.css ===== */
/* ============================================================================
   La pantalla de Highlights (ver sj-highlights.js). Paleta de ODJIT.
   ========================================================================== */

.sj-hl-abierto { overflow: hidden; }

.sj-hl { position: fixed; inset: 0; z-index: 60; display: flex; }
.sj-hl__fondo { position: absolute; inset: 0; background: rgba(11, 25, 48, 0.45); }

.sj-hl__caja {
  position: relative;
  margin: auto;
  width: min(1180px, 96vw);
  height: min(92vh, 900px);
  background: var(--site-background, #f5f8fc);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 60px -24px rgba(11, 25, 48, 0.6);
}

.sj-hl__cab {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: var(--sj-navy, #0b1930);
  color: #e8eff6;
}
.sj-hl__cab h2 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", serif;
  font-weight: 400;
  font-size: 1.25rem;
}
.sj-hl__rango { font-size: 0.85rem; color: #9fb4ca; }
.sj-hl__x {
  margin-left: auto;
  background: none;
  border: 0;
  color: #9fb4ca;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.sj-hl__x:hover { color: #fff; }

.sj-hl__cuerpoPanel {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 900px) {
  .sj-hl__cuerpoPanel { grid-template-columns: 1.35fr 1fr; }
}

.sj-hl__col { padding: 1rem 1.2rem; overflow-y: auto; }
.sj-hl__col--lado {
  background: var(--card-background, #fff);
  border-left: 1px solid var(--sj-linea, #dce5ef);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sj-hl__lab {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-400, #8496a8);
}
.sj-hl__lab:first-child { margin-top: 0; }
.sj-hl__lab small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.sj-hl__fechas { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sj-hl__fechas label,
.sj-hl__campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--grey-500, #6e8299);
}
.sj-hl input,
.sj-hl textarea {
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.38rem 0.5rem;
  color: var(--text, #0b1930);
  background: var(--card-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
}
.sj-hl input:focus,
.sj-hl textarea:focus {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
}

.sj-hl__cands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sj-hl__cand {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  background: var(--card-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
}
.sj-hl__cand:hover { border-color: var(--sj-azul, #087aa8); }
.sj-hl__cand--on {
  border-color: var(--sj-azul, #087aa8);
  box-shadow: inset 3px 0 0 var(--sj-azul, #087aa8);
}
.sj-hl__cand--cojo { opacity: 0.72; }

.sj-hl__orden {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  background: var(--sj-sup, #e7eef7);
  color: var(--grey-500, #6e8299);
}
.sj-hl__cand--on .sj-hl__orden { background: var(--sj-azul, #087aa8); color: #fff; }

.sj-hl__cuerpo h4 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 0.95rem;
}
.sj-hl__meta { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--grey-500, #6e8299); }
.sj-hl__falta {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sj-rojo, #c0444a);
}

.sj-hl__estado { display: flex; gap: 0.25rem; }
.sj-hl__estado button {
  font: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  background: var(--card-background, #fff);
  color: var(--grey-500, #6e8299);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
}
.sj-hl__estado button[aria-pressed="true"] {
  background: var(--sj-ambar, #9a6b12);
  border-color: var(--sj-ambar, #9a6b12);
  color: #fff;
  font-weight: 600;
}
.sj-hl__estado button[data-estado="CULMINADO"][aria-pressed="true"] {
  background: var(--sj-verde, #0e7a64);
  border-color: var(--sj-verde, #0e7a64);
}

.sj-hl__nota { margin: 0; font-size: 0.76rem; color: var(--grey-400, #8496a8); }

.sj-hl__pend {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sj-hl__pend li {
  font-size: 0.8rem;
  color: var(--sj-ambar, #9a6b12);
  padding: 0.3rem 0.5rem;
  background: #f8efdc;
  border-radius: 3px;
}

.sj-hl__generar {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
  background: var(--sj-azul, #087aa8);
  border: 1px solid var(--sj-azul, #087aa8);
  color: #fff;
  border-radius: 3px;
}
.sj-hl__generar:hover { background: var(--sj-azul-alto, #066288); }

.sj-hl__aviso {
  margin: 0;
  font-size: 0.82rem;
  color: var(--grey-500, #6e8299);
  min-height: 1.1rem;
}
.sj-hl__aviso--ok { color: var(--sj-verde, #0e7a64); }
.sj-hl__aviso--mal { color: var(--sj-rojo, #c0444a); }

.sj-hl__lams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sj-hl__lam {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  font-size: 0.84rem;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
}
.sj-hl__ver { margin-left: 0.4rem; font-size: 0.72rem; color: var(--grey-400, #8496a8); }
.sj-hl__titulos { margin: 0.2rem 0 0; font-size: 0.74rem; color: var(--grey-400, #8496a8); }
.sj-hl__acciones { display: flex; gap: 0.25rem; flex: none; }
.sj-hl__acciones button {
  font: inherit;
  font-size: 0.74rem;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  background: var(--card-background, #fff);
  color: var(--sj-azul, #087aa8);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
}
.sj-hl__acciones button:hover { border-color: currentColor; }
.sj-hl__borrar { color: var(--sj-rojo, #c0444a); }
.sj-hl__vacio { font-size: 0.82rem; color: var(--grey-400, #8496a8); }

.sj-hl__compartir {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 25, 48, 0.4);
}
.sj-hl__compartirCaja {
  background: var(--card-background, #fff);
  padding: 1.1rem 1.3rem;
  border-radius: 5px;
  width: min(420px, 90%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sj-hl__compartirCaja h3 {
  margin: 0 0 0.3rem;
  font-family: Georgia, serif;
  font-weight: 400;
}
.sj-hl__compartirCaja label {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.88rem;
}
.sj-hl__compartirPie {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.7rem;
}
.sj-hl__compartirPie button {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--sj-linea, #dce5ef);
  background: var(--card-background, #fff);
}

/* El boton de sugerir y su pista ------------------------------------------
   La sugerencia se dice que lo es: la persona la edita o la tira. Y en cuanto
   escribe algo, la pista desaparece: ya no es una propuesta, es suyo. */
.sj-hl__cabCampo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.sj-hl__sug {
  font: inherit;
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--sj-azul, #087aa8);
  background: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  padding: 0 0 1px;
  cursor: pointer;
}
.sj-hl__sug:hover { color: var(--sj-azul-alto, #066288); }
.sj-hl__sug:disabled { color: var(--grey-400, #8496a8); cursor: progress; }
.sj-hl__pista {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--grey-400, #8496a8);
  min-height: 0.9rem;
}
.sj-hl__pista--sug { color: var(--sj-azul, #087aa8); }
.sj-hl__pista--mal { color: var(--sj-rojo, #c0444a); }

/* Hablarlo con el robot ----------------------------------------------------
   La conversacion vive DEBAJO del campo que se esta redactando: lo que se
   discute y donde acaba estan a la vista a la vez. */
.sj-hl__charla {
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--sj-sup-2, #edf3fa);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sj-hl__dialogo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 190px;
  overflow-y: auto;
}
.sj-hl__msg {
  font-size: 0.82rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  max-width: 92%;
}
.sj-hl__msg--robot {
  background: var(--card-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  color: var(--text, #0b1930);
  align-self: flex-start;
}
.sj-hl__msg--usuario {
  background: var(--sj-azul, #087aa8);
  color: #fff;
  align-self: flex-end;
}

.sj-hl__propuesta {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--card-background, #fff);
  border-left: 3px solid var(--sj-azul, #087aa8);
  border-radius: 0 4px 4px 0;
}
.sj-hl__propuesta p {
  margin: 0;
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text, #0b1930);
}
.sj-hl__usar {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  flex: none;
  background: var(--sj-azul, #087aa8);
  border: 1px solid var(--sj-azul, #087aa8);
  color: #fff;
  border-radius: 3px;
}
.sj-hl__usar:hover { background: var(--sj-azul-alto, #066288); }

.sj-hl__decir { display: flex; gap: 0.35rem; }
.sj-hl__decir input { flex: 1; }
.sj-hl__decir button {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  background: var(--card-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
  color: var(--sj-azul, #087aa8);
}