/* =====================================================================
   Bitácora Consultechno: sistema visual v2 (propuesta del 4-nov-2026)
   Reemplaza a public/css/app.css. Conserva TODOS los nombres de clase
   y las variables que usan las vistas en línea (--rojo-osc, --borde,
   --gris-claro, --azul, --marino, --gris, --texto, --verde, --amarillo).
   Colores del logo: rojo #E0001B, azul #2F80B8, marino #1F3B57, gris #5B6B7B.
   Contraste medido (WCAG 2.2, fórmula de luminancia): ver docs/revision/visual.md
   ===================================================================== */

/* ---------- Fuente opcional alojada en el propio servidor (CSP 'self') ----------
   Para activarla: copie InterVariable.woff2 (licencia SIL OFL 1.1, a confirmar con
   propiedad intelectual) en public/fonts/ y quite el comentario. Sin el archivo,
   el sistema usa Segoe UI y no cambia nada más.
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
*/

:root {
  /* Escala de marca */
  --azul-50: #EDF5FC;  --azul-100: #D9EAF8; --azul-200: #B3D4EF;
  --azul-500: #2D7FC1; --azul-600: #1F6BAE; --azul-700: #175789;  /* antes #2F80B8 / #246DA0 / #1D5A85 */
  --marino: #133A63;   --marino-800: #0F3054; --marino-900: #0B2645; --marino-700: #1D4A78;  /* antes #1F3B57 / #172E45 / #152A3F / #2A4767 */
  --rojo: #E0001B;     --rojo-600: #B30016; --rojo-50: #FDECEE; --rojo-100: #F9D2D7;

  /* Neutros con matiz marino */
  --n-0: #FFFFFF;  --n-25: #FBFCFD; --n-50: #F3F6F9; --n-75: #F5F9FC; --n-100: #EAEFF4;
  --n-150: #E6EBF0; --n-200: #D7DEE6; --n-300: #C3CDD8; --n-400: #8494A5; --n-450: #7F8FA0;
  --n-500: #5B6B7B; --n-600: #475666; --n-700: #2B3A4A; --n-900: #1E2A36;

  /* Roles semánticos (lo que usan los componentes) */
  /* Azul de marca para superficies de color (menú lateral, barra del chat). Una sola definición. */
  --marca-desde: #2873AA; --marca-hasta: #1D629C;
  --marca-degradado: linear-gradient(180deg, var(--marca-desde) 0%, var(--marca-hasta) 100%);
  --en-linea: var(--exito);
  --fondo: var(--n-50);
  --superficie: var(--n-0);
  --texto: var(--n-900);
  --texto-2: var(--n-600);
  --texto-apagado: var(--n-500);
  --enlace: var(--azul-600);
  --enlace-encima: var(--azul-700);
  --accion: var(--azul-600);          /* botón principal; para volver al rojo: var(--rojo) */
  --accion-encima: var(--azul-700);   /* y aquí: var(--rojo-600) */
  --foco: var(--azul-500);
  --separador: var(--n-150);
  --borde-tarjeta: var(--n-200);
  --borde-campo: var(--n-400);
  --exito: #1E8E4E;  --exito-texto: #17703D; --exito-fondo: #E6F4EB; --exito-borde: #BFE3CD;
  --alerta: #B37400; --alerta-texto: #7A5200; --alerta-fondo: #FFF3D6; --alerta-borde: #EFD59A; --alerta-icono: #9A6500;
  --peligro: var(--rojo); --peligro-texto: var(--rojo-600); --peligro-fondo: var(--rojo-50); --peligro-borde: #F6BFC7;
  --info-texto: var(--azul-700); --info-fondo: var(--azul-50); --info-borde: #C6DCEC;
  --aviso-amarillo: #FFF6E0;

  /* Alias que usan las vistas en atributos style="" (no borrar) */
  --rojo-osc: var(--rojo-600);
  --azul: var(--azul-500);
  --azul-claro: var(--azul-50);
  --gris: var(--n-500);
  --gris-claro: var(--n-50);
  --borde: var(--n-200);
  --verde: var(--exito);
  --amarillo: var(--alerta);

  /* Tipografía: 6 tamaños, 3 pesos (400, 600, 700 solo en cifras) */
  --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --t-etiqueta: 12px;  /* rótulos, ayudas, encabezados de tabla */
  --t-denso: 13px;     /* celdas de tabla, campos de filtro */
  --t-texto: 14px;     /* texto base */
  --t-seccion: 15px;   /* títulos de tarjeta (h2) */
  --t-titulo: 22px;    /* título de página (h1) */
  --t-cifra: 22px;     /* cifra de tarjeta KPI */

  /* Espaciado en escala de 4 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;

  /* Radios */
  --radio: 12px;       /* tarjetas */
  --radio-campo: 8px;  /* campos y botones */
  --radio-peq: 6px;

  /* Sombras */
  --sombra: 0 1px 2px rgba(21, 42, 63, .06), 0 4px 14px rgba(21, 42, 63, .06);
  --sombra-encima: 0 2px 4px rgba(21, 42, 63, .08), 0 10px 24px rgba(21, 42, 63, .10);
  --sombra-boton: 0 1px 2px rgba(21, 42, 63, .18);
  --sombra-acceso: 0 24px 60px rgba(8, 20, 34, .45);

  /* Movimiento: 150 ms (encima, foco), 200 ms (despliegues); techo 300 ms */
  --rapida: 150ms; --media: 200ms;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body {
  font-family: var(--fuente); font-size: var(--t-texto); color: var(--texto);
  background: var(--fondo); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-encima); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: var(--t-titulo); line-height: 1.25; margin: 0 0 var(--e-1); color: var(--marino); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--t-seccion); line-height: 1.35; margin: 0 0 var(--e-3); color: var(--marino); font-weight: 600; }
h3 { font-size: var(--t-texto); margin: 0 0 var(--e-2); color: var(--marino); font-weight: 600; }
p { margin: 0 0 var(--e-3); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--texto-apagado); }
.small { font-size: var(--t-etiqueta); }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* Menú lateral */
.side {
  /* Azul del logo un poco más oscuro (pedido del usuario el 4-nov-2026); la letra blanca pasa AA. */
  background: var(--marca-degradado);
  color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side .marca { background: #fff; padding: 16px 18px 14px; border-bottom: 3px solid var(--rojo); }
.side .marca img { width: 100%; max-width: 196px; display: block; margin: 0 auto; }
.side .producto { /* opcional: rótulo del producto bajo el logo (ver cambios de marcado) */
  font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #EAF2F9; padding: 14px 20px 2px;
}
.side nav { padding: 10px 10px 12px; flex: 1; overflow-y: auto; }
.side nav a {
  display: flex; align-items: center; gap: 10px; color: #fff; padding: 9px 12px;
  border-radius: var(--radio-campo); margin-bottom: 2px; font-weight: 500;
  transition: background var(--rapida) ease-out, color var(--rapida) ease-out;
}
.side nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.side nav a.activo {
  background: #fff; color: var(--marino); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--rojo), var(--sombra-boton);
}
.side nav a.activo svg { opacity: 1; color: var(--rojo); }
.side nav a.cta { /* opcional: «+ Asignar tarea» como llamada a la acción */
  margin-top: 10px; border: 1px dashed rgba(255, 255, 255, .35); justify-content: center; background: rgba(255, 255, 255, .06);
}
.side nav a.cta.activo { background: #fff; color: var(--marino); border-style: solid; border-color: #fff; }
.side nav .grupo {
  font-size: var(--t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: #EAF2F9; padding: 18px 12px 6px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .25);
}
.side :focus-visible { outline-color: #fff; }
.side .usuario {
  padding: 14px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .14); font-size: var(--t-etiqueta); color: #EAF2F9; line-height: 1.45;
}
.side .usuario .quien-soy { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } /* opcional */
.side .usuario strong { color: #fff; display: block; font-size: var(--t-denso); font-weight: 600; }
.side .usuario a, .side .usuario button {
  color: #fff; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .4);
}
.side .usuario button { margin-top: 6px; }
.side .usuario a:hover, .side .usuario button:hover { text-decoration-color: #fff; }

/* Área principal con la franja del diamante arriba (rojo, azul, marino) */
.main {
  padding: 26px 32px 56px; min-width: 0;
  background: linear-gradient(90deg, var(--rojo) 0 72px, var(--azul-500) 72px 144px, var(--marino) 144px 100%) top left / 100% 3px no-repeat;
}
/* El contenido llena el ancho disponible; solo se frena en pantallas ultra anchas para que las tablas sigan legibles. */
.main > * { max-width: 2400px; }
.cabecera {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4);
  margin-bottom: var(--e-5); padding-bottom: var(--e-4); border-bottom: 1px solid var(--borde-tarjeta); flex-wrap: wrap;
}
.cabecera .muted { font-size: var(--t-denso); }
.cabecera .muted a { font-weight: 500; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px;
}
.card:has(> .tabla-wrap) { overflow: hidden; }
.card > h2:first-child { padding-bottom: var(--e-3); margin-bottom: var(--e-4); border-bottom: 1px solid var(--separador); }
.grid { display: grid; gap: var(--e-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }

/* Tarjeta KPI: acento lateral + ícono en caja de color + cifra grande */
.kpi {
  --kpi-acento: var(--n-300); --kpi-tinte: var(--n-50); --kpi-icono: var(--n-500);
  position: relative; overflow: hidden; padding: 12px 16px 11px 18px;
  transition: box-shadow var(--rapida) ease-out;
}
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kpi-acento); }
.kpi:hover { box-shadow: var(--sombra-encima); }
.kpi .kpi-icono {
  position: absolute; top: 11px; right: 12px; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: var(--kpi-tinte); color: var(--kpi-icono);
}
.kpi .kpi-icono svg { width: 17px; height: 17px; }
.kpi .etq {
  color: var(--texto-apagado); font-size: var(--t-etiqueta); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; padding-right: 48px;
}
.kpi .valor {
  font-size: var(--t-cifra); line-height: 1.15; font-weight: 700; color: var(--marino);
  margin: 4px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi .valor .unidad { font-size: var(--t-denso); font-weight: 600; color: var(--texto-2); letter-spacing: 0; }
.kpi .nota { font-size: var(--t-etiqueta); color: var(--texto-apagado); }
.kpi.verde { --kpi-acento: var(--exito); --kpi-tinte: var(--exito-fondo); --kpi-icono: var(--exito); }
.kpi.amarillo { --kpi-acento: var(--alerta); --kpi-tinte: var(--alerta-fondo); --kpi-icono: var(--alerta-icono); }
.kpi.rojo { --kpi-acento: var(--rojo); --kpi-tinte: var(--rojo-50); --kpi-icono: #C4001A; }
.kpi.gris { --kpi-acento: var(--n-300); }
/* Compatibilidad: si una KPI no trae ícono, el acento lateral basta */

.chart-box { position: relative; height: 260px; }
.chart-box.alto { height: 320px; margin-bottom: var(--e-3); }
/* Tarjetas lado a lado: el gráfico crece hasta llenar la tarjeta, aunque la vecina tenga más texto. */
.grid > .card:has(> .chart-box) { display: flex; flex-direction: column; }
.grid > .card:has(> .chart-box) > .chart-box { flex: 1 1 auto; }
/* Acciones en lote: barra fija arriba de la lista mientras hay tareas marcadas. */
.barra-lote { position: sticky; top: 64px; z-index: 30; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; border: 1px solid var(--azul-500); box-shadow: 0 6px 18px rgba(19, 58, 99, .12); }
.barra-lote[hidden] { display: none; }
.barra-lote > strong { align-self: center; color: var(--marino); }
.col-marca { width: 34px; text-align: center; }
.col-marca input { width: 20px; height: 20px; }
/* «Listo, pasar a revisión» al pie de los soportes (cliente). */
.entregar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; border: 1px solid #8494A5; border-radius: 8px; background: #F3F8FC; }
/* Pantallas grandes: los gráficos crecen con el ancho para no verse aplastados. */
@media (min-width: 1800px) { .chart-box { height: 340px; } .chart-box.alto { height: 400px; } }
@media (min-width: 2300px) { .chart-box { height: 400px; } .chart-box.alto { height: 460px; } }
.leyenda { /* opcional: leyenda del semáforo (ver cambios de marcado) */
  display: flex; gap: var(--e-4); flex-wrap: wrap; align-items: center;
  font-size: var(--t-etiqueta); color: var(--texto-2); margin: -4px 0 var(--e-4);
}

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-denso); }
th {
  text-align: left; font-size: var(--t-etiqueta); font-weight: 600; color: var(--texto-apagado);
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px;
  background: var(--n-50); border-bottom: 1px solid var(--borde-tarjeta); white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--separador); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 18px; }
th:last-child, td:last-child { padding-right: 18px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--rapida) ease-out; }
tbody tr:hover td { background: var(--n-75); }
td strong a, td a strong { color: var(--marino); }
td a:hover strong { color: var(--enlace-encima); }
td.der, th.der { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-wrap { overflow-x: auto; }
/* Las tablas dentro de una tarjeta con relleno (rankings) no llevan fondo en el encabezado */
.card:not([style*="padding:0"]) > .tabla-wrap th { background: transparent; }
.card:not([style*="padding:0"]) > .tabla-wrap th:first-child,
.card:not([style*="padding:0"]) > .tabla-wrap td:first-child { padding-left: 4px; }
.card:not([style*="padding:0"]) > .tabla-wrap th:last-child,
.card:not([style*="padding:0"]) > .tabla-wrap td:last-child { padding-right: 4px; }

/* Fila vacía de una tabla (td con colspan): estado vacío con ícono, sin cambiar el marcado */
tbody td[colspan].muted {
  padding: 44px 16px 36px !important; text-align: center; font-size: var(--t-texto); color: var(--texto-apagado);
}
tbody td[colspan].muted::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px;
  background: var(--n-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
tbody tr:hover td[colspan].muted { background: transparent; }

/* ---------- Etiquetas de estado y prioridad ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-etiqueta); font-weight: 600; line-height: 18px;
  padding: 2px 10px; border-radius: 999px; background: var(--n-50); color: var(--n-600);
  border: 1px solid var(--borde-tarjeta); white-space: nowrap;
}
.tag.pendiente::before, .tag.en_curso::before, .tag.esperando_cliente::before, .tag.en_revision::before,
.tag.terminada::before, .tag.cancelada::before, .tag.urgente::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.tag.pendiente { background: #EEF2F6; color: #44546A; border-color: #D9E0E8; }
.tag.en_curso { background: #E6F0F8; color: var(--azul-700); border-color: var(--info-borde); }
.tag.esperando_cliente { background: var(--alerta-fondo); color: var(--alerta-texto); border-color: var(--alerta-borde); }
.tag.en_revision { background: #F1ECFA; color: #55388F; border-color: #DCD0F2; }
.tag.terminada { background: var(--exito-fondo); color: var(--exito-texto); border-color: var(--exito-borde); }
.tag.cancelada { background: #F1F4F7; color: var(--n-500); border-color: var(--borde-tarjeta); text-decoration: line-through; }
.tag.urgente { background: var(--peligro-fondo); color: var(--peligro-texto); border-color: var(--peligro-borde); }
.tag.alta { background: #FFF0E4; color: #9A4400; border-color: #F5D0B5; }
.tag.media { background: var(--superficie); color: var(--n-600); border-color: var(--n-300); }
.tag.baja { background: var(--superficie); color: var(--n-500); border-color: var(--borde-tarjeta); font-weight: 500; }

/* Semáforo con FORMA además de color (se lee con daltonismo):
   verde = círculo, amarillo = triángulo, rojo = rombo (el diamante del logo), gris = anillo vacío */
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; flex: none; position: relative; top: -1px; }
.punto.verde { background: var(--exito); }
.punto.amarillo { background: var(--alerta); border-radius: 0; width: 12px; height: 11px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.punto.rojo { background: var(--rojo); border-radius: 2px; width: 9px; height: 9px; transform: rotate(45deg); margin-left: 1px; margin-right: 9px; }
.punto.gris { background: transparent; box-shadow: inset 0 0 0 2px var(--n-450); }
.kpi .valor .punto { width: 10px; height: 10px; margin-right: 8px; top: -2px; }
.kpi .valor .punto.amarillo { width: 14px; height: 13px; }
.kpi .valor .punto.rojo { width: 11px; height: 11px; }

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: var(--t-denso); margin-bottom: 6px; color: var(--n-700); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], input[type=number], select, textarea {
  width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--borde-campo); border-radius: var(--radio-campo);
  font: inherit; font-size: var(--t-texto); background: var(--superficie); color: var(--texto);
  transition: border-color var(--rapida) ease-out, box-shadow var(--rapida) ease-out;
}
input::placeholder, textarea::placeholder { color: #5F6E7F; }
input:hover, select:hover, textarea:hover { border-color: var(--n-500); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--azul-600);
  box-shadow: 0 0 0 4px rgba(47, 128, 184, .16);
}
input:disabled, select:disabled, textarea:disabled { background: var(--n-50); color: var(--texto-apagado); cursor: not-allowed; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
}
input[type=search] {
  padding-left: 36px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") left 11px center / 16px no-repeat;
}
input[type=file] { font: inherit; font-size: var(--t-denso); color: var(--texto-2); max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 10px; padding: 7px 12px; border-radius: var(--radio-campo);
  border: 1px solid var(--n-400); background: var(--superficie); color: var(--marino); cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--n-50); }
input[type=checkbox], input[type=radio] { accent-color: var(--azul-600); width: 16px; height: 16px; margin: 0; flex: none; }
input[aria-invalid=true], .campo:has(.error) input, .campo:has(.error) select, .campo:has(.error) textarea { border-color: var(--peligro-texto); }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.campo { margin-bottom: var(--e-4); }
.ayuda { font-size: var(--t-etiqueta); color: var(--texto-apagado); margin-top: 5px; line-height: 1.45; }
.error { color: var(--peligro-texto); font-size: var(--t-etiqueta); font-weight: 600; margin-top: 5px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: var(--t-texto); color: var(--texto); cursor: pointer; }
.filtros { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: flex-end; }
.filtros > div { min-width: 160px; }
.filtros label { font-size: var(--t-etiqueta); color: var(--texto-2); margin-bottom: 4px; }
.filtros input, .filtros select { font-size: var(--t-denso); }
.card.filtros { padding: 16px 18px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px;
  border-radius: var(--radio-campo); border: 1px solid transparent; font: inherit; font-size: var(--t-texto); font-weight: 600;
  cursor: pointer; background: var(--accion); color: #fff; white-space: nowrap; box-shadow: var(--sombra-boton);
  transition: background var(--rapida) ease-out, border-color var(--rapida) ease-out, box-shadow var(--rapida) ease-out;
}
.btn:hover { background: var(--accion-encima); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn.sec { background: var(--superficie); color: var(--marino); border-color: var(--n-400); box-shadow: 0 1px 1px rgba(21, 42, 63, .05); }
.btn.sec:hover { background: var(--n-50); border-color: var(--n-450); color: var(--marino); }
.btn.azul { background: var(--accion); }
.btn.azul:hover { background: var(--accion-encima); }
.btn.rojo { background: var(--rojo); }             /* nuevo, opcional */
.btn.rojo:hover { background: var(--rojo-600); }
.btn.peq { min-height: 30px; padding: 4px 11px; font-size: var(--t-etiqueta); gap: 6px; }
.btn-link { background: none; border: 0; color: var(--enlace); cursor: pointer; padding: 0; font: inherit; font-weight: 500; }
.btn-link:hover { color: var(--enlace-encima); text-decoration: underline; }

/* ---------- Avisos ---------- */
.aviso {
  padding: 12px 16px 12px 14px; border-radius: var(--radio-campo); margin-bottom: var(--e-4);
  border: 1px solid; border-left-width: 4px; font-size: var(--t-texto);
}
.aviso.ok { background: var(--exito-fondo); border-color: var(--exito-borde); border-left-color: var(--exito); color: #17603A; }
.aviso.mal { background: var(--peligro-fondo); border-color: var(--peligro-borde); border-left-color: var(--rojo); color: var(--peligro-texto); }
.aviso.info { background: var(--info-fondo); border-color: var(--info-borde); border-left-color: var(--azul-500); color: var(--info-texto); }
.aviso.alerta { background: var(--aviso-amarillo); border-color: var(--alerta-borde); border-left-color: var(--alerta); color: var(--alerta-texto); } /* nuevo */

/* ---------- Detalle de tarea ---------- */
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-4); align-items: start; }
.meta dt { font-size: var(--t-etiqueta); color: var(--texto-apagado); margin-top: 14px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.meta dt:first-child { margin-top: 0; }
.meta dd { margin: 3px 0 0; font-weight: 600; color: var(--texto); }
.desc { white-space: pre-wrap; line-height: 1.6; }
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { padding: 10px 0; border-bottom: 1px solid var(--separador); }
.lista-limpia li:last-child { border-bottom: 0; }
.checklist li { display: flex; gap: 10px; align-items: center; }
.checklist li form { margin: 0; }
.checklist .hecho { text-decoration: line-through; color: var(--texto-apagado); }
.caja {
  width: 20px; height: 20px; border: 2px solid var(--n-450); border-radius: 5px; background: var(--superficie); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700;
  transition: background var(--rapida) ease-out, border-color var(--rapida) ease-out;
}
.caja:hover { border-color: var(--azul-600); }
.caja.on { background: var(--exito-texto); border-color: var(--exito-texto); }
.comentario { padding: 12px 0; border-bottom: 1px solid var(--separador); }
.comentario:last-child { border-bottom: 0; }
.comentario .quien { font-size: var(--t-etiqueta); color: var(--texto-apagado); margin-bottom: 4px; }
.comentario .quien strong { color: var(--marino); font-size: var(--t-denso); }
/* Historial como línea de tiempo */
.historial li { position: relative; font-size: var(--t-etiqueta); color: var(--texto-apagado); padding: 6px 0 10px 18px; border-bottom: 0; }
.historial li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--azul-500); box-shadow: 0 0 0 3px var(--azul-100); }
.historial li::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: -6px; width: 1px; background: var(--n-200); }
.historial li:last-child::after { display: none; }
.historial strong { color: var(--texto); font-weight: 600; }
.barra { height: 8px; background: var(--n-150); border-radius: 4px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: linear-gradient(90deg, #26A35C, var(--exito)); border-radius: 4px; transition: width var(--media) ease-out; }

/* ---------- Pantallas de acceso ---------- */
.acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 20px;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, .035) 62% 74%, transparent 74%),
    linear-gradient(65deg, transparent 0 18%, rgba(255, 255, 255, .03) 18% 30%, transparent 30%),
    radial-gradient(900px 520px at 88% -8%, rgba(255, 255, 255, .10), transparent 62%),
    radial-gradient(760px 460px at -6% 108%, rgba(224, 0, 27, .26), transparent 60%),
    linear-gradient(160deg, var(--marca-desde) 0%, var(--marca-hasta) 55%, var(--marino-700) 100%);
}
.acceso .card {
  position: relative; width: 100%; max-width: 420px; padding: 34px 32px 28px; border: 0;
  border-radius: 16px; box-shadow: var(--sombra-acceso); overflow: hidden;
}
.acceso .card::before { /* franja del diamante: rojo a azul */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--rojo) 0 50%, var(--azul-500) 50% 100%);
}
.acceso .logo { display: block; width: 240px; max-width: 100%; margin: 0 auto 22px; }
.acceso h1 { font-size: 20px; }
.acceso h2 { font-size: 18px; margin-bottom: var(--e-2); }
.acceso .btn { min-height: 42px; font-size: 15px; }
.acceso .pie { text-align: center; color: #DCE6EF; font-size: var(--t-etiqueta); margin-top: 18px; }
.acceso .pie a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.acceso :focus-visible { outline-color: var(--azul-500); }
.acceso .pie :focus-visible { outline-color: #fff; }
.qr { display: flex; justify-content: center; margin: 14px 0; padding: 12px; border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-campo); }
.qr svg { width: 200px; height: 200px; }
.clave { font-family: Consolas, "Cascadia Mono", monospace; background: var(--n-50); border: 1px dashed var(--n-300); padding: 8px 12px; border-radius: var(--radio-peq); text-align: center; letter-spacing: .08em; font-size: var(--t-denso); }

/* ---------- Paginación ---------- */
.paginacion { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: var(--e-3); flex-wrap: wrap; font-size: var(--t-denso); }
.paginacion a, .paginacion span { padding: 6px 12px; border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-campo); background: var(--superficie); }
.paginacion a { font-weight: 600; }
.paginacion a:hover { background: var(--azul-50); border-color: var(--azul-200); text-decoration: none; }
.paginacion .actual { background: var(--accion); color: #fff; border-color: var(--accion); font-variant-numeric: tabular-nums; }

/* Editar en línea (details) */
details.editar > summary {
  cursor: pointer; color: var(--enlace); list-style: none; font-weight: 600; font-size: var(--t-denso);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radio-peq);
}
details.editar > summary::-webkit-details-marker { display: none; }
details.editar > summary::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23246DA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
details.editar > summary:hover { background: var(--azul-50); }
details.editar[open] { background: var(--n-50); padding: 12px; border-radius: var(--radio-campo); border: 1px solid var(--borde-tarjeta); }

/* ---------- Ordenar columnas ---------- */
.ranking th, .ranking td { padding: 8px 8px; }
.ranking td:first-child { min-width: 170px; }
.ranking th { white-space: normal; }
a.orden { color: inherit; text-decoration: none; white-space: nowrap; }
a.orden span { color: var(--n-450); font-size: 10px; }
a.orden.activa, a.orden.activa span { color: var(--marino); }
a.orden:hover { color: var(--enlace); text-decoration: none; }
th.th-orden { cursor: pointer; user-select: none; }
th.th-orden::after { content: '\00a0↕'; color: var(--n-450); font-size: 10px; }
th.th-orden[data-dir=asc]::after { content: '\00a0▲'; color: var(--marino); }
th.th-orden[data-dir=desc]::after { content: '\00a0▼'; color: var(--marino); }
th.th-orden:hover { color: var(--enlace); }
th.th-orden[data-dir] { color: var(--marino); }

.contador {
  margin-left: auto; background: var(--rojo); color: #fff; font-size: var(--t-etiqueta); font-weight: 700; line-height: 1;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
}

/* ---------- Selector de responsable (tarjetas de personas) ---------- */
.selector-para { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.opcion-para {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--t-denso); padding: 8px 14px;
  border: 1px solid var(--n-400); border-radius: var(--radio-campo); cursor: pointer; background: var(--superficie); margin: 0; color: var(--n-700);
  transition: border-color var(--rapida) ease-out, background var(--rapida) ease-out;
}
.opcion-para:hover { border-color: var(--azul-500); }
.opcion-para:has(input:checked) { border-color: var(--azul-600); background: var(--azul-50); color: var(--marino); box-shadow: inset 0 0 0 1px var(--azul-600); }
.opcion-para input { margin: 0; accent-color: var(--azul-600); }
.asignar .campo { margin-bottom: 10px; }
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e-2); }
.persona {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 34px 9px 10px;
  border: 1px solid var(--n-400); border-radius: 10px; cursor: pointer; background: var(--superficie);
  font-weight: 600; font-size: var(--t-denso); margin: 0; color: var(--texto); line-height: 1.3;
  transition: border-color var(--rapida) ease-out, background var(--rapida) ease-out, box-shadow var(--rapida) ease-out;
}
.persona[hidden] { display: none; }
.persona input { position: absolute; opacity: 0; pointer-events: none; }
.persona small { display: block; font-weight: 400; color: var(--texto-apagado); font-size: var(--t-etiqueta); }
.persona:hover { border-color: var(--azul-500); box-shadow: var(--sombra-boton); }
.persona:has(input:checked) { border-color: var(--azul-600); background: var(--azul-50); box-shadow: inset 0 0 0 1px var(--azul-600); }
.persona:has(input:checked)::after { /* marca de selección: no depende solo del color */
  content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--azul-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.persona:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-etiqueta); font-weight: 700; background: var(--n-150); color: var(--n-600); letter-spacing: .02em;
}
.avatar.firma { background: var(--rojo); color: #fff; }
.avatar.cliente { background: var(--azul-600); color: #fff; }
.persona.sin span:last-child { font-weight: 400; color: var(--texto-apagado); }
.asignar .personas { grid-template-columns: 1fr; }
.vacio { margin: 4px 0 0; padding: 10px 12px; border: 1px dashed var(--n-300); border-radius: var(--radio-campo); background: var(--n-25); }

/* Formulario de tarea: contenido a la izquierda, a quién y cuándo a la derecha */
.form-tarea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: var(--e-4); align-items: start; }
.form-lateral { position: sticky; top: 16px; }
.form-lateral .personas { grid-template-columns: 1fr 1fr; }
.acciones { display: flex; gap: var(--e-2); margin-top: 8px; padding-top: var(--e-4); border-top: 1px solid var(--separador); }
.acciones .btn:first-child { flex: 1; justify-content: center; }

/* ---------- Estado vacío de tarjeta (clase nueva, opcional) ---------- */
.vacio-estado { text-align: center; padding: 28px 16px 20px; color: var(--texto-apagado); }
.vacio-estado svg { width: 28px; height: 28px; color: var(--n-500); background: var(--n-50); border-radius: 12px; padding: 10px; box-sizing: content-box; margin-bottom: 8px; }
.vacio-estado p { margin: 0; }
.vacio-estado .btn { margin-top: 12px; }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1280px) {
  .main { padding: 22px 24px 48px; }
  .kpi .valor { font-size: 21px; }
}
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detalle { grid-template-columns: 1fr; }
  .form-tarea { grid-template-columns: 1fr; }
  .form-lateral { position: static; }
}
@media (max-width: 760px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .main { padding: 16px; }
  .form-lateral .personas { grid-template-columns: 1fr; }
  .cabecera { align-items: flex-start; }
}
@media (max-height: 720px) and (min-width: 761px) {
  .side .marca { padding: 10px 16px 8px; }
  .side .marca img { max-width: 160px; }
  .side nav a { padding: 7px 12px; }
  .side nav .grupo { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}
@media print {
  .side, .filtros, .btn, details.editar { display: none !important; }
  .app { display: block; }
  .main { padding: 0; background: none; }
  .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

.contador.azul { background: var(--azul-600); }

/* ---------- Colaboración: pasos con responsable, conversación, participantes ---------- */
.checklist li { align-items: flex-start; flex-wrap: wrap; padding: 4px 0; }
.checklist .paso { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.paso-quien { font-size: var(--t-etiqueta); color: var(--texto-apagado); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.texto-rojo { color: var(--peligro-texto); font-weight: 600; }
.paso-editar { font-size: var(--t-etiqueta); }
.paso-editar summary { cursor: pointer; color: var(--enlace); padding-top: 3px; list-style: none; }
.paso-editar summary::-webkit-details-marker { display: none; }
.paso-editar[open] { flex-basis: 100%; }
.paso-editar form { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px 32px; }
.paso-editar select, .paso-editar input { width: auto; min-width: 150px; font-size: var(--t-denso); padding: 5px 8px; }
.nuevo-paso { display: grid; grid-template-columns: minmax(0, 1fr) 190px 170px auto; gap: 8px; margin-top: 10px; }
.avatar.mini { width: 22px; height: 22px; font-size: 10px; flex: none; }
.mencionar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.chip { border: 1px solid var(--n-200); background: var(--n-25); color: var(--texto-2); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: var(--t-etiqueta); cursor: pointer; }
.chip:hover { border-color: var(--azul-500); color: var(--azul-700); background: var(--azul-50); }
.chip.firma { border-color: var(--azul-200); }
.acciones-comentario { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.acciones-comentario .btn { margin-left: auto; }
label.interna { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-denso); color: var(--texto-2); font-weight: 500; text-transform: none; letter-spacing: 0; }
label.interna input { width: auto; }
.form-comentario.es-interna textarea { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.comentario .quien { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comentario.interna { background: var(--alerta-fondo); border: 1px solid var(--alerta-borde); border-radius: var(--radio-campo); padding: 10px 12px; margin: 8px 0; }
.comentario.traspaso { border-left: 3px solid var(--azul-500); padding-left: 12px; }
.tag.interna { background: var(--alerta-fondo); color: var(--alerta-texto); border-color: var(--alerta-borde); }
.pasar summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.pasar summary::-webkit-details-marker { display: none; }
.pasar summary h2 { margin: 0; }
.pasar summary::after { content: "Abrir"; font-size: var(--t-etiqueta); color: var(--enlace); }
.pasar[open] summary::after { content: "Cerrar"; }
.pasar[open] summary { margin-bottom: 8px; }
.participantes li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.participantes li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-weight: 500; }
.participantes small { color: var(--texto-apagado); font-size: var(--t-etiqueta); font-weight: 400; }
.participantes form { margin: 0; }
.quitar { border: 0; background: none; color: var(--texto-apagado); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.quitar:hover { background: var(--rojo-50); color: var(--rojo-600); }
@media (max-width: 1100px) { .nuevo-paso { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra superior: buscador, pendientes y cuenta ---------- */
.barra-sup {
  position: sticky; top: 0; z-index: 40; max-width: none;
  display: grid; grid-template-columns: 1fr minmax(0, 480px) 1fr; align-items: center; gap: 16px;
  height: 56px; margin: -26px -32px 22px; padding: 0 32px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borde-tarjeta);
}
.buscar { position: relative; grid-column: 2; width: 100%; margin: 0; }
.buscar > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texto-apagado); pointer-events: none; }
.buscar input { width: 100%; height: 36px; padding: 0 12px 0 36px; border-radius: 999px; background: var(--n-50); border: 1px solid var(--n-450); font-size: var(--t-denso); }
.buscar input:focus { background: var(--superficie); }
.acciones-sup { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.menu-sup { position: relative; }
.menu-sup summary { list-style: none; cursor: pointer; }
.menu-sup summary::-webkit-details-marker { display: none; }
.boton-icono {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--texto-2);
}
.boton-icono svg { width: 21px; height: 21px; }
.boton-icono:hover, .menu-sup[open] .boton-icono { background: var(--n-100); color: var(--marino); }
.insignia {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--rojo); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.boton-cuenta { display: block; padding: 3px; border-radius: 50%; }
.boton-cuenta .avatar { width: 34px; height: 34px; }
.boton-cuenta:hover, .menu-sup[open] .boton-cuenta { box-shadow: 0 0 0 3px var(--azul-100); }
.menu-sup .desplegable {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 270px;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11, 38, 69, .16); padding: 6px;
}
.menu-sup .desplegable.ancho { width: 380px; }
.perfil-sup { display: flex; gap: 12px; align-items: center; padding: 12px 10px 14px; }
.perfil-sup > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perfil-sup strong { color: var(--marino); font-size: var(--t-texto); }
.perfil-sup > div > span { font-size: var(--t-etiqueta); color: var(--texto-apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.grande { width: 44px; height: 44px; font-size: 15px; }
.menu-sup .desplegable > a, .menu-sup .desplegable button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px;
  color: var(--texto); background: none; border: 0; font: inherit; font-size: var(--t-denso); cursor: pointer;
}
.menu-sup .desplegable > a svg, .menu-sup .desplegable button svg { width: 17px; height: 17px; color: var(--texto-apagado); flex: none; }
.menu-sup .desplegable > a:hover, .menu-sup .desplegable button:hover { background: var(--n-50); text-decoration: none; }
.menu-sup .desplegable form { margin: 0; }
.menu-sup .separador { height: 1px; background: var(--separador); margin: 4px 0; }
.titulo-desplegable { padding: 10px 10px 8px; font-weight: 600; color: var(--marino); border-bottom: 1px solid var(--separador); margin-bottom: 4px; }
.titulo-desplegable span { display: block; font-weight: 400; font-size: var(--t-etiqueta); color: var(--texto-apagado); }
.menu-sup a.pendiente { align-items: flex-start; }
.pendiente .punto { margin-top: 6px; }
.pendiente .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pendiente .texto strong { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendiente .texto small { font-size: var(--t-etiqueta); color: var(--texto-apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendiente .cuando { font-size: var(--t-etiqueta); color: var(--alerta-texto); white-space: nowrap; font-weight: 600; }
.pendiente .cuando.rojo { color: var(--peligro-texto); }
.vacio-sup { padding: 14px 10px; margin: 0; color: var(--texto-apagado); font-size: var(--t-denso); }
.menu-sup a.pie-desplegable { justify-content: center; color: var(--enlace); font-weight: 600; border-top: 1px solid var(--separador); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 1280px) { .barra-sup { margin: -22px -24px 18px; padding: 0 24px; } }
@media (max-width: 760px) { .barra-sup { margin: -16px -16px 14px; padding: 0 16px; grid-template-columns: minmax(0, 1fr) auto; } .buscar { grid-column: 1; } .acciones-sup { grid-column: 2; } .menu-sup .desplegable.ancho { width: calc(100vw - 32px); right: -50px; } }
@media print { .barra-sup { display: none; } }

/* Consultechno contra el cliente, encima de la tendencia */
.lados { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: -4px 0 8px; font-size: var(--t-denso); color: var(--texto-2); }
.lados strong { color: var(--marino); font-variant-numeric: tabular-nums; }
.lados .raya { display: inline-block; width: 26px; height: 5px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.lados .raya.firma { background: var(--marino); }
.lados .raya.cliente { background: #7A4EA8; }

/* ---------- Pantallas medianas y pequeñas: el menú lateral se abre con el botón de tres rayas ---------- */
.velo { position: fixed; inset: 0; background: rgba(11, 38, 69, .45); z-index: 55; }
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; inset: 0 auto 0 0; width: 272px; height: 100vh; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease-out; box-shadow: 0 0 40px rgba(0, 0, 0, .25);
  }
  body.menu-abierto .side { transform: none; }
  body.menu-abierto { overflow: hidden; }
  .abrir-menu { display: grid; }
  .barra-sup { grid-template-columns: auto minmax(0, 1fr) auto; }
  .abrir-menu { grid-column: 1; }
  .buscar { grid-column: 2; max-width: 480px; justify-self: center; }
  .acciones-sup { grid-column: 3; }
  .cabecera { flex-wrap: wrap; align-items: flex-start; }
  .filtros { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .barra-sup { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .buscar { grid-column: 2; }
  .acciones-sup { grid-column: 3; }
  .menu-sup .desplegable { position: fixed; left: 12px; right: 12px; top: 60px; min-width: 0; width: auto; }
  .menu-sup .desplegable.ancho { width: auto; right: 12px; }
  .kpi .valor { font-size: 20px; }
  h1 { font-size: 19px; }
  .nuevo-paso { grid-template-columns: 1fr; }
  .lados { gap: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* ---------- Menú lateral recogido (solo íconos), en pantallas grandes ---------- */
.side .marca .logo-mini { display: none; width: 30px; height: 30px; max-width: none; object-fit: contain; margin: 0 auto; }
.app { transition: grid-template-columns .2s ease-out; }
@media (min-width: 1025px) {
  body.menu-compacto .app { grid-template-columns: 72px minmax(0, 1fr); }
  body.menu-compacto .side .marca { padding: 13px 0 11px; border-bottom-width: 2px; }
  body.menu-compacto .side .marca .logo-completo { display: none; }
  body.menu-compacto .side .marca .logo-mini { display: block; }
  body.menu-compacto .side .producto,
  body.menu-compacto .side nav .grupo { display: none; }
  body.menu-compacto .side nav { padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  body.menu-compacto .side nav a {
    font-size: 0; width: 44px; height: 42px; padding: 0; margin: 0; gap: 0;
    justify-content: center; border-radius: 10px; position: relative;
  }
  body.menu-compacto .side nav a svg { width: 20px; height: 20px; opacity: .9; }
  body.menu-compacto .side nav a.activo { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
  body.menu-compacto .side nav a.activo svg { color: #fff; opacity: 1; }
  body.menu-compacto .side nav a.activo::before {
    content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rojo);
  }
  body.menu-compacto .side nav a.cta { border: 0; background: var(--rojo); margin-top: 8px; }
  body.menu-compacto .side nav a.cta svg { color: #fff; opacity: 1; }
  body.menu-compacto .side nav a.cta:hover { background: var(--rojo-600); }
  body.menu-compacto .side nav a .contador {
    position: absolute; top: 2px; right: 2px; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
    box-shadow: 0 0 0 2px var(--marino);
  }
  body.menu-compacto .side .nav-abajo { padding: 10px 0 14px; border-top-color: rgba(255, 255, 255, .10); }
}
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }
.abrir-menu { grid-column: 1; justify-self: start; }

.abrir-menu { border: 0; background: none; cursor: pointer; }
/* Mi empresa y Administración, al fondo del menú lateral */
.side .nav-abajo { flex: none; padding: 8px 10px 14px; border-top: 1px solid rgba(255, 255, 255, .12); overflow: visible; }
.side .nav-abajo .grupo { padding-top: 8px; }
.side .nav-abajo .grupo:first-child { padding-top: 4px; }
@media (min-width: 1025px) { body.menu-compacto .side .nav-abajo { padding: 8px; } }
/* Tableta y celular: tarjetas de a dos mientras quepan, tablas con desplazamiento lateral y filtros a todo el ancho */
@media (max-width: 760px) and (min-width: 521px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tabla-wrap table { min-width: 680px; }
  .tabla-wrap { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 520px) {
  .filtros > div { min-width: 0; flex: 1 1 100%; }
  .filtros select, .filtros input { width: 100%; }
  .cabecera .btn { width: 100%; justify-content: center; }
}

/* Una sola línea sobre «Mi empresa»: el borde lo pone el bloque, no el rótulo */
.side .nav-abajo .grupo { border-top: 0; margin-top: 0; }
/* Botón para recoger el menú, al pie del menú lateral (pantallas grandes) */
.side .recoger {
  flex: none; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 22px; border: 0; border-top: 1px solid rgba(255, 255, 255, .10);
  background: none; color: #EAF2F9; font: inherit; font-size: var(--t-denso); cursor: pointer; text-align: left;
}
.side .recoger svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease-out; }
.side .recoger:hover { color: #fff; background: rgba(255, 255, 255, .06); }
@media (min-width: 1025px) {
  .abrir-menu { display: none; }
  body.menu-compacto .side .recoger { justify-content: center; padding: 12px 0; }
  body.menu-compacto .side .recoger span { display: none; }
  body.menu-compacto .side .recoger svg { transform: rotate(180deg); }
}
@media (max-width: 1024px) { .side .recoger { display: none; } }

/* Histórico: filtros de fechas, nota de cierre y botón de exportar */
.mas-filtros { align-self: flex-end; }
.mas-filtros summary { cursor: pointer; color: var(--enlace); font-size: var(--t-denso); font-weight: 600; padding: 8px 2px; list-style: none; }
.mas-filtros summary::-webkit-details-marker { display: none; }
.mas-filtros summary::after { content: " ▾"; }
.mas-filtros[open] { flex-basis: 100%; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.mas-filtros[open] summary { flex-basis: 100%; padding-bottom: 0; }
.mas-filtros .rango > div { display: flex; gap: 6px; align-items: center; color: var(--texto-apagado); font-size: var(--t-denso); }
.mas-filtros .rango input { width: 150px; }
.btn svg { width: 16px; height: 16px; }
.nota-cierre { margin-top: 10px; }
.nota-final { white-space: pre-line; font-weight: 500; background: var(--exito-fondo); border: 1px solid var(--exito-borde); border-radius: 8px; padding: 8px 10px; }

/* Tareas recurrentes */
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
tr.apagada td { color: var(--texto-apagado); }
.acciones-fila { white-space: nowrap; }
.acciones-fila form { display: inline; margin: 0; }
.btn.peligro { background: var(--superficie); color: var(--peligro-texto); border: 1px solid #E0566B; }
.btn.peligro:hover { background: var(--rojo-50); }

/* Cambio de pantalla suave (Chrome y Edge): el menú lateral y la barra superior se quedan quietos
   y solo el contenido se funde, en lugar del parpadeo de una página nueva. */
/* Solo si la persona no pidió reducir el movimiento: una sola regla, sin otra que la apague. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.side { view-transition-name: menu-lateral; }
.barra-sup { view-transition-name: barra-superior; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }


/* Páginas de error */
body.pagina-error { min-height: 100vh; display: grid; place-items: center; background: var(--fondo); padding: 24px; }
.caja-error { max-width: 460px; text-align: center; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 14px; padding: 32px 28px; box-shadow: var(--sombra-encima); }
.logo-error { max-width: 180px; margin: 0 auto 14px; display: block; }
.codigo-error { font-size: 40px; font-weight: 700; color: var(--rojo); line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.acciones-error { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* Riesgo de vencimiento */
.tag.riesgo { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.tag.riesgo svg { width: 12px; height: 12px; }
.tag.riesgo.alto { background: var(--rojo-50); color: var(--peligro-texto); border-color: var(--peligro-borde); }
.tag.riesgo.medio { background: var(--alerta-fondo); color: var(--alerta-texto); border-color: var(--alerta-borde); }
.etiquetas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.aviso-riesgo { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: var(--t-denso); }
.aviso-riesgo svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso-riesgo.alto { background: var(--rojo-50); border: 1px solid var(--peligro-borde); color: var(--peligro-texto); }
.aviso-riesgo.medio { background: var(--alerta-fondo); border: 1px solid var(--alerta-borde); color: var(--alerta-texto); }
.en-riesgo h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.en-riesgo h2 svg { width: 18px; height: 18px; color: var(--peligro); }
.lista-riesgo li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--separador); }
.lista-riesgo li:last-child { border-bottom: 0; }
.lista-riesgo .tag { flex: none; margin-top: 2px; min-width: 96px; justify-content: center; }
.lista-riesgo .que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Sugerencia de responsable */
.sugerencia { margin: -6px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--azul-50); border: 1px solid var(--info-borde); }
.titulo-sugerencia { display: flex; align-items: center; gap: 6px; font-size: var(--t-etiqueta); font-weight: 600; color: var(--info-texto); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.titulo-sugerencia svg { width: 15px; height: 15px; }
.opciones-sugerencia { display: flex; flex-direction: column; gap: 6px; }
.opcion-sugerida { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--azul-200); background: var(--superficie); cursor: pointer; font: inherit; }
.opcion-sugerida:hover { border-color: var(--azul-500); box-shadow: 0 0 0 3px var(--azul-100); }
.opcion-sugerida strong { color: var(--marino); font-size: var(--t-denso); }
.opcion-sugerida small { color: var(--texto-apagado); font-size: var(--t-etiqueta); }

/* Resumen en palabras y tareas que faltan */
.resumen-texto h2, .faltantes h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resumen-texto h2 svg { width: 18px; height: 18px; color: var(--azul-500); }
.faltantes h2 svg { width: 18px; height: 18px; color: var(--alerta-icono); }
.resumen-texto ul { display: grid; gap: 6px; }
.resumen-texto li { position: relative; padding-left: 16px; color: var(--texto-2); line-height: 1.5; }
.resumen-texto li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--azul-500); }
.faltantes .lista-riesgo li { align-items: center; justify-content: space-between; }
.faltantes .que { flex: 1; }
.resumen-texto li { border: 0 !important; padding: 3px 0 3px 16px !important; }
.resumen-texto li::before { top: .75em; }

/* Hoja de vida */
.acciones-cabecera { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.informe-mes { display: flex; gap: 6px; margin: 0; align-items: center; }
.informe-mes select { width: auto; min-width: 0; font: inherit; font-size: var(--t-denso); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--n-150); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: var(--t-denso); }
.linea-tiempo li::before { content: ""; position: absolute; left: -20px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--azul-500); }
.linea-tiempo time { color: var(--texto-apagado); font-variant-numeric: tabular-nums; font-size: var(--t-etiqueta); padding-top: 1px; }
.linea-tiempo a { margin-left: 4px; }
.fila-simple { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--separador); }
@media (max-width: 760px) { .linea-tiempo li { grid-template-columns: 1fr; gap: 0; } }

/* Asistente IA */
.resumen-ia { border-left: 3px solid var(--azul-500); }
.resumen-ia h2 svg, .asistente h2 svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; color: var(--azul-500); }
.asistente textarea { width: 100%; font: inherit; }
.asistente .respuesta { white-space: pre-line; background: var(--n-50, #F5F8FB); border: 1px solid var(--separador); border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
.propuestas td { vertical-align: top; }
.propuestas input[type=text], .propuestas select, .propuestas input[type=date] { width: 100%; font: inherit; font-size: var(--t-denso); }
.propuestas .desc-ia { font-size: var(--t-etiqueta); color: var(--texto-apagado); margin-top: 4px; }

/* Pestañas del tablero */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--n-200); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas [role=tab] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--texto-apagado); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.pestanas [role=tab]:hover { color: var(--marino, #133A63); }
.pestanas [role=tab][aria-selected=true] { color: var(--marino, #133A63); border-bottom-color: var(--azul-500); }
.pestanas [role=tab]:focus-visible { outline: 2px solid var(--azul-500); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.pestanas .contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--n-150); color: var(--texto); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.pestanas [aria-selected=true] .contador { background: var(--azul-500); color: #fff; }
.panel-pestana[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .pestanas.lista ~ .panel-pestana:not([hidden]) { animation: aparecer .18s ease-out; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Pantallas grandes: la columna de estado y responsable del detalle no queda angosta. */
@media (min-width: 1800px) { .detalle { grid-template-columns: minmax(0, 1fr) 420px; } .form-tarea { grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); } }

/* Mensajes: lista de conversaciones a la izquierda y la conversación a la derecha; en pantalla pequeña, una a la vez. */
.chat { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; height: calc(100dvh - 136px); min-height: 480px; }
.chat-lista, .chat-panel { background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.chat-lista { overflow-y: auto; }
.chat-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--separador); position: sticky; top: 0; background: var(--superficie); }
.chat-lista-cab h2 { margin: 0; font-size: var(--t-seccion); }
.chat-lista-cab .btn { padding: 6px 10px; font-size: var(--t-denso); }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--separador); }
.chat-item:hover { background: var(--n-50); }
.chat-item.activa { background: var(--azul-50); box-shadow: inset 3px 0 0 var(--accion); }
.chat-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-item-texto strong, .chat-item-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-texto small { color: var(--texto-apagado); }
.chat-item.sin-leer .chat-item-texto small { color: var(--texto); font-weight: 600; }
.chat-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--texto-apagado); font-size: var(--t-etiqueta); }
.chat-item .avatar svg { width: 16px; height: 16px; }
.chat-vacio-lista { padding: 14px; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--separador); }
.chat-cab h1 { font-size: 17px; margin: 0; }
.chat-volver { display: none; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--n-25); }
.burbuja { max-width: min(72%, 640px); align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px 12px 12px 4px; padding: 8px 12px; }
.burbuja.mia { align-self: flex-end; background: var(--azul-50); border-color: var(--azul-200); border-radius: 12px 12px 4px 12px; }
.burbuja-autor { font-size: var(--t-etiqueta); font-weight: 600; color: var(--azul-700); margin-bottom: 2px; }
.burbuja-texto { overflow-wrap: anywhere; }
.burbuja-pie { display: flex; gap: 10px; justify-content: flex-end; font-size: 11px; color: var(--texto-apagado); margin-top: 4px; }
.burbuja-pie a { color: var(--enlace); }
.chat-aviso { align-self: center; font-size: var(--t-etiqueta); color: var(--texto-2); background: var(--n-100); border-radius: 999px; padding: 4px 12px; text-align: center; }
.chat-vacio { margin: auto; }
.chat-escribir { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 4px; border-top: 1px solid var(--separador); }
.chat-escribir textarea { flex: 1; resize: vertical; min-height: 44px; max-height: 200px; }
.chat-ayuda { padding: 0 16px 10px; margin: 4px 0 0; }
.chat-nada { margin: auto; text-align: center; max-width: 380px; padding: 24px; }
.chat-nada > svg { width: 44px; height: 44px; color: var(--azul-500); }
.chat-nada h1 { font-size: 18px; margin: 8px 0 4px; }
.chat-nueva { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; overflow-y: auto; }
.chat-nueva > .campo, .chat-nueva > .chat-personas, .chat-nueva > .btn { margin-left: 16px; margin-right: 16px; }
.chat-nueva > .btn { align-self: flex-start; }
.chat-personas { flex: none; max-height: 320px; overflow-y: auto; border: 1px solid var(--borde-tarjeta); border-radius: 10px; padding: 4px 10px; }
.chat-personas fieldset { border: 0; margin: 0; padding: 6px 0; }
.chat-personas legend { font-size: var(--t-etiqueta); font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .3px; padding: 4px 0; }
.chat-persona { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.chat-persona:hover { background: var(--n-50); }
.chat-persona:has(input:checked) { background: var(--azul-50); }
.punto.azul { background: var(--azul-500); }
@media (max-width: 1024px) {
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 116px); }
  .chat.con-conversacion .chat-lista, .chat:has(.chat-nueva) .chat-lista { display: none; }
  .chat:not(.con-conversacion):not(:has(.chat-nueva)) .chat-panel { display: none; }
  .chat-volver { display: inline-flex; }
  .burbuja { max-width: 88%; }
}

/* Dashboard, pestaña «Quién cumple»: Consultechno y el cliente lado a lado, y el estado de cada persona. */
.quien-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quien-lado { border: 1px solid var(--borde-tarjeta); border-radius: 10px; padding: 10px 14px; }
.quien-lado .etq { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto-2); }
.quien-lado .valor { font-size: 20px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.quien-lado .valor.verde { color: var(--exito-texto); } .quien-lado .valor.amarillo { color: var(--alerta-texto); } .quien-lado .valor.rojo { color: var(--peligro-texto); } .quien-lado .valor.gris { color: var(--texto-apagado); }
.quien-lado .nota { font-size: var(--t-denso); color: var(--texto-2); }
.quien-veredicto { margin: 12px 0 0; font-weight: 600; }
.estado-cumple { display: inline-block; white-space: nowrap; font-size: var(--t-etiqueta); font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.estado-cumple.verde { color: var(--exito-texto); background: var(--exito-fondo); }
.estado-cumple.amarillo { color: var(--alerta-texto); background: var(--alerta-fondo); }
.estado-cumple.rojo { color: var(--peligro-texto); background: var(--peligro-fondo); }
.estado-cumple.gris { color: var(--texto-apagado); background: var(--n-100); }
@media (max-width: 700px) { .quien-lados { grid-template-columns: 1fr; } }

/* Mensajería: en línea, visto, escribiendo, separadores de día y mensajes agrupados. */
.avatar { position: relative; }
.avatar.en-linea::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--en-linea); border: 2px solid var(--superficie); }
.chat-cab .avatar.grande { flex: 0 0 auto; }
.chat-cab-texto { min-width: 0; }
.chat-estado { color: var(--texto-apagado); min-height: 1.3em; }
.chat-estado.en-linea { color: var(--exito-texto); font-weight: 600; }
.chat-mensajes { gap: 3px; background: var(--n-75); }
.burbuja { margin-top: 8px; box-shadow: 0 1px 1px rgba(16, 40, 70, .06); }
.burbuja.seguida { margin-top: 0; border-top-left-radius: 4px; }
.burbuja.mia.seguida { border-top-left-radius: 12px; border-top-right-radius: 4px; }
.burbuja.seguida .burbuja-autor { display: none; }
.burbuja.mia { background: var(--azul-100); border-color: var(--azul-200); }
.burbuja-pie { align-items: center; }
.burbuja-pie .convertir { opacity: 0; transition: opacity .15s; }
.burbuja:hover .convertir, .burbuja:focus-within .convertir { opacity: 1; }
@media (hover: none) { .burbuja-pie .convertir { opacity: 1; } }
.visto { font-size: 12px; color: var(--texto-apagado); margin-left: 2px; }
.visto.leido { color: var(--azul-500); letter-spacing: -2px; }
.chat-dia { align-self: center; margin: 12px 0 4px; font-size: var(--t-etiqueta); font-weight: 600; color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 999px; padding: 3px 12px; }
.chat-escribe { padding: 4px 18px 0; font-size: var(--t-etiqueta); color: var(--exito-texto); font-style: italic; }
.chat-escribir { align-items: flex-end; }
.chat-escribir textarea { resize: none; overflow-y: auto; border-radius: 22px; padding: 11px 16px; min-height: 44px; line-height: 1.4; }
.chat-enviar { border-radius: 22px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.chat-enviar svg { width: 18px; height: 18px; }
.chat-persona-texto { display: flex; flex-direction: column; line-height: 1.25; }
.chat-persona-texto small { font-size: 11px; }
.chat-persona-texto small.en-linea { color: var(--exito-texto); font-weight: 600; }
@media (max-width: 600px) { .chat-enviar span { display: none; } }
.chat-activar { display: flex; align-items: center; gap: 8px; margin: 10px 14px 4px; padding: 8px 10px; border: 1px dashed var(--azul-200); border-radius: 8px; background: var(--azul-50); color: var(--azul-700); font: inherit; font-size: var(--t-denso); cursor: pointer; text-align: left; }
.chat-activar svg { width: 16px; height: 16px; flex: 0 0 auto; }
.chat-activar[hidden] { display: none; }
.chat-activar:disabled { cursor: default; opacity: .7; }
.chat-emojis { position: relative; align-self: flex-end; }
.chat-emoji-abrir { font-size: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; box-shadow: none; }
.chat-emoji-abrir:hover, .chat-clip:hover { background: var(--n-100); }
.chat-clip { border: 0; background: transparent; color: var(--texto-2); }
.chat-emoji-panel { position: absolute; bottom: 52px; left: 0; z-index: 5; width: 292px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; box-shadow: var(--sombra-encima); }
.chat-emoji-panel[hidden] { display: none; }
.chat-emoji-panel button { font-size: 22px; line-height: 1; padding: 6px 0; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.chat-emoji-panel button:hover, .chat-emoji-panel button:focus-visible { background: var(--azul-50); }

/* Chat flotante: botón redondo abajo a la derecha y ventana de conversación, en todas las pantallas. */
.flotante { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.flotante-boton { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--marca-degradado); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(16, 40, 70, .28); display: grid; place-items: center; transition: transform .15s, background .15s; }
.flotante-boton:hover { background: var(--marca-hasta); transform: translateY(-1px); }
.flotante-boton svg { width: 26px; height: 26px; }
.flotante-boton .insignia { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rojo); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.flotante-boton .insignia[hidden] { display: none; }
.flotante-ventana { width: 340px; height: min(460px, calc(100dvh - 120px)); background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 14px; box-shadow: 0 12px 40px rgba(16, 40, 70, .28); display: flex; flex-direction: column; overflow: hidden; }
.flotante-ventana[hidden] { display: none; }
.flotante-barra { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; background: linear-gradient(90deg, var(--marca-desde), var(--marca-hasta)); color: #fff; }
.flotante-barra strong { flex: 1; font-size: var(--t-seccion); }
.flotante-barra .boton-icono { color: #fff; background: transparent; border-color: transparent; box-shadow: none; }
.flotante-barra .boton-icono:hover { background: rgba(255, 255, 255, .14); }
.flotante-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.flotante-cuerpo .chat-lista { border: 0; border-radius: 0; flex: 1; }
.flotante-cuerpo .chat-lista-cab { padding: 8px 12px; justify-content: flex-end; }
.flotante-cuerpo .chat-lista-cab h2 { display: none; }
.flotante-cuerpo .chat-cab { padding: 8px 10px; }
.flotante-cuerpo .chat-cab h1 { font-size: 15px; }
.flotante-cuerpo .chat-cab-miembros { display: none; }
.flotante-cuerpo .chat-volver { display: inline-flex; }
.flotante-cuerpo .chat-mensajes { padding: 10px; }
.flotante-cuerpo .burbuja { max-width: 85%; }
.flotante-cuerpo .chat-escribir { padding: 8px 10px 4px; gap: 6px; }
.flotante-cuerpo .chat-enviar span { display: none; }
.flotante-cuerpo .chat-ayuda { display: none; }
.chat-nueva .campo .small.muted { color: var(--texto-2); font-size: 13px; line-height: 1.45; margin-top: 6px; }
.flotante-cuerpo .chat-personas { max-height: 220px; }
.flotante-cuerpo .chat-emoji-panel { width: 260px; }
@media (max-width: 600px) {
  .flotante { right: 12px; bottom: 12px; }
  .flotante.abierto { left: 0; right: 0; top: 0; bottom: 0; gap: 0; }
  .flotante.abierto .flotante-ventana { width: 100%; height: 100%; border-radius: 0; }
  .flotante.abierto .flotante-boton { display: none; }
}
@media print { .flotante { display: none; } }
/* Ícono de mensajes en el botón flotante: globo de adelante relleno en blanco con los puntos en azul. */
.flotante-boton svg { width: 30px; height: 30px; }
.flotante-boton .globo-frente { fill: #fff; stroke: #fff; }
.flotante-boton .globo-puntos { stroke: var(--marca-hasta); }
.flotante-boton:hover .globo-puntos { stroke: var(--marca-hasta); }
.flotante-boton .globo-atras { stroke-width: 2; opacity: .9; }
/* Espacio al final de cada pantalla para que el botón del chat no tape la última fila. */
body:has(.flotante) .main { padding-bottom: 96px; }

/* Mi día: bloques en dos columnas, cada cosa con su acción. */
.mi-dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dia-bloque h2 { display: flex; align-items: center; gap: 8px; }
.dia-bloque h2 svg { width: 18px; height: 18px; color: var(--azul-600); }
.dia-bloque h2 .contador { margin-left: auto; }
.dia-bloque.urgente { border-top: 3px solid var(--peligro); }
.contador.gris { background: var(--n-150); color: var(--texto-2); }
.dia-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--separador); color: var(--texto); text-decoration: none; border-radius: 6px; }
a.dia-item:hover, .dia-item:hover { background: var(--n-50); text-decoration: none; }
.dia-item:last-of-type { border-bottom: 0; }
.dia-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--texto); text-decoration: none; }
.dia-texto strong, .dia-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-texto small { color: var(--texto-apagado); }
.dia-cuando { font-size: var(--t-etiqueta); color: var(--texto-2); white-space: nowrap; }
.dia-cuando.rojo { color: var(--peligro-texto); font-weight: 600; }
.dia-cuando.amarillo { color: var(--alerta-texto); font-weight: 600; }
.dia-vacio { color: var(--texto-apagado); margin: 6px 0; }
.dia-pie { display: block; margin-top: 8px; font-size: var(--t-denso); }
.dia-check { margin: 0; }
.check-rapido { width: 20px; height: 20px; border: 2px solid var(--borde-campo); border-radius: 50%; background: var(--superficie); cursor: pointer; padding: 0; }
.check-rapido:hover { border-color: var(--exito); background: var(--exito-fondo); }
@media (max-width: 1000px) { .mi-dia { grid-template-columns: minmax(0, 1fr); } }
/* Cuánto lleva una tarea esperando al cliente. */
.espera { display: inline-block; font-size: var(--t-etiqueta); color: var(--alerta-texto); margin-top: 2px; }
span.espera { margin: 0 0 0 6px; padding: 2px 8px; border-radius: 999px; background: var(--alerta-fondo); }
.espera.larga { color: var(--peligro-texto); font-weight: 600; }
span.espera.larga { background: var(--peligro-fondo); }
/* Archivos en el chat */
.chat-clip { cursor: pointer; width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.chat-clip svg { width: 20px; height: 20px; }
.chat-caja { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-caja textarea { width: 100%; }
.chat-adjunto { display: flex; align-items: center; gap: 6px; font-size: var(--t-denso); background: var(--azul-50); border: 1px solid var(--azul-200); border-radius: 10px; padding: 2px 4px 2px 10px; }
.chat-adjunto[hidden] { display: none; }
.chat-adjunto span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-adjunto .boton-icono { width: 28px; height: 28px; }
.chat-escribe.error { color: var(--peligro-texto); font-style: normal; font-weight: 600; }
.burbuja-archivo { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.burbuja-archivo img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--borde-tarjeta); }
.archivo-ficha { display: flex; align-items: center; gap: 10px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 8px; padding: 6px 10px; font-size: var(--t-denso); }
.archivo-icono { flex: 0 0 auto; min-width: 38px; padding: 6px 4px; border-radius: 6px; background: var(--azul-600); color: #fff; font-size: 10px; font-weight: 700; text-align: center; }
.archivo-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.archivo-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-datos small { color: var(--texto-apagado); }
.a-tarea summary { cursor: pointer; font-size: var(--t-denso); color: var(--enlace); font-weight: 600; }
.a-tarea form { display: flex; gap: 6px; margin-top: 6px; }
.a-tarea select { flex: 1; min-width: 0; font-size: var(--t-denso); }
.a-tarea .btn { padding: 6px 12px; font-size: var(--t-denso); }
/* Conversación de la tarea como chat: lo nuevo abajo, los míos a la derecha. */
.conv-tarea { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 10px; margin-bottom: 4px; }
.conv-tarea .comentario { max-width: 88%; align-self: flex-start; background: var(--n-50); border: 1px solid var(--borde-tarjeta); border-radius: 12px 12px 12px 4px; padding: 8px 12px; }
.conv-tarea .comentario.mio { align-self: flex-end; background: var(--azul-100); border-color: var(--azul-200); border-radius: 12px 12px 4px 12px; }
.conv-tarea .comentario.interna { background: var(--alerta-fondo); border-color: var(--alerta-borde); margin: 0; }
.conv-tarea .comentario.traspaso { border-left: 3px solid var(--azul-500); }
.conv-visto { text-align: right; min-height: 1.2em; margin-bottom: 8px; }
.conv-estado { color: var(--exito-texto); font-style: italic; font-weight: 400; }
/* Aprobar con un clic. */
.revisar.card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; border-left: 4px solid var(--azul-500); background: var(--azul-50); }
.revisar-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; }
.revisar-acciones { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.revisar-acciones form { margin: 0; }
.btn.aprobar { background: var(--exito); border-color: var(--exito); display: inline-flex; align-items: center; gap: 6px; }
.btn.aprobar:hover { background: var(--exito-texto); border-color: var(--exito-texto); }
.btn.aprobar svg { width: 16px; height: 16px; }
.pedir-cambios summary { list-style: none; cursor: pointer; }
.pedir-cambios summary::-webkit-details-marker { display: none; }
.pedir-cambios[open] .pedir-cambios-form { display: flex; }
.pedir-cambios-form { flex-direction: column; gap: 6px; margin-top: 8px; min-width: 280px; }
.dia-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dia-fila .dia-item { flex: 1 1 260px; }
.revisar.compacto .btn { padding: 4px 12px; min-height: 32px; font-size: var(--t-denso); }
.revisar.compacto .pedir-cambios-form { min-width: 240px; }
.aprobada-por { display: flex; align-items: center; gap: 6px; color: var(--exito-texto); font-weight: 600; }
.aprobada-por svg { width: 16px; height: 16px; }
/* Responder, reaccionar y buscar en el chat. */
.burbuja-cita { display: block; border-left: 3px solid var(--azul-500); background: rgba(40, 115, 170, .07); border-radius: 6px; padding: 4px 8px; margin: 2px 0 6px; font-size: var(--t-etiqueta); color: var(--texto-2); text-decoration: none; }
.burbuja-cita:hover { background: rgba(40, 115, 170, .13); text-decoration: none; }
.burbuja-cita strong { display: block; color: var(--azul-700, #1D629C); }
.burbuja-cita span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.burbuja.resaltada { animation: resaltar 1.6s ease-out; }
@keyframes resaltar { 0%, 40% { box-shadow: 0 0 0 3px var(--alerta-borde); background: var(--alerta-fondo); } }
.reacciones:empty { display: none; }
.reacciones-lista { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.reaccion { border: 1px solid var(--borde-tarjeta); background: var(--superficie); border-radius: 999px; padding: 0 8px; min-height: 24px; font-size: 13px; cursor: pointer; line-height: 22px; }
.reaccion span { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.reaccion.mia { border-color: var(--azul-500); background: var(--azul-50); }
.reaccion:hover { border-color: var(--azul-500); }
.burbuja-pie .enlace { background: none; border: 0; padding: 0; color: var(--azul-600, #2873AA); font: inherit; cursor: pointer; }
.burbuja-pie .enlace:hover { text-decoration: underline; }
.burbuja-pie .enlace, .burbuja-pie .reaccionar, .burbuja-pie .convertir { opacity: 0; transition: opacity .15s; }
.burbuja:hover .burbuja-pie .enlace, .burbuja:hover .burbuja-pie .reaccionar, .burbuja:hover .burbuja-pie .convertir, .burbuja:focus-within .burbuja-pie .enlace, .burbuja:focus-within .burbuja-pie .reaccionar, .burbuja:focus-within .burbuja-pie .convertir, .reaccionar[open] { opacity: 1; }
@media (hover: none) { .burbuja-pie .enlace, .burbuja-pie .reaccionar, .burbuja-pie .convertir { opacity: 1; } }
.reaccionar { position: relative; }
.reaccionar summary { list-style: none; cursor: pointer; font-size: 14px; line-height: 1; }
.reaccionar summary::-webkit-details-marker { display: none; }
.reaccionar-panel { position: absolute; bottom: 22px; right: -6px; z-index: 6; display: flex; gap: 2px; padding: 4px 6px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 999px; box-shadow: var(--sombra-encima); }
.burbuja:not(.mia) .reaccionar-panel { right: auto; left: -6px; }
.reaccionar-panel button { border: 0; background: none; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.reaccionar-panel button:hover { background: var(--n-50); transform: scale(1.15); }
.chat-responde { display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--azul-500); background: var(--azul-50); border-radius: 6px; padding: 4px 4px 4px 8px; margin-bottom: 4px; font-size: var(--t-etiqueta); }
.chat-responde-texto { flex: 1; min-width: 0; }
.chat-responde-texto strong { display: block; color: var(--azul-700, #1D629C); }
.chat-responde-texto span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.chat-responde[hidden] { display: none; }
.chat-buscar { padding: 8px 14px; border-bottom: 1px solid var(--borde-tarjeta); }
.chat-buscar input { width: 100%; height: 34px; border-radius: 999px; padding: 0 14px; background: var(--n-50); font-size: var(--t-denso); }
.chat-resultados-cab { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px; color: var(--texto-2); border-bottom: 1px solid var(--borde-tarjeta); }
.chat-item.resultado small { white-space: normal; }
.chat-item.resultado mark { background: var(--alerta-fondo); color: inherit; padding: 0 1px; border-radius: 2px; }
/* Lista / Tablero. */
.vista-cambio { display: inline-flex; border: 1px solid var(--n-450, #9AA8B6); border-radius: var(--radio-campo, 8px); overflow: hidden; background: var(--superficie); }
.vista-cambio a { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 38px; color: var(--texto-2); font-weight: 600; font-size: var(--t-denso); text-decoration: none; }
.vista-cambio a + a { border-left: 1px solid var(--borde-tarjeta); }
.vista-cambio a svg { width: 16px; height: 16px; }
.vista-cambio a.activa { background: var(--marca-degradado, #2873AA); color: #fff; }
.vista-cambio a:not(.activa):hover { background: var(--n-50); }
/* Tablero Kanban. */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kanban-col { background: var(--n-100); border-radius: 12px; padding: 10px; min-height: 240px; display: flex; flex-direction: column; transition: background .15s, box-shadow .15s; }
.kanban-col.sobre { background: var(--azul-50); box-shadow: inset 0 0 0 2px var(--azul-500); }
.kanban-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kanban-nota { margin: -4px 0 8px; }
.kanban-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 60px; }
.kanban-tarjeta { background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-left: 4px solid var(--n-300); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(16, 40, 70, .06); }
.kanban-tarjeta[draggable=true] { cursor: grab; }
.kanban-tarjeta:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
.kanban-tarjeta.arrastrando { opacity: .45; }
.kanban-tarjeta.prioridad-alta { border-left-color: var(--alerta); }
.kanban-tarjeta.prioridad-urgente { border-left-color: var(--peligro, #C62828); }
.kanban-titulo { display: block; font-weight: 600; color: var(--texto); line-height: 1.3; }
.kanban-cliente { margin-top: 2px; }
.kanban-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kanban-fecha { margin-left: auto; font-size: var(--t-etiqueta); color: var(--texto-2); }
.kanban-fecha.vencida { color: var(--peligro-texto, #B3261E); font-weight: 600; }
.kanban-mover { margin-top: 6px; font-size: var(--t-etiqueta); display: none; }
.kanban-mover summary { cursor: pointer; color: var(--azul-600, #2873AA); }
.kanban-mover-opciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kanban-mover-opciones button { border: 1px solid var(--borde-tarjeta); background: var(--n-50); border-radius: 999px; padding: 4px 10px; font: inherit; cursor: pointer; }
@media (hover: none) { .kanban-mover { display: block; } }
.kanban-aviso { margin-bottom: 10px; padding: 8px 14px; border-radius: 8px; background: var(--exito-fondo); color: var(--exito-texto); border: 1px solid var(--exito-borde); font-weight: 600; }
.kanban-aviso.error { background: var(--peligro-fondo, #FDECEA); color: var(--peligro-texto, #B3261E); border-color: var(--peligro-borde, #F5C2BE); }
.kanban-cierre { border: 0; border-radius: 14px; padding: 22px 24px; width: min(440px, 92vw); box-shadow: var(--sombra-encima); }
.kanban-cierre::backdrop { background: rgba(16, 32, 52, .45); }
.kanban-cierre h2 { margin: 0 0 4px; }
.kanban-cierre textarea { width: 100%; margin-top: 6px; }
.kanban-cierre-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 900px) { .kanban { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; } .kanban-col { scroll-snap-align: start; } }
/* Calendario de vencimientos. */
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-mes { min-width: 150px; text-align: center; font-size: 17px; color: var(--marino, #1D3A5C); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-left: auto; color: var(--texto-2); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.cal-punto.tarea { background: var(--azul-500); } .cal-punto.vencida { background: var(--peligro, #C62828); } .cal-punto.hecha { background: var(--exito); } .cal-punto.dian { background: var(--alerta); }
.cal { background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; overflow: hidden; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab div { padding: 8px 10px; font-size: var(--t-etiqueta); font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; background: var(--n-50); border-bottom: 1px solid var(--borde-tarjeta); }
.cal-dia { min-height: 112px; padding: 6px; border-right: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-semana .cal-dia:last-child { border-right: 0; }
.cal-dia.finde { background: var(--n-25, #FBFCFD); }
.cal-dia.fuera { background: var(--n-50); } .cal-dia.fuera .cal-num { color: var(--n-450, #9AA8B6); }
.cal-num { font-size: var(--t-denso); font-weight: 600; color: var(--texto-2); margin-bottom: 2px; }
.cal-dia.hoy .cal-num { background: var(--marca-degradado, #2873AA); color: #fff; border-radius: 999px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.cal-item { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.3; border-radius: 5px; padding: 2px 6px; min-width: 0; text-decoration: none; border-left: 3px solid transparent; }
.cal-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cal-item.tarea { background: var(--azul-50); color: var(--azul-800, #164E7E); border-left-color: var(--azul-500); }
.cal-item.tarea:hover { background: var(--azul-100); text-decoration: none; }
.cal-item.tarea.vencida { background: var(--peligro-fondo, #FDECEA); color: var(--peligro-texto, #B3261E); border-left-color: var(--peligro, #C62828); }
.cal-item.tarea.hecha { background: var(--exito-fondo); color: var(--exito-texto); border-left-color: var(--exito); }
.cal-item.dian { background: var(--alerta-fondo); color: var(--alerta-texto); border-left-color: var(--alerta); }
.cal-item.dian.cubierta { opacity: .7; }
.cal-crear { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--alerta); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; line-height: 1; }
.cal-crear:hover { background: var(--alerta-texto); text-decoration: none; }
.cal-agenda { display: none; }
.cal-agenda-dia { margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-agenda-dia.hoy { border-left: 4px solid var(--azul-500); }
.cal-agenda-dia h2 { font-size: 15px; margin: 0 0 4px; }
.cal-agenda .cal-item { font-size: 13px; padding: 6px 8px; }
@media (max-width: 760px) { .cal { display: none; } .cal-agenda { display: block; } .cal-leyenda { margin-left: 0; } }
.perfil-tributario { border: 1px solid var(--borde-tarjeta); border-radius: 8px; padding: 8px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.perfil-tributario legend { font-weight: 700; font-size: var(--t-denso); padding: 0 4px; }
/* Texto del chat: enlaces, negrita, emoticón grande y soltar archivos. */
.burbuja-texto a { color: var(--azul-700, #1D629C); text-decoration: underline; overflow-wrap: anywhere; }
.burbuja-texto.solo-emoji { font-size: 40px; line-height: 1.15; }
.burbuja:has(.solo-emoji):not(:has(.burbuja-archivo)):not(:has(.burbuja-cita)) { background: transparent; border-color: transparent; box-shadow: none; }
.chat-panel, .flotante-cuerpo { position: relative; }
.chat-soltar { position: absolute; inset: 8px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 10px; border: 3px dashed var(--azul-500); border-radius: 14px; background: rgba(237, 245, 252, .94); color: var(--azul-700, #1D629C); font-weight: 700; font-size: 17px; pointer-events: none; }
.chat-soltar[hidden] { display: none; }
.chat-soltar svg { width: 26px; height: 26px; }
/* Panel de emoticones con grupos, recientes y búsqueda. */
.chat-emoji-panel { display: flex !important; flex-direction: column; gap: 6px; width: 320px; max-height: 340px; padding: 8px; }
.chat-emoji-panel[hidden] { display: none !important; }
.flotante-cuerpo .chat-emoji-panel { width: 300px; max-height: 300px; }
.emoji-buscar { width: 100%; height: 32px; border-radius: 999px; padding: 0 12px; font-size: var(--t-denso); background: var(--n-50); }
.emoji-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde-tarjeta); padding-bottom: 4px; }
.emoji-pestanas button { flex: 1; font-size: 18px; padding: 4px 0; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.emoji-pestanas button:hover { background: var(--azul-50); }
.emoji-pestanas button[hidden] { display: none; }
.emoji-cuerpo { overflow-y: auto; flex: 1; min-height: 0; position: relative; }
.emoji-grupo[hidden] { display: none; }
.emoji-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); padding: 6px 4px 2px; position: sticky; top: 0; background: var(--superficie); }
.emoji-rejilla { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.flotante-cuerpo .emoji-rejilla { grid-template-columns: repeat(7, 1fr); }
.emoji-rejilla button { font-size: 22px; line-height: 1; padding: 5px 0; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.emoji-rejilla button:hover, .emoji-rejilla button:focus-visible { background: var(--azul-50); transform: scale(1.12); }
.emoji-rejilla button[hidden] { display: none; }
.emoji-modo { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-denso); font-weight: 600; color: var(--azul-700, #1D629C); background: var(--azul-50); border-radius: 8px; padding: 4px 8px; }
.emoji-modo[hidden] { display: none; }
.emoji-modo .enlace { background: none; border: 0; color: var(--azul-600, #2873AA); cursor: pointer; font: inherit; text-decoration: underline; }
.reaccion-mas { font-size: 16px !important; font-weight: 700; color: var(--texto-2); background: var(--n-50) !important; }
/* Editar o eliminar un mensaje. */
.burbuja.eliminada .burbuja-texto { font-style: italic; color: var(--texto-apagado); }
.burbuja.eliminada { background: var(--n-50); border-style: dashed; }
.burbuja-pie .editado { font-style: italic; color: var(--texto-apagado); }
.burbuja-pie .enlace.peligro { color: var(--peligro-texto, #B3261E); font-weight: 600; opacity: 1; }
.burbuja-editar { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 60vw); }
.burbuja-editar textarea { width: 100%; border-radius: 10px; padding: 8px 10px; }
.burbuja-editar-botones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.burbuja-editar-botones .enlace { background: none; border: 0; color: var(--azul-600, #2873AA); cursor: pointer; font: inherit; }
.burbuja-pie .enlace[data-editar], .burbuja-pie .enlace[data-eliminar] { opacity: 0; transition: opacity .15s; }
.burbuja:hover .burbuja-pie .enlace[data-editar], .burbuja:hover .burbuja-pie .enlace[data-eliminar], .burbuja:focus-within .burbuja-pie .enlace[data-editar], .burbuja:focus-within .burbuja-pie .enlace[data-eliminar] { opacity: 1; }
@media (hover: none) { .burbuja-pie .enlace[data-editar], .burbuja-pie .enlace[data-eliminar] { opacity: 1; } }
/* @menciones en los grupos. */
.chat-escribir { position: relative; }
.menciones-lista { position: absolute; left: 110px; bottom: 58px; z-index: 6; min-width: 220px; max-width: 320px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 10px; box-shadow: var(--sombra-encima); padding: 4px; display: flex; flex-direction: column; }
.menciones-lista[hidden] { display: none; }
.menciones-lista button { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: inherit; cursor: pointer; color: var(--texto); }
.menciones-lista button.activa, .menciones-lista button:hover { background: var(--azul-50); color: var(--azul-700, #1D629C); font-weight: 600; }
.mencion { color: var(--azul-700, #1D629C); font-weight: 600; }
.mencion.yo { background: var(--alerta-fondo); color: var(--alerta-texto); border-radius: 4px; padding: 0 3px; }
.visto[data-grupo] { font-size: 11px; white-space: nowrap; }
/* Fijar, silenciar y archivar. */
.chat-fijado { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 16px; background: var(--azul-50); border-bottom: 1px solid var(--azul-200); font-size: var(--t-denso); }
.chat-fijado-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); text-decoration: none; }
.chat-fijado-texto:hover { text-decoration: underline; }
.chat-fijado-quien { white-space: nowrap; }
.chat-fijado .boton-icono { width: 28px; height: 28px; background: transparent; border: 0; }
.chat-fijado .boton-icono svg { width: 14px; height: 14px; }
.chat-cab { position: relative; }
.chat-opciones { margin-left: auto; }
.chat-opciones summary { list-style: none; font-size: 20px; font-weight: 700; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-opciones summary::-webkit-details-marker { display: none; }
.chat-opciones .desplegable { right: 0; left: auto; min-width: 250px; }
.chat-opciones .desplegable button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 14px; font: inherit; cursor: pointer; border-radius: 6px; }
.chat-opciones .desplegable button:hover { background: var(--n-50); }
.chat-silenciada { font-size: 16px; margin-left: auto; }
.chat-silenciada + .chat-opciones { margin-left: 4px; }
.chat-item.silenciada .chat-item-texto small { color: var(--texto-apagado); }
.chat-item-silencio { font-size: 12px; }
.punto-no-leido { width: 12px; height: 12px; min-width: 12px; padding: 0; border-radius: 50%; }
.chat-archivadas { border-top: 1px solid var(--borde-tarjeta); }
.chat-archivadas summary { padding: 10px 14px; cursor: pointer; font-size: var(--t-denso); font-weight: 600; color: var(--texto-2); }
.burbuja-pie .enlace[data-fijar] { opacity: 0; transition: opacity .15s; }
.burbuja:hover .burbuja-pie .enlace[data-fijar], .burbuja:focus-within .burbuja-pie .enlace[data-fijar] { opacity: 1; }
@media (hover: none) { .burbuja-pie .enlace[data-fijar] { opacity: 1; } }
/* Chat en pantallas pequeñas y táctiles. */
.burbuja-pie { flex-wrap: wrap; row-gap: 2px; }
.burbuja-pie time, .burbuja-pie .visto { white-space: nowrap; }
.dia-fila { min-width: 0; }
@media (max-width: 600px) {
  .chat-ayuda, .chat-cab-miembros, .chat-fijado-quien { display: none; }
  .burbuja { max-width: 86%; }
  .chat-mensajes { padding-left: 10px; padding-right: 10px; }
  .menciones-lista { left: 8px; right: 8px; max-width: none; }
  .chat-emoji-panel { width: min(320px, calc(100vw - 40px)); }
}
/* En el celular las acciones del mensaje salen al tocarlo, para no llenar la burbuja. */
@media (hover: none) {
  .burbuja-pie .enlace, .burbuja-pie .reaccionar, .burbuja-pie .convertir { display: none; }
  .burbuja.con-acciones .burbuja-pie .enlace, .burbuja.con-acciones .burbuja-pie .reaccionar, .burbuja.con-acciones .burbuja-pie .convertir { display: inline-block; opacity: 1; }
  .burbuja.con-acciones { box-shadow: 0 0 0 2px var(--azul-200); }
  .burbuja.con-acciones .burbuja-pie { gap: 14px; font-size: 13px; }
}
@media (max-width: 600px) {
  .acciones-cabecera { flex-wrap: wrap; width: 100%; }
  .informe-mes { flex-wrap: wrap; width: 100%; }
  .informe-mes select { flex: 1 1 120px; }
  .informe-mes .btn, .acciones-cabecera > .btn { flex: 1 1 100%; justify-content: center; }
  .menu-sup .desplegable { max-width: calc(100vw - 24px); }
  .menu-sup.cuenta .desplegable { right: -4px; }
}
.filtros label.check { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.filtros label.check input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; }
@media (max-width: 600px) {
  .cal-nav { width: 100%; justify-content: space-between; }
  .cal-mes { min-width: 0; font-size: 16px; white-space: nowrap; }
  .filtros label.check { margin-top: 0 !important; }
  .cal-leyenda { gap: 6px 12px; }
}
@media (max-width: 600px) { .cal-nav .btn { flex: 0 0 auto !important; width: auto !important; min-width: 44px; } .cal-mes { flex: 1; text-align: center; } }
/* Fotos de perfil y cumpleaños. */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.en-linea { overflow: visible; }
.perfil-fila { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.perfil-foto { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 180px; text-align: center; }
.perfil-avatar { width: 112px; height: 112px; font-size: 38px; }
.perfil-campos { flex: 1 1 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.perfil-cumple { display: flex; gap: 8px; }
.perfil-cumple select { flex: 1; }
.cumples { margin-bottom: 16px; }
.cumples h2 { margin-bottom: 8px; }
.cumples-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.cumple { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--borde-tarjeta); border-radius: 12px; min-width: 240px; flex: 1 1 240px; }
.cumple.hoy { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.cumple-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cumple-texto small { color: var(--texto-apagado); }
.cumple-mio { margin-bottom: 16px; background: var(--alerta-fondo); border-color: var(--alerta-borde); font-size: 16px; }
@media (max-width: 600px) { .perfil-foto { width: 100%; } }
/* Obligaciones tributarias. */
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.plantilla { border: 1px solid var(--borde-tarjeta); border-radius: 10px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.plantilla legend { font-weight: 700; padding: 0 4px; }
.plantilla textarea { width: 100%; font-size: var(--t-denso); }
.plantilla-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-denso); }
.plantilla-pie .dias { width: 64px; display: inline-block; margin: 0 4px; }
.responsables-obl select { min-width: 140px; font-size: var(--t-denso); }
.cal-crear-mes { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; border-left: 4px solid var(--alerta); }
.cal-crear-mes-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-crear-mes form { margin: 0; }

/* Chat: reenviar, fichas de tareas, galería, respuestas rápidas, programar y grupos de avisos */
.burbuja-reenviado { font-size: var(--t-etiqueta); color: var(--texto-2); font-style: italic; margin-bottom: 2px; }
.ficha-tarea { display: block; border: 1px solid var(--azul-200); border-left: 4px solid var(--azul-500); background: var(--superficie); border-radius: 8px; padding: 6px 10px; margin: 6px 0 2px; text-decoration: none; color: var(--texto); }
.ficha-tarea strong { display: block; font-size: var(--t-denso); }
.ficha-tarea small { color: var(--texto-2); }
.ficha-tarea:hover { background: var(--azul-50); }
.dialogo-reenviar { border: 0; border-radius: 14px; padding: 22px 24px; width: min(440px, 92vw); box-shadow: var(--sombra-encima); }
.dialogo-reenviar::backdrop { background: rgba(16, 32, 52, .45); }
.dialogo-reenviar h2 { margin: 0 0 4px; }
.dialogo-reenviar select { width: 100%; margin: 6px 0; }
.cita-reenviar { border-left: 3px solid var(--azul-500); padding-left: 8px; }
.acciones-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.chat-solo-lectura { margin: 8px 16px; padding: 10px 14px; border-radius: 10px; background: var(--azul-50); border: 1px solid var(--azul-200); font-size: var(--t-denso); color: var(--texto-2); }
.chat-programar { position: relative; }
.chat-programar > summary { list-style: none; cursor: pointer; }
.chat-programar > summary::-webkit-details-marker { display: none; }
.chat-programar-panel { position: absolute; left: 0; bottom: 50px; z-index: 6; width: 260px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; box-shadow: var(--sombra-encima); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-denso); }
.chat-programar-panel label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.chat-programar-otra { display: flex; gap: 6px; }
.chat-programar-otra[hidden] { display: none; }
.chat-programar-otra select { flex: 1; min-width: 0; font-size: var(--t-denso); }
.chat-programar-barra { display: flex; align-items: center; gap: 6px; font-size: var(--t-denso); background: var(--aviso-amarillo); border: 1px solid var(--alerta-borde); border-radius: 10px; padding: 2px 4px 2px 10px; margin-bottom: 4px; color: var(--alerta-texto); }
.chat-programar-barra[hidden] { display: none; }
.chat-programados { margin: 0 16px 4px; display: flex; flex-direction: column; gap: 4px; }
.chat-programado { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: var(--t-etiqueta); background: var(--aviso-amarillo); border: 1px dashed var(--alerta-borde); border-radius: 8px; padding: 4px 10px; color: var(--alerta-texto); }
.chat-programado form { margin: 0; }
.rapidas-lista button { white-space: normal; }
.galeria .galeria-cuerpo { padding: 12px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.galeria-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.galeria-imagenes a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--separador); }
.galeria-imagenes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-fila { margin-top: 8px; flex-wrap: wrap; }
.galeria-enlace { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--separador); word-break: break-all; }
.rapidas-nueva { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin-bottom: 16px; }
.rapidas-nueva button { align-self: flex-start; }
.rapidas-lista-pag { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.rapidas-lista-pag li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--separador); }
.rapidas-lista-pag form { margin: 0; }
.check-linea { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: var(--t-denso); }
@media (max-width: 600px) {
  .chat-programar-panel { left: -90px; width: min(260px, 86vw); }
  .chat-escribir { gap: 2px; padding-left: 6px; padding-right: 8px; }
  .chat-escribir .chat-clip, .chat-escribir .chat-emoji-abrir { width: 36px; height: 40px; }
  .chat-escribir .chat-enviar { min-width: 44px; padding-left: 12px; padding-right: 12px; }
  .chat-programados, .chat-solo-lectura { margin-left: 8px; margin-right: 8px; }
}

/* Caja de escribir en espacios angostos (ventana flotante y celular): el texto a todo lo ancho arriba, los botones debajo. */
.flotante-cuerpo .chat-escribir { flex-wrap: wrap; row-gap: 4px; }
.flotante-cuerpo .chat-escribir .chat-caja { order: -1; flex: 1 1 100%; }
.flotante-cuerpo .chat-escribir .chat-enviar { margin-left: auto; min-height: 38px; }
.flotante-cuerpo .chat-escribir .chat-clip, .flotante-cuerpo .chat-escribir .chat-emoji-abrir { width: 38px; height: 38px; }
.flotante-cuerpo .chat-programar-panel { left: 0; }
@media (max-width: 600px) {
  .chat-escribir { flex-wrap: wrap; row-gap: 4px; }
  .chat-escribir .chat-caja { order: -1; flex: 1 1 100%; }
  .chat-escribir .chat-enviar { margin-left: auto; min-height: 40px; }
  .chat-programar-panel { left: 0; }
}

/* Los tres botones de la caja de escribir (emoticones, adjuntar y programar) del mismo tamaño y en la misma línea:
   el clip es un <label> y no debe llevar el margen de las etiquetas de formulario. */
label.chat-clip { margin: 0; display: grid; place-items: center; }
.chat-programar-panel label { margin: 0; font-weight: 500; }
.chat-emoji-abrir { display: grid; place-items: center; line-height: 1; padding: 0; }
.chat-programar > summary { display: grid; place-items: center; }

/* Pasos de una tarea nueva: lista numerada, un renglón por paso */
.pasos-form { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.pasos-form legend { font-weight: 600; font-size: var(--t-denso); color: var(--n-700); margin-bottom: 6px; padding: 0; }
.pasos-lista { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: 6px; }
.paso-fila { counter-increment: paso; display: flex; align-items: center; gap: 8px; }
.paso-num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--azul-50); border: 1px solid var(--azul-200); color: var(--azul-700, #1D629C); font-weight: 700; font-size: var(--t-etiqueta); display: grid; place-items: center; }
.paso-num::before { content: counter(paso); }
.paso-fila input { flex: 1; min-width: 0; }
.paso-quitar { flex: 0 0 34px; width: 34px; height: 34px; }
.paso-quitar svg { width: 16px; height: 16px; }
.paso-quitar[hidden] { visibility: hidden; display: grid; }
.paso-agregar { margin-bottom: 4px; }
.paso-quitar { border: 0; background: transparent; box-shadow: none; color: var(--texto-apagado); border-radius: 8px; padding: 0; min-height: 0; }
.paso-quitar:hover, .paso-quitar:focus-visible { background: var(--peligro-fondo); color: var(--rojo); }
.paso-quitar svg { width: 15px; height: 15px; stroke-width: 2.2; }

/* Menú lateral por grupos que se abren y se cierran, y renglones más bajos para que quepa en un portátil */
.side nav a { padding: 7px 12px; margin-bottom: 1px; }
.side nav a.cta { margin: 6px 0 4px; }
.side .producto { padding-top: 12px; }
.grupo-menu { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 4px; }
.grupo-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: var(--t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: #EAF2F9; padding: 8px 12px 6px; border-radius: var(--radio-campo);
}
.grupo-menu > summary::-webkit-details-marker { display: none; }
.grupo-menu > summary:hover { background: rgba(255, 255, 255, .10); }
.grupo-menu > summary svg { width: 14px; height: 14px; margin-left: auto; transition: transform var(--rapida) ease-out; }
.grupo-menu[open] > summary svg { transform: rotate(180deg); }
.grupo-menu[open] > summary .contador { display: none; }
.grupo-menu > summary .contador { font-size: 10px; letter-spacing: 0; }
@media (min-width: 1025px) {
  body.menu-compacto .grupo-menu { margin-top: 4px; padding-top: 4px; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  body.menu-compacto .grupo-menu > summary { display: none; }
}

/* Cada persona con su propio color en el círculo (el mismo en todas las pantallas), para que dos «AD» no se confundan.
   Ocho tonos oscuros: la letra blanca pasa AA en todos. */
.ini-color { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.ini-color.c0 { background: #B42318; }
.ini-color.c1 { background: #1D629C; }
.ini-color.c2 { background: #0F7B5F; }
.ini-color.c3 { background: #7A4EA8; }
.ini-color.c4 { background: #B54708; }
.ini-color.c5 { background: #0E7490; }
.ini-color.c6 { background: #C11574; }
.ini-color.c7 { background: #475467; }
.avatar.en-linea .ini-color { border-radius: 50%; }

/* Botón del chat: se esconde mientras se baja por la pantalla (para no tapar filas ni fechas) y vuelve al subir o al llegar al final. */
.flotante-boton { transition: transform .22s ease-out, opacity .22s ease-out, background .15s; }
.flotante.escondido:not(.abierto) .flotante-boton { transform: translateY(96px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .flotante-boton { transition: opacity .1s; } .flotante.escondido:not(.abierto) .flotante-boton { transform: none; } }

/* Fecha con opciones rápidas (en vez del calendario del navegador) */
.fecha-rapida { position: relative; min-width: 0; }
.fecha-boton { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  padding: 8px 12px; border: 1px solid var(--borde-campo, #8DA0B3); border-radius: var(--radio-campo); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; }
.fecha-boton.vacia { color: var(--texto-apagado); }
.fecha-boton:hover { border-color: var(--azul-500); }
.fecha-icono { color: var(--texto-apagado); font-size: 12px; }
.fecha-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 290px; max-width: 90vw; background: var(--superficie);
  border: 1px solid var(--borde-tarjeta); border-radius: 12px; box-shadow: var(--sombra-encima); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.fecha-panel[hidden] { display: none; }
.fecha-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fecha-opciones button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 1px solid var(--separador);
  border-radius: 8px; background: var(--superficie); font: inherit; cursor: pointer; text-align: left; color: var(--texto); }
.fecha-opciones button span { font-weight: 600; font-size: var(--t-denso); }
.fecha-opciones button small { color: var(--texto-2); }
.fecha-opciones button:hover, .fecha-opciones button:focus-visible { background: var(--azul-50); border-color: var(--azul-200); }
.fecha-opciones button.elegida { background: var(--azul-50); border-color: var(--azul-500); }
.fecha-otra { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--t-etiqueta); color: var(--texto-2); font-weight: 600; }
.fecha-otra select, .fecha-otra input[type=date] { width: 100%; font-weight: 400; cursor: pointer; }
.fecha-quitar { align-self: flex-start; color: var(--rojo); }
.nuevo-paso .fecha-rapida { min-width: 0; }
.paso-editar .fecha-rapida { min-width: 170px; }
.paso-editar .fecha-boton { min-height: 32px; padding: 5px 8px; font-size: var(--t-denso); }

/* Soportes: recuadro para soltar o elegir archivos */
.form-soportes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.zona-archivos { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; margin: 0; padding: 16px 18px;
  border: 2px dashed var(--azul-200); border-radius: 12px; background: var(--azul-50); cursor: pointer; font-weight: 400; color: var(--texto); transition: background .15s, border-color .15s; }
.zona-archivos svg { grid-row: span 2; width: 26px; height: 26px; color: var(--azul-600); }
.zona-archivos:hover, .zona-archivos.encima { border-color: var(--azul-500); background: var(--azul-100); }
.zona-archivos:focus-within { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.zona-texto strong { color: var(--azul-700, #1D629C); }
.zona-ayuda { font-size: var(--t-etiqueta); color: var(--texto-2); }
.zona-lista { list-style: none; margin: 0; padding: 0; font-size: var(--t-denso); display: flex; flex-direction: column; gap: 3px; }
.zona-lista li.mal { color: var(--rojo); }
.form-soportes [data-zona-enviar] { align-self: flex-start; }

/* Mi día: solo lo que tiene algo; lo vacío va resumido en una línea */
.al-dia-linea { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; color: var(--texto-2); font-size: var(--t-denso); }
.al-dia-linea svg { width: 18px; height: 18px; color: var(--exito, #17803D); flex: none; }
.al-dia-todo { display: flex; align-items: center; gap: 18px; padding: 22px 24px; flex-wrap: wrap; }
.al-dia-todo h2 { margin: 0 0 2px; border: 0; padding: 0; }
.al-dia-todo p { margin: 0; }
.al-dia-todo > div { flex: 1; min-width: 220px; }
.al-dia-icono { width: 48px; height: 48px; border-radius: 50%; background: var(--exito-fondo); color: var(--exito, #17803D); display: grid; place-items: center; flex: none; }
.al-dia-icono svg { width: 26px; height: 26px; stroke-width: 2.4; }

/* Lista de tareas: el cliente en una sola línea (el nombre completo sale al pasar el mouse) y el responsable con su círculo */
.col-cliente { max-width: 210px; }
.col-cliente span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-persona { white-space: nowrap; }
.col-persona .avatar.mini { margin-right: 7px; vertical-align: middle; }
.col-persona > span:last-child { vertical-align: middle; }
.tabla-tareas td:nth-last-child(1), .tabla-tareas th:nth-last-child(1) { padding-right: 20px; }
.tabla-tareas .col-cliente { max-width: 175px; }

/* Calendario: hasta dos líneas por evento y lo repetido agrupado con el número de clientes */
.cal-dia .cal-item .cal-texto { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.cal-grupo { position: relative; }
.cal-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cal-grupo > summary::-webkit-details-marker { display: none; }
.cal-grupo > summary .cal-texto { flex: 1; min-width: 0; }
.cal-cuantos { flex: none; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(19, 58, 99, .12); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cal-grupo-lista { position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; width: max(280px, 100%); background: var(--superficie); border: 1px solid var(--borde-tarjeta);
  border-radius: 10px; box-shadow: var(--sombra-encima); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-grupo-lista > strong { font-size: var(--t-etiqueta); color: var(--texto-2); padding: 2px 4px 4px; }
.cal-grupo-lista .cal-item { display: flex; align-items: center; gap: 6px; }
.cal-grupo-lista .cal-item small { margin-left: auto; color: var(--texto-2); font-size: 11px; white-space: nowrap; }
.cal-semana > .cal-dia:nth-child(n+6) .cal-grupo-lista { left: auto; right: 0; }

/* Aviso breve abajo al centro: no empuja el contenido y se va solo */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 8px 10px 16px; border-radius: 12px; background: #17603A; color: #fff;
  box-shadow: 0 10px 28px rgba(16, 40, 70, .30); font-size: var(--t-denso); animation: toast-entra .22s ease-out; }
.toast > svg { width: 18px; height: 18px; flex: none; stroke-width: 2.4; }
.toast span { flex: 1; }
.toast .boton-icono { width: 30px; height: 30px; color: #fff; background: transparent; border: 0; }
.toast .boton-icono:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.toast .boton-icono svg { width: 15px; height: 15px; }
.toast.saliendo { opacity: 0; transform: translate(-50%, 8px); transition: opacity .22s, transform .22s; }
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.saliendo { transition: none; } }
@media print { .toast { display: none; } }

/* Esqueleto gris mientras carga (ventana del chat) */
.esqueleto { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.esqueleto span { display: block; height: 42px; border-radius: 10px; background: linear-gradient(90deg, var(--n-100) 0%, var(--n-75) 40%, var(--n-100) 80%); background-size: 300% 100%; animation: esqueleto 1.2s ease-in-out infinite; }
.esqueleto span:nth-child(2) { width: 85%; }
.esqueleto span:nth-child(3) { width: 70%; }
.esqueleto span:nth-child(4) { width: 90%; }
@keyframes esqueleto { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto span { animation: none; } }

/* ---------- Modo oscuro (Mi perfil > Apariencia, o el menú de la cuenta) ----------
   Cambia los colores base; el menú lateral conserva el azul de la marca. */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --n-0: #17222E;  --n-25: #1A2633; --n-50: #0E1720; --n-75: #1C2935; --n-100: #223140;
  --n-150: #2A3A4A; --n-200: #34485B; --n-300: #42586C; --n-400: #6E8396; --n-450: #7F93A6;
  --n-500: #9AAABA; --n-600: #B4C1CD; --n-700: #CBD5DF; --n-900: #E8EEF4;
  --azul-50: #15304A; --azul-100: #1A3A58; --azul-200: #26527C;
  --azul-500: #4E9CDC; --azul-600: #2C78BD; --azul-700: #8CC4F1;
  --marino: #DCE8F4; --marino-700: #B8D0E8;
  --rojo-50: #3A1A20; --rojo-100: #4D2128; --rojo-600: #FF8C99;
  --enlace: #74B5EC; --enlace-encima: #A6D0F5;
  --exito-texto: #7FD3A0; --exito-fondo: #14321F; --exito-borde: #275C3B;
  --alerta-texto: #F2C566; --alerta-fondo: #3A2E12; --alerta-borde: #6A5320; --alerta-icono: #E5B04A;
  --peligro-texto: #FF8C99; --peligro-fondo: #3A1A20; --peligro-borde: #6E2A35;
  --info-texto: #8CC4F1; --info-fondo: #15304A; --info-borde: #26527C;
  --aviso-amarillo: #3A2E12;
  --sombra-encima: 0 10px 30px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] {
    color-scheme: dark;
    --n-0: #17222E;  --n-25: #1A2633; --n-50: #0E1720; --n-75: #1C2935; --n-100: #223140;
    --n-150: #2A3A4A; --n-200: #34485B; --n-300: #42586C; --n-400: #6E8396; --n-450: #7F93A6;
    --n-500: #9AAABA; --n-600: #B4C1CD; --n-700: #CBD5DF; --n-900: #E8EEF4;
    --azul-50: #15304A; --azul-100: #1A3A58; --azul-200: #26527C;
    --azul-500: #4E9CDC; --azul-600: #2C78BD; --azul-700: #8CC4F1;
    --marino: #DCE8F4; --marino-700: #B8D0E8;
    --rojo-50: #3A1A20; --rojo-100: #4D2128; --rojo-600: #FF8C99;
    --enlace: #74B5EC; --enlace-encima: #A6D0F5;
    --exito-texto: #7FD3A0; --exito-fondo: #14321F; --exito-borde: #275C3B;
    --alerta-texto: #F2C566; --alerta-fondo: #3A2E12; --alerta-borde: #6A5320; --alerta-icono: #E5B04A;
    --peligro-texto: #FF8C99; --peligro-fondo: #3A1A20; --peligro-borde: #6E2A35;
    --info-texto: #8CC4F1; --info-fondo: #15304A; --info-borde: #26527C;
    --aviso-amarillo: #3A2E12;
    --sombra-encima: 0 10px 30px rgba(0, 0, 0, .55);
  }
}

html[data-tema="oscuro"] .barra-sup { background: rgba(14, 23, 32, .94); border-bottom-color: var(--separador); }
html[data-tema="oscuro"] .side nav a.activo, html[data-tema="oscuro"] .side nav a.cta.activo { color: #133A63; }
html[data-tema="oscuro"] .cal-item.tarea { --azul-800: #A6D0F5; }
html[data-tema="oscuro"] .tag.pendiente { background: #223140; color: #C3CFDA; border-color: #34485B; }
html[data-tema="oscuro"] .tag.en_curso { background: #15304A; color: #8CC4F1; border-color: #26527C; }
html[data-tema="oscuro"] .tag.en_revision { background: #2A2142; color: #C9B5F2; border-color: #46386B; }
html[data-tema="oscuro"] .tag.cancelada { background: #1C2935; }
html[data-tema="oscuro"] .tag.alta { background: #3A2614; color: #F5B47F; border-color: #6A4524; }
html[data-tema="oscuro"] img.logo-completo, html[data-tema="oscuro"] .side .marca { background: #fff; }
html[data-tema="oscuro"] .toast { background: #1E6B42; }
html[data-tema="oscuro"] .cal-cuantos { background: rgba(220, 232, 244, .16); }
@media (prefers-color-scheme: dark) {
html[data-tema="auto"] .barra-sup { background: rgba(14, 23, 32, .94); border-bottom-color: var(--separador); }
html[data-tema="auto"] .side nav a.activo, html[data-tema="auto"] .side nav a.cta.activo { color: #133A63; }
html[data-tema="auto"] .cal-item.tarea { --azul-800: #A6D0F5; }
html[data-tema="auto"] .tag.pendiente { background: #223140; color: #C3CFDA; border-color: #34485B; }
html[data-tema="auto"] .tag.en_curso { background: #15304A; color: #8CC4F1; border-color: #26527C; }
html[data-tema="auto"] .tag.en_revision { background: #2A2142; color: #C9B5F2; border-color: #46386B; }
html[data-tema="auto"] .tag.cancelada { background: #1C2935; }
html[data-tema="auto"] .tag.alta { background: #3A2614; color: #F5B47F; border-color: #6A4524; }
html[data-tema="auto"] img.logo-completo, html[data-tema="auto"] .side .marca { background: #fff; }
html[data-tema="auto"] .toast { background: #1E6B42; }
html[data-tema="auto"] .cal-cuantos { background: rgba(220, 232, 244, .16); }
}

/* Apariencia en el perfil */
.opciones-tema { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.opcion-tema { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--borde-tarjeta); border-radius: 10px; cursor: pointer; font-weight: 400; }
.opcion-tema input { width: auto; }
.opcion-tema svg { width: 20px; height: 20px; color: var(--azul-600); flex: none; }
.opcion-tema span { display: flex; flex-direction: column; }
.opcion-tema small { color: var(--texto-2); }
.opcion-tema.elegida { border-color: var(--azul-500); background: var(--azul-50); }

/* Soporte por paso: botón pequeño al lado de cada paso y los archivos debajo del texto */
.checklist .paso-subir { margin: 0; flex: none; }
.btn-mini { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 9px; border: 1px solid var(--borde-tarjeta); border-radius: 8px;
  background: var(--superficie); color: var(--azul-600); font-size: 12px; font-weight: 600; cursor: pointer; line-height: 1.4; }
.btn-mini:hover { border-color: var(--azul-500); background: var(--azul-50); }
.btn-mini svg { width: 13px; height: 13px; }
.btn-mini:focus-within { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.paso-subir.cargando .btn-mini { opacity: .6; pointer-events: none; }
.paso-subir.mal .btn-mini { color: var(--peligro-texto); border-color: var(--peligro-borde); }
.paso-archivos { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.paso-archivos a { display: inline-flex; align-items: center; gap: 3px; }
.paso-archivos svg { width: 12px; height: 12px; }
.tag-paso { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--azul-50); color: var(--azul-700); font-size: 11px; font-weight: 600; }

/* Carga del equipo: una fila por persona y una columna por semana, coloreada según lo que tiene */
.tabla-carga { width: 100%; border-collapse: collapse; font-size: var(--t-denso); }
.tabla-carga th, .tabla-carga td { padding: 8px 4px; border-bottom: 1px solid var(--borde-tarjeta); text-align: left; vertical-align: middle; }
.tabla-carga thead th { font-size: var(--t-etiqueta); color: var(--texto-2); font-weight: 600; white-space: nowrap; }
.tabla-carga thead th small { display: block; font-weight: 400; font-size: 11px; }
.tabla-carga .num { text-align: center; }
.tabla-carga .col-persona { font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 8px; border-bottom: 0; }
.tabla-carga tbody tr:hover { background: var(--n-25); }
.tabla-carga .col-detalle { min-width: 0; max-width: 150px; }
.tabla-carga tbody th { text-transform: none; letter-spacing: normal; font-size: var(--t-denso); color: var(--texto); background: none; }
.tabla-carga th:first-child, .tabla-carga td:first-child { padding-left: 4px; }
.tabla-carga th:last-child, .tabla-carga td:last-child { padding-right: 4px; }
.celda-carga { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 8px; font-weight: 700; text-decoration: none; }
a.celda-carga:hover { outline: 2px solid var(--azul-500); outline-offset: 1px; text-decoration: none; }
.celda-carga.libre { color: var(--texto-apagado); font-weight: 400; }
.celda-carga.normal { background: var(--azul-50); color: var(--azul-700); }
.celda-carga.media { background: var(--alerta-fondo); color: var(--alerta-texto); border: 1px solid var(--alerta-borde); }
.celda-carga.alta { background: var(--peligro-fondo); color: var(--peligro-texto); border: 1px solid var(--peligro-borde); }
.celda-carga.vencidas { background: var(--peligro-texto); color: #fff; }
html[data-tema="oscuro"] .celda-carga.vencidas { color: #1A0D10; }
.leyenda-carga { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 12px; }
.leyenda-carga span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-carga i.celda-carga { min-width: 16px; height: 14px; padding: 0; border-radius: 4px; }
.leyenda-carga .leyenda-sin { margin-left: auto; }
.enlace-h2 { margin-left: 8px; font-weight: 400; }
/* Al asignar: cuánto tiene cada persona */
.persona small.carga-persona.media { color: var(--alerta-texto); }
.persona small.carga-persona.alta { color: var(--peligro-texto); font-weight: 600; }

/* Mi perfil */
.perfil-foto .ayuda { max-width: 170px; margin: 0; }
.perfil-principal { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.perfil-quien h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 22px; }
.perfil-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.perfil-quien .ayuda { margin-top: 2px; }
.perfil-guardar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.perfil-guardar .small { flex: 1; min-width: 220px; }
.perfil-grid { align-items: start; }
.opciones-tema.una-col { grid-template-columns: 1fr; }
.opcion-tema small { display: block; line-height: 1.35; }
.clave-caja { position: relative; }
.clave-caja input { padding-right: 76px; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--enlace); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.ver-clave:hover { background: var(--azul-50); }
.texto-verde { color: var(--exito-texto); }
.seguridad-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--separador); }
.seguridad-fila > div { min-width: 0; }
.perfil-h3 { font-size: var(--t-denso); margin: 16px 0 6px; color: var(--texto-2); }
.sesiones li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.sesiones li > span { display: inline-flex; align-items: center; gap: 8px; }
.sesiones svg { width: 16px; height: 16px; color: var(--texto-2); }
.form-confirmar { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 280px; }
.perfil-principal .perfil-campos { flex: none; }

/* Horas por tarea */
.tiempo-total { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.tiempo-total strong { font-size: 20px; color: var(--marino); }
.cronometro { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cronometro .btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.reloj-vivo { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--exito-texto); }
.reloj-vivo svg { width: 18px; height: 18px; }
.tiempo-manual { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tiempo-manual label { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-etiqueta); margin: 0; }
.tiempo-hm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiempo-lista { margin-top: 10px; border-top: 1px solid var(--separador); }
.tiempo-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--t-denso); border-bottom: 1px solid var(--separador); }
.tiempo-lista li small { display: block; color: var(--texto-2); }
.tiempo-lista form { margin: 0; }
.crono-sup { display: flex; align-items: center; gap: 2px; margin: 0; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--exito-fondo); border: 1px solid var(--exito-borde); }
.crono-sup a { display: inline-flex; align-items: center; gap: 6px; color: var(--exito-texto); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; font-size: var(--t-denso); }
.crono-sup a small { font-weight: 400; color: var(--texto-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crono-sup svg { width: 16px; height: 16px; }
.crono-sup .boton-icono { width: 28px; height: 28px; font-size: 12px; color: var(--peligro-texto); }
@media (max-width: 760px) { .crono-sup a small { display: none; } }
/* Informe de horas */
.filtros-mini select { min-width: 200px; }
.honorarios { display: inline-flex; gap: 6px; margin: 0; }
.honorarios input { width: 120px; text-align: right; padding: 4px 8px; }
.col-persona-h { display: flex; align-items: center; gap: 8px; }
.barras-horas li { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: var(--t-denso); }
.barras-horas .barra { height: 8px; }

/* Ausencias */
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .fila-2 { grid-template-columns: 1fr; } }
.ausencia { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--separador); }
.ausencia > div { flex: 1; min-width: 0; }
.ausencia form { margin: 0; }
.ausente-etq { display: block; font-size: 11px; font-weight: 600; color: var(--alerta-texto); }
.tabla-carga .col-persona > span:last-child { display: flex; flex-direction: column; }
/* En pantallas bajas (portátil 1366 x 768) los renglones se aprietan un poco para que quepan los cuatro grupos */
@media (max-height: 820px) {
  .side nav a { padding-top: 6px; padding-bottom: 6px; }
  .grupo-menu { margin-top: 4px; }
  .grupo-menu > summary { padding: 6px 12px 5px; }
}

/* Plantillas de tarea */
.plantillas-rapidas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.plantillas-rapidas .chip { text-decoration: none; }
.plantilla-usada { grid-column: 1 / -1; }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .fila-3 { grid-template-columns: 1fr; } }
.nueva-plantilla > summary { list-style: none; cursor: pointer; }
.nueva-plantilla > summary::-webkit-details-marker { display: none; }
.nueva-plantilla > summary h2 { margin: 0; border: 0; padding: 0; }
.nueva-plantilla > summary h2::before { content: '+ '; color: var(--azul-600); }
.nueva-plantilla[open] > summary h2 { margin-bottom: 12px; }
.lista-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.plantilla-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.plantilla-cab h2 { margin: 0 0 2px; border: 0; padding: 0; }
.plantilla-titulo { margin: 10px 0 6px; color: var(--texto-2); font-size: var(--t-denso); }
.plantilla-pasos { margin: 0 0 8px; padding-left: 20px; font-size: var(--t-denso); }
.plantilla-pasos li { padding: 1px 0; }
.plantilla-acciones { margin-top: 10px; }
.en-linea { display: inline; margin: 0; }
.btn-texto { border: 0; background: none; padding: 6px 0; font: inherit; font-size: var(--t-denso); cursor: pointer; color: var(--enlace); }
.btn-texto.peligro { color: var(--peligro-texto); }

/* Número de la tarea (#123), el mismo que se escribe en los mensajes para enlazarla. */
.num-tarea { color: var(--texto-apagado); font-weight: 500; font-variant-numeric: tabular-nums; }
h1 .num-tarea { font-weight: 600; }
.burbuja .enlace-tarea { font-weight: 600; }
.tabla-tareas .col-num { width: 52px; text-align: right; white-space: nowrap; padding-right: 4px; }
.enlace-campo { display: inline-block; margin-top: 6px; }
/* Notas de voz. */
.chat-grabando { display: flex; align-items: center; gap: 10px; padding: 6px 4px; flex-wrap: wrap; }
.chat-grabando[hidden] { display: none; }
.grabando-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); animation: latido 1s ease-in-out infinite; flex: none; }
.grabando-texto { flex: 1; color: var(--texto-2); }
.grabando-texto strong { font-variant-numeric: tabular-nums; }
@keyframes latido { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .grabando-punto { animation: none; } }
.chat-escribir.grabando .chat-enviar, .chat-escribir.grabando .chat-microfono { visibility: hidden; }
.chat-microfono[hidden] { display: none; }
.nota-voz { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.nota-voz-icono { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-hasta); color: #fff; flex: none; }
.nota-voz-icono svg { width: 18px; height: 18px; }
.nota-voz audio { height: 36px; width: 240px; max-width: 100%; }
.flotante-cuerpo .nota-voz audio { width: 190px; }
.nota-voz-dur { color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
.grabando-texto { white-space: nowrap; }
/* Esquina para cambiar el tamaño de la ventana flotante del chat. */
.flotante-ventana { position: relative; }
.flotante-tirador { position: absolute; left: 0; top: 0; width: 18px; height: 18px; z-index: 2; cursor: nwse-resize; touch-action: none; }
.flotante-tirador::before { content: ''; position: absolute; left: 4px; top: 4px; width: 7px; height: 7px; border-left: 2px solid rgba(255, 255, 255, .75); border-top: 2px solid rgba(255, 255, 255, .75); border-top-left-radius: 3px; }
.flotante-tirador:hover::before { border-color: #fff; }
.flotante.cambiando-tam, .flotante.cambiando-tam * { user-select: none; }
.flotante.cambiando-tam iframe, .flotante.cambiando-tam audio { pointer-events: none; }
@media (max-width: 600px) { .flotante-tirador { display: none; } }
/* Resultados de la barra de búsqueda de arriba. */
.buscar-atajo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; color: var(--texto-apagado); border: 1px solid var(--n-450); border-radius: 5px; padding: 3px 5px; background: var(--superficie); pointer-events: none; }
.buscar input:focus ~ .buscar-atajo, .buscar input:not(:placeholder-shown) ~ .buscar-atajo { display: none; }
.buscar input { padding-right: 64px; }
.busq-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 40, 70, .18); max-height: min(520px, calc(100dvh - 90px)); overflow-y: auto; z-index: 70; padding: 6px 0; text-align: left; }
.busq-panel[hidden] { display: none; }
.busq-grupo { padding: 4px 0; }
.busq-grupo + .busq-grupo { border-top: 1px solid var(--borde-tarjeta); }
.busq-titulo { font-size: var(--t-etiqueta); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--texto-2); padding: 6px 14px 4px; }
.busq-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--texto); text-decoration: none; }
.busq-item:hover, .busq-item.activo { background: var(--n-100); text-decoration: none; }
.busq-item.activo { box-shadow: inset 3px 0 0 var(--marca-hasta); }
.busq-texto { display: flex; flex-direction: column; min-width: 0; }
.busq-texto strong { font-weight: 600; font-size: var(--t-denso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busq-texto small { color: var(--texto-apagado); font-size: var(--t-etiqueta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busq-texto mark { background: #fff1b8; color: inherit; border-radius: 2px; padding: 0 1px; }
.busq-num { min-width: 34px; text-align: right; color: var(--texto-apagado); font-variant-numeric: tabular-nums; font-size: var(--t-denso); flex: none; }
.busq-icono { width: 34px; display: grid; place-items: center; color: var(--texto-2); flex: none; }
.busq-icono svg { width: 18px; height: 18px; }
.busq-item .avatar.mini { width: 26px; height: 26px; font-size: 10px; margin: 0 4px; flex: none; }
.busq-vacio { padding: 10px 14px; margin: 0; color: var(--texto-2); }
.busq-pie { display: flex; flex-direction: column; border-top: 1px solid var(--borde-tarjeta); margin-top: 4px; padding-top: 4px; }
.busq-pie a { padding: 7px 14px; font-size: var(--t-denso); }
.busq-pie a:hover, .busq-pie a.activo { background: var(--n-100); text-decoration: none; }
@media (max-width: 760px) { .buscar-atajo { display: none; } .buscar input { padding-right: 12px; } }
/* La barra de búsqueda se ve corta y se abre al usarla (clic, Ctrl + K o /). */
@media (min-width: 761px) {
  .barra-sup .buscar { justify-self: center; width: 230px; max-width: 100%; transition: width .18s ease-out; }
  .barra-sup .buscar:focus-within, .barra-sup .buscar.con-texto { width: min(600px, 100%); }
  .barra-sup .buscar input { cursor: pointer; background: var(--n-50); }
  .barra-sup .buscar input:focus { cursor: text; }
  .barra-sup .buscar input::placeholder { color: var(--texto-2); }
  .barra-sup .buscar:not(:focus-within) input::placeholder { color: transparent; }
  .barra-sup .buscar:not(:focus-within):not(.con-texto)::after { content: 'Buscar'; position: absolute; left: 36px; top: 50%; transform: translateY(-50%); color: var(--texto-2); font-size: var(--t-denso); pointer-events: none; }
  .barra-sup .buscar:focus-within .busq-panel { min-width: 420px; }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) { .barra-sup .buscar { transition: none; } }
/* Encabezados de tabla: más legibles y con la flecha de orden solo donde sirve. */
th { color: var(--texto-2); letter-spacing: .05em; }
a.orden span { opacity: 0; transition: opacity .12s; }
a.orden:hover span, a.orden:focus-visible span, a.orden.activa span { opacity: 1; }
th.th-orden::after { opacity: 0; }
th.th-orden:hover::after, th.th-orden[data-dir]::after { opacity: 1; }
th.der, th.num { text-align: right; }
th.centro { text-align: center; }
/* Crear una categoría desde el formulario de la tarea. */
.categoria-nueva { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.categoria-nueva[hidden] { display: none; }
.categoria-nueva input { flex: 1 1 200px; min-width: 0; }
.categoria-error { flex-basis: 100%; color: var(--rojo); }
.categoria-error[hidden] { display: none; }
/* Barra vacía: lo buscado hace poco, atajos y ayuda. */
.busq-fila { display: flex; align-items: center; }
.busq-fila .busq-item { flex: 1; min-width: 0; }
.busq-reciente::before, .busq-atajo::before { content: ''; width: 34px; height: 18px; flex: none; background: var(--texto-apagado); -webkit-mask: var(--icono-m) center / 16px no-repeat; mask: var(--icono-m) center / 16px no-repeat; }
.busq-reciente { --icono-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E"); }
.busq-atajo { --icono-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.busq-quitar { border: 0; background: transparent; color: var(--texto-apagado); font-size: 18px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; margin-right: 8px; flex: none; }
.busq-quitar:hover { background: var(--n-100); color: var(--texto); }
.busq-ayuda { margin: 4px 0 0; padding: 8px 14px 6px; border-top: 1px solid var(--borde-tarjeta); font-size: var(--t-etiqueta); color: var(--texto-apagado); }
.busq-atajos { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 6px; }
.busq-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borde-tarjeta); background: var(--n-50); color: var(--texto); font-size: var(--t-denso); text-decoration: none; }
.busq-chip:hover, .busq-chip.activo { background: var(--n-100); border-color: var(--marca-hasta); text-decoration: none; }
.busq-atajos + .busq-ayuda { border-top: 0; padding-top: 2px; }
/* Mensajes más livianos: las acciones salen en una barrita al pasar el mouse; abajo solo la hora y el visto. */
.burbuja { position: relative; padding: 6px 10px 4px; }
.burbuja-pie { margin-top: 1px; gap: 6px; min-height: 0; }
.burbuja-acciones { position: absolute; top: -15px; left: 8px; display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 8px; box-shadow: 0 2px 8px rgba(16, 40, 70, .12); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 3; }
.burbuja.mia .burbuja-acciones { left: auto; right: 8px; }
.flotante-cuerpo .burbuja-acciones { max-width: calc(100vw - 60px); flex-wrap: wrap; }
.flotante-cuerpo .burbuja-acciones .convertir { display: none; }
.burbuja:hover .burbuja-acciones, .burbuja:focus-within .burbuja-acciones, .burbuja.ver-acciones .burbuja-acciones { opacity: 1; pointer-events: auto; }
.burbuja-acciones > *, .burbuja-acciones .enlace, .burbuja-acciones .reaccionar, .burbuja-acciones .convertir, .burbuja-acciones .enlace[data-editar], .burbuja-acciones .enlace[data-eliminar] { opacity: 1; font-size: 11.5px; padding: 3px 6px; border-radius: 5px; white-space: nowrap; text-decoration: none; }
.burbuja-acciones > *:hover { background: var(--n-100); text-decoration: none; }
.burbuja-acciones .reaccionar summary { list-style: none; cursor: pointer; }
.burbuja-pie .ya-tarea { font-size: 11px; color: var(--enlace); margin-right: auto; }
.chat-mensajes { padding-top: 18px; }
@media (prefers-reduced-motion: reduce) { .burbuja-acciones { transition: none; } }

/* Ayuda de la caja de escribir: plegada en «Atajos». */
details.chat-ayuda { padding: 0 16px 8px; margin: 2px 0 0; }
details.chat-ayuda summary { cursor: pointer; width: max-content; color: var(--texto-apagado); }
details.chat-ayuda summary:hover { color: var(--enlace); }
details.chat-ayuda ul { margin: 4px 0 0; padding-left: 18px; }
details.chat-ayuda kbd { font: inherit; font-size: 11px; border: 1px solid var(--n-450); border-radius: 4px; padding: 0 4px; background: var(--superficie); }

/* Ventana flotante más compacta: la conversación aprovecha el alto. */
.flotante-barra { padding: 5px 6px 5px 14px; }
.flotante-cuerpo .chat-cab { padding: 6px 8px; gap: 8px; }
.flotante-cuerpo .chat-cab .avatar.grande { width: 32px; height: 32px; font-size: 12px; }
.flotante-cuerpo .chat-cab h1 { font-size: 14px; }
.flotante-cuerpo .chat-fijado { padding: 4px 8px 4px 12px; font-size: 12px; }
.flotante-cuerpo .chat-fijado-quien { display: none; }
.flotante-cuerpo .burbuja { padding: 5px 9px 3px; }

/* Botón flotante: etiqueta al pasar el mouse y equis con la ventana abierta. */
.flotante-icono-abrir, .flotante-icono-cerrar { display: grid; place-items: center; }
.flotante-icono-cerrar { display: none; }
.flotante.abierto .flotante-icono-abrir { display: none; }
.flotante.abierto .flotante-icono-cerrar { display: grid; }
.flotante-icono-cerrar svg { width: 24px; height: 24px; }
.flotante-etiqueta { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); background: var(--marino, #133A63); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(16, 40, 70, .25); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.flotante-boton:hover .flotante-etiqueta, .flotante-boton:focus-visible .flotante-etiqueta { opacity: 1; transform: translate(0, -50%); }
.flotante.abierto .flotante-etiqueta { display: none; }
@media (hover: none) { .flotante-etiqueta { display: none; } }

/* Botón «Nueva conversación»: ícono de redactar (no el de «Asignar tarea»); en la ventana flotante va junto al buscador. */
.btn-redactar { display: inline-flex; align-items: center; gap: 6px; }
.btn-redactar svg { width: 16px; height: 16px; }
.chat-buscar { display: flex; align-items: center; gap: 8px; }
.chat-nueva-mini { display: none; flex: none; width: 34px; height: 34px; border-radius: 50%; place-items: center; background: var(--marino, #133A63); color: #fff; box-shadow: 0 2px 6px rgba(16, 40, 70, .2); transition: transform .12s, background .12s; }
.chat-nueva-mini svg { width: 17px; height: 17px; }
.chat-nueva-mini:hover { background: var(--enlace); transform: scale(1.06); }
.chat-nueva-mini:focus-visible { outline: 2px solid var(--enlace); outline-offset: 2px; }
.flotante-cuerpo .chat-lista-cab { display: none; }
.flotante-cuerpo .chat-nueva-mini { display: grid; }
@media (prefers-reduced-motion: reduce) { .chat-nueva-mini { transition: none; } }

/* Aviso de cierre por inactividad. */
.dialogo-inactividad { border: 0; border-radius: 14px; padding: 22px 24px; width: min(400px, 92vw); box-shadow: var(--sombra-encima); }
.dialogo-inactividad::backdrop { background: rgba(16, 32, 52, .5); }
.dialogo-inactividad h2 { margin: 0 0 6px; }
.dialogo-inactividad p { margin: 0 0 16px; }
.dialogo-inactividad [data-inactividad-cuenta] { font-variant-numeric: tabular-nums; color: var(--rojo, #C8102E); }

/* Autorización de datos y términos (pantalla de primer ingreso), páginas legales y pie legal. */
.consentimiento-texto { max-height: 300px; overflow-y: auto; border: 1px solid var(--borde, #D7DEE6); border-radius: 8px; padding: 12px 14px; background: var(--n-50, #F4F7FA); line-height: 1.5; }
.consentimiento-texto p { margin: 0 0 8px; }
.consentimiento-casillas { display: grid; gap: 10px; margin-top: 16px; }
.consentimiento-casillas .check { align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.consentimiento-casillas .check input { margin-top: 3px; flex: none; }
.consentimiento-casillas .declaracion { margin: -4px 0 0 26px; }
.consentimiento-casillas .btn { justify-self: start; margin-top: 4px; }
.autorizaciones-form { display: grid; gap: 6px; margin-top: 8px; }
.autorizaciones-form .btn { justify-self: start; }
.pie-legal { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--separador, #E6EBF0); text-align: center; }
.texto-legal { line-height: 1.6; font-size: 14px; }
.texto-legal h1 { font-size: 20px; } .texto-legal h2 { font-size: 16px; margin-top: 22px; } .texto-legal h3 { font-size: 14.5px; }
.texto-legal table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 13px; }
.texto-legal th, .texto-legal td { border: 1px solid var(--borde, #D7DEE6); padding: 6px 8px; text-align: left; vertical-align: top; }
.texto-legal th { background: #1F3B57; color: #fff; }

/* Grupos del menú en letra normal (no mayúsculas), con ícono, y sus opciones un poco hacia adentro. */
.grupo-menu { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 6px; }
.grupo-menu > summary { font-size: var(--t-cuerpo, 15px); font-weight: 600; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .78); padding: 9px 12px; gap: 10px; }
.grupo-menu > summary:hover { color: #fff; }
.grupo-menu[open] > summary { color: #fff; }
.grupo-menu > summary svg:first-child { width: 18px; height: 18px; margin-left: 0; opacity: .85; transform: none; }
.grupo-menu > summary svg:last-child { width: 14px; height: 14px; margin-left: auto; }
.grupo-menu[open] > summary svg:first-child { transform: none; }
.side nav .grupo-menu > a { padding-left: 26px; font-size: 14.5px; }

/* Menú recogido: los íconos caben sin barra de desplazamiento; si la pantalla es muy baja, se sigue pudiendo
   bajar con la rueda del ratón, pero sin la barra a la vista. */
@media (min-width: 1025px) {
  body.menu-compacto .side nav { gap: 2px; padding: 8px 0; scrollbar-width: none; }
  body.menu-compacto .side nav::-webkit-scrollbar { display: none; }
  body.menu-compacto .side nav a { height: 36px; flex: none; }
  body.menu-compacto .grupo-menu { margin-top: 2px; padding-top: 2px; gap: 2px; flex: none; }
  body.menu-compacto .side .nav-abajo { padding: 4px 8px 8px; }
}