/* Hoja de estilos del Gestor del Equipo ESECE (extraída de index.html). */

/* =========================================================================
   1. SISTEMA DE DISEÑO — FICHAS (design tokens)
   -------------------------------------------------------------------------
   Todo el color, el redondeo, la sombra y el movimiento de la app salen de
   aquí. Cambiar una ficha cambia la app entera y de forma coherente; poner
   un color a mano en un componente rompe el modo oscuro y el contraste.

   La escala de redondeo y la receta del anillo de foco siguen la convención
   de reui.io y coss-com-ui: un único radio base del que derivan los demás,
   y bordes traslúcidos (no grises fijos) para que un mismo componente se vea
   bien sobre cualquier fondo.
   ========================================================================= */
    :root {
      color-scheme: light;

      /* --- Marca -----------------------------------------------------------
         Tres papeles distintos, y por eso tres fichas:
           --marca        color de acento sobre fondo claro (texto, iconos,
                          bordes activos). En oscuro se aclara para contrastar.
           --marca-solida relleno de la cabecera, del botón primario y de las
                          pestañas activas. En oscuro se oscurece, porque un
                          bloque verde claro sobre página oscura deslumbra.
           --marca-claro  tinte suave de fondo (fila activa del menú, hover).
         Confundirlos es lo que rompe el modo oscuro: el acento y el relleno
         se mueven en direcciones opuestas.                                   */
      --marca: #1a3a2e;
      --marca-solida: #1a3a2e;
      --marca-solida-hover: #0f2a20;
      --marca-osc: #0f2a20;
      --marca-claro: #e8efea;
      --marca-rgb: 26, 58, 46;
      --oro: #c9a96e;
      --oro-bg: #fffdf6;

      /* --- Superficies ---------------------------------------------------
         --fondo      página
         --superficie tarjetas, paneles, cabeceras de tabla
         --elevado    modales, hojas, menús flotantes
         --gris       superficie "hundida" dentro de una tarjeta
         --acento     relleno de hover discreto (traslúcido, COSS)            */
      --fondo: #f4f6fa;
      --superficie: #ffffff;
      --superficie-2: #fbfcfd;
      --elevado: #ffffff;
      --gris: #f4f6fa;
      --acento: rgba(15, 23, 32, .04);
      --acento-fuerte: rgba(15, 23, 32, .07);

      /* --- Texto --- */
      --texto: #1f2937;
      --suave: #656d7a;   /* 4.83:1 sobre --fondo (antes 4.47, por debajo de AA) */
      --muted: #656d7a;   /* alias histórico usado en Subvenciones */
      --tenue: #6e7684;   /* 4.58:1 sobre blanco: el marcador de posición se lee */
      --sobre-marca: #ffffff;

      /* --- Bordes traslúcidos ---
         Un borde traslúcido se adapta al fondo sobre el que cae; uno gris
         fijo se ve sucio sobre superficies hundidas y desaparece en oscuro. */
      --borde: rgba(15, 23, 32, .11);
      --borde-suave: rgba(15, 23, 32, .07);
      --borde-fuerte: rgba(15, 23, 32, .18);

      /* --- Estados semánticos (par fondo / texto) --- */
      --rojo: #c0392b;        --rojo-bg: #fdecea;      --rojo-borde: rgba(192, 57, 43, .22);
      --verde: #16703c;       --verde-bg: #e8f6ee;     --verde-borde: rgba(22, 112, 60, .24);
      --amarillo: #92600f;    --amarillo-bg: #fef5e7;  --amarillo-borde: rgba(146, 96, 15, .24);
      --azul: #2563eb;        --azul-bg: #eaf0fb;      --azul-borde: rgba(37, 99, 235, .22);
      --naranja: #c2410c;     --naranja-bg: #fff4e5;   --naranja-borde: rgba(194, 65, 12, .26);
      --morado: #8e44ad;      --morado-bg: #f3e8fb;
      --indigo: #4338ca;      --indigo-bg: #eef2ff;
      --turquesa: #00796b;    --turquesa-bg: #e0f2f1;
      --neutro: #5b6b63;      --neutro-bg: #eef1ef;
      /* Rellenos sólidos de estado: el contador rojo del menú o el punto de
         "en línea" necesitan un color saturado que aguante texto blanco
         encima, no el tono de texto (que en oscuro es casi pastel). */
      --peligro-solido: #c0392b;  --sobre-peligro: #ffffff;
      --verde-vivo: #22c55e;

      /* --- Esqueleto de carga --- */
      --sk-base: #e6eaf0;
      --sk-brillo: #f2f5f8;

      /* --- Barras de desplazamiento ---
         En macOS se ocultan por defecto; en tablas anchas eso deja al usuario
         sin saber que queda contenido a la derecha, así que aquí se fuerzan. */
      --scroll-fondo: #e3e8e5;
      --scroll-pulgar: #7d8a83;

      /* --- Redondeo (base .625rem = 10px, como coss-com-ui) --- */
      --r: .625rem;
      --r-xs: 4px;
      --r-sm: calc(var(--r) - 4px);   /*  6px */
      --r-md: calc(var(--r) - 2px);   /*  8px */
      /* Margen de abajo para la raya de inicio del iPhone. html.ios-corto lo
         deja en 0: con la pantalla corta, la raya cae en el hueco. */
      --abajo-seguro: env(safe-area-inset-bottom, 0px);
      --r-lg: var(--r);               /* 10px */
      --r-xl: calc(var(--r) + 4px);   /* 14px */
      --r-2xl: calc(var(--r) + 8px);  /* 18px */
      --r-full: 999px;

      /* --- Elevación ---
         Dos capas (contorno tenue + difusión) en vez de una sola sombra
         difusa: el borde se lee nítido y la sombra no ensucia el fondo.    */
      --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
      --sh-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
      --sh-md: 0 2px 4px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .08);
      --sh-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .10);
      --sh-xl: 0 8px 16px rgba(16, 24, 40, .08), 0 24px 56px rgba(16, 24, 40, .16);
      /* Brillo superior de un botón sólido: le da volumen sin dibujar nada. */
      --sh-brillo: inset 0 1px 0 rgba(255, 255, 255, .16);

      /* --- Anillo de foco ---
         3px al 45% de la marca + borde reforzado: visible sobre cualquier
         superficie y sin desplazar la maquetación (es sombra, no outline). */
      --ring: var(--marca);
      --ring-w: 3px;
      --ring-sombra: 0 0 0 var(--ring-w) rgba(var(--marca-rgb), .34);
      --ring-peligro: 0 0 0 var(--ring-w) rgba(192, 57, 43, .28);

      /* --- Movimiento ---
         Duraciones cortas a propósito: por encima de ~200ms una interfaz de
         trabajo empieza a sentirse lenta, no elegante (interfaces.rauno.me).
         Las curvas son las de open-props.style: entrada con frenada larga
         (--ease-out-3) y salida acelerada (--ease-in-3).                    */
      --ms-1: .12s;
      --ms-2: .16s;
      --ms-3: .2s;
      --ease: cubic-bezier(0, 0, .3, 1);
      --ease-sal: cubic-bezier(.7, 0, 1, 1);
      --ease-suave: cubic-bezier(.3, 0, .7, 1);

      /* --- Escala tipográfica fluida (utopia.fyi) -------------------------
         clamp(mínimo, base + pendiente·vw, máximo): el tamaño interpola solo
         entre 360px y 1440px de ancho, sin saltos en los puntos de ruptura.
         Razón 1,2 en móvil y 1,25 en escritorio, así los títulos ganan
         jerarquía en pantalla grande sin aplastar el cuerpo en el teléfono. */
      --txt--1: clamp(0.8331rem, 0.8108rem + 0.09907vw, 0.9rem);
      --txt-0:  clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
      --txt-1:  clamp(1.2rem, 1.131rem + 0.3056vw, 1.406rem);
      --txt-2:  clamp(1.44rem, 1.334rem + 0.4713vw, 1.758rem);
      --txt-3:  clamp(1.728rem, 1.572rem + 0.6954vw, 2.197rem);

      /* --- Espaciado fluido (misma idea) --- */
      --esp-2xs: clamp(0.5rem, 0.4792rem + 0.09259vw, 0.5625rem);
      --esp-xs:  clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
      --esp-s:   clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
      --esp-m:   clamp(1.5rem, 1.438rem + 0.2778vw, 1.688rem);
      --esp-l:   clamp(2rem, 1.917rem + 0.3704vw, 2.25rem);

      /* --- Paleta de gráficas (Chart.js) --- */
      --graf-1: #2563eb; --graf-2: #10b981; --graf-3: #f59e0b;
      --graf-4: #8b5cf6; --graf-5: #f43f5e; --graf-6: #0891b2;
    }

    /* Bordes traslúcidos de verdad donde el navegador lo admite: se mezclan
       en oklab con el fondo real en vez de simular la mezcla sobre blanco. */
    @supports (color: color-mix(in oklab, black 8%, transparent)) {
      :root {
        --borde: color-mix(in oklab, #0f1720 11%, transparent);
        --borde-suave: color-mix(in oklab, #0f1720 7%, transparent);
        --borde-fuerte: color-mix(in oklab, #0f1720 18%, transparent);
        --acento: color-mix(in oklab, #0f1720 4%, transparent);
        --acento-fuerte: color-mix(in oklab, #0f1720 7%, transparent);
      }
    }

/* =========================================================================
   2. MODO OSCURO
   -------------------------------------------------------------------------
   El tema vive en data-tema del <html>, siempre resuelto a "claro" u
   "oscuro" por el script de index.html (parte de la preferencia del sistema
   y la sobrescribe lo que el usuario elija en la cabecera). Así el CSS tiene
   una sola regla en vez de duplicar la paleta bajo prefers-color-scheme.

   Las superficies suben de luminosidad con la elevación (fondo < tarjeta <
   modal): en oscuro es lo que da profundidad, porque las sombras no se ven.
   ========================================================================= */
    html[data-tema="oscuro"] {
      color-scheme: dark;

      --marca: #4ea87a;
      --marca-solida: #1f4e3a;
      --marca-solida-hover: #276148;
      --marca-osc: #276148;
      --marca-claro: #1c2f27;
      --marca-rgb: 78, 168, 122;
      --oro: #d4b57f;
      --oro-bg: #2a2418;

      --fondo: #0e1412;
      --superficie: #161d1a;
      --superficie-2: #1b231f;
      --elevado: #1c2420;
      --gris: #1f2825;
      --acento: rgba(255, 255, 255, .05);
      --acento-fuerte: rgba(255, 255, 255, .09);

      --texto: #e6ebe8;
      --suave: #98a6a0;
      --muted: #98a6a0;
      --tenue: #849289;   /* 4.65:1 en el peor fondo del tema oscuro */
      --sobre-marca: #eaf5ef;

      --borde: rgba(255, 255, 255, .11);
      --borde-suave: rgba(255, 255, 255, .06);
      --borde-fuerte: rgba(255, 255, 255, .2);

      --rojo: #f27a6c;        --rojo-bg: #351d1a;      --rojo-borde: rgba(242, 122, 108, .28);
      --verde: #5fc58c;       --verde-bg: #142c1f;     --verde-borde: rgba(95, 197, 140, .28);
      --amarillo: #e0b155;    --amarillo-bg: #302614;  --amarillo-borde: rgba(224, 177, 85, .28);
      --azul: #6ea8ff;        --azul-bg: #16233c;      --azul-borde: rgba(110, 168, 255, .28);
      --naranja: #f59563;     --naranja-bg: #33210f;
      --morado: #c08ae0;      --morado-bg: #2a1c36;
      --indigo: #9aa5f5;      --indigo-bg: #1c1f3d;
      --turquesa: #5ec9ba;    --turquesa-bg: #0f2b29;
      --neutro: #9aa8a1;      --neutro-bg: #232b28;
      --naranja-borde: rgba(245, 149, 99, .3);
      --peligro-solido: #c0392b;  --sobre-peligro: #ffffff;
      --verde-vivo: #22c55e;

      --sk-base: #212a26;
      --sk-brillo: #2b3631;
      --scroll-fondo: #232c28;
      --scroll-pulgar: #4a5a53;

      --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
      --sh-sm: 0 1px 3px rgba(0, 0, 0, .4);
      --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
      --sh-lg: 0 12px 28px rgba(0, 0, 0, .5);
      --sh-xl: 0 24px 56px rgba(0, 0, 0, .6);
      --sh-brillo: inset 0 1px 0 rgba(255, 255, 255, .08);

      --ring-sombra: 0 0 0 var(--ring-w) rgba(var(--marca-rgb), .42);
      --ring-peligro: 0 0 0 var(--ring-w) rgba(242, 122, 108, .32);

      --graf-1: #6ea8ff; --graf-2: #4fd1a5; --graf-3: #f0b45c;
      --graf-4: #b18cf0; --graf-5: #f77b8e; --graf-6: #4cc4d8;
    }
    @supports (color: color-mix(in oklab, black 8%, transparent)) {
      html[data-tema="oscuro"] {
        --borde: color-mix(in oklab, #ffffff 11%, transparent);
        --borde-suave: color-mix(in oklab, #ffffff 6%, transparent);
        --borde-fuerte: color-mix(in oklab, #ffffff 20%, transparent);
        --acento: color-mix(in oklab, #ffffff 5%, transparent);
        --acento-fuerte: color-mix(in oklab, #ffffff 9%, transparent);
      }
    }

/* =========================================================================
   3. BASE
   ========================================================================= */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      /* "Segoe UI Variable Text" e "Inter" entran antes que las de reserva
         donde existan; ninguna se descarga, así que la app sigue arrancando
         sin red (es una PWA). */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      background: var(--fondo);
      color: var(--texto);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background-color var(--ms-3) var(--ease), color var(--ms-3) var(--ease);
    }
    a { color: var(--marca); }
    button { font-family: inherit; cursor: pointer; color: inherit; }
    input, select, textarea { font-family: inherit; font-size: .95rem; color: inherit; }
    /* Los números alineados en columna (importes, contadores, horas) solo se
       comparan de un vistazo si todas las cifras ocupan lo mismo. */
    td, th, .num, .k-val, .stat .num, .md-count .n, .calc-tot b, .col-count, .badge {
      font-variant-numeric: tabular-nums;
    }
    h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.011em; }
    ::selection { background: rgba(var(--marca-rgb), .22); }
    hr, .separador { border: none; border-top: 1px solid var(--borde); margin: 1rem 0; }

    /* --- Anillo de foco global (reui / coss) -----------------------------
       :focus-visible solo se dispara con teclado, así que el ratón no deja
       anillos por toda la pantalla, pero navegar con Tab nunca se pierde. */
    :focus-visible {
      outline: none;
      box-shadow: var(--ring-sombra);
      border-radius: var(--r-sm);
      position: relative;
      z-index: 1;
    }
    .btn:focus-visible, .btn-sec:focus-visible, .icon-btn:focus-visible,
    .inp:focus-visible, a:focus-visible { border-radius: inherit; }

    /* Saltar al contenido: primera parada del tabulador, invisible hasta que
       recibe el foco. Sin esto, el teclado recorre todo el menú en cada vista. */
    .saltar {
      position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
      z-index: 300; background: var(--elevado); color: var(--marca);
      border: 1px solid var(--marca); border-radius: 0 0 var(--r-md) var(--r-md);
      padding: .6rem 1.1rem; font-weight: 700; font-size: .9rem; text-decoration: none;
      transition: top var(--ms-2) var(--ease);
    }
    .saltar:focus { top: 0; }

    /* Quien pide menos movimiento en el sistema recibe la app entera quieta:
       sin deslizamientos, sin brillos y sin desplazamiento suave. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ---------- LOGIN ---------- */
    #login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    /* Un halo verde muy diluido detrás de la tarjeta: da profundidad a una
       pantalla que, si no, es una caja blanca flotando en gris. */
    #login::before {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(var(--marca-rgb), .10), transparent 70%),
        radial-gradient(40rem 24rem at 90% 110%, rgba(201, 169, 110, .10), transparent 70%);
    }
    #login .card { position: relative; z-index: 1; }
    .card { background: var(--elevado); border: 1px solid var(--borde-suave); border-radius: var(--r-2xl); box-shadow: var(--sh-xl); padding: 2.2rem; width: 100%; max-width: 400px; }
    .logo { font-weight: 800; font-size: 1.7rem; color: var(--marca); text-align: center; letter-spacing: -.02em; }
    .sub { text-align: center; color: var(--suave); font-size: .9rem; margin-bottom: 1.6rem; }
    label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }

/* =========================================================================
   4. CAMPOS DE FORMULARIO
   ------------------------------------------------------------------------- */
    .inp {
      width: 100%; padding: .7rem .8rem; margin-bottom: 1rem;
      background: var(--superficie); color: var(--texto);
      border: 1px solid var(--borde); border-radius: var(--r-md);
      transition: border-color var(--ms-1) var(--ease), box-shadow var(--ms-1) var(--ease), background-color var(--ms-1) var(--ease);
    }
    .inp::placeholder { color: var(--tenue); }
    /* El anillo es sombra, no outline: aparece sin empujar nada de sitio. */
    .inp:focus, .inp:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--ring-sombra); }
    .inp:hover:not(:focus):not(:disabled) { border-color: var(--borde-fuerte); }
    .inp:disabled, .inp[readonly] { background: var(--gris); color: var(--suave); cursor: not-allowed; }
    .inp[aria-invalid="true"], .inp.error { border-color: var(--rojo); }
    .inp[aria-invalid="true"]:focus, .inp.error:focus { box-shadow: var(--ring-peligro); }
    /* Fecha y hora encajan en su hueco como los demás campos. */
    input[type="date"].inp, input[type="time"].inp { min-width: 0; max-width: 100%; display: block; }
    /* En el iPhone miden lo que su texto y no el 100 %, así que se salían del
       ancho. Sin el aspecto nativo sí encajan; el valor va a la izquierda como
       en el resto, y con alto mínimo porque vacíos se aplastan. Solo iOS
       (-webkit-touch-callout): en los demás el aspecto nativo ya encaja. */
    @supports (-webkit-touch-callout: none) {
      input[type="date"].inp, input[type="time"].inp { -webkit-appearance: none; appearance: none; min-height: calc(1.2em + 1.4rem + 2px); }
      input[type="date"].inp::-webkit-date-and-time-value,
      input[type="time"].inp::-webkit-date-and-time-value { text-align: left; }
    }
    select.inp { appearance: none; -webkit-appearance: none; padding-right: 2.1rem;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right .7rem center; }

    /* Texto de ayuda y de error bajo un campo (patrón "Field" de coss-com-ui):
       la explicación vive junto al campo, no en un tostado que se va solo. */
    .field-hint { font-size: .78rem; color: var(--suave); margin: -.75rem 0 1rem; }
    .field-error { font-size: .78rem; color: var(--rojo); font-weight: 600; margin: -.75rem 0 1rem; display: flex; align-items: center; gap: .3rem; }

    /* Grupo de campo con icono o botón pegado dentro del recuadro
       ("Input Group"): el icono va dentro del campo, no al lado. */
    .inp-grupo { position: relative; display: block; }
    .inp-grupo .inp { margin-bottom: 1rem; }
    .inp-grupo > .ig-ico {
      position: absolute; left: .7rem; top: .7rem; width: 18px; height: 18px;
      color: var(--tenue); pointer-events: none;
      z-index: 2;   /* el campo enfocado sube a z-index 1 (anillo global) y lo tapaba */
    }
    .inp-grupo > .ig-ico ~ .inp { padding-left: 2.35rem; }
    .inp-grupo > .ig-btn {
      position: absolute; right: .35rem; top: .35rem;
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; padding: 0;
      background: none; border: none; border-radius: var(--r-sm);
      color: var(--suave); cursor: pointer;
    }
    .inp-grupo > .ig-btn:hover { background: var(--acento); color: var(--texto); }
    .inp-grupo:focus-within > .ig-ico { color: var(--marca); }

    /* Campo con sugerencias ("Combobox"): la lista flota bajo el campo, sin
       empujar el resto del formulario mientras se escribe. El margen pasa del
       campo al contenedor para que la lista salga pegada al borde. */
    .combo { position: relative; margin-bottom: 1rem; }
    .combo > .inp { margin-bottom: 0; }
    .combo-lista {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
      max-height: min(17rem, 45vh); overflow-y: auto; overscroll-behavior: contain;
      padding: .25rem; background: var(--elevado);
      border: 1px solid var(--borde); border-radius: var(--r-md); box-shadow: var(--sh-lg);
    }
    .combo-op {
      display: flex; flex-direction: column; gap: .1rem;
      padding: .5rem .65rem; border-radius: var(--r-sm); cursor: pointer;
    }
    .combo-op[aria-selected="true"] { background: var(--marca-claro); color: var(--marca); }
    @media (hover: hover) { .combo-op:hover { background: var(--acento); } }
    .combo-nombre { font-weight: 600; font-size: .9rem; }
    .combo-meta { font-size: .78rem; color: var(--suave); }
    .combo-meta:empty { display: none; }

    /* Atajo bajo un campo de fecha ("+10 hábiles") y la explicación de qué
       ha calculado, para que nadie tenga que fiarse de un número a ciegas. */
    .atajo-plazo { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin: -.5rem 0 1rem; }
    .atajo-plazo .field-hint { margin: 0; }
    .atajo-plazo .field-hint:empty { display: none; }

    /* Casillas e interruptores nativos, teñidos de marca en vez de azul
       sistema, y con el tamaño mínimo que un dedo acierta. */
    input[type="checkbox"], input[type="radio"] {
      accent-color: var(--marca); width: 1.05rem; height: 1.05rem; cursor: pointer;
    }

/* =========================================================================
   5. BOTONES
   -------------------------------------------------------------------------
   Familia con las mismas medidas y estados para todas las variantes, como en
   reui.io: relleno (primario), contorno (secundario), fantasma, y peligro.
   El relleno lleva un brillo interior de 1px arriba —el truco de coss-com-ui
   para que un botón sólido tenga volumen sin dibujarle un degradado visible—
   y se hunde 1px al pulsarlo, que es la única confirmación táctil que hay.
   ========================================================================= */
    .btn, .btn-sec, .btn-peligro, .btn-fantasma {
      display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
      border-radius: var(--r-md); font-weight: 600; font-size: .95rem; line-height: 1.2;
      padding: .7rem 1rem; border: 1px solid transparent; white-space: nowrap;
      text-decoration: none; cursor: pointer; position: relative;
      transition: background-color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease),
                  box-shadow var(--ms-1) var(--ease), transform var(--ms-1) var(--ease),
                  color var(--ms-1) var(--ease);
    }
    .btn svg, .btn-sec svg, .btn-peligro svg, .btn-fantasma svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

    .btn { background: var(--marca-solida); color: var(--sobre-marca); box-shadow: var(--sh-brillo), var(--sh-xs); }
    .btn:hover:not(:disabled) { background: var(--marca-solida-hover); box-shadow: var(--sh-brillo), var(--sh-sm); }

    .btn-sec { background: var(--superficie); color: var(--marca); border-color: var(--borde); box-shadow: var(--sh-xs); padding: .55rem .9rem; }
    .btn-sec:hover:not(:disabled) { background: var(--marca-claro); border-color: var(--borde-fuerte); }

    .btn-peligro { background: var(--peligro-solido); color: var(--sobre-peligro); box-shadow: var(--sh-brillo), var(--sh-xs); }
    .btn-peligro:hover:not(:disabled) { filter: brightness(1.08); }
    .btn-peligro:focus-visible { box-shadow: var(--ring-peligro); }

    .btn-fantasma { background: none; color: var(--texto); padding: .55rem .9rem; }
    .btn-fantasma:hover:not(:disabled) { background: var(--acento); }



    .btn:disabled, .btn-sec:disabled, .btn-peligro:disabled, .btn-fantasma:disabled,
    .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

    .btn-sm { padding: .4rem .7rem; font-size: .85rem; border-radius: var(--r-sm); }
    .btn-lg { padding: .85rem 1.3rem; font-size: 1rem; border-radius: var(--r-lg); }
    .btn-block { width: 100%; }
    /* Botón cuadrado de solo icono: sin esto el icono queda descentrado por
       el relleno horizontal heredado. */
    .btn-ico { padding: 0; width: 2.35rem; height: 2.35rem; }
    .btn-ico.btn-sm { width: 2rem; height: 2rem; }

    /* Estado "cargando": el botón se bloquea, mantiene su ancho (para que la
       fila no dé un salto) y cambia su contenido por un girador. Lo activa
       app.js con cargando(btn, true/false). */
    .btn.cargando, .btn-sec.cargando, .btn-peligro.cargando { color: transparent !important; pointer-events: none; }
    .btn.cargando::after, .btn-sec.cargando::after, .btn-peligro.cargando::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 1.05em; height: 1.05em; margin: -.525em 0 0 -.525em;
      border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
      color: var(--sobre-marca); animation: girar .6s linear infinite;
    }
    .btn-sec.cargando::after { color: var(--marca); }
    @keyframes girar { to { transform: rotate(360deg); } }

    /* Girador suelto, para cargas dentro de un panel. */
    .spinner {
      display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em;
      border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
      opacity: .7; animation: girar .6s linear infinite;
    }

/* =========================================================================
   6. AVISOS EN LÍNEA
   ------------------------------------------------------------------------- */
    .msg {
      font-size: .9rem; padding: .7rem .85rem; border-radius: var(--r-md);
      margin-bottom: 1rem; display: none; border: 1px solid transparent;
    }
    .msg.error { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo-borde); display: block; }
    .msg.ok { background: var(--verde-bg); color: var(--verde); border-color: var(--verde-borde); display: block; }
    .msg.info { background: var(--azul-bg); color: var(--azul); border-color: var(--azul-borde); display: block; }
    .msg.aviso { background: var(--amarillo-bg); color: var(--amarillo); border-color: var(--amarillo-borde); display: block; }

    /* ---------- APP LAYOUT ---------- */
    #app { display: none; min-height: 100vh; }
    header.top { background: var(--marca-solida); color: var(--sobre-marca); display: flex; align-items: center; justify-content: space-between; padding: max(.7rem, env(safe-area-inset-top)) 1.2rem .7rem; position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--oro); }
    header.top .brand { font-weight: 800; letter-spacing: .5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    header.top .me { font-size: .85rem; display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
    header.top .me .rol { background: rgba(255,255,255,.2); padding: .15rem .5rem; border-radius: 6px; font-size: .72rem; text-transform: uppercase; }
    @media (max-width: 560px) { header.top { padding: max(.7rem, env(safe-area-inset-top)) .8rem .7rem; } header.top .me { gap: .5rem; } header.top #me-nombre { display: none; } }
    .layout { display: flex; min-height: calc(100vh - 52px); }
    /* El menú lateral es "sticky": mide como mucho una pantalla, así que en una
       vista larga su fondo se acababa a media página y dejaba ver el de la
       página debajo. Pintar la columna en el contenedor la continúa hasta abajo.
       Solo en escritorio: por debajo de 820px el menú lateral no existe. */
    @media (min-width: 821px) {
      .layout {
        background: linear-gradient(to right,
          var(--superficie) 0 228px, var(--borde) 228px 229px, transparent 229px);
      }
    }
    /* Barra lateral fija con scroll propio: en menús largos el usuario nunca pierde
       de vista dónde está, y la página no arrastra el menú al hacer scroll. */
    nav.side { width: 228px; background: var(--superficie); border-right: 1px solid var(--borde); padding: .9rem .7rem 1.2rem; flex-shrink: 0; position: sticky; top: 52px; align-self: flex-start; min-height: calc(100vh - 52px); max-height: calc(100vh - 52px); overflow-y: auto; scrollbar-width: thin; }
    nav.side a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: 9px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: .9rem; margin-bottom: .15rem; }
    nav.side a:hover { background: var(--gris); }
    nav.side a.active { background: var(--marca-claro); color: var(--marca); }
    nav.side .nav-sep { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--sobre-marca); background: var(--marca-solida); font-weight: 800; padding: .35rem .7rem; margin: .6rem 0 .35rem; border-radius: 6px; border-left: 4px solid var(--oro); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .4rem; user-select: none; }
    nav.side .nav-sep:hover { filter: brightness(1.12); }
    nav.side .nav-caret { font-size: .72rem; line-height: 1; transition: transform .15s ease; }
    nav.side .nav-sep.collapsed .nav-caret { transform: rotate(-90deg); }
    nav.side .nav-group.collapsed { display: none; }
    nav.side .nav-spacer { height: .4rem; }
    .badge { background: var(--peligro-solido); color: var(--sobre-peligro); border-radius: 999px; font-size: .72rem; padding: .05rem .45rem; min-width: 20px; text-align: center; }
    main { flex: 1; min-width: 0; padding: var(--esp-m); width: 100%; }  /* fluido: usa todo el ancho disponible (sin tope fijo). min-width:0 confina el scroll de tablas anchas al panel, no a la página */
    h2.title { font-size: var(--txt-2); margin-bottom: .3rem; }
    p.lead { color: var(--suave); margin-bottom: 1.4rem; }
    .page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
    .page-head .title { margin-bottom: .3rem; }

    /* ---------- COMPONENTES ---------- */
    .panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-xl); padding: var(--esp-s); margin-bottom: var(--esp-s); box-shadow: var(--sh-xs); }
    /* Las tablas tienen su propio recuadro con altura limitada → la barra de scroll
       horizontal queda SIEMPRE visible abajo (antes quedaba al final de la tabla, fuera de pantalla)
       y la cabecera se mantiene fija arriba. */
    .panel:has(table.tablareg) { max-height: 72vh; overflow: auto; }
    /* Barra de desplazamiento SIEMPRE visible (en Mac está oculta por defecto). */
    .panel { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) var(--scroll-fondo); }
    .panel::-webkit-scrollbar { height: 16px; width: 14px; -webkit-appearance: none; }
    .panel::-webkit-scrollbar-track { background: var(--scroll-fondo); }
    .panel::-webkit-scrollbar-thumb { background: var(--scroll-pulgar); border-radius: 8px; border: 3px solid var(--scroll-fondo); }
    .panel::-webkit-scrollbar-thumb:hover { background: var(--marca-solida); }
    .row { display: flex; gap: .8rem; flex-wrap: wrap; }
    .row > * { flex: 1; min-width: 160px; }
    .field { margin-bottom: 1rem; }
    textarea.inp { resize: vertical; min-height: 80px; }
    .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1.2rem; }
    .toolbar > button { padding: .7rem 1rem; }  /* misma altura que los .inp para alinear "Limpiar" */
    @media (max-width: 600px) {
      main { padding: 1rem .7rem; }
      .toolbar { flex-direction: column; align-items: stretch; gap: .5rem; }
      .toolbar .field { min-width: 0; width: 100%; }
      .toolbar > button { width: 100%; }
      .row { gap: .6rem; }
      .row > * { min-width: 0; flex: 1 1 100%; }
      .stats { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
      .modal { padding: 1.1rem; }
      .page-head { gap: .6rem; }
      .page-head .btn { width: 100%; }
      h2.title { font-size: 1.2rem; }
    }
    .toolbar .field, .toolbar .inp { margin-bottom: 0; }

    .item { border: 1px solid var(--borde); border-radius: var(--r-xl); padding: 1rem; margin-bottom: .8rem; background: var(--superficie); box-shadow: var(--sh-xs); transition: box-shadow var(--ms-2) var(--ease), border-color var(--ms-2) var(--ease); }
    .item:hover { box-shadow: 0 4px 14px rgba(16,24,40,.08); border-color: var(--borde-fuerte); }
    .item.leido { opacity: .6; }
    .item .head { display: flex; justify-content: space-between; align-items: start; gap: .6rem; }
    .item .asunto { font-weight: 700; }
    .item .meta { font-size: .8rem; color: var(--suave); margin-top: .15rem; }
    .item .cuerpo { margin: .6rem 0; white-space: pre-wrap; }
    .item .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
    .item .tags { display: flex; gap: .35rem; flex-wrap: wrap; }
    .item.anuncio.fijado { border-left: 4px solid var(--oro); background: var(--oro-bg); }
    .hilo { margin-top: .7rem; border-top: 1px solid var(--borde); padding-top: .55rem; }
    .hilo > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--marca); list-style: none; }
    .hilo > summary::-webkit-details-marker { display: none; }
    /* Flechas y marcas dibujadas con los mismos trazos que ico(): el SVG hace
       de máscara y el color es el del texto (currentColor). Nada de símbolos. */
    :root {
      --ico-derecha: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
      --ico-abajo: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --ico-exclama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10M12 20h.01'/%3E%3C/svg%3E");
      --ico-punto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h.01'/%3E%3C/svg%3E");
      --ico-hecho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    }
    .hilo > summary::before {
      content: ''; display: inline-block; width: .75em; height: .75em; margin-right: .4rem; vertical-align: -.05em;
      background: currentColor; -webkit-mask: var(--ico-derecha) center / contain no-repeat; mask: var(--ico-derecha) center / contain no-repeat;
      transition: transform var(--ms-1) var(--ease);
    }
    .hilo[open] > summary::before { transform: rotate(90deg); }
    .hilo-body { margin-top: .7rem; }
    .resp-input { width: 100%; margin-bottom: .4rem; }

    /* Avatares de iniciales */
    .avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--marca-solida); color: var(--sobre-marca); font-weight: 700; font-size: .85rem; letter-spacing: .5px; flex-shrink: 0; }
    .avatar.sm { width: 26px; height: 26px; font-size: .7rem; }
    .rec-from { display: flex; align-items: center; gap: .7rem; }
    .rec-nombre { font-weight: 700; font-size: .95rem; line-height: 1.15; }
    .u-cell { display: flex; align-items: center; gap: .6rem; }

    .tag { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; text-transform: uppercase; }
    .tag.urgente { background: var(--rojo-bg); color: var(--rojo); }
    .tag.alta { background: var(--rojo-bg); color: var(--rojo); }
    .tag.media { background: var(--amarillo-bg); color: var(--amarillo); }
    .tag.baja { background: var(--verde-bg); color: var(--verde); }
    .tag.resuelto { background: var(--verde-bg); color: var(--verde); }
    .tag.dep { background: var(--marca-claro); color: var(--marca); }

    /* ---------- KANBAN ---------- */
    .kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
    /* Controles de Tareas exclusivos del móvil (los muestra la media query). */
    .tareas-f-toggle, .tabs-est { display: none; }
    .col { background: var(--gris); border: 1px solid var(--borde); border-radius: 14px; padding: .8rem; }
    .col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; padding: 0 .2rem; }
    .col-tit { display: flex; align-items: center; gap: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 700; }
    .col-dot { width: 9px; height: 9px; border-radius: 50%; }
    .col-dot.pendiente { background: var(--tenue); }
    .col-dot.en_curso { background: var(--azul); }
    .col-dot.completada { background: var(--verde); }
    .col-count { background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .5rem; color: var(--suave); }
    .col.drop { background: var(--marca-claro); outline: 2px dashed var(--marca); outline-offset: -4px; }
    .col-body { min-height: 140px; }

    .task { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 10px; padding: .75rem .8rem; margin-bottom: .7rem; box-shadow: 0 1px 2px rgba(16,24,40,.05); cursor: grab; transition: box-shadow .15s; }
    .task:hover { box-shadow: 0 4px 14px rgba(16,24,40,.10); }
    .task.dragging { opacity: .45; }
    .task.prio-alta { border-left-color: var(--rojo); }
    .task.prio-media { border-left-color: var(--amarillo); }
    .task.prio-baja { border-left-color: var(--verde); }
    .task .t-top { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
    .task .t-tit { font-weight: 700; font-size: .92rem; line-height: 1.25; }
    .task .t-meta { font-size: .78rem; color: var(--suave); margin-top: .4rem; }
    .task .t-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
    .avatars { display: flex; }
    .avatars .avatar { width: 26px; height: 26px; font-size: .66rem; border: 2px solid var(--superficie); margin-left: -8px; }
    .avatars .avatar:first-child { margin-left: 0; }
    .due { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--suave); white-space: nowrap; }
    .due.overdue { color: var(--rojo); font-weight: 700; }
    .due.today { color: var(--amarillo); font-weight: 700; }
    .icon-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: .2rem .45rem; font-size: .82rem; cursor: pointer; color: var(--suave); transition: background-color var(--ms-1) var(--ease), color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease); }
    .icon-btn:hover { background: var(--gris); color: var(--texto); }
    .estado-sel { font-size: .76rem; padding: .25rem .4rem; border: 1px solid var(--borde); border-radius: 7px; background: var(--superficie); color: var(--texto); cursor: pointer; max-width: 220px; }
    .inline-sel { font-size: .78rem; padding: .25rem 1.5rem .25rem .45rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; max-width: 200px; min-width: 60px; width: 100%; }
    .inline-sel:hover { border-color: var(--marca); }
    /* Celda "pulsa para editar" (Organismo / Asignado): parece una casilla desplegable (borde + flecha),
       pero es ligera; el <select> real se crea al pulsar. */
    .cell-edit { display: inline-flex; align-items: center; justify-content: space-between; gap: .35rem; min-width: 96px; max-width: 165px; padding: .28rem .45rem; border: 1px solid var(--borde-fuerte); border-radius: 6px; background: var(--gris); cursor: pointer; font-size: .78rem; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
    .cell-edit .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cell-edit::after {
      content: ''; width: .75rem; height: .75rem; flex-shrink: 0; background: var(--marca);
      -webkit-mask: var(--ico-abajo) center / contain no-repeat; mask: var(--ico-abajo) center / contain no-repeat;
    }
    .cell-edit:hover { border-color: var(--marca); background: var(--superficie); }
    /* Color por valor en los desplegables (estado / resultado) para diferenciarlos */
    .estado-sel[data-val] { font-weight: 700; border-color: transparent; }
    .estado-sel[data-val="pendiente"], .estado-sel[data-val="PENDIENTE"] { background-color: var(--amarillo-bg); color: var(--amarillo); }
    .estado-sel[data-val="contestada"], .estado-sel[data-val="presentado"], .estado-sel[data-val="PRESENTADO"], .estado-sel[data-val="ATENDIDO"] { background-color: var(--verde-bg); color: var(--verde); }
    .estado-sel[data-val="RESOLUCION"], .estado-sel[data-val="ENVIADO"] { background-color: var(--azul-bg); color: var(--azul); }
    .estado-sel[data-val="NOTIFICACION"] { background-color: var(--naranja-bg); color: var(--naranja); }
    .estado-sel[data-val="AUTONOMO"] { background-color: var(--morado-bg); color: var(--morado); }
    .estado-sel[data-val="COMUNICACION"] { background-color: var(--verde-bg); color: var(--verde); }
    .estado-sel[data-val="NO SE HACE NADA"] { background-color: var(--neutro-bg); color: var(--neutro); }
    /* Estados de Requerimientos */
    .estado-sel[data-val="Pendiente"] { background-color: var(--amarillo-bg); color: var(--amarillo); }
    .estado-sel[data-val="Presentado"], .estado-sel[data-val="Ampliación presentada"], .estado-sel[data-val="Contestado"] { background-color: var(--verde-bg); color: var(--verde); }
    .estado-sel[data-val="Recurrido"] { background-color: var(--azul-bg); color: var(--azul); }
    .estado-sel[data-val="Ampliación de plazo"] { background-color: var(--naranja-bg); color: var(--naranja); }
    .estado-sel[data-val="Cobrado"], .estado-sel[data-val="Enviada"], .estado-sel[data-val="No se envía"] { background-color: var(--verde-bg); color: var(--verde); }
    .estado-sel[data-val="Sin trabajadores"] { background-color: var(--neutro-bg); color: var(--neutro); }
    .estado-sel[data-val="Baja"] { background-color: var(--rojo-bg); color: var(--rojo); }
    .estado-sel[data-val="Fijo disc. activo"] { background-color: var(--naranja-bg); color: var(--naranja); }
    .estado-sel[data-val="Fijo disc. inactivo"] { background-color: var(--turquesa-bg); color: var(--turquesa); }
    .estado-sel[data-val="Pago directo"] { background-color: var(--indigo-bg); color: var(--indigo); }
    /* Pastillas (desplegables limpios: estado, régimen, extras) con flecha discreta */
    .pill-sel { appearance: none; -webkit-appearance: none; font-size: .75rem; font-weight: 600; border: 1px solid var(--borde); border-radius: 999px; padding: .22rem 1.25rem .22rem .6rem; background-color: var(--superficie); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%237a8a82' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; color: var(--texto); cursor: pointer; max-width: 175px; text-overflow: ellipsis; }
    .pill-sel:hover { border-color: var(--marca); }
    .reg-sel[data-val="Régimen general"] { background-color: var(--neutro-bg); color: var(--neutro); border-color: transparent; }
    .reg-sel[data-val="Régimen agrario"] { background-color: var(--verde-bg); color: var(--verde); border-color: transparent; }
    .reg-sel[data-val="Empleadas de hogar"] { background-color: var(--morado-bg); color: var(--morado); border-color: transparent; }
    .ext-sel { max-width: 58px; padding: .22rem 1.15rem .22rem .5rem; font-weight: 700; color: var(--suave); }
    /* Etiquetas de tipo de cliente (color por categoría) */
    .tipo-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
    .tipo-tag.azul { background: var(--azul-bg); color: var(--azul); }
    .tipo-tag.verde { background: var(--verde-bg); color: var(--verde); }
    .tipo-tag.ambar { background: var(--naranja-bg); color: var(--naranja); }
    .tipo-tag.morado { background: var(--morado-bg); color: var(--morado); }
    .tipo-tag.gris { background: var(--neutro-bg); color: var(--neutro); }
    /* ---- Subvenciones ---- */
    .subv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
    .subv-card { border: 1px solid var(--borde); border-radius: 14px; padding: 1.1rem 1.2rem; cursor: pointer; transition: box-shadow .15s, transform .15s; background: var(--superficie); border-top: 4px solid var(--azul); }
    .subv-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
    .subv-card h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
    .subv-card .cod { font-size: .78rem; color: var(--muted); font-weight: 600; }
    .subv-card .subv-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .7rem; font-size: .82rem; color: var(--texto); }
    .subv-card .subv-nums { display: flex; gap: 1.2rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--borde); }
    .subv-card .subv-nums b { display: block; font-size: 1.15rem; }
    .subv-card .subv-nums span { font-size: .72rem; color: var(--muted); }
    .est-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
    .est-tag.gris { background: var(--neutro-bg); color: var(--neutro); } .est-tag.azul { background: var(--azul-bg); color: var(--azul); }
    .est-tag.verde { background: var(--verde-bg); color: var(--verde); } .est-tag.ambar { background: var(--naranja-bg); color: var(--naranja); }
    .est-tag.rojo { background: var(--rojo-bg); color: var(--rojo); } .est-tag.indigo { background: var(--indigo-bg); color: var(--indigo); }
    .est-tag.naranja { background: var(--naranja-bg); color: var(--naranja); } .est-tag.turquesa { background: var(--turquesa-bg); color: var(--turquesa); }
    .sem-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
    .sem-dot.verde { background: var(--verde); } .sem-dot.ambar { background: var(--amarillo); } .sem-dot.rojo { background: var(--rojo); } .sem-dot.gris { background: var(--tenue); }
    .plazo-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .2rem; border-bottom: 1px solid var(--borde); }
    .plazo-row .pl-lbl { flex: 1; font-size: .88rem; } .plazo-row .pl-fecha { font-weight: 600; white-space: nowrap; }
    .plazo-row .pl-dias { font-size: .78rem; color: var(--muted); white-space: nowrap; min-width: 90px; text-align: right; }
    .plazo-row.crit { background: var(--rojo-bg); }
    .chk-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .2rem; border-bottom: 1px solid var(--borde); font-size: .88rem; }
    .chk-row .chk-lbl { flex: 1; } .chk-row.obl .chk-lbl::after { content: ' *'; color: var(--rojo); font-weight: 700; }
    .calc-box { background: var(--gris); border-radius: 12px; padding: 1rem 1.1rem; }
    .calc-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--borde); }
    .calc-tot b { font-size: 1.4rem; }
    .aviso-box { border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; margin-top: .5rem; }
    .aviso-box.warn { background: var(--naranja-bg); color: var(--naranja); } .aviso-box.err { background: var(--rojo-bg); color: var(--rojo); } .aviso-box.ok { background: var(--verde-bg); color: var(--verde); }
    .subv-tabs { display: flex; gap: .3rem; margin: 1rem 0 .4rem; border-bottom: 2px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
    .subv-tabs::-webkit-scrollbar { display: none; }
    .subv-tabs button { border: none; background: none; padding: .6rem 1rem; font-size: .92rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; flex-shrink: 0; }
    .subv-tabs button.active { color: var(--azul); border-bottom-color: var(--azul); }
    .est-count { display: inline-flex; align-items: center; gap: .35rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; }
    .inline-inp { width: 100%; min-width: 90px; box-sizing: border-box; padding: .25rem .4rem; border: 1px solid var(--azul); border-radius: 6px; font: inherit; font-size: .85rem; margin: 0; }
    .subv-est-sel { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid transparent; border-radius: 999px; font-weight: 700; font-size: .72rem; padding: .25rem 1.5rem .25rem .65rem; cursor: pointer; background-repeat: no-repeat; background-position: right .5rem center; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555' fill='none' stroke-width='1.4'/></svg>"); }
    .subv-est-sel[data-color="gris"] { background-color: var(--neutro-bg); color: var(--neutro); } .subv-est-sel[data-color="azul"] { background-color: var(--azul-bg); color: var(--azul); }
    .subv-est-sel[data-color="verde"] { background-color: var(--verde-bg); color: var(--verde); } .subv-est-sel[data-color="ambar"] { background-color: var(--naranja-bg); color: var(--naranja); }
    .subv-est-sel[data-color="rojo"] { background-color: var(--rojo-bg); color: var(--rojo); } .subv-est-sel[data-color="indigo"] { background-color: var(--indigo-bg); color: var(--indigo); }
    .subv-est-sel[data-color="naranja"] { background-color: var(--naranja-bg); color: var(--naranja); } .subv-est-sel[data-color="turquesa"] { background-color: var(--turquesa-bg); color: var(--turquesa); }
    .chip-enc { font-size: .76rem; background: var(--gris); border: 1px solid var(--borde); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
    .chip-enc.ok { background: var(--verde-bg); color: var(--verde); border-color: transparent; font-weight: 700; }
    .nom-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-top: .7rem; }
    .nom-enc { border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 10px; padding: .6rem .8rem; cursor: default; }
    .nom-enc.ok { border-left-color: var(--verde); }
    .nom-enc.mid { border-left-color: var(--amarillo); }
    .nom-enc.bad { border-left-color: var(--rojo); }
    .nom-enc .ne-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
    .nom-enc .ne-top b { font-size: .9rem; }
    .nom-hist-item { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
    .nom-hist-mes { font-weight: 700; min-width: 110px; }
    /* «Borrar la carga»: cuántas empresas de cada encargado se van */
    .nom-vaciar-enc { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
    /* Celdas editables directamente en la tabla (pulsa para editar) */
    td.nom-cell { cursor: pointer; }
    td.nom-cell:hover { background: var(--marca-claro); box-shadow: inset 0 0 0 1px var(--marca); }
    td.nom-cell .nom-add { color: var(--tenue); font-weight: 700; }
    td.nom-cell:hover .nom-add { color: var(--marca); }
    td.nom-cell input { width: 100%; box-sizing: border-box; font: inherit; padding: .25rem .35rem; border: 1px solid var(--marca); border-radius: 5px; background: var(--superficie); }
    .estado-sel[data-val="No se presenta"], .estado-sel[data-val="No procede"] { background-color: var(--rojo-bg); color: var(--rojo); }

    /* ---------- DEPARTAMENTOS ---------- */
    .dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; align-items: start; }
    .dep-col { background: var(--gris); border: 1px solid var(--borde); border-radius: 12px; padding: .7rem; }
    .dep-col.drop { background: var(--marca-claro); outline: 2px dashed var(--marca); outline-offset: -4px; }
    .dep-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
    .dep-tit { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
    .dep-body { display: flex; flex-direction: column; gap: .4rem; min-height: 44px; }
    .miembro { display: flex; align-items: center; gap: .5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px; padding: .35rem .5rem; font-size: .86rem; cursor: grab; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
    .miembro:hover { border-color: var(--borde-fuerte); }
    .miembro .m-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .miembro .m-mover { flex-shrink: 0; }
    .miembro.dragging { opacity: .45; }
    .miembro.inact { opacity: .5; }

    /* ---------- CALENDARIO ---------- */
    .cal-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
    .cal-mes { font-weight: 700; font-size: 1.05rem; min-width: 160px; text-align: center; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
    .cal-dow { text-align: center; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 700; padding: .2rem 0; }
    .cal-cell { background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px; min-height: 100px; min-width: 0; overflow: hidden; padding: .35rem; display: flex; flex-direction: column; gap: .25rem; }
    .cal-cell.empty { background: transparent; border: none; }
    .cal-cell.hoy { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
    .cal-num { font-size: .78rem; font-weight: 700; color: var(--suave); }
    .cal-cell.hoy .cal-num { color: var(--marca); }
    .cal-task { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-align: left; font-size: .72rem; line-height: 1.2; padding: .2rem .35rem; border: none; border-left: 3px solid var(--borde); border-radius: 5px; background: var(--gris); color: var(--texto); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cal-task:hover { background: var(--marca-claro); }
    .cal-task.prio-alta { border-left-color: var(--rojo); }
    .cal-task.prio-media { border-left-color: var(--amarillo); }
    .cal-task.prio-baja { border-left-color: var(--verde); }
    .cal-task.done { text-decoration: line-through; color: var(--suave); }
    .cal-task.insp { border-left-color: var(--oro); background: var(--oro-bg); }
    .cal-task.smac { border-left-color: var(--azul); background: var(--azul-bg); }
    @media (max-width: 820px) { .cal-cell { min-height: 64px; } .cal-task { font-size: .62rem; padding: .15rem .25rem; } .cal-mes { min-width: 120px; font-size: .95rem; } }

    .venc-item { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem .2rem; border-bottom: 1px solid var(--borde); cursor: pointer; font-size: .9rem; }
    .venc-item:last-child { border-bottom: none; }
    .venc-item:hover { background: var(--marca-claro); }

    /* ---------- DASHBOARD ---------- */
    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
    .stat { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-xl); padding: 1.1rem; box-shadow: var(--sh-xs); transition: box-shadow var(--ms-2) var(--ease), transform var(--ms-2) var(--ease); }
    .stat:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
    .stat .num { letter-spacing: -.025em; }
    .stat .num { font-size: var(--txt-3); font-weight: 800; color: var(--marca); line-height: 1; }
    .stat .num.alerta { color: var(--rojo); }
    .stat .lbl { color: var(--suave); font-size: .82rem; margin-top: .35rem; }
    .carga { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
    .carga .n { width: 150px; display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
    .bar { display: block; flex: 1; height: 10px; background: var(--gris); border-radius: 999px; overflow: hidden; }
    .bar-fill { display: block; height: 100%; background: var(--marca-solida); border-radius: 999px; }
    .carga .v { width: 28px; text-align: right; font-weight: 700; font-size: .85rem; }
    @media (max-width: 820px) { .stats { grid-template-columns: repeat(2, 1fr); } }

    /* ---------- FICHA DE DETALLE ---------- */
    .dt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; margin: .4rem 0 1rem; }
    .dt-item { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
    .dt-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); font-weight: 700; }
    .dt-v { font-weight: 600; word-break: break-word; }
    .dt-coment { background: var(--gris); border-radius: 9px; padding: .6rem .8rem; white-space: pre-wrap; word-break: break-word; }
    a.lnk-detalle { color: var(--marca); font-weight: 600; text-decoration: none; cursor: pointer; }
    a.lnk-detalle:hover { text-decoration: underline; }
    @media (max-width: 600px) { .dt-grid { grid-template-columns: 1fr; } }
    /* Administración y socios del cliente: una persona por fila, con lo que es
       (cargo, % de capital) debajo del nombre y sus datos de contacto. */
    .per-lista { border: 1px solid var(--borde); border-radius: var(--r-md); }
    .per-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; }
    .per-item + .per-item { border-top: 1px solid var(--borde); }
    .per-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
    .per-nombre { font-weight: 700; overflow-wrap: anywhere; }
    .per-papel { font-size: .85rem; color: var(--marca); font-weight: 600; }
    .per-datos { font-size: .82rem; color: var(--suave); overflow-wrap: anywhere; }
    .per-acc { display: flex; gap: .25rem; flex-shrink: 0; }
    .per-vacio { margin: 0; font-size: .88rem; color: var(--suave); }
    .per-aviso { margin: .4rem 0 0; font-size: .82rem; color: var(--naranja); font-weight: 600; }
    .per-nuevo { margin-top: .5rem; }
    .per-de { margin: -.6rem 0 1rem; color: var(--suave); }

    /* ---------- COMENTARIOS Y ADJUNTOS ---------- */
    .det-info { background: var(--gris); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.1rem; font-size: .9rem; }
    .det-info .det-row { display: flex; gap: .5rem; margin-top: .35rem; flex-wrap: wrap; align-items: center; }
    .sec-tit { font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 700; margin: 1.1rem 0 .6rem; }
    /* --- Mi día (rediseño calmado) --- */
    .md-head .fecha { font-size: .8rem; color: var(--suave); text-transform: capitalize; }
    .md-head .resumen { font-size: .92rem; color: var(--suave); margin-top: .1rem; }
    .md-toggle { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; margin: .9rem 0 .4rem; }
    .md-toggle button { border: none; background: var(--superficie); padding: .35rem .95rem; font-size: .82rem; cursor: pointer; color: var(--suave); }
    .md-toggle button.on { background: var(--marca-solida); color: var(--sobre-marca); font-weight: 700; }
    .md-sec { font-size: .8rem; font-weight: 700; color: var(--suave); margin: 1.25rem 0 .45rem; display: flex; align-items: center; gap: .4rem; }
    .md-sec.rojo { color: var(--rojo); }
    .md-list { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--superficie); }
    .md-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-bottom: 1px solid var(--borde); cursor: pointer; }
    .md-row:last-child { border-bottom: none; }
    .md-row:hover { background: var(--marca-claro); }
    .md-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
    .md-tipo { font-size: .7rem; color: var(--suave); width: 96px; flex: none; }
    .md-txt { flex: 1; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .md-fecha { font-size: .8rem; white-space: nowrap; color: var(--suave); }
    .md-fecha.rojo { color: var(--rojo); font-weight: 700; } .md-fecha.ambar { color: var(--amarillo); font-weight: 700; }
    .md-acc { display: flex; gap: .2rem; flex: none; }
    .md-acc button { border: 1px solid var(--borde); background: var(--superficie); border-radius: 7px; width: 27px; height: 27px; cursor: pointer; font-size: .85rem; line-height: 1; color: var(--suave); padding: 0; }
    .md-acc button:hover { background: var(--gris); color: var(--marca); border-color: var(--marca); }
    .md-vacio { text-align: center; padding: 2.6rem 1rem; }
    .md-vacio .big { font-size: 2.4rem; color: var(--verde); line-height: 1; } .md-vacio .txt { font-size: 1.05rem; color: var(--marca); font-weight: 700; margin-top: .4rem; }
    .md-counts { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
    .md-count { flex: 1; min-width: 130px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .7rem .95rem; cursor: pointer; }
    .md-count .l { font-size: .78rem; color: var(--suave); } .md-count .n { font-size: 1.5rem; font-weight: 800; color: var(--marca); }
    .md-count.warn { background: var(--naranja-bg); border-color: var(--naranja-borde); } .md-count.warn .n, .md-count.warn .l { color: var(--naranja); }
    @media (max-width: 600px) { .md-tipo { display: none; } }
    /* --- Recados (bandeja limpia) --- */
    .rc-seg { display: inline-flex; }
    .rc-seg button { border: 1px solid var(--borde); background: var(--superficie); padding: .4rem .9rem; font-size: .82rem; cursor: pointer; color: var(--suave); }
    .rc-seg button:first-child { border-radius: 8px 0 0 8px; } .rc-seg button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
    .rc-seg button.on { background: var(--marca-solida); color: var(--sobre-marca); border-color: var(--marca-solida); font-weight: 700; }
    .rc-list { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--superficie); }
    .rc-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-bottom: 1px solid var(--borde); cursor: pointer; }
    .rc-row:last-child { border-bottom: none; } .rc-row:hover { background: var(--marca-claro); } .rc-row.rc-open { background: var(--gris); }
    .rc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .rc-main { flex: 1; min-width: 0; }
    .rc-main .l1 { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rc-main .l2 { font-size: .76rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rc-fecha { font-size: .76rem; color: var(--suave); white-space: nowrap; flex: none; }
    .rc-acc { display: flex; gap: .25rem; flex: none; align-items: center; }
    .rc-acc button { border: 1px solid var(--borde); background: var(--superficie); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: .85rem; color: var(--suave); padding: 0; }
    .rc-acc button:hover { background: var(--gris); color: var(--marca); border-color: var(--marca); }
    .rc-exp { padding: .5rem .9rem .9rem 2.6rem; background: var(--gris); border-bottom: 1px solid var(--borde); }
    .rc-exp .msg-cuerpo { font-size: .88rem; margin: 0 0 .7rem; white-space: pre-wrap; }
    .rc-collapse { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--suave); cursor: pointer; padding: .7rem .2rem; }
    /* --- Selector de destinatarios por avatar (tocar la cara) --- */
    .rdest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin: .25rem 0 .7rem; }
    .rdest { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .55rem .35rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); cursor: pointer; position: relative; text-align: center; }
    .rdest:hover { border-color: var(--marca); background: var(--marca-claro); }
    .rdest.sel { border-color: var(--marca); background: var(--marca-claro); box-shadow: inset 0 0 0 2px var(--marca); }
    .rdest-nom { font-size: .76rem; line-height: 1.1; }
    .rdest .chk { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; background: var(--marca-solida); color: var(--sobre-marca); font-size: .68rem; display: none; align-items: center; justify-content: center; }
    .rdest.sel .chk { display: flex; }
    .rdest-dep-tit { font-size: .72rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; margin: .6rem 0 .15rem; }
    .rdest[hidden], .nc-dep[hidden] { display: none; }
    .rdest .chk .ico { width: 12px; height: 12px; }
    /* Grupos de Mensajes: elegir entre directo y grupo, las personas del grupo
       con su botón de quitar y las acciones, que en el móvil bajan de línea. */
    .nc-modo { margin: -.2rem 0 .9rem; }
    .nc-modo .ico { width: 15px; height: 15px; }
    .gr-lista { border: 1px solid var(--borde); border-radius: var(--r-md); max-height: min(40vh, 320px); overflow-y: auto; }
    .gr-persona { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; }
    .gr-persona + .gr-persona { border-top: 1px solid var(--borde); }
    .gr-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
    .gr-renombrar { display: flex; gap: .5rem; }
    .gr-renombrar .inp { flex: 1; min-width: 0; margin: 0; }
    .gr-anadir { margin: 0 0 1rem; }
    .gr-anadir-acc { display: flex; justify-content: flex-end; gap: .5rem; }
    .gr-acciones { flex-wrap: wrap; }
    .gr-acciones .btn-peligro { margin-right: auto; }
    #nc-lista { max-height: min(50vh, 420px); overflow-y: auto; margin-top: .4rem; }
    .rc-volver { margin-bottom: .8rem; }

    /* ---------- RECADOS: conversaciones ----------
       Escritorio: la lista a la izquierda y el hilo a la derecha, cada uno con
       su desplazamiento y lo que se escribe siempre abajo. Móvil: o la lista o
       el hilo. Un hilo abierto es pantalla de conversación (html.pantalla-conv,
       en «Escribir en el móvil»): sin barra inferior (body.en-hilo), solo se
       desplazan los mensajes y lo que se escribe queda abajo, encima del
       teclado cuando está fuera. --chat-arriba lo mide app.js al pintar: el
       título de la página no mide siempre lo mismo. */
    .chat {
      display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
      height: calc(100vh - var(--chat-arriba, 150px) - var(--esp-m));   /* sin dvh (Safari < 15.4) */
      height: calc(100dvh - var(--chat-arriba, 150px) - var(--esp-m)); min-height: 460px;
      background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-xl);
      box-shadow: var(--sh-xs); overflow: hidden;
    }
    .chat-lista { border-right: 1px solid var(--borde); overflow-y: auto; padding: .35rem; background: var(--superficie-2); scrollbar-width: thin; }
    .chat-sec { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); padding: .75rem .6rem .3rem; }
    .chat-conv {
      display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .45rem .6rem;
      border: none; border-radius: var(--r-md); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
      transition: background-color var(--ms-1) var(--ease);
    }
    .chat-conv:hover { background: var(--acento); }
    .chat-conv.activa { background: var(--marca-claro); }
    .chat-conv:focus-visible { outline: none; box-shadow: var(--ring-sombra); }
    .chat-canal-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--gris); color: var(--marca); flex-shrink: 0; }
    .chat-canal-ico .ico { width: 15px; height: 15px; }
    .chat-conv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .chat-conv-tit, .chat-conv-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-conv-tit { font-weight: 600; font-size: .9rem; }
    .chat-conv-prev { font-size: .78rem; color: var(--suave); }
    .chat-conv.sin-leer .chat-conv-tit { font-weight: 800; }
    .chat-conv.sin-leer .chat-conv-prev { color: var(--texto); }
    .chat-conv-lado { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; font-size: .72rem; color: var(--suave); }
    .chat-arroba { margin-left: .35rem; color: var(--marca); font-weight: 800; }
    .chat-silencio { display: inline-flex; color: var(--tenue); }
    .chat-silencio .ico { width: 14px; height: 14px; }
    .chat-nada { font-size: .8rem; color: var(--suave); padding: .1rem .6rem .6rem; }
    .chat-antiguos { margin-top: .5rem; border-top: 1px solid var(--borde-suave); border-radius: 0 0 var(--r-md) var(--r-md); }

    .chat-hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
    .chat-hilo-cab { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
    .chat-hilo-tit { flex: 1; min-width: 0; }
    .chat-hilo-tit h3 { font-size: 1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-hilo-tit p { font-size: .76rem; color: var(--suave); margin: 0; }
    .chat-volver { display: none; }
    .chat-silenciar[aria-pressed="true"] { background: var(--gris); color: var(--suave); box-shadow: none; }
    .chat-msgs { flex: 1; overflow-y: auto; padding: .5rem 1rem 1rem; scrollbar-width: thin; }
    .chat-mas { display: flex; margin: .3rem auto .5rem; }
    .chat-raya { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .45rem; font-size: .72rem; font-weight: 700; color: var(--suave); }
    .chat-raya::before, .chat-raya::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
    .chat-raya.nuevos { color: var(--rojo); }
    .chat-raya.nuevos::before, .chat-raya.nuevos::after { background: var(--rojo-borde); }

    .chat-msg { display: flex; gap: .6rem; margin: 0 -.5rem; padding: .35rem .5rem; border-radius: var(--r-md); transition: background-color var(--ms-1) var(--ease); }
    .chat-msg.junto { padding-top: .05rem; }
    .chat-msg:hover, .chat-msg:focus-within { background: var(--acento); }
    /* Donde te mencionan, una raya dorada: se ve al pasar por el hilo sin
       depender solo del color (la mención va también resaltada en el texto). */
    .chat-msg.me-menciona { background: var(--oro-bg); box-shadow: inset 3px 0 0 var(--oro); }
    .chat-msg.urgente .chat-msg-cab b { color: var(--rojo); }
    .chat-msg-hueco { width: 26px; flex-shrink: 0; }
    .chat-msg-cuerpo { flex: 1; min-width: 0; }
    .chat-msg-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
    .chat-msg-cab b { font-size: .88rem; }
    .chat-msg-cab time { font-size: .72rem; color: var(--suave); }
    .chat-msg-cab .tag { align-self: center; }
    .chat-msg-texto { margin: .05rem 0 0; max-width: 68ch; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
    .chat-msg-texto a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
    .chat-msg.borrado .chat-msg-texto { color: var(--tenue); font-style: italic; }
    .mencion { padding: 0 .15rem; border-radius: var(--r-xs); background: var(--marca-claro); color: var(--marca); font-weight: 600; }
    .mencion.yo { background: var(--amarillo-bg); color: var(--amarillo); }
    .chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
    .chat-chip {
      display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem;
      border: 1px solid var(--borde); border-radius: var(--r-full); background: var(--superficie); color: var(--texto);
      font: inherit; font-size: .76rem; font-weight: 600;
    }
    .chat-chip .ico { width: 13px; height: 13px; }
    button.chat-chip { cursor: pointer; }
    button.chat-chip:hover { border-color: var(--borde-fuerte); background: var(--marca-claro); color: var(--marca); }
    .chat-chip.tarea { color: var(--verde); background: var(--verde-bg); border-color: var(--verde-borde); }
    .chat-chip.urgente { color: var(--rojo); background: var(--rojo-bg); border-color: var(--rojo-borde); }
    .chat-chip-x { margin-left: .1rem; padding: 0 .1rem; border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
    .chat-acc { display: flex; align-self: flex-start; gap: .25rem; opacity: 0; transition: opacity var(--ms-1) var(--ease); }
    .chat-msg:hover .chat-acc, .chat-msg:focus-within .chat-acc { opacity: 1; }
    .chat-acc .icon-btn { width: 30px; height: 30px; padding: 0; }
    .chat-acc .ico { width: 15px; height: 15px; }
    /* Sin ratón no hay «pasar por encima»: las acciones se ven siempre, discretas. */
    @media (hover: none) {
      .chat-acc { opacity: 1; }
      .chat-acc .icon-btn { width: 36px; height: 36px; border-color: transparent; background: none; }
    }

    .chat-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; height: 100%; padding: 3rem 1rem; color: var(--suave); text-align: center; }
    .chat-vacio > .ico { width: 30px; height: 30px; color: var(--tenue); }

    .chat-comp { position: relative; padding: .6rem .8rem .7rem; border-top: 1px solid var(--borde); background: var(--superficie); }
    .chat-comp-extra { display: flex; flex-wrap: wrap; gap: .35rem; }
    .chat-comp-extra:not(:empty) { margin-bottom: .45rem; }
    .chat-comp-fila { display: flex; align-items: flex-end; gap: .4rem; }
    .chat-comp-fila textarea.inp { flex: 1; min-width: 0; min-height: 2.35rem; max-height: 220px; margin: 0; padding-top: .55rem; padding-bottom: .55rem; line-height: 1.35; resize: none; }
    .chat-comp-fila .btn-ico { flex-shrink: 0; }
    .chat-urg[aria-pressed="true"] { color: var(--rojo); border-color: var(--rojo-borde); background: var(--rojo-bg); }
    /* Las sugerencias de @ se abren hacia arriba: debajo está el teclado. */
    .chat-menc { top: auto; bottom: calc(100% - .3rem); left: .8rem; right: .8rem; z-index: 20; }
    .chat-menc .combo-op { flex-direction: row; align-items: center; gap: .55rem; }

    .msg-resultados { max-height: 220px; overflow: auto; border: 1px solid var(--borde); border-radius: var(--r-md); }
    .msg-resultado {
      display: flex; flex-direction: column; gap: .15rem; width: 100%; padding: .55rem .7rem; margin-bottom: .45rem;
      border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); color: var(--texto);
      font: inherit; text-align: left; cursor: pointer;
    }
    .msg-resultados .msg-resultado { margin: 0; border: none; border-bottom: 1px solid var(--borde); border-radius: 0; }
    .msg-resultado:hover { background: var(--marca-claro); }
    .msg-resultado-cab { font-size: .78rem; color: var(--suave); }
    .msg-resultado-cab b { color: var(--texto); }
    .msg-resultado-txt { font-size: .88rem; }

    /* Buscar: una fila por resultado; la que lleva a algún sitio es un botón. */
    .bus-lista { border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); overflow: hidden; }
    .bus-fila {
      display: flex; flex-direction: column; gap: .1rem; width: 100%; padding: .55rem .75rem;
      border: none; border-bottom: 1px solid var(--borde); background: none; color: var(--texto);
      font: inherit; text-align: left;
    }
    .bus-fila:last-child { border-bottom: none; }
    button.bus-fila { cursor: pointer; }
    button.bus-fila:hover { background: var(--marca-claro); }
    .bus-nom { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
    .bus-meta { font-size: .8rem; color: var(--suave); overflow-wrap: anywhere; }

    @media (max-width: 820px) {
      .chat { display: block; height: auto; min-height: 0; border: none; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
      .chat.chat-abierto .chat-lista, .chat:not(.chat-abierto) .chat-hilo { display: none; }
      .chat-lista { overflow: visible; border: 1px solid var(--borde); border-radius: var(--r-xl); background: var(--superficie); }
      /* Dentro de un hilo: a lo ancho, sin título de página ni barra inferior,
         y el hilo llena lo que se ve para que lo que se escribe quede abajo
         aunque haya pocos mensajes. */
      body.en-hilo .chat-pagina, body.en-hilo #tabbar { display: none; }
      body.en-hilo main { padding: 0; }
      body.en-hilo #toast { bottom: calc(96px + var(--abajo-seguro)); }
      .chat.chat-abierto { display: flex; flex-direction: column; flex: 1; min-height: 0; }
      .chat-hilo { flex: 1; }
      .chat-volver { display: inline-flex; }
      .chat-hilo-cab { padding: .55rem 1rem; }
      .chat-msgs { overscroll-behavior: contain; padding: .5rem 1rem 1rem; }
      /* Con el teclado fuera, la barra de inicio del iPhone queda debajo de él:
         su margen sobra y lo que se escribe va pegado al teclado. */
      .chat-comp { padding-bottom: max(.7rem, var(--abajo-seguro)); }
      body.teclado .chat-comp { padding-bottom: .6rem; }
      /* Solo el icono; el texto sigue ahí para el lector de pantalla. */
      /* Del tamaño del botón de ajustes de al lado: sin alto propio se aplastaba
         a la altura del icono. */
      .chat-silenciar { width: 2rem; height: 2rem; padding: 0; }
      .chat-silenciar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    }
    /* --- Avisos de bajas/ceses en Nóminas --- */
    .nom-avisos { border-left: 4px solid var(--amarillo); background: var(--naranja-bg); margin-bottom: 1rem; }
    .nom-avisos-tit { font-weight: 800; color: var(--naranja); }
    .nom-avisos-sub { font-size: .82rem; color: var(--suave); margin: .15rem 0 .5rem; }
    .nom-aviso-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--naranja-borde); flex-wrap: wrap; }
    .nom-aviso-est { font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
    .nom-aviso-est.rojo { background: var(--rojo-bg); color: var(--rojo); } .nom-aviso-est.ambar { background: var(--naranja-bg); color: var(--naranja); }
    .nom-aviso-emp { flex: 1; min-width: 150px; font-size: .9rem; }
    .nom-aviso-tr { font-size: .78rem; white-space: nowrap; }
    .coment { display: flex; gap: .6rem; margin-bottom: .9rem; }
    .coment-body { flex: 1; }
    .coment-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
    .coment-head .nm { font-weight: 700; font-size: .88rem; }
    .coment-text { font-size: .9rem; white-space: pre-wrap; margin-top: .15rem; }
    .coment-del { background: none; border: none; color: var(--suave); font-size: .8rem; cursor: pointer; }
    .coment-del:hover { color: var(--rojo); }
    .adj { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid var(--borde); border-radius: 9px; padding: .5rem .7rem; margin-bottom: .5rem; }
    .adj .fname { display: flex; align-items: center; gap: .5rem; font-size: .88rem; overflow: hidden; }
    .adj .fname a { font-weight: 600; text-decoration: none; }
    .adj .fmeta { font-size: .74rem; color: var(--suave); }

    /* ---------- DIRECTORIO DE PERSONAS (recados) ---------- */
    .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
    .person { display: flex; align-items: center; gap: .65rem; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: 11px; padding: .6rem .7rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
    .person:hover { border-color: var(--marca); background: var(--marca-claro); box-shadow: 0 4px 14px rgba(16,24,40,.08); }
    .person.sel { border-color: var(--marca); background: var(--marca-claro); box-shadow: inset 0 0 0 1px var(--marca); }
    .person .p-info { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
    .person .p-nombre { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .person .p-dep { font-size: .76rem; color: var(--suave); }

    /* ---------- MONITORIZACIÓN ---------- */
    .mon-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
    .mon-head .mon-count { font-size: .9rem; color: var(--suave); font-weight: 500; }
    .mon-head .mon-count b { color: var(--marca); font-weight: 800; font-size: 1.05rem; }
    .mon-senal { font-size: .74rem; color: var(--suave); background: var(--gris); border: 1px solid var(--borde); border-radius: 999px; padding: .18rem .6rem; white-space: nowrap; }
    .mon-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
    .mon-card { display: flex; align-items: center; gap: .7rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .7rem .8rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
    .mon-card:hover { border-color: var(--marca); box-shadow: 0 4px 16px rgba(16,24,40,.09); transform: translateY(-1px); }
    .mon-card.off { background: var(--gris); }
    .mon-card.off .mon-name { color: var(--suave); }
    .mon-av { position: relative; flex-shrink: 0; }
    .mon-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--superficie); background: var(--suave); }
    .mon-card.off .mon-dot { border-color: var(--gris); }
    .mon-dot.on { background: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(34,197,94,.28); }
    .mon-dot.away { background: var(--amarillo); }
    .mon-card-body { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; min-width: 0; }
    .mon-name { font-weight: 700; font-size: .92rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mon-meta { font-size: .76rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mon-since { color: var(--verde); font-weight: 600; }

    .mon-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
    .mon-kpi { position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 1.05rem 1.15rem 1.1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
    .mon-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-accent, var(--marca)); }
    .mon-kpi .k-lab { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 700; display: flex; align-items: center; gap: .35rem; }
    .mon-kpi .k-val { font-size: 1.65rem; font-weight: 800; letter-spacing: -.5px; margin-top: .35rem; line-height: 1.1; }
    .mon-kpi .k-sub { font-size: .74rem; color: var(--suave); margin-top: .2rem; }

    .mon-actions { margin-left: auto; flex: 0 0 auto !important; min-width: 0 !important; }
    .mon-actions .mon-actions-row { display: flex; gap: .6rem; }
    .mon-actions .btn, .mon-actions .btn-sec { white-space: nowrap; padding: .7rem 1.05rem; }
    @media (max-width: 720px) { .mon-actions { width: 100%; margin-left: 0; } .mon-actions .mon-actions-row { flex-wrap: wrap; } .mon-actions .mon-actions-row > * { flex: 1; } }
    #mon-thead th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s, background .12s; }
    #mon-thead th[data-sort]:hover { color: var(--marca); background: var(--gris); }
    #mon-thead th.sorted { color: var(--marca); }
    .sort-ind { font-size: .7rem; color: var(--marca); }
    /* Tabla "Por trabajador": scroll interno con cabecera y 1ª columna fijas */
    .mon-tabla-panel { max-height: 72vh; overflow: auto; }
    .mon-tabla-panel #mon-thead th { position: sticky; top: 0; background: var(--superficie); z-index: 2; box-shadow: inset 0 -1px 0 var(--borde); }
    .mon-tabla-panel #mon-thead th:first-child { left: 0; z-index: 3; }
    .mon-tabla-panel #mon-tabla td:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
    .mon-tabla-panel tr:hover #mon-tabla td:first-child, .mon-tabla-panel #mon-tabla tr:hover td:first-child { background: var(--gris); }
    .mon-tabla-panel #mon-tabla tr:hover td { background: var(--gris); }
    /* En móvil: la tabla se convierte en tarjetas (una por trabajador) */
    @media (max-width: 640px) {
      .mon-tabla-panel { max-height: none; overflow: visible; }
      .mon-tabla-panel table, .mon-tabla-panel tbody, .mon-tabla-panel tr, .mon-tabla-panel td { display: block; width: auto; }
      .mon-tabla-panel thead { display: none; }
      .mon-tabla-panel tr { border: 1px solid var(--borde); border-radius: 11px; margin: .7rem; padding: .3rem 0; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
      .mon-tabla-panel td { position: static !important; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: none; padding: .3rem .9rem; font-size: .9rem; }
      .mon-tabla-panel td::before { content: attr(data-label); color: var(--suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; }
      .mon-tabla-panel td:first-child { justify-content: flex-start; border-bottom: 1px solid var(--borde); padding: .6rem .9rem; margin-bottom: .3rem; font-weight: 700; }
      .mon-tabla-panel td:first-child::before { content: ''; }
      .mon-tabla-panel td:last-child { justify-content: flex-end; padding-top: .5rem; }
      .mon-tabla-panel td:last-child::before { content: ''; }
      .mon-tabla-panel td.vacio-movil { display: none; }
    }

    /* ---------- TABLA USUARIOS ---------- */
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--borde); font-size: .9rem; }
    th { color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
    tbody tr { transition: background-color var(--ms-1) var(--ease); }
    tbody tr:hover { background: var(--acento); }
    tbody tr:last-child td { border-bottom: none; }
    .inactivo td { opacity: .5; }
    /* Tablas de registros con separación de columnas clara */
    table.tablareg th, table.tablareg td { border: 1px solid var(--borde); vertical-align: top; padding: .45rem .45rem; font-size: .84rem; }
    table.tablareg thead th { background: var(--gris); position: sticky; top: 0; z-index: 2; }
    .th-sort { cursor: pointer; white-space: nowrap; user-select: none; }
    .th-sort:hover { color: var(--marca); }
    table.tablareg .filtros-row th { background: var(--superficie); padding: .25rem .3rem; position: static; }
    .fcol { width: 100%; min-width: 64px; font-size: .76rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: .22rem .35rem; border: 1px solid var(--borde); border-radius: 6px; }

    .pill { display: inline-block; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; }
    .pill.on { background: var(--verde-bg); color: var(--verde); }
    .pill.off { background: var(--rojo-bg); color: var(--rojo); }

    /* ---------- MODAL ---------- */
    /* Fondo sólido, no desenfocado: desenfocar toda la ventana obliga al
       navegador a recomponer la pantalla entera en cada fotograma de la
       apertura, y en un equipo de oficina eso se nota. Un velo algo más denso
       separa el diálogo igual de bien y no cuesta nada. */
    .overlay {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(10, 18, 15, .58);
      align-items: center; justify-content: center; padding: 1rem;
    }
    .overlay.open { animation: fundido var(--ms-2) var(--ease); }
    .overlay.cerrando { animation: fundido var(--ms-2) var(--ease-sal) reverse; }
    .overlay.cerrando .modal { animation: modal-sale var(--ms-2) var(--ease-sal) forwards; }
    @keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
    @keyframes modal-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
    @keyframes modal-sale { to { opacity: 0; transform: translateY(6px) scale(.985); } }
    .overlay.open { display: flex; }
    .modal {
      background: var(--elevado); border: 1px solid var(--borde-suave);
      border-radius: var(--r-2xl); box-shadow: var(--sh-xl);
      padding: 1.6rem; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
      animation: modal-entra var(--ms-3) var(--ease);
    }
    /* El diálogo se desplaza arriba y abajo, nunca de lado. En el iPhone un
       campo de fecha u hora medía más que el hueco y dejaba arrastrar el
       formulario entero hacia los lados (28-09, «Nueva tarea»). */
    .modal { overflow-x: hidden; overscroll-behavior: contain; }
    .modal h3 { font-size: var(--txt-1); margin-bottom: 1.1rem; }
    .modal .checks { display: flex; flex-direction: column; gap: .4rem; max-height: 200px; overflow: auto; border: 1px solid var(--borde); border-radius: 9px; padding: .6rem; }
    .dep-quick { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
    .modal .checks label { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: 0; }
    .modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; }

    /* Estado vacío ("Empty" de coss-com-ui): un hueco sin explicación se lee
       como un error de carga. Figura, qué pasa, y qué hacer a continuación. */
    .empty { text-align: center; color: var(--suave); padding: 2.5rem 1rem; }
    .empty-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 3rem; height: 3rem; margin-bottom: .8rem;
      border-radius: var(--r-xl); background: var(--gris);
      border: 1px solid var(--borde-suave);
      color: var(--suave); font-size: 1.35rem;
    }
    .empty-tit { font-size: 1rem; font-weight: 700; color: var(--texto); margin-bottom: .25rem; }
    .empty-txt { font-size: .88rem; max-width: 34rem; margin: 0 auto; line-height: 1.55; }
    .empty-acc { margin-top: 1.1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
    .muted { color: var(--suave); font-size: .85rem; }

    /* Esqueleto de carga (shimmer) mientras llegan los datos de una vista. */
    .sk { background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-brillo) 45%, var(--sk-base) 65%); background-size: 200% 100%; animation: sk-shimmer 2s -1s linear infinite; border-radius: var(--r-md); }
    .sk-circ { border-radius: 50%; }
    @keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    @media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
    .sk-title { height: 1.5rem; width: 260px; max-width: 55%; margin-bottom: .55rem; }
    .sk-lead { height: .95rem; width: 380px; max-width: 80%; margin-bottom: 1.4rem; }
    .sk-line { height: .85rem; margin-bottom: .7rem; }
    .sk-line:last-child { margin-bottom: 0; }
    .sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* Atajo de teclado en el menú (Ctrl K / ⌘K) y fila "Mostrar más" de tablas paginadas. */
    .kbd { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--suave); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: var(--r-xs); padding: .08rem .35rem; background: var(--gris); white-space: nowrap; line-height: 1.5; }
    tr.fila-mas td { text-align: center; padding: .6rem !important; background: var(--gris); }

/* =========================================================================
   7. AVISOS FLOTANTES (toast)
   -------------------------------------------------------------------------
   Antes era un único recuadro: dos avisos seguidos y el primero se perdía sin
   llegar a leerse. Ahora es una pila —cada aviso espera su turno visible—,
   con color e icono según de qué hable y un botón para cerrarlo antes.
   ========================================================================= */
    #toast {
      position: fixed; z-index: 200;
      bottom: calc(1.2rem + var(--abajo-seguro)); left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column-reverse; align-items: center; gap: .5rem;
      width: min(26rem, calc(100vw - 2rem));
      pointer-events: none;
    }
    .toast {
      pointer-events: auto;
      display: flex; align-items: flex-start; gap: .6rem; width: 100%;
      background: var(--elevado); color: var(--texto);
      border: 1px solid var(--borde); border-left: 3px solid var(--suave);
      border-radius: var(--r-lg); box-shadow: var(--sh-lg);
      padding: .7rem .8rem; font-size: .9rem; line-height: 1.45;
      animation: toast-entra var(--ms-3) var(--ease);
    }
    .toast.saliendo { animation: toast-sale var(--ms-2) var(--ease-sal) forwards; }
    .toast .t-ico { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .08rem; }
    .toast .t-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .toast .t-cerrar {
      flex: none; border: none; background: none; color: var(--tenue);
      width: 1.5rem; height: 1.5rem; border-radius: var(--r-xs); padding: 0;
      font-size: 1rem; line-height: 1; cursor: pointer;
    }
    .toast .t-cerrar:hover { background: var(--acento); color: var(--texto); }
    .toast.ok    { border-left-color: var(--verde); }    .toast.ok .t-ico    { color: var(--verde); }
    .toast.error { border-left-color: var(--rojo); }     .toast.error .t-ico { color: var(--rojo); }
    .toast.aviso { border-left-color: var(--amarillo); } .toast.aviso .t-ico { color: var(--amarillo); }
    .toast.info  { border-left-color: var(--azul); }     .toast.info .t-ico  { color: var(--azul); }
    @keyframes toast-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes toast-sale { to { opacity: 0; transform: translateY(8px) scale(.97); } }

    /* ---------- NAVEGACIÓN MÓVIL: barra inferior + hoja "Más" ---------- */
    /* En pantalla estrecha el menú lateral desaparece. Lo frecuente (Mi día, Mensajes,
       Tareas, Agenda) vive en una barra inferior fija al alcance del pulgar; todo lo
       demás se abre en una hoja agrupada por departamentos desde "Más". */
    #tabbar { display: none; }
    #navsheet { position: fixed; inset: 0; background: rgba(15,23,32,.45); z-index: 90; display: none; }
    #navsheet.open { display: flex; align-items: flex-end; }
    #navsheet .sheet { background: var(--gris); width: 100%; max-height: 82vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: .5rem .9rem calc(1.1rem + var(--abajo-seguro)); animation: sheet-up .18s ease; }
    @keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
    #navsheet .sheet-handle { width: 42px; height: 4px; border-radius: 999px; background: var(--tenue); margin: .35rem auto .8rem; }
    #navsheet .sheet-sep { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--sobre-marca); background: var(--marca-solida); font-weight: 800; padding: .35rem .7rem; margin: .9rem 0 .5rem; border-radius: 6px; border-left: 4px solid var(--oro); }
    #navsheet .sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    #navsheet .sheet-grid a { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: .68rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .84rem; color: var(--texto); text-decoration: none; min-height: 44px; }
    #navsheet .sheet-grid a.active { border-color: var(--marca); background: var(--marca-claro); color: var(--marca); }
    #navsheet .sheet-grid a .badge { margin-left: auto; }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 820px) {
      .layout { flex-direction: column; }
      nav.side { display: none; }
      /* max(): con viewport-fit=cover el inset real del iPhone (~34px) manda; donde
         env() sea 0 (Android, escritorio) queda un colchón mínimo de .8rem para que
         las etiquetas nunca rocen el borde ni el indicador de inicio. */
      #tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: flex; background: var(--superficie); border-top: 1px solid var(--borde); padding: .35rem .4rem max(calc(.3rem + var(--abajo-seguro)), .8rem); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
      #tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .1rem .15rem; text-decoration: none; color: var(--suave); font-size: .6rem; font-weight: 700; letter-spacing: .2px; position: relative; -webkit-tap-highlight-color: transparent; }
      /* Activo: icono y texto en verde marca, con una píldora suave SOLO tras el icono
         (estilo Material 3). Nada de bloque de color sobre el elemento entero. */
      #tabbar a.active { color: var(--marca); }
      #tabbar .t-ico { display: flex; align-items: center; justify-content: center; width: 54px; height: 28px; border-radius: 999px; transition: background .15s ease; }
      #tabbar a.active .t-ico { background: var(--marca-claro); }
      #tabbar .t-ico svg { width: 21px; height: 21px; display: block; }
      #tabbar .badge { position: absolute; top: -2px; left: calc(50% + 7px); box-shadow: 0 0 0 2px var(--superficie); }
      main { padding: 1rem 1rem calc(86px + var(--abajo-seguro)); overflow-x: clip; }
      /* Tablas en móvil: la página es el ÚNICO scroll vertical. El tope de 72vh y la
         cabecera pegajosa son de escritorio; anidados en el scroll táctil de iOS la
         cabecera se queda clavada a mitad y pinta filas por encima. El panel solo
         desliza en horizontal, y la tabla se compacta para que quepan más columnas. */
      .panel:has(table.tablareg) { max-height: none; }
      table.tablareg thead th { position: static; }
      table.tablareg th, table.tablareg td { font-size: .78rem; padding: .35rem .4rem; }
      #toast { bottom: calc(86px + var(--abajo-seguro)); }
      .kanban { grid-template-columns: 1fr; }

      /* --- Tareas en móvil --- */
      /* Los filtros ocupaban la pantalla entera antes de ver una sola tarea:
         plegados tras el botón "Filtros" hasta que hagan falta. */
      .tareas-f-toggle { display: block; width: 100%; margin-bottom: .9rem; }
      .tareas-toolbar { display: none; }
      .tareas-toolbar.abierta { display: flex; }
      /* El arrastre no existe en pantalla táctil: la pista sobra y el estado se
         cambia con el selector de cada tarjeta. */
      .hint-arrastre { display: none; }
      /* Una columna cada vez, elegida con pestañas, en vez de tres tableros apilados. */
      .tabs-est { display: flex; gap: .35rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 11px; padding: .3rem; margin-bottom: .9rem; }
      .tabs-est button { flex: 1; border: none; background: none; border-radius: 8px; padding: .5rem .2rem; font-size: .78rem; font-weight: 700; color: var(--suave); display: flex; align-items: center; justify-content: center; gap: .35rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .tabs-est button.activa { background: var(--marca-solida); color: var(--sobre-marca); }
      .tabs-est button .n { background: rgba(15,23,32,.08); border-radius: 999px; padding: 0 .42rem; font-size: .7rem; }
      .tabs-est button.activa .n { background: rgba(255,255,255,.25); }
      .kanban[data-movil="pendiente"] .col:not([data-col="pendiente"]),
      .kanban[data-movil="en_curso"] .col:not([data-col="en_curso"]),
      .kanban[data-movil="completada"] .col:not([data-col="completada"]) { display: none; }
      /* La pestaña ya dice qué columna es y cuántas hay: la caja y su cabecera sobran. */
      .col { background: none; border: none; padding: 0; }
      .col-head { display: none; }
      .col-body { min-height: 0; }

      /* iOS amplía la página al enfocar cualquier control con letra menor de 16px
         y la deja ampliada (de ahí el "se mueve hacia los lados"). 16px en los
         controles lo corta de raíz en toda la app, login y modales incluidos.
         Las clases con letra propia van listadas: ganan al selector de elemento. */
      select, input, textarea, .inp, .estado-sel, .inline-sel, .inline-inp, .ext-sel, .fcol { font-size: 16px; }

      /* --- Escribir en el móvil ---
         Como en Mensajes del iPhone. app.js pone body.escribiendo al tocar un
         campo, body.teclado mientras el teclado está fuera, y --vv-alto y
         --vv-arriba con lo que se ve (iOS no encoge la ventana con el teclado,
         solo lo que se ve). */
      /* La barra inferior se va al tocar el campo y no flota sobre el teclado. */
      body.escribiendo #tabbar { display: none; }
      /* Los avisos, arriba: abajo los taparía el teclado. */
      body.teclado #toast { top: calc(var(--vv-arriba, 0px) + var(--alto-cabecera, 52px) + .5rem); bottom: auto; }
      /* Un diálogo cabe entero encima del teclado y se desplaza por dentro. */
      body.teclado .overlay { top: var(--vv-arriba, 0px); bottom: auto; height: var(--vv-alto, 100%); padding: .5rem; }
      body.teclado .modal { max-height: 100%; }
      /* iOS se queda a veces con una pantalla más baja que la de verdad (ver
         iosCorto() en app.js) y por debajo no pinta la página, solo su color de
         fondo. Mientras dure, ese color es el de la barra y lo pegado abajo
         pierde el margen de la raya de inicio, que ya cae en el hueco.
         ios-corto NO puede cambiar el alto de la página: en una pantalla de
         conversación la página no mide nada (la app va fija), y alargarla a
         100vh la hacía más alta que lo que iOS pinta; iOS se recolocaba, el
         hueco desaparecía, la clase se iba y vuelta a empezar: parpadeaba a
         cada fotograma. El gris de fondo de la conversación lo pone la propia
         app (#app, más abajo), no el cuerpo. */
      html.ios-corto { background: var(--superficie); --abajo-seguro: 0px; }
      /* Pantalla de conversación (un hilo de Mensajes, ESECE IA): la página no
         se desplaza (la app va fija y no deja nada debajo), la app ocupa la
         pantalla con la cabecera arriba, y dentro solo se desplaza la
         conversación. Con el teclado fuera, se ata a lo que se ve. */
      html.pantalla-conv, html.pantalla-conv body { overscroll-behavior: none; }
      html.pantalla-conv #app { position: fixed; left: 0; right: 0; top: 0; bottom: 0; min-height: 0; overflow: hidden; background: var(--fondo); }
      html.pantalla-conv body.teclado #app { top: var(--vv-arriba, 0px); bottom: auto; height: var(--vv-alto, 100%); }
      html.pantalla-conv .layout { position: absolute; left: 0; right: 0; top: var(--alto-cabecera, 52px); bottom: 0; min-height: 0; }
      html.pantalla-conv main { height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
    }

/* ---------- Consultor: conversación, no formulario ---------- */
/* Tres piezas apiladas a la altura de la ventana: cabecera fija, hilo que
   crece y se desplaza, y la caja de escribir abajo. Es la forma que la gente
   ya conoce; cualquier otra cosa aquí se lee como un panel de administración. */
.con-app {
  display: flex; flex-direction: column;
  height: calc(100vh - 132px); min-height: 420px;
}
.con-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding-bottom: .8rem; flex: 0 0 auto;
}
.con-head .title { margin: 0; }
.con-sub { margin: .15rem 0 0; font-size: .88rem; color: var(--suave); }
.con-head-btns { display: flex; gap: .4rem; flex-shrink: 0; }

.con-hilo {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: .5rem .25rem 1rem;
  scroll-behavior: smooth;
}

/* --- Estado inicial --- */
.con-vacio {
  margin: auto; max-width: 30rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.con-vacio-t { margin: .4rem 0 0; font-size: 1.15rem; font-weight: 600; }
.con-vacio-s { margin: 0; font-size: .9rem; color: var(--suave); line-height: 1.55; }
.con-ejemplos { display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; width: 100%; }
.con-ejemplo {
  border: 1px solid var(--borde); background: var(--superficie); border-radius: 10px;
  padding: .6rem .8rem; text-align: left; font: inherit; font-size: .88rem;
  color: var(--texto); cursor: pointer;
}
.con-ejemplo:hover { border-color: var(--marca); color: var(--marca); }

/* --- Mensajes --- */
.con-msg { display: flex; gap: .7rem; }
.con-msg-yo { justify-content: flex-end; }
.con-burbuja {
  background: var(--marca-solida); color: var(--sobre-marca);
  padding: .6rem .9rem; border-radius: 14px 14px 3px 14px;
  max-width: min(80%, 40rem); line-height: 1.5; white-space: pre-wrap;
  user-select: text;
}
.con-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--marca-solida); color: var(--sobre-marca);
  display: grid; place-content: center;
  font-weight: 700; font-size: .82rem;
}
.con-avatar-xl { width: 46px; height: 46px; font-size: 1.15rem; }
.con-cuerpo { min-width: 0; flex: 1 1 auto; max-width: 46rem; }
.con-resp { line-height: 1.65; user-select: text; }
.con-resp p { margin: 0 0 .7rem; }
.con-resp p:last-child { margin-bottom: 0; }
.con-resp.vacia { color: var(--suave); font-style: italic; }
.con-error { color: var(--rojo); }
.con-aviso { margin: .5rem 0 0; font-size: .82rem; color: var(--suave); }

/* Puntos de "está pensando". Sin esto, el hueco en blanco parece que se colgó. */
.con-pensando { display: flex; gap: .3rem; padding: .4rem 0; }
.con-pensando span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tenue);
  animation: conPulso 1.2s ease-in-out infinite;
}
.con-pensando span:nth-child(2) { animation-delay: .18s; }
.con-pensando span:nth-child(3) { animation-delay: .36s; }
@keyframes conPulso { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* --- Fuentes: plegadas, para que no tapen la respuesta --- */
.con-fuentes-det { margin-top: .7rem; font-size: .85rem; }
.con-fuentes-det > summary {
  cursor: pointer; color: var(--suave); list-style: none;
  display: inline-block; padding: .15rem .5rem;
  border: 1px solid var(--borde); border-radius: 999px;
}
.con-fuentes-det > summary::-webkit-details-marker { display: none; }
.con-fuentes-det[open] > summary { margin-bottom: .4rem; }
.con-fuente { display: flex; align-items: baseline; gap: .45rem; padding: .18rem 0; }
.con-fuente a { color: inherit; }

.cita {
  display: inline-block; min-width: 1.15em; padding: 0 .35em;
  border: 0; border-radius: 3px;
  background: var(--marca-solida); color: var(--sobre-marca);
  font-family: inherit; font-size: .74em; font-weight: 700; line-height: 1.5;
  vertical-align: .12em; cursor: pointer;
}
button.cita:hover { background: var(--marca-solida-hover); }
button.cita:focus-visible { outline: none; box-shadow: var(--ring-sombra); }

/* --- Caja de escribir --- */
.con-composer { flex: 0 0 auto; padding-top: .5rem; border-top: 1px solid var(--borde); }
.con-caja {
  display: flex; align-items: flex-end; gap: .5rem;
  border: 1px solid var(--borde); border-radius: 14px;
  padding: .5rem .5rem .5rem .85rem; background: var(--superficie);
}
.con-caja:focus-within { border-color: var(--ring); box-shadow: var(--ring-sombra); }
.con-caja textarea {
  flex: 1 1 auto; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; line-height: 1.5; max-height: 160px; padding: .25rem 0;
}
.con-enviar {
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--marca-solida); color: var(--sobre-marca); cursor: pointer;
  display: grid; place-content: center;
}
.con-enviar svg { width: 17px; height: 17px; }
.con-enviar:disabled { opacity: .4; cursor: default; }
.con-tools {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: .45rem; font-size: .82rem; color: var(--suave);
}
.con-tool { display: flex; align-items: center; gap: .35rem; }
.con-tool select { font-size: .82rem; padding: .1rem .3rem; }
.con-hint { margin-left: auto; }

/* Lector del documento fuente: texto extraído de un PDF, no maquetado. */
.con-doc {
  max-height: 55vh; overflow: auto;
  padding: .8rem; margin: .5rem 0;
  background: var(--gris); border: 1px solid var(--borde); border-radius: 6px;
  font-size: .85rem; line-height: 1.6; white-space: pre-wrap;
  user-select: text;
}

@media (max-width: 760px) {
  .con-app { height: calc(100vh - 190px); }
}
/* En pantalla de conversación, el consultor llena lo que queda sobre la barra
   inferior; con el teclado fuera la barra no está y la caja va pegada a él. */
@media (max-width: 820px) {
  html.pantalla-conv .con-app { flex: 1 1 auto; height: auto; min-height: 0; padding-bottom: calc(var(--alto-tabbar, 86px) + .5rem); }
  html.pantalla-conv body.teclado .con-app { padding-bottom: .5rem; }
  /* Con el teclado fuera, solo la conversación y la caja, como en el iPhone:
     la explicación, los botones de admin y la materia vuelven al cerrarlo. */
  body.teclado .con-sub, body.teclado .con-head-btns, body.teclado .con-tools { display: none; }
  .con-hilo { overscroll-behavior: contain; }
}
@media (max-width: 760px) {
  .con-head { flex-direction: column; gap: .5rem; }
  .con-burbuja { max-width: 90%; }
  .con-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .con-pensando span { animation: none; opacity: .6; }
  .con-hilo { scroll-behavior: auto; }
}

/* Firma del estudio. El nombre es lo que se lee; "Desarrollado por" es la
   letra pequeña que lo sostiene. Al pie del menú, presente sin pedir turno. */
nav.side a.firma-estudio, .firma-estudio {
  display: block; margin-top: 1.3rem; padding: .55rem .7rem .6rem;
  border-top: 1px solid var(--borde-suave);
  text-decoration: none;
}
.firma-estudio:hover { text-decoration: none; }
.firma-pre {
  display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue);
}
.firma-marca {
  display: block; margin-top: .12rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--suave);
}
.firma-estudio:hover .firma-marca { color: var(--oro); }

.con-firma { margin: .1rem 0 .35rem; font-size: .78rem; letter-spacing: .02em; }
.con-firma a {
  color: var(--marca); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(var(--marca-rgb), .35);
}
.con-firma a:hover { border-bottom-color: currentColor; }

/* Resultado del diagnóstico de modelos, dentro del panel de instrucciones. */
.ci-modelos:not(:empty) {
  margin-top: .8rem; padding: .6rem .75rem;
  background: var(--gris); border: 1px solid var(--borde); border-radius: 6px;
  font-size: .82rem; line-height: 1.55;
}
.ci-modelos p { margin: 0 0 .3rem; }
.ci-modelos p:last-child { margin-bottom: 0; }

/* =========================================================================
   8. PIEZAS NUEVAS
   -------------------------------------------------------------------------
   Componentes que reui.io y coss-com-ui dan por sentados y que aquí faltaban.
   Todos se apoyan en las fichas de la sección 1, así que heredan el modo
   oscuro y el anillo de foco sin tener que repetirlos.
   ========================================================================= */

/* --- Etiqueta de tono (badge) -------------------------------------------
   Una sola familia para lo que antes eran .tag, .pill, .est-tag, .tipo-tag y
   .chip-enc con sus propios hexadecimales repetidos. Las clases viejas siguen
   funcionando; lo nuevo debería usar .badge-tono.                          */
.badge-tono {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  padding: .12rem .55rem; border-radius: var(--r-full);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-tono.neutro   { background: var(--neutro-bg);   color: var(--neutro); }
.badge-tono.verde    { background: var(--verde-bg);    color: var(--verde); }
.badge-tono.rojo     { background: var(--rojo-bg);     color: var(--rojo); }
.badge-tono.ambar    { background: var(--amarillo-bg); color: var(--amarillo); }
.badge-tono.naranja  { background: var(--naranja-bg);  color: var(--naranja); }
.badge-tono.azul     { background: var(--azul-bg);     color: var(--azul); }
.badge-tono.morado   { background: var(--morado-bg);   color: var(--morado); }
.badge-tono.indigo   { background: var(--indigo-bg);   color: var(--indigo); }
.badge-tono.turquesa { background: var(--turquesa-bg); color: var(--turquesa); }
.badge-tono.marca    { background: var(--marca-claro); color: var(--marca); }
/* Variante de contorno, para cuando el relleno compite con la fila. */
.badge-tono.contorno { background: none; border-color: currentColor; }
/* Punto de color delante, para leer el estado sin leer el texto. */
.badge-tono.con-punto::before {
  content: ''; width: .45rem; height: .45rem; border-radius: 50%;
  background: currentColor; flex: none;
}

/* --- Aviso con icono (alert) --------------------------------------------
   El bloque de aviso de coss-com-ui: franja de color a la izquierda, icono,
   título y cuerpo. Se distingue de un párrafo cualquiera de un vistazo.    */
.destacado {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--borde); border-left: 3px solid var(--suave);
  border-radius: var(--r-lg); background: var(--superficie);
  font-size: .9rem; line-height: 1.5;
}
.destacado > svg, .destacado > .a-ico { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--suave); }
.destacado .a-tit { font-weight: 700; margin-bottom: .15rem; }
.destacado .a-cuerpo { color: var(--suave); }
.destacado.ok    { background: var(--verde-bg);    border-color: var(--verde-borde);    border-left-color: var(--verde); }
.destacado.error { background: var(--rojo-bg);     border-color: var(--rojo-borde);     border-left-color: var(--rojo); }
.destacado.aviso { background: var(--amarillo-bg); border-color: var(--amarillo-borde); border-left-color: var(--amarillo); }
.destacado.info  { background: var(--azul-bg);     border-color: var(--azul-borde);     border-left-color: var(--azul); }
.destacado.ok > svg, .destacado.ok > .a-ico       { color: var(--verde); }
.destacado.error > svg, .destacado.error > .a-ico { color: var(--rojo); }
.destacado.aviso > svg, .destacado.aviso > .a-ico { color: var(--amarillo); }
.destacado.info > svg, .destacado.info > .a-ico   { color: var(--azul); }
.destacado.ok .a-cuerpo, .destacado.error .a-cuerpo,
.destacado.aviso .a-cuerpo, .destacado.info .a-cuerpo { color: inherit; opacity: .85; }

/* --- Control segmentado --------------------------------------------------
   Forma única para las tres barras de dos o tres opciones que la app tenía
   cada una con su maquetación (.md-toggle, .rc-seg, .subv-tabs en móvil).  */
.seg {
  display: inline-flex; padding: .22rem; gap: .15rem;
  background: var(--gris); border: 1px solid var(--borde);
  border-radius: var(--r-lg);
}
.seg button {
  border: none; background: none; cursor: pointer;
  padding: .38rem .9rem; font-size: .84rem; font-weight: 600;
  color: var(--suave); border-radius: var(--r-md);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background-color var(--ms-1) var(--ease), color var(--ms-1) var(--ease);
}
.seg button:hover:not(.on) { color: var(--texto); background: var(--acento); }
.seg button.on { background: var(--superficie); color: var(--marca); box-shadow: var(--sh-xs); }
.seg.bloque { display: flex; width: 100%; }
.seg.bloque button { flex: 1; justify-content: center; }

/* --- Barra de progreso y medidor ----------------------------------------
   .barra es la versión con ficha de .bar; el medidor añade color por umbral
   (verde / ámbar / rojo) para que el número no haya que interpretarlo.     */
.barra { height: 8px; background: var(--gris); border-radius: var(--r-full); overflow: hidden; }
.barra > i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--marca); transition: width var(--ms-3) var(--ease);
}
.barra.ok > i    { background: var(--verde); }
.barra.aviso > i { background: var(--amarillo); }
.barra.peligro > i { background: var(--rojo); }
.barra.rayada > i {
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%);
  background-size: 12px 12px;
}

/* --- Separador con texto ------------------------------------------------- */
.sep-txt {
  display: flex; align-items: center; gap: .8rem;
  color: var(--tenue); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin: 1.2rem 0;
}
.sep-txt::before, .sep-txt::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* --- Rastro de migas (breadcrumb) ---------------------------------------- */
.migas { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .84rem; color: var(--suave); margin-bottom: .6rem; }
.migas a { color: var(--suave); text-decoration: none; border-radius: var(--r-xs); padding: .1rem .2rem; }
.migas a:hover { color: var(--marca); background: var(--acento); }
.migas li + li::before, .migas span + span::before { content: '/'; margin-right: .3rem; color: var(--tenue); }
.migas [aria-current="page"] { color: var(--texto); font-weight: 600; }

/* --- Pista emergente (tooltip) -------------------------------------------
   Solo CSS y sin marcado extra: cualquier elemento con data-pista la enseña
   al pasar por encima o al recibir el foco con el tabulador.               */
[data-pista] { position: relative; }
[data-pista]::after {
  content: attr(data-pista);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--texto); color: var(--fondo);
  padding: .3rem .55rem; border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 500; line-height: 1.35;
  white-space: nowrap; max-width: 18rem; text-transform: none; letter-spacing: 0;
  opacity: 0; pointer-events: none; z-index: 150;
  transition: opacity var(--ms-2) var(--ease), transform var(--ms-2) var(--ease);
}
[data-pista]:hover::after, [data-pista]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
/* En pantalla táctil no hay "pasar por encima": la pista nunca se cierra y
   tapa lo de al lado, así que se retira. */
@media (hover: none) { [data-pista]::after { display: none; } }

/* --- Avatar: estado y pila ------------------------------------------------ */
.avatar.lg { width: 46px; height: 46px; font-size: 1.05rem; }
.avatar.xl { width: 64px; height: 64px; font-size: 1.4rem; }
.av-estado { position: relative; display: inline-flex; flex: none; }
.av-estado > .punto {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--superficie); background: var(--tenue);
}
.av-estado > .punto.on { background: var(--verde-vivo); }
.av-estado > .punto.away { background: var(--amarillo); }

/* --- Cambio de tema, en la cabecera --------------------------------------- */
.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  background: rgba(255, 255, 255, .14); color: inherit;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-md);
  cursor: pointer; transition: background-color var(--ms-1) var(--ease);
}
.tema-btn:hover { background: rgba(255, 255, 255, .26); }
.tema-btn svg { width: 17px; height: 17px; }
/* Cada tema enseña el icono del otro: el botón dice adónde vas, no dónde estás. */
.tema-btn .ico-luna { display: none; }
html[data-tema="oscuro"] .tema-btn .ico-luna { display: block; }
html[data-tema="oscuro"] .tema-btn .ico-sol { display: none; }

/* --- Contenedor con desplazamiento suave ---------------------------------- */
.scroll-area { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; overscroll-behavior: contain; }
.scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--scroll-pulgar); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }

/* --- Utilidades de maquetación -------------------------------------------- */
.pila { display: flex; flex-direction: column; gap: .6rem; }
.fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.empujar { margin-left: auto; }

/* =========================================================================
   9. PANTALLA TÁCTIL
   -------------------------------------------------------------------------
   Varios botones de la app miden 24–28px. Con ratón se aciertan; con el dedo
   no, y en una bandeja de recados fallar el botón de "resuelto" significa
   abrir el recado entero. En vez de agrandarlos —lo que descuadraría las
   filas— se amplía solo la zona que responde al toque, con una capa invisible
   centrada en el botón. La apariencia no cambia; el objetivo sí.
   ========================================================================= */
@media (pointer: coarse) {
  .md-acc button, .rc-acc button, .icon-btn,
  .toast .t-cerrar, .inp-grupo > .ig-btn, .coment-del {
    position: relative;
  }
  .md-acc button::after, .rc-acc button::after, .icon-btn::after,
  .toast .t-cerrar::after, .inp-grupo > .ig-btn::after, .coment-del::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* Las filas de lista que se abren al tocarlas necesitan altura suficiente
     por sí mismas, no solo sus botones. */
  .md-row, .rc-row, .venc-item, .plazo-row { min-height: 48px; }
  nav.side a, #navsheet .sheet-grid a { min-height: 44px; }
  .combo-op, .atajo-plazo .btn-sec { min-height: 44px; justify-content: center; }
}

/* =========================================================================
   10. DETALLES DE INTERACCIÓN
   -------------------------------------------------------------------------
   Los remates de interfaces.rauno.me: cosas diminutas que no se ven en una
   captura pero que separan una interfaz que "funciona" de una que se siente
   terminada. Cada bloque dice qué se rompía sin él.
   ========================================================================= */

/* --- El hover solo existe donde hay un puntero que lo produce -------------
   En pantalla táctil el navegador deja :hover PEGADO tras el toque: tocas
   una fila de recados, se abre el detalle, y al volver la fila sigue
   resaltada como si el dedo siguiera encima. Con (hover: hover) el resaltado
   solo se aplica donde de verdad hay ratón.                                */
@media (hover: none) {
  .md-row:hover, .rc-row:hover, .venc-item:hover, .person:hover,
  .mon-card:hover, .item:hover, .task:hover, .subv-card:hover,
  tbody tr:hover, nav.side a:hover, .cal-task:hover, .miembro:hover {
    background: inherit;
    border-color: var(--borde);
    box-shadow: none;
    transform: none;
  }
  .person:hover, .mon-card:hover { border-color: var(--borde); }
}

/* --- Nada de resaltado azul del sistema al tocar -------------------------
   Estaba puesto solo en la barra inferior. En el resto de la app, cada toque
   dejaba un destello azul de Android encima de nuestros propios colores.   */
a, button, .md-row, .rc-row, .person, .mon-card, .cal-task,
.task, .miembro, .rdest, .venc-item, .subv-card {
  -webkit-tap-highlight-color: transparent;
}

/* --- Lo que se pulsa no se selecciona ------------------------------------
   Al pulsar dos veces seguidas sobre una fila o un botón, el navegador
   seleccionaba su texto y lo dejaba en azul. En un tablero que se usa a
   golpe de clic pasa constantemente.                                       */
button, .seg button, .md-row, .rc-row, .col-head, .tabs-est button,
.rdest, .miembro, .cal-task, .th-sort, .nav-sep, .cell-edit {
  -webkit-user-select: none; user-select: none;
}
/* El contenido sigue siendo seleccionable donde el usuario lo necesita:
   copiar un NIF de una tabla o el texto de un recado. */
td, .rc-exp, .item .cuerpo, .dt-v, .coment-text, .con-resp, .dt-coment {
  -webkit-user-select: text; user-select: text;
}

/* --- Lo decorativo no intercepta el ratón --------------------------------
   El halo de la pantalla de acceso cubre toda la ventana; sin esto se come
   los clics de la tarjeta que tiene debajo.                                */
#login::before, .sk, .empty-ico, .col-dot, .sem-dot, .md-dot, .rc-dot {
  pointer-events: none;
}

/* --- El peso de la letra no cambia al pasar por encima -------------------
   Pasar de 600 a 700 en hover reflowea la fila entera y el texto "salta".
   Si hace falta reforzar, se refuerza el color, no el grosor.              */
nav.side a, .seg button, .migas a, .md-row, .rc-row { font-synthesis-weight: none; }

/* --- Cambio de tema sin animación ----------------------------------------
   Con las transiciones activas, pasar a oscuro hacía que cada panel, borde
   y etiqueta virara a su ritmo: medio segundo de arcoíris desordenado.
   app.js pone .sin-transicion mientras cambia y la quita en el fotograma
   siguiente, así el tema salta de golpe y el resto de la app sigue animada. */
html.sin-transicion, html.sin-transicion *, html.sin-transicion *::before, html.sin-transicion *::after {
  transition: none !important;
  animation: none !important;
}

/* --- Un botón desactivado no lleva pista emergente -----------------------
   Prometía explicar algo y al pasar por encima no aparecía nada.           */
[data-pista]:disabled::after, [data-pista][aria-disabled="true"]::after { display: none; }

/* --- Rejilla tenue tras la pantalla de acceso (bg.ibelick.com) -----------
   Dos gradientes repetidos de 1px: da textura y sensación de producto sin
   pesar nada ni requerir una imagen.                                       */
#login::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--borde-suave) 1px, transparent 1px),
    linear-gradient(to bottom, var(--borde-suave) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* =========================================================================
   11. PLAYBOOK (ui-skills.com)
   ========================================================================= */

/* --- Iconos -------------------------------------------------------------
   Escalan con la letra y heredan su color, que es lo que un emoji no puede
   hacer. El grosor sigue su regla: 2px junto a texto semibold, 1,5px junto a
   texto normal; 1,9px es el punto medio con el que vive esta app.          */
.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.14em; }
.ico-sm { width: .95em; height: .95em; }
/* Los botones de icono pasan de contener un emoji de ancho variable a un
   trazo de tamaño fijo: se centran de verdad y quedan cuadrados. */
.icon-btn, .md-acc button, .rc-acc button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem;
}

/* --- Medida de lectura (60-75 caracteres) --------------------------------
   main es fluido a propósito, porque las tablas necesitan todo el ancho.
   Pero el texto corrido heredaba esa anchura: en un monitor de 27 pulgadas
   el cuerpo de un anuncio salía a más de 200 caracteres por línea y el ojo
   pierde el renglón al volver. El tope solo afecta a la prosa.            */
.item .cuerpo, .coment-text, .dt-coment, .rc-exp .msg-cuerpo,
p.lead, .md-vacio .txt, .det-info {
  max-width: 68ch;
}
/* Equilibra el corte de los titulares en vez de dejar una palabra huérfana
   en la última línea; text-pretty hace lo propio con la prosa. */
h1, h2, h3, h4, .title, .empty-tit, .a-tit { text-wrap: balance; }
p, .empty-txt, .field-hint, .lead { text-wrap: pretty; }

/* --- Radio anidado: interior = exterior − relleno ------------------------
   Una tarjeta de radio 14 dentro de un panel de radio 14 deja las esquinas
   descuadradas: el hueco entre ambas curvas no es constante. Con el relleno
   del panel (16px) descontado, las curvas quedan concéntricas.            */
.panel > .item, .panel > .task, .panel > .md-list, .panel > .rc-list,
.col > .task, .panel > table.tablareg { border-radius: var(--r-sm); }
.panel > .item:first-child, .panel > .task:first-child { margin-top: 0; }

/* --- El estado nunca depende solo del color ------------------------------
   El semáforo de plazos de Subvenciones era un punto de color y nada más.
   Quien no distingue rojo de verde —en torno al 8% de los hombres— no veía
   ninguna información. Ahora cada color lleva además una forma distinta.  */
.sem-dot {
  position: relative;
  display: inline-grid; place-content: center;
  color: var(--sobre-peligro); font-size: 8px; font-weight: 700; line-height: 1;
}
.sem-dot.verde::after  {
  content: ''; width: 7px; height: 7px; background: currentColor;
  -webkit-mask: var(--ico-hecho) center / contain no-repeat; mask: var(--ico-hecho) center / contain no-repeat;
}
.sem-dot.ambar::after, .sem-dot.rojo::after {
  content: ''; width: 7px; height: 7px; background: currentColor;
  -webkit-mask: var(--ico-exclama) center / contain no-repeat; mask: var(--ico-exclama) center / contain no-repeat;
}
.sem-dot.gris::after {
  content: ''; width: 5px; height: 5px; background: currentColor;
  -webkit-mask: var(--ico-punto) center / contain no-repeat; mask: var(--ico-punto) center / contain no-repeat;
}
.sem-dot.ambar, .sem-dot.verde { color: #fff; }

/* --- Fondo de los desplazables que continúan ------------------------------
   Una tabla que sigue a la derecha no lo anuncia de ninguna forma hasta que
   alguien la arrastra por casualidad. El desvanecido del borde lo dice.   */
.panel:has(table.tablareg) {
  --fade: 0px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
}
/* Apagado de fábrica y encendido por app.js solo mientras quede tabla a la
   derecha: así, si el guion fallara, la última columna se ve entera en vez de
   quedar difuminada para siempre. */

/* --- Hundimiento al pulsar con escala (regla 6) --------------------------
   Su recomendación es escala ~0.96 en vez del desplazamiento de 1px: se
   percibe igual de bien y no descuadra la fila de al lado.                */
.btn:active:not(:disabled), .btn-sec:active:not(:disabled),
.btn-peligro:active:not(:disabled), .btn-fantasma:active:not(:disabled) {
  transform: scale(.97);
}
.icon-btn:active, .md-acc button:active, .rc-acc button:active { transform: scale(.94); }

/* =========================================================================
   12. CONSULTOR: ACCIONES SOBRE LA RESPUESTA
   -------------------------------------------------------------------------
   Patrones que las librerías de interfaces de IA (beautifului.dev,
   ui.halaska.com, uimaxx.ing) dan por sentados en cualquier hilo: copiar lo
   que ha respondido, reintentar cuando falla, y poder parar de esperar.
   ========================================================================= */

.con-acciones { display: flex; gap: .35rem; margin-top: .6rem; }
.con-accion {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--borde); background: var(--superficie);
  border-radius: var(--r-sm); padding: .25rem .55rem;
  font-size: .78rem; color: var(--suave); cursor: pointer;
  transition: color var(--ms-1) var(--ease), border-color var(--ms-1) var(--ease),
              background-color var(--ms-1) var(--ease);
}
.con-accion:hover { color: var(--marca); border-color: var(--marca); }
.con-accion.hecho { color: var(--verde); border-color: var(--verde-borde); background: var(--verde-bg); }
/* Las acciones aparecen al acercarse a la respuesta, no compiten con ella
   mientras se lee. En táctil no hay "acercarse": ahí están siempre. */
@media (hover: hover) {
  .con-acciones { opacity: 0; transition: opacity var(--ms-2) var(--ease); }
  .con-msg-ia:hover .con-acciones,
  .con-msg-ia:focus-within .con-acciones { opacity: 1; }
}

.con-reintentar { margin-top: .6rem; }

/* Mientras se espera, el botón de enviar hace de freno. Antes, una consulta
   larga dejaba la pantalla bloqueada sin más salida que recargar la página. */
.con-composer.esperando .con-enviar { background: var(--peligro-solido); color: var(--sobre-peligro); }
.con-composer.esperando .con-enviar .ico-enviar { display: none; }
.con-composer.esperando .con-enviar .ico-detener { display: block; }
.con-enviar .ico-detener { display: none; }
.con-composer.esperando .con-caja { opacity: .6; }

/* =========================================================================
   LABORAL: ficha de empresas y campos comunes
   -------------------------------------------------------------------------
   El Nº de empresa va estrecho junto al nombre, también en el móvil: es un
   código corto y así se ven los dos de un vistazo.                         */
.row > .campo-num { flex: 0 0 7.5rem; min-width: 0; }
.row > .campo-nombre { flex: 1 1 8rem; min-width: 0; }

/* Responsable sin cuenta en el gestor (o una errata sin resolver). */
.sin-cuenta { color: var(--suave); }

/* Filtro activo por empresa: se quita con un toque. */
.chip-filtro {
  display: inline-flex; align-items: center; gap: .4rem; align-self: end;
  min-height: 2.6rem; padding: .35rem .8rem; border-radius: var(--r-full);
  border: 1px solid var(--marca); background: var(--marca-claro); color: var(--marca);
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.chip-filtro:hover { background: var(--acento-fuerte); }

/* Contrato y certificado: el modo y, si hace falta, la fecha debajo, que
   al lado no cabe entera. */
.campo-hecho { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.campo-hecho > .inp { margin-bottom: 0; }
.campo-hecho > .inp[hidden] { display: none; }

/* Casillas en línea con su título, a la altura de los campos de al lado. */
fieldset.campo-checks { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
fieldset.campo-checks > legend { float: left; width: 100%; font-size: .82rem; font-weight: 600; margin: 0 0 .35rem; padding: 0; }
fieldset.campo-checks > label { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; margin: 0; font-weight: 500; font-size: .92rem; }

/* Empresa de baja en la ficha: se ve, pero en segundo plano. */
tr.fila-baja td { color: var(--suave); }
tr.fila-baja a.lnk-detalle { color: var(--suave); }

/* Ficha de una empresa: lo que hay de ella en cada hoja. */
.ficha-sec { border-top: 1px solid var(--borde-suave); padding: .7rem 0 .2rem; }
.ficha-sec-tit { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; }
.ficha-sec-tit .btn-sm { margin-left: auto; }
.ficha-lista { list-style: none; margin: .45rem 0 0; padding: 0; font-size: .86rem; }
.ficha-lista li { padding: .25rem 0; border-bottom: 1px dashed var(--borde-suave); overflow-wrap: anywhere; }
.ficha-lista li:last-child { border-bottom: 0; }

.nom-avisos-tit .ico { color: currentColor; margin-right: .2rem; }

@media (pointer: coarse) {
  .chip-filtro { min-height: 44px; }
}
.ficha-dudoso { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ficha-dudoso .btn-sm { flex: none; }