/* =====================================================================
   Estilos propios de la aplicacion, encima de styles.css (el de los mockups).
   Aqui va solo lo que los mockups no cubren: el acceso, los avisos de estado
   y el letrero de modo observacion.
   ===================================================================== */

/* ---------------------------------------------------------------- acceso */
body.acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--bg-page);
}
.acceso-caja {
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.acceso-caja h1 {
  margin: 0 0 4px;
  font-size: 20px;
}
.acceso-caja p.muted {
  margin: 0 0 20px;
}
.campo {
  display: block;
  margin-bottom: 14px;
}
.campo span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
}
.campo input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.acceso-caja button {
  width: 100%;
  margin-top: 6px;
}

/* ---------------------------------------------------------------- avisos */
.aviso {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin: 0 0 16px;
}
.aviso.error {
  background: var(--aviso-error-bg);
  border: 1px solid var(--aviso-error-bd);
  color: var(--aviso-error-fg);      /* 7,3:1 sobre el fondo */
}
.aviso.info {
  background: var(--aviso-info-bg);
  border: 1px solid var(--aviso-info-bd);
  color: var(--aviso-info-fg);      /* 8,1:1 sobre el fondo */
}

/* Letrero permanente mientras la mesa NO responde correos.
   Esta arriba del todo y en todas las pantallas a proposito: un agente no
   puede dar por hecho que el cliente ya recibio nuestro acuse. */
.modo-observacion {
  background: var(--banner-bg);
  border-bottom: 1px solid var(--banner-bd);
  color: var(--banner-fg);       /* 7,6:1 sobre el fondo */
  padding: 8px 20px;
  font-size: 12.5px;
}
.modo-observacion b {
  color: var(--banner-fg);
}

/* ---------------------------------------------------------------- estados de carga */
.cargando,
.vacio {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-secondary);       /* 4,9:1 sobre blanco */
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- detalle */
.volver {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
}
.salir {
  background: none;
  border: 0;
  color: var(--enlace);
  font: inherit;
  cursor: pointer;
  padding: 0 0 0 12px;
}
.salir:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- acciones del agente */
.campo select,
.campo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
  background: var(--input-bg);
}
.campo textarea {
  resize: vertical;
  min-height: 80px;
}
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.campo select:disabled,
.campo textarea:disabled,
.btn:disabled {
  opacity: .6;
  cursor: progress;
}

/* Dominios de una empresa: cada uno con su × para quitarlo. */
.quitar-dominio {
  margin-left: 5px;
  border: 0;
  background: none;
  color: var(--aviso-error-fg);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.quitar-dominio:hover {
  text-decoration: underline;
}
.quitar-dominio:disabled {
  opacity: .5;
  cursor: progress;
}

/* La nota interna se distingue del correo a simple vista: confundirla con una
   respuesta al cliente es el error caro de esta pantalla. */
.email.nota {
  background: var(--nota-bg);
  border-left: 3px solid var(--nota-bd);
}
.etiqueta-nota {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--nota-chip-bg);
  color: var(--nota-chip-fg);      /* 7,1:1 sobre ese fondo */
  font-size: 11.5px;
  font-weight: 600;
}

/* El HTML del correo entra ya sanitizado por el servidor; aun asi se le pone
   un techo para que una tabla enorme no rompa la pagina. */
.email .mb img {
  max-width: 100%;
  height: auto;
}
.email .mb table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* ---------------------------------------------------------------- selección de vista
   La miniatura de cada vista se dibuja con los colores del tema que representa,
   no con los del tema puesto: si las tres se vieran iguales no habría nada que
   comparar, que es justo lo que la pantalla tiene que dejar hacer. Por eso cada
   `.previa` lleva su propio data-theme y toma los tokens de ese bloque. */
.vista-card.on {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.previa {
  display: grid;
  grid-template-columns: 34px 1fr;
  height: 92px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-page);
}
.previa-side {
  background: var(--bg-sidebar);
  padding: 7px 5px;
}
.previa-side span {
  display: block;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 2px;
  background: var(--text-secondary);
  opacity: .55;
}
.previa-side span.on {
  background: var(--bg-sidebar-active);
  opacity: 1;
}
.previa-body { padding: 7px 8px; }
.previa-top {
  height: 11px;
  border-radius: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  margin-bottom: 7px;
}
.previa-fila {
  display: grid;
  grid-template-columns: 20px 1fr 26px;
  gap: 5px;
  align-items: center;
  margin-bottom: 6px;
}
.previa-fila i { display: block; height: 6px; border-radius: 3px; }
.previa-chip { background: var(--chip-mail-bg); }
.previa-txt { background: var(--text-secondary); opacity: .45; }
.previa-sla { background: var(--bar-track); }
.previa-sla.ok { background: var(--status-success); }
.previa-sla.warn { background: var(--status-warning); }
.previa-sla.late { background: var(--status-danger); }

/* Botón de pantalla completa en la cabecera. Solo aparece si la sesión se abrió
   pidiéndola y el navegador la soltó por el camino; a pantalla completa no está. */
.btn.pantalla-completa {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
}
.btn.pantalla-completa svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Logo de Automatiza en la pantalla de acceso.
   No es un <img>: el unico archivo que hay es el logo BLANCO sobre
   transparente, y la tarjeta de acceso es clara en dos de las tres vistas y
   oscura en la tercera. Puesto como imagen, se veria en una y desapareceria en
   la otra. Usado como MASCARA, lo que se pinta es el color del tema
   (--text-primary), asi que el mismo archivo sirve para las tres y no hay dos
   versiones del logo que mantener sincronizadas. */
.acceso-logo {
  width: 190px;
  height: 41px;   /* 190 / 4,68, la proporcion del logo sin el cubo */
  margin: 0 0 18px;
  background-color: var(--text-primary);
  -webkit-mask: url("logo-automatiza.png?v=2") no-repeat left center / contain;
  mask: url("logo-automatiza.png?v=2") no-repeat left center / contain;
}

/* "Recordar la sesión" del acceso. Va DESMARCADA por defecto a propósito: una
   sesión de 30 días en un equipo compartido deja la mesa abierta a quien se
   siente después, con los datos de los clientes dentro. Por eso la advertencia
   va junto a la casilla y no escondida en otra pantalla. */
.recordar {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 13px;
  cursor: pointer;
}
.recordar input {
  margin: 2px 0 0;
  flex: none;
}
.recordar small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- menú del usuario
   Cuelga del icono de la barra superior y reúne lo que es de la persona y no
   del trabajo: su contraseña, su vista y salir. Estas tres opciones ya NO están
   en la barra lateral: tenerlas en dos sitios obliga a mantener dos menús que
   dicen lo mismo, y tarde o temprano uno se queda atrás. */
.usuario {
  position: relative;
  flex: none;
}
.usuario .av {
  cursor: pointer;
  margin-right: 0;
}
.usuario .av:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.usuario-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 230px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .16);
}
.usuario-ficha {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
  font-size: 13px;
}
.usuario-ficha small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
  word-break: break-all;
}
.usuario-op {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}
.usuario-op:hover {
  background: var(--bg-soft);
}
.usuario-op.salir-op {
  color: var(--status-danger);
}

/* Diálogo de cambio de contraseña. */
.dialogo {
  width: min(380px, calc(100vw - 32px));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 22px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.dialogo::backdrop {
  background: rgba(16, 24, 40, .45);
}
.dialogo h2 {
  margin: 0 0 14px;
  font-size: 16px;
}

/* ---------------------------------------------------------------- indicadores en la barra
   Los contadores de la bandeja viven ahora en la barra superior. La barra pasa a
   poder envolver y los indicadores ocupan una línea entera: apretados junto al
   título, el buscador y el botón, se comerían el buscador en cuanto la pantalla
   fuera un poco más estrecha. */
/* La barra superior queda fija: al bajar por una bandeja larga, los contadores,
   el buscador y el menú del usuario siguen a mano.
   Lleva fondo propio y un z-index por debajo del menú del usuario (40) y por
   encima de la tabla: sin fondo, el contenido se vería por debajo al pasar. */
header.top {
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-surface);
}
header.top .filters {
  flex-basis: 100%;
  margin: 2px 0 0;
}

/* ---------------------------------------------------------------- indicadores del día
   Lo que la persona lleva hecho hoy y cuándo entró. Todos con icono: en una
   barra estrecha el número suelto no dice de qué es. La definición exacta de
   cada uno va en el title, porque «recibidos» y «atendidos» admiten varias
   lecturas y la de esta pantalla es una sola. */
.hoy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.hoy-dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: help;
}
.hoy-ico,
.chip-ico {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
@media (max-width: 1100px) {
  /* Con poco ancho lo primero que sobra es la hora del último acceso: los dos
     contadores del día son lo que se mira a diario. */
  .hoy-dato:last-child { display: none; }
}
@media (max-width: 860px) {
  .hoy { display: none; }
}

/* El logo del menú lleva a la bandeja de tickets, en la misma pestaña.
   El enlace es relativo y no la URL completa: lleva al mismo sitio y, además,
   sigue funcionando si la aplicación se sirve desde otra carpeta o desde una
   copia local, donde el dominio escrito a mano sacaría al agente fuera.
   Con la barra encogida el logo queda invisible, así que el enlace también deja
   de aceptar clics: un destino que no se ve no debe poder pulsarse por error. */
.brand-logo-enlace {
  display: block;
}
.app.side-min .brand-logo-enlace {
  pointer-events: none;
}

/* Fila seleccionada del maestro, para que se vea qué concepto está mostrando el
   detalle de la derecha. Sin esto, al asignar un responsable no queda claro a
   cuál de los conceptos se le está asignando. */
tr.sel td {
  background: var(--primary-soft);
}

/* Pie de la bandeja: cuántos tickets se están viendo, de cuántos, y con qué
   tamaño de página. Va debajo de la tabla y no en la barra superior porque
   describe a la tabla: leerlo justo donde termina la lista es lo natural.
   Los colores salen de los tokens de tema, para que las tres vistas lo hereden
   sin escribir aquí ningún color fijo. */
.pie-tabla {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.por-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
}
.por-pagina select {
  width: auto;
  min-width: 72px;
  padding: 5px 8px;
  font-size: 13px;
}
/* Los botones quedan a la derecha; con la ventana angosta el flex-wrap los baja
   a su propia línea en vez de apretar el resto. */
.paginador {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
/* Los botones del pie (invertir el orden, pasar de página) van más bajos que
   los de la cabecera: acompañan a los selectores, no compiten con ellos. */
.pie-tabla .btn {
  padding: 5px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.paginador .btn[disabled] {
  opacity: .45;
  cursor: default;
}

/* Marca de que el cliente escribió después de la última respuesta. Es ámbar y
   no roja: significa que hay algo pendiente de contestar, no que se haya
   incumplido un plazo; lo vencido ya lo dice la barra de SLA. */
.nuevo-mensaje {
  display: inline-block;
  vertical-align: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  background: var(--chip-tel-bg);
  color: var(--chip-tel-fg);
}

/* Reporte «Estado de Clientes»: lista de clientes a la izquierda y tabla a la
   derecha, como el diseño. La lista NO es el menú lateral: el menú dice a qué
   pantalla ir, y esto filtra la pantalla en la que ya se está.
   En pantalla angosta pasa a una sola columna y la lista queda arriba, porque
   una tabla de siete columnas ya no deja sitio para nada al lado. */
.reporte {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .reporte { grid-template-columns: 1fr; }
}
.clientes-rail {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.clientes-rail h2 {
  margin-top: 0;
}

/* Cada cliente es un botón y no un enlace: no lleva a otra página, cambia lo
   que muestra esta. Un enlace prometería una dirección que no existe. */
.cli {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.cli:hover {
  background: var(--bg-row-hover);
}
.cli.on {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.cli-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El número es lo abierto. Se alinea a la derecha para poder compararlos de un
   vistazo de arriba abajo, que es para lo que está el reporte. */
.cli-n {
  flex: none;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.cli.on .cli-n {
  background: var(--primary);
  color: #fff;
}

/* --------------------------------------------------- riel de módulos
   Franja de iconos a la izquierda del menú, con los módulos que la persona
   puede abrir (Mesa de Ayuda / Proyectos / Configuración). El menú de al lado
   sigue siendo el del módulo en el que se está.
   Es más oscuro que el menú para que se lean como dos niveles y no como una
   sola barra ancha; el color sale del token del tema, no está escrito aquí. */
.app.con-riel {
  grid-template-columns: 72px 220px 1fr;
}
.app.con-riel.side-min {
  grid-template-columns: 72px 64px 1fr;
}
nav.riel {
  background: var(--riel);
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.riel-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 9px 4px;
  border-radius: 8px;
  color: var(--sidebar-muted);
  text-decoration: none;
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
}
.riel-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}
.riel-item.on {
  background: var(--bg-sidebar-active);
  color: #fff;
}
.riel-ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* En pantalla angosta el menú lateral ya se oculta; el riel también, o quedaría
   una franja de iconos sin el menú al que pertenecen. */
@media (max-width: 900px) {
  .app.con-riel, .app.con-riel.side-min { grid-template-columns: 1fr; }
  nav.riel { display: none; }
}

/* --------------------------------------------------- tableros de Proyectos
   Rejilla de tarjetas de tablero. Se adapta sola al ancho: con `auto-fill` y un
   mínimo, en una pantalla angosta caen a una columna sin necesidad de más
   consultas de medios. */
.tableros-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tablero-caja {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  /* Sin `overflow:hidden` las esquinas de la banda de color sobresalen del
     borde redondeado del recuadro. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Al pasar por encima, el borde toma el color del tablero: es el mismo dato
   que la banda, dicho otra vez donde el cursor ya está mirando. */
.tablero-caja:hover {
  border-color: var(--c);
}
/* La banda de color del diseño. El color viaja en `--c`, que pone cada
   tarjeta: así el CSS no necesita una regla por color. */
.tablero-banda {
  height: 74px;
  background: var(--c);
  padding: 8px 10px;
  text-align: right;
}
.tablero-cuerpo {
  padding: 12px 14px;
}
.tablero-cab {
  display: flex;
  align-items: start;
  gap: 8px;
}
.tablero-nombre {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  text-decoration: none;
}
.tablero-nombre:hover {
  color: var(--primary);
}
/* La estrella es un botón, no un enlace: no lleva a ninguna parte, cambia algo.
   Sin borde ni fondo para que se lea como la marca que es. */
.estrella {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  padding: 0 2px;
  color: #fff;
  opacity: .75;
}
.estrella:hover, .estrella.on {
  opacity: 1;
}
.tablero-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* --------------------------------------------------- tablero Kanban
   Diseño del mockup: el área del tablero toma el color del tablero, la barra
   de arriba va sobre ese color y las listas son cajas claras encima.
   El color entra por `--c`, que pone la pantalla; así el CSS no necesita una
   regla por color. */
.kb-area {
  background: var(--c);
  border-radius: 12px;
  overflow: hidden;
  /* Se sale del margen del <main> para ocupar el ancho completo, como en el
     diseño, sin tener que cambiar el layout de todas las pantallas. */
  margin: -4px 0 0;
}
/* Un velo oscuro sobre el color del tablero, en vez de un color propio: así la
   barra se ve bien sobre los cinco colores sin definir cinco variantes. */
.kb-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(15, 34, 51, .28);
  color: #fff;
}
.kb-barra h2 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
/* Los botones de la barra son translúcidos: heredan el color del tablero en
   vez de competir con él. */
.kb-pill {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 6px 11px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.kb-pill:hover {
  background: rgba(255, 255, 255, .3);
}
.kb-pill[disabled] {
  opacity: .5;
  cursor: default;
}
.kb-equipo {
  display: flex;
  margin-left: auto;
}
.kb-equipo .av {
  margin: 0 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .9);
}

/* Las listas van en una tira horizontal con desplazamiento propio: en un
   tablero de ocho listas, la alternativa es encogerlas hasta que no se lee el
   título de ninguna tarjeta. */
.kb-tira {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 16px;
}
.kb-lista {
  flex: 0 0 280px;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 8px;
}
.kb-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px;
  font-size: 14px;
}
.kb-cuenta {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--bar-track);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
/* Sobre el límite WIP la cuenta se pinta, pero nada se bloquea: un límite que
   impide trabajar termina con la gente anotando en otra parte. */
.kb-cuenta.excedida {
  background: var(--chip-tel-bg);
  color: var(--chip-tel-fg);
}
.kb-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 24px;
  border-radius: 8px;
}
.kb-cuerpo.encima {
  outline: 2px dashed rgba(255, 255, 255, .8);
  outline-offset: 3px;
}
.kb-tarjeta {
  background: var(--bg-surface);
  border-radius: 9px;
  box-shadow: 0 1px 0 var(--border-color);
  cursor: grab;
  overflow: hidden;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kb-tarjeta.arrastrando {
  opacity: .45;
}
/* Las etiquetas son barritas de color, no texto: en una tarjeta angosta el
   nombre de la etiqueta se come el sitio del título. */
.kb-etiquetas {
  display: flex;
  gap: 4px;
}
.kb-etiqueta {
  display: inline-block;
  height: 8px;
  width: 38px;
  border-radius: 4px;
}
a.kb-titulo {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
  font-size: 13.5px;
}
a.kb-titulo:hover {
  color: var(--primary);
}
.kb-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.kb-dato {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 6px;
  border-radius: 5px;
}
.kb-fecha {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-soft);
}
.kb-fecha.ok   { background: var(--primary-soft); color: var(--primary); }
.kb-fecha.mal  { background: var(--chip-rs-bg);   color: var(--chip-rs-fg); }
.kb-avatares {
  display: flex;
  margin-left: auto;
}
.kb-avatares .av {
  width: 24px;
  height: 24px;
  font-size: 10px;
  margin: 0 0 0 -6px;
  border: 2px solid var(--bg-surface);
}
.kb-agregar {
  width: 100%;
  margin-top: 6px;
  padding: 9px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.kb-agregar:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
/* La columna para crear una lista va sobre el color del tablero, no dentro de
   una caja clara: es una acción del tablero, no una lista más. */
.kb-nueva {
  flex: 0 0 280px;
  background: rgba(255, 255, 255, .2);
  border-radius: 12px;
  padding: 12px;
}
.kb-nueva input {
  width: 100%;
}

/* --------------------------------------------------- detalle de tarjeta */
.tarjeta-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .tarjeta-rejilla { grid-template-columns: 1fr; }
}
/* El título se edita en su sitio: se ve como un título y se comporta como un
   campo. Guarda al salir del campo, no con cada tecla. */
.tarjeta-titulo {
  width: 100%;
  border: 1px solid transparent;
  background: none;
  font-size: 19px;
  font-weight: 650;
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: 6px;
}
.tarjeta-titulo:hover, .tarjeta-titulo:focus {
  border-color: var(--border-color);
  background: var(--bg-surface);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-x {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 5px;
  padding: 0;
}
.chk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13.5px;
}
/* Tachado y atenuado: lo hecho tiene que distinguirse de un vistazo sin tener
   que mirar la casilla una por una. */
.chk-item .hecho {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.comentario {
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}
/* El enlace de la tarjeta del Kanban se lee como texto, no como enlace: dentro
   de un tablero, subrayar cada título convierte la columna en una lista de
   enlaces azules y se pierde la jerarquía. */
a.kb-titulo {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
}
a.kb-titulo:hover {
  color: var(--primary);
}

/* --------------------------------------------------- avisos de Proyectos
   Un aviso sin leer se marca con una barra a la izquierda, no con un fondo de
   color: la lista puede tener veinte y veinte fondos de color no dejan leer
   ninguno. */
.notif {
  padding: 7px 0 7px 10px;
  border-left: 3px solid transparent;
  font-size: 13.5px;
}
.notif.nueva {
  border-left-color: var(--primary);
  font-weight: 600;
}

/* Iconos pequeños de los datos de la tarjeta y de los botones de Butler.
   Heredan el color del texto: un emoji no lo hace y además cambia de forma en
   cada sistema. */
.kb-ico {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.kb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Toda la tarjeta del tablero abre el tablero. El cursor lo anuncia; el nombre
   sigue siendo un enlace de verdad para el teclado y para abrir en otra
   pestaña, que es lo que un clic en un div no permite. */
.tablero-caja.clicable {
  cursor: pointer;
}

/* Barra del tablero: estrella de favorito y las tres vistas del diseño. */
.kb-estrella {
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  padding: 0 2px;
  opacity: .8;
}
.kb-estrella:hover, .kb-estrella.on {
  opacity: 1;
}
.kb-vistas {
  display: flex;
  gap: 4px;
}
/* La vista activa se marca con más opacidad, no con otro color: sobre los cinco
   colores de tablero un color fijo se vería mal en alguno. */
.kb-pill.on {
  background: rgba(255, 255, 255, .34);
}
a.kb-pill {
  text-decoration: none;
}

/* --------------------------------------------------- calendario y tabla
   Las dos vistas alternativas del tablero, sobre el mismo fondo de color. */
.kb-calendario, .kb-tabla {
  margin: 16px;
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 14px;
}
.kb-cal-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  text-transform: capitalize;
}
.kb-cal-cab .kb-pill {
  background: var(--bg-soft);
  color: var(--text-primary);
  text-decoration: none;
}
.kb-cal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.kb-cal-dia-nombre {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-align: center;
  padding-bottom: 4px;
}
.kb-cal-celda {
  min-height: 92px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 5px;
}
.kb-cal-celda.vacia {
  border-color: transparent;
}
/* El día de hoy se marca con el borde, no con un fondo: un fondo de color
   compite con las tarjetas que están dentro de la celda. */
.kb-cal-celda.hoy {
  border-color: var(--primary);
}
.kb-cal-numero {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.kb-cal-tarjeta {
  display: block;
  font-size: 11.5px;
  line-height: 1.25;
  padding: 3px 5px;
  margin-bottom: 3px;
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-cal-tarjeta:hover {
  background: var(--primary-soft);
}
.kb-cal-tarjeta.mal { background: var(--chip-rs-bg);   color: var(--chip-rs-fg); }
.kb-cal-tarjeta.ok  { background: var(--primary-soft); color: var(--primary); }
/* Las que no tienen fecha no desaparecen: un calendario que esconde la mitad
   del trabajo hace creer que no hay más. */
.kb-cal-sinfecha {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.kb-cal-sinfecha .kb-cal-tarjeta {
  display: inline-block;
  margin: 0;
}

/* Los círculos del equipo dentro de la tarjeta de tablero: van sobre fondo
   claro, así que el borde es del color de la tarjeta y no blanco. */
.tablero-equipo {
  margin: 10px 0 0;
}
.tablero-equipo .av {
  border-color: var(--bg-surface);
}

/* --------------------------------------------------- buscador de la barra
   Los resultados caen debajo del campo, sobre lo demás: la barra es estrecha y
   empujar el contenido haría saltar la página con cada tecla. */
.search {
  position: relative;
}
.busca-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 34, 51, .18);
  padding: 6px;
}
.busca-grupo h5 {
  margin: 8px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-secondary);
}
.busca-fila {
  display: block;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--text-primary);
  text-decoration: none;
}
.busca-fila:hover {
  background: var(--primary-soft);
}
.busca-nombre {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.busca-vacio {
  padding: 12px 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* --------------------------------------------------- mantenedor de usuarios
   La tabla tenía nueve columnas de controles sueltos y se leía como un
   formulario, no como una lista de personas. Ahora cada fila se lee de un
   vistazo: quién es, qué puede hacer en cada módulo y cómo va de carga. */
.usuario-celda {
  display: flex;
  align-items: center;
  gap: 10px;
}
.av-persona {
  color: #fff;
  flex: none;
  margin: 0;
}
.usuario-nombre {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
}
.usuario-correo {
  font-size: 12px;
  color: var(--text-secondary);
}
/* Los desplegables dentro de la tabla, más bajos y sin ocupar todo el ancho:
   un <select> a ancho completo en cada celda es lo que hacía que la pantalla
   pareciera un formulario gigante. */
.sel-compacto {
  width: auto;
  min-width: 128px;
  padding: 5px 8px;
  font-size: 13px;
}
.num-compacto {
  width: 58px;
  padding: 4px 6px;
  font-size: 12.5px;
  text-align: right;
}
/* Carga: la barra dice de un vistazo quién está al tope; el número exacto
   queda al lado para quien lo necesite. */
.carga-celda {
  min-width: 132px;
}
.carga-medida {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.carga-medida .bar {
  flex: 1;
  min-width: 46px;
}
.carga-medida .bar.llena i {
  background: var(--status-danger);
}
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.pill-apagada {
  background: var(--bg-soft);
  color: var(--text-secondary);
}
/* Una fila inactiva se atenúa, pero no tanto como para no poder leerla: hay
   que poder reactivar a alguien sin forzar la vista. */
tr.inactiva .usuario-nombre,
tr.inactiva .usuario-correo {
  color: var(--text-secondary);
}
tr.inactiva .av-persona {
  opacity: .5;
}
.acciones-celda {
  white-space: nowrap;
  text-align: right;
}
.acciones-celda .btn + .btn {
  margin-left: 6px;
}
/* Los botones de acción de la fila: presentes pero discretos. Se usan poco y
   no tienen por qué competir con los datos. */
.btn-suave {
  padding: 5px 10px;
  font-size: 12.5px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-suave:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Quiénes están en el tablero: los círculos abren la lista con nombre y rol.
   Las iniciales dicen cuánta gente hay; el nombre dice quién, que es lo que se
   pregunta al abrir un tablero ajeno. */
.kb-equipo-caja {
  position: relative;
  margin-left: auto;
}
button.kb-equipo {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  margin: 0;
}
.kb-equipo-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 34, 51, .18);
  padding: 8px;
  color: var(--text-primary);
}
.kb-equipo-lista h5 {
  margin: 4px 6px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-secondary);
}
.kb-equipo-fila {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
}
.kb-equipo-fila .av {
  margin: 0;
  border: 0;
  color: #fff;
}

/* --------------------------------------------------- adjuntos de la tarjeta */
.adjunto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}
/* La etiqueta de tipo (PDF, PNG, LINK) en vez de un icono: dice exactamente
   qué es sin depender de tener un icono por formato. */
.adjunto-tipo {
  flex: none;
  width: 46px;
  padding: 6px 0;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .3px;
}
.adjunto-datos {
  flex: 1;
  min-width: 0;
}
.adjunto-nombre {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto-nombre:hover {
  color: var(--primary);
}
.adjunto-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* --------------------------------------------------- Mis tareas
   Una lista personal se lee mejor agrupada por urgencia que como tabla: lo
   primero que se pregunta es «qué tengo encima», no «de qué proyecto es». */
.tareas-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.tareas-dato {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.tareas-dato b {
  font-size: 19px;
  color: var(--text-primary);
}
.tareas-dato.mal b { color: var(--status-danger); }
.tareas-dato.hoy b { color: var(--status-warning); }

.tareas-grupo {
  margin-bottom: 20px;
}
.tareas-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
}
.tareas-grupo-n {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 11.5px;
  letter-spacing: 0;
}

/* Cada tarea es una fila con una barra de color a la izquierda. Pintar toda la
   tarjeta de rojo haría que con veinte vencidas no se lea ninguna. */
.tarea {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.tarea:hover {
  border-color: var(--primary);
}
.tarea.vencida { border-left-color: var(--status-danger); }
.tarea.hoy     { border-left-color: var(--status-warning); }
.tarea.cumplida .tarea-titulo {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.tarea-cuerpo {
  flex: 1;
  min-width: 0;
}
.tarea-titulo {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.tarea-donde {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
}
.tarea-derecha {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.tarea-avance {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 104px;
}
.tarea-avance .bar {
  flex: 1;
}
.tarea-fecha {
  min-width: 118px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.tarea-fecha.mal { color: var(--status-danger); font-weight: 600; }
.tarea-fecha.hoy { color: var(--status-warning); font-weight: 600; }
.tarea-fecha.ok  { color: var(--primary); }

@media (max-width: 760px) {
  .tarea { flex-wrap: wrap; }
  .tarea-derecha { width: 100%; justify-content: space-between; }
  .tarea-fecha { text-align: left; }
}

/* La misma barra del pie, pero ENCIMA de la tabla: el orden es lo primero que
   se decide al mirar la bandeja, y buscarlo debajo de cien filas obliga a bajar
   hasta el fondo para volver a subir. */
.pie-tabla.sobre-tabla {
  margin: 0 0 8px;
  border-top: 0;
  padding-top: 0;
}

/* --------------------------------------------------- barra de avance
   `.bar` solo existía dentro de `.sla`, así que fuera de ahí no se veía nada.
   Lo usaban tres sitios nuevos: la carga en Usuarios, el checklist de la
   tarjeta y Mis tareas. Aquí queda la versión general; la del SLA conserva la
   suya, que es más específica y manda donde aplica. */
.bar {
  height: 6px;
  background: var(--bar-track);
  border-radius: 3px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--primary);
}

/* ============================================================ Proyectos:
   grupos de columnas, ajustes de columna y paneles (fase 2)
   ----------------------------------------------------------------------
   Todo con variables de tema: un color fijo aquí no cambiaría al cambiar de
   vista, que es justo lo que la selección de vista promete. */

/* --- la columna --------------------------------------------------- */

/* El color de la columna es una franja arriba, no un fondo: con once tonos
   distintos un fondo de color deja ilegible el texto de las tarjetas. */
.kb-lista.con-color {
  border-top: 3px solid var(--cc);
  padding-top: 5px;
}
.kb-candado {
  display: inline-flex;
  color: var(--text-secondary);
}
.kb-candado .kb-ico {
  width: 13px;
  height: 13px;
}
.kb-ajustes {
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 5px;
  display: inline-flex;
}
.kb-ajustes:hover {
  background: var(--bg-row-hover);
  color: var(--text-primary);
}
.kb-ajustes .kb-ico {
  width: 15px;
  height: 15px;
}

/* La prioridad, delante del título: es lo que ordena la mirada en una columna
   larga. Del 1 al 3 se pintan; 4 y 5 quedan neutros, porque marcar en rojo lo
   que no corre prisa deja de avisar de lo que sí. */
.kb-prio {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bar-track);
  color: var(--text-secondary);
}
.kb-prio.p1 { background: var(--chip-rs-bg); color: var(--chip-rs-fg); }
.kb-prio.p2 { background: var(--chip-tel-bg); color: var(--chip-tel-fg); }
.kb-prio.p3 { background: var(--primary-soft); color: var(--primary); }

/* El responsable se distingue de los demás participantes: responde por la
   actividad, y un círculo igual al resto borra esa diferencia. */
.kb-avatares .av.resp {
  box-shadow: 0 0 0 2px var(--primary);
}

/* --- el grupo ------------------------------------------------------ */

.kb-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--bg-soft);
}
.kb-grupo.con-color {
  box-shadow: inset 0 3px 0 var(--cg);
  padding-top: 9px;
}
.kb-grupo-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
}
.kb-grupo-cab:hover {
  color: var(--primary);
}
.kb-grupo-flecha {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .12s;
  color: var(--text-secondary);
}
.kb-grupo-flecha.plegado {
  transform: none;
}
.kb-grupo-tipo {
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--chip-bg);
  color: var(--text-secondary);
  font-size: 11.5px;
}
.kb-grupo-cols {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.kb-grupo-vacio {
  flex: 0 0 240px;
  font-size: 12.5px;
  padding: 10px;
}

/* --- paneles -------------------------------------------------------- */

.kb-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 60;
}
.kb-panel {
  background: var(--bg-surface);
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.kb-panel-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.kb-panel-cab h3 {
  margin: 0;
  font-size: 15px;
}
.kb-panel-cerrar {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.kb-panel-cerrar:hover {
  color: var(--text-primary);
}
.kb-panel-cuerpo {
  padding: 14px 16px 16px;
}
.kb-panel-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.kb-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.kb-check input {
  width: auto;
}

/* La paleta muestra el color, no su nombre: «oliva» y «verde» se distinguen
   mirándolos, no leyéndolos. */
.kb-paleta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kb-color {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.kb-color.chico {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
  cursor: default;
}
.kb-color.sin {
  background: var(--bg-soft);
  border: 2px dashed var(--border-color);
}
.kb-color.on {
  border-color: var(--text-primary);
}
.kb-grupo-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kb-grupo-fila > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}
.kb-aviso-acciones {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}

@media (max-width: 760px) {
  .kb-grupo-cols { flex-direction: column; }
  .kb-grupo-cols .kb-lista { flex: 1 1 auto; width: 100%; }
}

/* ---------------------------------------- Proyectos: sub-actividades (fase 3)
   No son un checklist: cada una lleva responsable, fechas y estado, así que la
   fila necesita sitio para esos datos debajo del texto. */
.sub-fila {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sub-fila input[type="checkbox"] {
  margin-top: 3px;
  width: auto;
  flex: 0 0 auto;
}
.sub-centro {
  flex: 1 1 auto;
  min-width: 0;
}
.sub-texto {
  font-size: 13.5px;
  line-height: 1.35;
}
/* Tachada y apagada, no escondida: lo hecho sigue siendo parte del trabajo. */
.sub-texto.hecha {
  text-decoration: line-through;
  color: var(--text-secondary);
}
.sub-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* El campo que el origen elegido vuelve obligatorio. Se MARCA en vez de
   esconder los demás: esconder un campo que ya tenía valor hace creer que se
   borró, y al guardar reaparece. */
.campo.pide > span::after {
  content: " · obligatorio";
  color: var(--status-warning);
  font-weight: 600;
}
.campo.pide select,
.campo.pide input {
  border-color: var(--status-warning);
}

/* ------------------------------------ Proyectos: filtros y modos (fase 4)
   Dos preguntas distintas en una misma barra: el filtro dice QUÉ actividades
   se ven; el modo, CÓMO. Por eso el modo va al otro extremo. */
.kb-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 0 16px 10px;
  /* Se queda pegada a la izquierda aunque la tira de columnas sea mucho mas
     ancha que la pantalla: si no, al desplazarse en horizontal los filtros se
     iban fuera de la vista justo cuando hacen falta. */
  position: sticky;
  left: 0;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
}
/* Va sobre el color del tablero, como el resto de la barra: gris sobre azul no
   se lee. */
.kb-filtros-et {
  font-size: 12px;
  color: #fff;
  opacity: .8;
  margin-right: 2px;
}
/* Separador entre «qué se ve» y «cómo se ve». Antes el modo se empujaba al
   extremo con margin-left:auto y quedaba fuera de la pantalla, porque el area
   es mas ancha que la ventana. */
.kb-filtros .kb-vistas {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}
/* Un filtro compartido se distingue del propio: sale en la barra de todos. */
.kb-pill.compartido::before {
  content: "◆ ";
  font-size: 9px;
  vertical-align: middle;
}
.kb-filtro-sel {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  max-width: 180px;
}
.kb-filtro-sel.on {
  border-color: var(--primary);
  color: var(--primary);
}

/* En modo individual, la tarjeta es una sub-actividad: se dice de quién es
   parte, o el texto queda suelto sin contexto. */
.kb-padre {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}