/* ============================================================
   common.css — sistema visual de Fiscontable
   ------------------------------------------------------------
   Todo lo que pinta la BARRA SUPERIOR y el PANEL DE DESCARGAS
   está escrito en CSS plano, sin Tailwind, a propósito: así el
   marco de la aplicación se ve correcto desde el primer
   milisegundo, aunque Tailwind (que se compila en el navegador)
   todavía no haya terminado. Ese parpadeo era la causa número
   uno de que la página se sintiera improvisada.

   El contenido de cada módulo sí sigue usando Tailwind.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   TOKENS — la única fuente de colores, letra, espacios, radios y
   sombras. Ningún color hex fuera de aquí (ver /ui/).
   Los colores van como «R G B» para que Tailwind los use con
   transparencia: rgb(var(--g-900)) o bg-gris-900/50.
   Dos opciones para elegir (data-tema en <html>): A (por defecto)
   y B. Se prueban en /ui/.
   ============================================================ */
:root {
    /* Acento único (botones primarios, enlaces, foco). Opción A: verde Fiscontable */
    --ac-50: 236 247 242;  --ac-100: 211 238 226; --ac-200: 167 220 197; --ac-300: 111 195 160;
    --ac-400: 52 165 122;  --ac-500: 14 159 110;  --ac-600: 11 122 83;   --ac-700: 8 97 63;
    --ac-800: 6 74 49;     --ac-900: 5 58 39;

    /* Neutros grises (no azulados) */
    --g-0: 255 255 255;    --g-50: 250 250 249;   --g-100: 244 244 242;  --g-200: 232 231 228;
    --g-300: 215 213 209;  --g-400: 161 158 152;  --g-500: 119 115 108;  --g-600: 92 88 82;
    --g-700: 68 65 60;     --g-800: 44 42 39;     --g-900: 28 27 25;

    /* Estados (solo para estados, nunca para decorar) */
    --ok-600: 6 118 71;    --ok-50: 236 253 243;  --ok-200: 171 239 198;
    --av-600: 181 71 8;    --av-50: 255 250 235;  --av-200: 254 223 137;
    --er-600: 180 35 24;   --er-50: 254 243 242;  --er-200: 254 205 202;
    --in-600: 23 92 211;   --in-50: 239 248 255;  --in-200: 178 221 255;

    /* Letra */
    --fuente: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px;

    /* Espacios (múltiplos de 4), radios y sombras */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
    --r-control: 6px; --r-tarjeta: 8px; --r-modal: 12px;
    --sombra-1: 0 1px 2px rgb(var(--g-900) / .06);
    --sombra-2: 0 12px 32px -12px rgb(var(--g-900) / .28);

    /* Nombres que ya usa el resto del CSS: ahora salen de los tokens */
    --tinta:        rgb(var(--g-900));
    --tinta-suave:  rgb(var(--g-800));
    --papel:        rgb(var(--g-50));
    --linea:        rgb(var(--g-200));
    --texto:        rgb(var(--g-900));
    --texto-tenue:  rgb(var(--g-600));
    --marca:        rgb(var(--ac-500));      /* el verde del logo, solo para el logo */
    --acento:       rgb(var(--ac-600));
    --acento-suave: rgb(var(--ac-50));
    --radio:        var(--r-tarjeta);
    --radio-chico:  var(--r-control);
    --sombra-baja:  var(--sombra-1);
    --sombra-media: var(--sombra-1);
    --sombra-alta:  var(--sombra-2);

    --barra-alto:   60px;
    --lateral-ancho: 232px;
    --lateral-chico: 60px;
}

/* Opción B: verde bosque + IBM Plex */
:root[data-tema="b"] {
    --ac-50: 235 245 243;  --ac-100: 207 232 226; --ac-200: 160 209 198; --ac-300: 103 179 163;
    --ac-400: 47 143 125;  --ac-500: 26 122 105;  --ac-600: 17 105 90;   --ac-700: 11 82 70;
    --ac-800: 8 62 53;     --ac-900: 6 47 40;
    --fuente: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { background: var(--papel); }

body {
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

/* RFC, UUID y folios: monoespaciada. Importes: cifras tabulares */
code, kbd, .mono, .fc-mono { font-family: var(--fuente-mono); }
.cifra, .xml-num, td.num, .num { font-variant-numeric: tabular-nums; }

/* Los títulos de página llevan la voz de la marca. No se usa en
   etiquetas ni en texto corrido: solo donde hay jerarquía real. */
.display {
    font-family: var(--fuente);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Foco visible en todo. Antes no había ninguno. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */

.fc-barra {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--barra-alto);
    background: var(--tinta);
    color: rgb(var(--g-0));
    display: flex;
    align-items: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.fc-barra__interior {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* --- Marca + ruta de migas (esto reemplaza a los antiguos
       botones "Inicio", "Menú", "Volver" y "Clientes") --- */

.fc-marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgb(var(--g-0));
    text-decoration: none;
    flex: none;
}

.fc-marca__sello {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
}
.fc-marca__app { display: inline-block; margin-left: 5px; padding: 1px 6px 2px; border-radius: 999px; background: var(--marca);
    color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0; vertical-align: 2px; line-height: 1.3; }
/* El símbolo de la marca (assets/marca/simbolos.svg): sus colores salen de aquí según el fondo */
.fc-simbolo { display: block; width: 100%; height: 100%;
    --fc-hoja: rgb(var(--g-900)); --fc-letra: rgb(var(--g-0)); --fc-esquina: var(--marca); }
.fc-barra .fc-simbolo { --fc-hoja: rgb(var(--g-0)); --fc-letra: var(--tinta); }
:root[data-barra="clara"] .fc-barra .fc-simbolo { --fc-hoja: rgb(var(--g-900)); --fc-letra: rgb(var(--g-0)); }

.fc-marca__nombre {
    font-family: var(--fuente);
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: -0.02em;
}

.fc-migas {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 13.5px;
    flex: 1;
}

.fc-miga {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    padding: 4px 2px;
    transition: color .15s;
}
a.fc-miga:hover { color: rgb(var(--g-0)); }

.fc-miga__sep { display: inline-flex; color: rgba(255, 255, 255, .28); flex: none; }
.fc-miga__sep svg { width: 15px; height: 15px; }

.fc-miga > span:last-child { white-space: nowrap; }

.fc-miga--actual {
    color: rgb(var(--g-0));
    font-weight: 600;
    min-width: 0;
}
.fc-miga--actual > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En pantalla chica la ruta completa no cabe: el último tramo se queda
   como flecha de regresar y los intermedios se esconden. */
@media (max-width: 760px) {
    .fc-marca__nombre { display: none; }
    .fc-miga:not(.fc-miga--padre):not(.fc-miga--actual) { display: none; }
    .fc-miga--padre > span:last-child { display: none; }
    .fc-miga--padre {
        width: 38px; height: 38px;
        justify-content: center;
        padding: 0;
        margin-right: 2px;
    }
    .fc-miga--padre .fc-miga__sep { transform: rotate(180deg); color: rgba(255, 255, 255, .7); }
    .fc-miga--padre .fc-miga__sep svg { width: 19px; height: 19px; }
    .fc-miga--actual .fc-miga__sep { display: none; }
}

.fc-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    margin-left: auto;
}

.fc-accion {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--radio-chico);
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.fc-accion:hover { background: rgba(255, 255, 255, .09); color: rgb(var(--g-0)); }
.fc-accion svg { width: 17px; height: 17px; flex: none; }

.fc-accion__etiqueta { display: none; }
@media (min-width: 900px) { .fc-accion__etiqueta { display: inline; } }

/* Contador de procesos del botón de descargas.
   Cuando la palabra "Descargas" se ve, el número va DESPUÉS del texto,
   como una pastilla en línea. Sólo cuando el botón se queda en puro ícono
   (pantalla chica) el número se monta en la esquina, que es donde se
   entiende. Antes estaba siempre encimado y tapaba la última letra. */
.fc-contador {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgb(var(--ac-500));
    color: rgb(var(--g-0));
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex: none;
}
.fc-contador[hidden] { display: none; }

/* Sin etiqueta visible: insignia sobre el ícono. El aro del color de la
   barra lo separa del fondo. */
@media (max-width: 899px) {
    .fc-contador {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        line-height: 16px;
        padding: 0 4px;
        box-shadow: 0 0 0 2px var(--tinta);
    }
}

.fc-avatar {
    width: 27px;
    height: 27px;
    border-radius: 999px;
    background: var(--marca);
    color: rgb(var(--g-0));
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
}

/* --- Menú de perfil --- */

.fc-menu {
    position: absolute;
    top: calc(var(--barra-alto) - 6px);
    right: 20px;
    width: 286px;
    background: rgb(var(--g-0));
    color: var(--texto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    z-index: 60;
    overflow: hidden;
}
.fc-menu[hidden] { display: none; }

.fc-menu__cabeza { padding: 15px 16px; border-bottom: 1px solid var(--linea); }
.fc-menu__nombre { font-weight: 700; font-size: 14px; }
.fc-menu__dato { font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }

.fc-menu__fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 12.5px;
    color: var(--texto-tenue);
}
.fc-menu__valor { color: var(--texto); font-weight: 600; }
.fc-menu__creditos { text-decoration: none; color: inherit; }
.fc-menu__creditos:hover { background: var(--papel); }
.fc-menu__creditos u { color: var(--acento); }

.fc-menu__plan {
    text-transform: capitalize;
    background: var(--acento-suave);
    color: var(--acento);
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

.fc-menu__acciones { padding: 6px; border-top: 1px solid var(--linea); }

.fc-menu__boton {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radio-chico);
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--texto);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.fc-menu__boton:hover { background: var(--papel); }
.fc-menu__boton svg { width: 16px; height: 16px; color: var(--texto-tenue); }
.fc-menu__boton--salir:hover { background: rgb(var(--er-50)); color: rgb(var(--er-600)); }
.fc-menu__boton--salir:hover svg { color: rgb(var(--er-600)); }

/* ============================================================
   PANEL DESLIZABLE DE DESCARGAS
   ============================================================ */

.fc-velo {
    position: fixed;
    inset: 0;
    background: rgba(16, 27, 45, .42);
    backdrop-filter: blur(2px);
    z-index: 70;
    opacity: 0;
    transition: opacity .22s ease;
}
.fc-velo[hidden] { display: none; }
.fc-velo.abierto { opacity: 1; }

.fc-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(410px, 100vw);
    background: rgb(var(--g-0));
    z-index: 80;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-alta);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.fc-panel[hidden] { display: none; }
.fc-panel.abierto { transform: translateX(0); }

.fc-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--linea);
    flex: none;
}
.fc-panel__titulo { font-size: 15.5px; font-weight: 700; }
.fc-panel__sub { font-size: 12.5px; color: var(--texto-tenue); margin-top: 1px; }

.fc-panel__cerrar {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: none; color: var(--texto-tenue);
    cursor: pointer;
}
.fc-panel__cerrar:hover { background: var(--papel); color: var(--texto); }
.fc-panel__cerrar svg { width: 18px; height: 18px; }

.fc-panel__cuerpo { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }

.fc-panel__pie {
    flex: none;
    padding: 12px 18px;
    border-top: 1px solid var(--linea);
    background: var(--papel);
}

.fc-grupo { margin-bottom: 18px; }
.fc-grupo__titulo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-tenue);
    margin-bottom: 8px;
}

.fc-item {
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
    padding: 12px 13px;
    margin-bottom: 8px;
    background: rgb(var(--g-0));
    box-shadow: var(--sombra-baja);
}
.fc-item--alerta { border-color: rgb(var(--av-200)); background: rgb(var(--av-50)); }
.fc-item__titulo { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.fc-item__detalle { font-size: 12px; color: var(--texto-tenue); margin-top: 3px; }
.fc-item__acciones { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }

.fc-btn {
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: rgb(var(--g-0));
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fc-btn:hover { background: var(--papel); }
.fc-btn:disabled { opacity: .55; cursor: default; }
.fc-btn--principal {
    background: var(--acento);
    border-color: var(--acento);
    color: rgb(var(--g-0));
}
.fc-btn--principal:hover { filter: brightness(1.07); background: var(--acento); }
.fc-btn--discreto { border-color: transparent; color: var(--texto-tenue); }

.fc-vacio {
    text-align: center;
    padding: 42px 18px;
    color: var(--texto-tenue);
    font-size: 13.5px;
}

/* ============================================================
   PIEZAS COMPARTIDAS DE LOS MÓDULOS
   ============================================================ */

.card-elevated { box-shadow: var(--sombra-media); }

.fade-in { animation: fadeIn .28s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-active { display: flex !important; }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.campo-solo-lectura {
    background-color: rgb(var(--g-100)) !important;
    color: rgb(var(--g-600));
    cursor: not-allowed;
}

.progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgb(var(--g-200));
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--acento);
    transition: width .7s ease;
}

/* Esqueleto de carga: evita la pantalla en blanco de 2-3 s
   mientras el túnel responde. */
.fc-esqueleto {
    background: linear-gradient(90deg, rgb(var(--g-100)) 25%, rgb(var(--g-50)) 37%, rgb(var(--g-100)) 63%);
    background-size: 400% 100%;
    animation: brillo 1.3s ease infinite;
    border-radius: 8px;
}
@keyframes brillo {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* Cinta para los módulos que aún no se revisan */
.fc-cinta-pendiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--av-600));
    background: rgb(var(--av-50));
    border: 1px solid rgb(var(--av-200));
    border-radius: 999px;
    padding: 3px 11px;
}

/* Aviso ancho de sesión / servidor, compartido por todas las páginas */
.fc-aviso {
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 13px 16px;
    background: rgb(var(--av-50));
    border: 1px solid rgb(var(--av-200));
    border-radius: var(--radio-chico);
    color: rgb(var(--av-600));
    font-size: 13.5px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.fc-aviso[hidden] { display: none; }
.fc-aviso__acciones { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* Pantalla de bloqueo cuando el plan no incluye el módulo */
.fc-bloqueo {
    max-width: 460px;
    margin: 64px auto;
    text-align: center;
    padding: 34px 26px;
    background: rgb(var(--g-0));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-media);
}
.fc-bloqueo svg { width: 38px; height: 38px; color: rgb(var(--av-600)); margin: 0 auto 12px; display: block; }
.fc-bloqueo p { color: var(--texto-tenue); font-size: 14px; line-height: 1.55; }

/* Pie */
.fc-pie {
    margin-top: auto;
    background: var(--tinta);
    color: rgba(255, 255, 255, .45);
    text-align: center;
    font-size: 12px;
    padding: 20px;
}

body.fc-sin-scroll { overflow: hidden; }

/* ============================================================
   PASO "¿PARA QUIÉN?"  (assets/paso-cliente.js)
   ============================================================ */

.pc-marco {
    background: rgb(var(--g-0));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-baja);
    margin-bottom: 16px;
}

.pc-abierto { padding: 20px; }
.pc-abierto[hidden], .pc-cerrado[hidden] { display: none; }

.pc-titulo { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; }

.pc-campos { display: grid; gap: 12px; align-items: end; }
@media (min-width: 720px) {
    .pc-campos { grid-template-columns: 1fr auto 1fr; }
}

.pc-campo { display: block; }
.pc-etiqueta { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.pc-control {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
    background: rgb(var(--g-0));
    font: inherit;
    font-size: 14px;
    color: var(--texto);
}
.pc-control:disabled { background: rgb(var(--g-50)); color: var(--texto-tenue); }
.pc-rfc { font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase; }

.pc-o {
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-tenue); font-size: 13px;
    padding-bottom: 11px;
}
.pc-o span { padding: 0 4px; }
@media (max-width: 719px) {
    .pc-o { padding: 0; }
    .pc-o::before, .pc-o::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
}

.pc-pista { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 6px; min-height: 1em; }
.pc-pista--mal { color: rgb(var(--er-600)); }

.pc-cerrado {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 16px 14px 14px; flex-wrap: wrap;
}
.pc-quien { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pc-inicial {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--acento-suave); color: var(--acento);
    font-weight: 700; font-size: 14px;
    display: grid; place-items: center; flex: none;
}
.pc-nombre { display: block; font-size: 14.5px; font-weight: 600; }
.pc-rfc-chico { display: block; font-size: 12.5px; color: var(--texto-tenue); letter-spacing: .03em; }

.pc-derecha { display: flex; align-items: center; gap: 10px; }
.pc-sello {
    font-size: 12px; font-weight: 600;
    background: var(--acento-suave); color: var(--acento);
    padding: 3px 10px; border-radius: 999px;
}
.pc-cambiar {
    border: 1px solid var(--linea); background: rgb(var(--g-0));
    border-radius: 8px; padding: 6px 12px;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--texto-tenue); cursor: pointer;
}
.pc-cambiar:hover { color: var(--texto); background: var(--papel); }
.pc-registrar {
    border: 0; border-radius: 8px; padding: 6px 12px; background: var(--acento); color: rgb(var(--g-0));
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pc-registrar[hidden] { display: none; }
.pc-registrar:disabled { opacity: .6; }
.pc-solo-rfc { display: block; margin-top: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--acento); text-decoration: underline; cursor: pointer; text-align: left; }

/* Un paso que todavía no se puede usar se ve apagado, no desaparece:
   así se entiende que hay más adelante. */
.paso-dormido { opacity: .45; pointer-events: none; }

/* ============================================================
   PIEZAS DE FORMULARIO DE LOS MÓDULOS
   Antes cada módulo repetía estas clases de Tailwind a mano, con
   variaciones. Ahora se declaran una vez.
   ============================================================ */

.ficha {
    background: rgb(var(--g-0));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-baja);
    padding: 20px;
    margin-bottom: 16px;
}
.ficha[hidden] { display: none; }
.ficha__titulo { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.ficha__nota { font-size: 13px; color: var(--texto-tenue); line-height: 1.55; }
.ficha__titulo + .ficha__nota { margin-bottom: 14px; }

.dos { display: grid; gap: 12px; }
@media (min-width: 620px) { .dos { grid-template-columns: 1fr 1fr; } }

.campo { display: block; }
.campo[hidden] { display: none; }
.campo__etiqueta { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo__control {
    width: 100%; padding: 11px 12px;
    border: 1px solid var(--linea); border-radius: var(--radio-chico);
    font: inherit; font-size: 14px; background: rgb(var(--g-0)); color: var(--texto);
}
.campo__archivo {
    width: 100%; padding: 9px;
    border: 1px solid var(--linea); border-radius: var(--radio-chico);
    background: var(--papel); font: inherit; font-size: 12.5px;
}
.campo__archivo::file-selector-button {
    margin-right: 10px; border: 0; border-radius: 7px;
    padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 600;
    background: var(--acento-suave); color: var(--acento); cursor: pointer;
}

.ojo {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: grid; place-items: center;
    border: 0; background: none; color: var(--texto-tenue); cursor: pointer;
}
.ojo svg { width: 18px; height: 18px; }

.pc-pista--bien { color: rgb(var(--ok-600)); }

.marca { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.marca input { width: 16px; height: 16px; accent-color: var(--acento); }

.interruptor {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: 14px; padding: 13px;
    border: 1px solid var(--linea); border-radius: var(--radio-chico);
    background: var(--papel); cursor: pointer;
}
.interruptor input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--acento); flex: none; }
.interruptor strong { display: block; font-size: 13.5px; font-weight: 600; }
.interruptor span span { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }

.boton-principal {
    width: 100%; margin-top: 18px; padding: 13px;
    border: 0; border-radius: var(--radio-chico);
    background: var(--acento); color: rgb(var(--g-0));
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.boton-principal:hover { filter: brightness(1.07); }
.boton-principal:disabled { opacity: .6; cursor: default; filter: none; }

.boton-secundario {
    width: 100%; margin-top: 10px; padding: 13px;
    border: 1px solid var(--acento); border-radius: var(--radio-chico);
    background: rgb(var(--g-0)); color: var(--acento);
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.boton-secundario:hover { background: var(--acento-suave); }

.enlace-discreto {
    display: block; width: 100%; margin-top: 12px;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--texto-tenue);
    text-decoration: underline; text-underline-offset: 3px;
}
.enlace-discreto:hover { color: var(--texto); }

.botonera { margin-top: 4px; }
@media (min-width: 560px) {
    .botonera { display: flex; gap: 10px; }
    .botonera > * { flex: 1; margin-top: 18px; }
}

/* Botones en línea dentro de un aviso (lote cortado): del tamaño de su texto, no a todo lo ancho */
.botonera.botonera--chica { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.botonera.botonera--chica > * { flex: 0 1 auto; margin-top: 0; width: auto; padding: 8px 14px; font-size: 13px; }

/* Pestañas individual / masivo */
.pestanas { display: flex; border-bottom: 1px solid var(--linea); margin-bottom: 20px; gap: 4px; }
.pestana {
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 14.5px; font-weight: 600;
    color: var(--texto-tenue);
    padding: 11px 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestana:hover { color: var(--texto); }
.pestana--activa { color: var(--acento); border-bottom-color: var(--acento); }

/* Zona para soltar la carpeta del lote */
.dropzone {
    border: 2px dashed var(--linea);
    border-radius: var(--radio);
    padding: 34px 18px;
    text-align: center;
    cursor: pointer;
    background: rgb(var(--g-0));
    transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone--activa { border-color: var(--acento); background: var(--acento-suave); }
.dropzone svg { width: 38px; height: 38px; color: var(--texto-tenue); margin: 0 auto 10px; display: block; }
.dropzone__titulo { font-size: 14.5px; font-weight: 600; }
.dropzone__sub { font-size: 12.5px; color: var(--texto-tenue); margin-top: 4px; }

.sellos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.sello {
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    background: rgb(var(--g-200)); color: rgb(var(--g-600));
}
.sello--bien { background: rgb(var(--ok-50)); color: rgb(var(--ok-600)); }
.sello--info { background: rgb(var(--in-50)); color: rgb(var(--in-600)); }
.sello--mal  { background: rgb(var(--av-50)); color: rgb(var(--av-600)); }

.nota { border-radius: var(--radio-chico); padding: 13px; font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.nota--alerta { background: rgb(var(--av-50)); border: 1px solid rgb(var(--av-200)); color: rgb(var(--av-600)); }
.nota--info   { background: rgb(var(--in-50)); border: 1px solid rgb(var(--in-200)); color: rgb(var(--in-600)); }
.nota ul { margin-top: 6px; padding-left: 18px; list-style: disc; }

.opciones-lote { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opciones-lote label {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgb(var(--g-0)); border: 1px solid var(--linea); border-radius: 9px;
    padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.opciones-lote input { accent-color: var(--acento); }

.lista-errores { font-size: 12.5px; color: rgb(var(--er-600)); line-height: 1.6; padding-left: 18px; list-style: disc; }
.lista-errores .ok { color: rgb(var(--ok-600)); }

.fc-aviso--bien { background: rgb(var(--ok-50)); border-color: rgb(var(--ok-200)); color: rgb(var(--ok-600)); }

/* Atajos a las herramientas desde la ficha de cada cliente */
.atajos { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.atajos a {
    flex: 1 1 auto; text-align: center;
    background: var(--tono-suave); color: var(--tono);
    font-size: 12.5px; font-weight: 600;
    padding: 8px 10px; border-radius: 9px;
    text-decoration: none; white-space: nowrap;
}
.atajos a:hover { filter: brightness(.96); }

/* ============================================================
   AJUSTES DE TELÉFONO
   ============================================================ */

/* Carril para tablas anchas (Admin, Validador). Lo aplica
   app-header.js a cualquier <table> dentro de <main>. */
.fc-carril {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radio-chico);
}
.fc-carril > table { min-width: 640px; }

@media (max-width: 620px) {
    :root { --barra-alto: 56px; }

    .fc-barra__interior { padding: 0 12px; gap: 8px; }
    .fc-acciones { gap: 0; }
    .fc-accion { padding: 0 9px; }
    .fc-menu { right: 12px; left: 12px; width: auto; }

    /* El panel de descargas ocupa la pantalla completa, como una vista
       propia, en vez de un cajón angosto. */
    .fc-panel { width: 100vw; border-radius: 0; }

    .ficha { padding: 16px; }
    .pc-abierto { padding: 16px; }
    .fc-aviso { margin: 12px; }

    /* Botones de ancho completo: más fáciles de atinar con el pulgar. */
    .botonera { display: block; }
    .botonera > * { width: 100%; }
    .fc-btn { padding: 9px 14px; }
}

/* El teclado del teléfono hace zoom si la letra del campo baja de 16 px. */
@media (max-width: 620px) {
    .campo__control, .pc-control, input[type="text"], input[type="tel"],
    input[type="password"], input[type="number"], select, textarea {
        font-size: 16px;
    }
}

/* Punto de "esto terminó desde la última vez que miraste" */
.fc-punto {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--acento);
    margin-right: 7px;
    vertical-align: middle;
}

/* El botón de descargas se enciende mientras algo corre */
.fc-accion--activa { color: rgb(var(--g-0)); }

/* --- Selector general de empresa (barra) --- */
.fc-empresa { max-width: 260px; }
.fc-empresa__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.fc-empresa__flecha { font-size: 10px; opacity: .7; }
.fc-empresa--vacia .fc-empresa__nombre { color: rgb(var(--av-200)); }
.fc-empresas { width: 330px; }
.fc-empresas__cabeza { padding: 14px 14px 10px; border-bottom: 1px solid var(--linea); }
.fc-empresas__buscar { width: 100%; margin-top: 8px; box-sizing: border-box; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.fc-empresas__lista { max-height: min(55vh, 420px); overflow: auto; padding: 6px; }
.fc-empresas__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--texto); }
.fc-empresas__item:hover { background: rgb(var(--g-100)); }
.fc-empresas__fila { display: flex; align-items: center; gap: 2px; }
.fc-empresas__fila .fc-empresas__item { flex: 1; min-width: 0; }
.fc-empresas__editar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--texto-tenue); font-size: 15px; text-decoration: none; }
.fc-empresas__editar:hover { background: var(--acento-suave); color: var(--acento); }
.fc-empresas__item--activa { background: var(--acento-suave); }
.fc-empresas__inicial { width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--g-200)); color: rgb(var(--g-700)); font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.fc-empresas__item--activa .fc-empresas__inicial { background: var(--acento); color: rgb(var(--g-0)); }
.fc-empresas__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fc-empresas__texto strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-empresas__texto small { font-size: 11.5px; color: var(--texto-tenue); font-family: var(--fuente-mono); }
.fc-empresas__check { color: var(--acento); font-weight: 900; }
.fc-empresas__nada { padding: 14px; font-size: 13px; color: var(--texto-tenue); }
.fc-empresas__nada a { color: var(--acento); font-weight: 700; }
.fc-empresas__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--linea); font-size: 12.5px; }
.fc-empresas__ninguna { border: 0; background: none; color: var(--texto-tenue); font-weight: 600; cursor: pointer; text-decoration: underline; }
.fc-empresas__nueva { color: var(--acento); font-weight: 700; margin-left: auto; }
@media (max-width: 700px) { .fc-empresas { width: auto; } }

/* Con el selector de empresa la barra tiene menos espacio: cada tramo de la
   ruta se recorta con "…" en lugar de encimarse, y en pantallas medianas
   solo quedan el tramo anterior y el actual. */
.fc-miga > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fc-miga:not(.fc-miga--actual) { flex-shrink: 1; }
@media (max-width: 1520px) {
    .fc-migas .fc-miga:not(.fc-miga--padre):not(.fc-miga--actual) { display: none; }
}

/* ============================================================
   SELECTOR DE PERIODO (componente compartido)
   ------------------------------------------------------------
   Lo usa el selector general de la barra y cualquier módulo vía
   Fiscontable.selectorPeriodo(). Flota con position: fixed para
   que ningún contenedor con overflow lo recorte.
   ============================================================ */
.fc-periodo {
    position: fixed; z-index: 70; width: 300px;
    background: rgb(var(--g-0)); color: var(--texto);
    border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra-alta); padding: 12px;
}
.fc-periodo[hidden] { display: none; }
.fc-periodo__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fc-periodo__cabeza strong { font-family: var(--fuente); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.fc-periodo__flecha { width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 9px; background: rgb(var(--g-0)); font-size: 18px; line-height: 1; color: var(--texto); cursor: pointer; }
.fc-periodo__flecha:hover { background: rgb(var(--g-100)); }
.fc-periodo__meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fc-periodo__mes {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 46px; border: 1px solid transparent; border-radius: 10px; background: rgb(var(--g-50));
    font: inherit; font-size: 13.5px; font-weight: 700; color: var(--texto); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.fc-periodo__mes small { font-size: 10.5px; font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }
.fc-periodo__mes:hover { border-color: var(--acento); background: rgb(var(--g-0)); }
.fc-periodo__mes--vacio { color: rgb(var(--g-300)); background: rgb(var(--g-0)); border-color: rgb(var(--g-100)); }
.fc-periodo__mes--activo, .fc-periodo__mes--activo:hover { background: var(--acento); border-color: var(--acento); color: rgb(var(--g-0)); }
.fc-periodo__mes--activo small { color: rgba(255, 255, 255, .85); }
.fc-periodo__pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.fc-periodo__opcion { flex: 1 1 auto; border: 1px solid var(--linea); border-radius: 9px; background: rgb(var(--g-0)); padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--texto); cursor: pointer; }
.fc-periodo__opcion small { color: var(--texto-tenue); font-weight: 600; margin-left: 3px; }
.fc-periodo__opcion:hover { border-color: var(--acento); }
.fc-periodo__opcion--activa { background: var(--acento-suave); border-color: var(--acento); }
.fc-periodo__general, .fc-periodo__quitar { width: 100%; border: 0; background: none; padding: 6px 2px 0; text-align: left; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fc-periodo__general { color: var(--acento); }
.fc-periodo__quitar { color: var(--texto-tenue); text-decoration: underline; }
.fc-periodo__rango { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--linea); }
.fc-periodo__rango > span { width: 100%; font-size: 12px; font-weight: 800; color: var(--texto-tenue); }
.fc-periodo__rango--activo > span { color: var(--acento); }
.fc-periodo__rango label { flex: 1 1 110px; display: flex; flex-direction: column; gap: 2px; }
.fc-periodo__rango small { font-size: 11px; color: var(--texto-tenue); font-weight: 700; }
.fc-periodo__rango input { box-sizing: border-box; width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 7px; font: inherit; font-size: 12.5px; }
.fc-periodo__aplicar { flex: 1 1 100%; border: 0; border-radius: 8px; background: var(--acento); color: rgb(var(--g-0)); padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
@media (max-width: 620px) { .fc-periodo { left: 12px !important; right: 12px; width: auto; } }

/* ===== Columna de acciones (como Mi Admin), la misma en todos los módulos:
   a la derecha en pantalla grande, arriba en celular ===== */
.mod-layout:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; }
.mod-layout__principal { min-width: 0; grid-column: 1; grid-row: 1; }
.mod-acciones { grid-column: 2; grid-row: 1; position: sticky; top: 12px; background: rgb(var(--g-0)); border: 1px solid rgb(var(--g-200)); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.mod-acciones__grupo { font-size: 10.5px; font-weight: 800; color: rgb(var(--ac-600)); text-transform: uppercase; letter-spacing: .05em; margin: 6px 4px 2px; }
.mod-acciones__grupo:first-child { margin-top: 0; }
.mod-accion { font-family: inherit; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-size: 13px; font-weight: 600; color: rgb(var(--g-900)); background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; }
.mod-accion b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--g-100)); color: rgb(var(--ac-600)); font-size: 12px; }
.mod-accion:hover:not(:disabled) { background: rgb(var(--g-50)); border-color: rgb(var(--g-200)); }
.mod-accion:disabled { opacity: .55; cursor: default; }
.mod-acciones__nota { font-size: 11px; color: rgb(var(--g-600)); margin: 6px 4px 0; line-height: 1.35; }
@media (max-width: 1000px) {
  .mod-layout:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .mod-acciones { grid-column: 1; grid-row: 1; position: static; flex-direction: row; flex-wrap: wrap; }
  .mod-layout__principal { grid-row: 2; }
  .mod-acciones__grupo { display: none; }
  .mod-accion { width: auto; }
  .mod-acciones__nota { width: 100%; }
}

a.mod-accion { text-decoration: none; }
.mod-accion--primaria b { background: var(--acento, rgb(var(--ac-600))); color: rgb(var(--g-0)); }
/* Acción principal pasada a la barra (ui-btn--primario): el hover de .mod-accion no le quita el fondo verde */
.mod-accion.ui-btn--primario, .mod-accion.ui-btn--primario:hover:not(:disabled) { background: rgb(var(--ac-600)); border-color: rgb(var(--ac-600)); color: rgb(var(--g-0)); }
.mod-accion.ui-btn--primario:hover:not(:disabled) { background: rgb(var(--ac-700)); border-color: rgb(var(--ac-700)); }

/* ===== Página de módulo: el mismo encabezado en todas las herramientas ===== */
.mod-pagina { width: 100%; max-width: 1440px; margin: 0 auto; padding: 14px 20px 32px; }
.mod-pagina--form { max-width: 1020px; }
.mod-pagina [hidden] { display: none !important; }
.mod-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mod-cabeza h1 { font-size: 21px; font-weight: 800; color: rgb(var(--g-900)); letter-spacing: -.01em; }
.mod-cabeza__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 640px) { .mod-pagina { padding: 12px 16px 28px; } }
.mod-pagina--angosta { max-width: 800px; }

/* Selector "Por empresa | Masivo": siempre junto al título, a la izquierda (ISN, Constancias, Opinión…) */
.fc-titulo { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.fc-vista { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgb(var(--g-200)); }
.fc-vista button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; color: rgb(var(--g-600)); cursor: pointer; white-space: nowrap; }
.fc-vista button:hover { color: rgb(var(--g-900)); }
.fc-vista button[aria-selected="true"] { background: rgb(var(--g-0)); color: rgb(var(--g-900)); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }

/* "¿Cómo se usa?" junto al nombre de la herramienta (barra): solo el círculo, para no apretar la ruta */
.fc-ayuda { flex: none; margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.fc-ayuda__icono { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16); color: rgb(var(--g-200));
    display: grid; place-items: center; font-size: 12.5px; font-weight: 800; }
.fc-ayuda:hover .fc-ayuda__icono { background: rgba(255,255,255,.3); color: rgb(var(--g-0)); }
.fc-ayuda__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fc-ayuda-modal { position: fixed; inset: 0; z-index: 90; background: rgba(16,27,45,.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
.fc-ayuda-modal[hidden] { display: none; }
.fc-ayuda-modal__caja { background: rgb(var(--g-0)); border-radius: 20px; max-width: var(--modal-mediana); width: 100%; max-height: calc(100vh - 48px); overflow: auto; padding: var(--modal-pad); box-shadow: var(--sombra-alta); }
.fc-ayuda-modal__caja h2 { font-size: 17px; font-weight: 800; color: rgb(var(--g-900)); margin-bottom: 12px; }
.fc-ayuda-modal__caja ol { padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: rgb(var(--g-700)); list-style: decimal; }
.fc-ayuda-modal__cerrar { margin-top: 18px; border: 0; border-radius: 10px; background: rgb(var(--g-900)); color: rgb(var(--g-0)); font: inherit; font-weight: 700; padding: 9px 18px; cursor: pointer; }

/* ============================================================
   BOTÓN «MÓDULOS» Y SU MENÚ (Ctrl+K) — saltar a cualquier herramienta
   ============================================================ */
.fc-modulos-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.fc-modulos-btn:hover, .fc-modulos-btn[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: rgb(var(--g-0)); }
.fc-modulos-btn svg { width: 16px; height: 16px; }
.fc-casa { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); transition: background .15s, border-color .15s; }
.fc-casa:hover, .fc-casa:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: rgb(var(--g-0)); }
.fc-casa[aria-current="page"] { background: rgba(255,255,255,.16); color: rgb(var(--g-0)); }
.fc-casa svg { width: 17px; height: 17px; }
.fc-modulos { width: min(760px, calc(100vw - 24px)); right: auto; padding: 0; max-height: min(78vh, 720px); display: flex; flex-direction: column; }
.fc-modulos[hidden] { display: none; }
.fc-modulos__buscar { margin: 12px 12px 4px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; font-size: 14px; outline: none; }
.fc-modulos__buscar:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.fc-modulos__cuerpo { overflow-y: auto; padding: 4px 12px 14px; }
.fc-modulos__grupo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); margin: 12px 4px 6px; }
.fc-modulos__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.fc-modulos__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; outline: none; }
.fc-modulos__item:hover, .fc-modulos__item:focus { background: var(--tono-suave); }
.fc-modulos__item--actual { box-shadow: inset 0 0 0 1.5px var(--tono); }
.fc-modulos__item--vedado { opacity: .45; cursor: not-allowed; }
.fc-modulos__icono { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--tono-suave); color: var(--tono); }
.fc-modulos__icono svg { width: 18px; height: 18px; }
.fc-modulos__texto { display: flex; flex-direction: column; min-width: 0; }
.fc-modulos__texto strong { font-size: 13.5px; font-weight: 700; color: rgb(var(--g-900)); line-height: 1.25; }
.fc-modulos__texto small { font-size: 11.5px; color: var(--texto-tenue); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La ruta: el nombre del módulo completo (antes salía «Administración d…»). Lo que sobra se encoge
   del lado derecho: en pantallas medianas las acciones quedan solo con su ícono. */
.fc-miga--solo-movil { display: none; }
.fc-miga--actual { flex: 0 1 auto; }
.fc-miga--actual > span:last-child { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) {
    #fc-btn-descargas .fc-accion__etiqueta, #fc-enlace-admin .fc-accion__etiqueta, #fc-nombre-corto { display: none; }
    .fc-empresa__nombre { max-width: 150px; }
}
@media (max-width: 1060px) {
    .fc-modulos-btn__texto { display: none; }
    .fc-modulos-btn { padding: 0 9px; }
    .fc-empresa__nombre { max-width: 110px; }
}
@media (max-width: 760px) {
    .fc-miga--solo-movil.fc-miga--padre { display: inline-flex; }
    /* En el teléfono el nombre del módulo ya está en el título de la página: la barra deja solo regresar y acciones */
    .fc-miga--actual { display: none; }
    .fc-empresa__flecha { display: none; }
    .fc-modulos { left: 12px !important; }
}

/* [hidden] siempre gana (antes una clase como "block" o "flex" de Tailwind lo dejaba visible) */
[hidden] { display: none !important; }
.pc-alta { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--linea); grid-template-columns: 1fr; }
@media (min-width: 700px) { .pc-alta { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.pc-alta__botones { display: flex; gap: 8px; }
.pc-alta .pc-pista { grid-column: 1 / -1; margin: 0; }

/* Pestañas que no caben (teléfono): se deslizan de lado en vez de salirse de la pantalla */
.pestanas { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; white-space: nowrap; }

/* ---------- Configuración en ventana lateral (sobre cualquier módulo) ---------- */
.fc-config { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: 100vh; width: min(980px, 100vw); border: 0; padding: 0;
             background: var(--papel); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; }
.fc-config:not([open]) { display: none; }
.fc-config::backdrop { background: rgba(16, 27, 45, .42); backdrop-filter: blur(2px); }
.fc-config[open] { animation: fc-config-entra .18s ease-out; }
@keyframes fc-config-entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.fc-config__barra { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tinta); color: rgb(var(--g-0)); }
.fc-config__titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-right: auto; }
.fc-config__titulo svg { width: 18px; height: 18px; }
.fc-config__todo { color: rgb(var(--g-300)); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.fc-config__todo:hover { color: rgb(var(--g-0)); text-decoration: underline; }
.fc-config__cerrar { border: 0; background: rgba(255, 255, 255, .1); color: rgb(var(--g-0)); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 15px; }
.fc-config__cerrar:hover { background: rgba(255, 255, 255, .2); }
.fc-config__marco { flex: 1; width: 100%; border: 0; background: var(--papel); }
.fc-incrustado .fc-barra, .fc-incrustado .fc-aviso-global { display: none !important; }
.fc-incrustado body { background: var(--papel); }
/* Página abierta dentro de la Configuración general: sin título repetido y aprovechando todo el ancho */
.fc-dentro .fc-solo-pagina { display: none !important; }
.fc-dentro .fc-principal { max-width: none !important; padding: 14px 18px !important; }

/* ---------- Visor de PDF ---------- */
.fc-pdf { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border: 0; padding: 0;
          background: rgba(16, 27, 45, .55); display: flex; flex-direction: column; }
.fc-pdf:not([open]) { display: none; }
.fc-pdf::backdrop { background: transparent; }
.fc-pdf__barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--tinta); color: rgb(var(--g-200)); flex-wrap: wrap; }
.fc-pdf__titulo { font-weight: 700; font-size: 14px; color: rgb(var(--g-0)); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.fc-pdf__paginas { font-size: 12.5px; color: rgb(var(--g-500)); }
.fc-pdf__zoom { display: flex; background: rgba(255, 255, 255, .08); border-radius: 9px; }
.fc-pdf__zoom button { border: 0; background: none; color: rgb(var(--g-200)); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 10px; cursor: pointer; }
.fc-pdf__zoom button:hover { background: rgba(255, 255, 255, .12); border-radius: 9px; }
.fc-pdf__accion { border: 0; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: rgba(255, 255, 255, .1); color: rgb(var(--g-0)); }
.fc-pdf__accion--principal { background: var(--marca); }
.fc-pdf__cerrar { border: 0; background: rgba(255, 255, 255, .1); color: rgb(var(--g-0)); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; }
.fc-pdf__cuerpo { flex: 1; overflow: auto; padding: 18px 12px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fc-pdf__pagina { background: rgb(var(--g-0)); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); border-radius: 4px; max-width: none; }
.fc-pdf__pagina { position: relative; flex: none; overflow: hidden; }
.fc-pdf__pagina canvas { display: block; }
/* Capa de texto de PDF.js (texto transparente encima de la imagen, para seleccionar y copiar) */
.fc-pdf__pagina .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none;
                             forced-color-adjust: none; transform-origin: 0 0; z-index: 1; }
.fc-pdf__pagina .textLayer span, .fc-pdf__pagina .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.fc-pdf__pagina .textLayer ::selection { background: rgba(79, 70, 229, .3); color: transparent; }
.fc-pdf__pagina .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; }
.fc-pdf__cargando { color: rgb(var(--g-200)); font-size: 14px; padding: 30px; text-align: center; }
.fc-pdf__hoja { background: rgb(var(--g-200)); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; overflow: auto; }
.fc-pdf__hoja .fc-pdf__cargando { color: rgb(var(--g-600)); }
.fc-pdf__hoja .fc-pdf__pagina { box-shadow: 0 2px 10px rgba(15, 23, 42, .15); }
@media (max-width: 640px) { .fc-pdf__titulo { max-width: 100%; flex-basis: 100%; } .fc-pdf__barra { gap: 6px; } }

/* ======================================================================
   Ventanas emergentes (estándar de todo Fiscontable)
   Tres tamaños fijos: chica 520 (confirmar, preguntas cortas), mediana 760 (formularios y fichas con pestañas),
   grande 1080 (tablas e importaciones). Márgenes de 28 px, 18 px entre bloques. En el celular ocupan toda la pantalla.
   ====================================================================== */
:root { --modal-chica: 520px; --modal-mediana: 760px; --modal-grande: 1080px; --modal-pad: 28px; --modal-alto: min(720px, calc(100vh - 48px)); }
dialog.fc-modal { width: min(var(--modal-mediana), calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 20px; padding: 0;
                  box-shadow: var(--sombra-alta); color: var(--texto); background: rgb(var(--g-0)); overflow: hidden; }
dialog.fc-modal[open] { display: flex; flex-direction: column; }
dialog.fc-modal::backdrop { background: rgba(16, 27, 45, .5); backdrop-filter: blur(2px); }
.fc-modal--chica { width: min(var(--modal-chica), calc(100vw - 32px)) !important; }
.fc-modal--grande { width: min(var(--modal-grande), calc(100vw - 32px)) !important; }
.fc-modal--fija { height: var(--modal-alto); }
.fc-modal__cabeza { display: flex; align-items: flex-start; gap: 14px; padding: 24px var(--modal-pad) 18px; border-bottom: 1px solid var(--linea); flex: none; }
.fc-modal__cabeza > div { flex: 1; min-width: 0; }
.fc-modal__cabeza h2 { font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--texto); }
.fc-modal__cabeza p { font-size: 13.5px; color: var(--texto-tenue); margin-top: 4px; line-height: 1.45; }
.fc-modal__cerrar { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--texto-tenue); font-size: 20px; cursor: pointer; }
.fc-modal__cerrar:hover { background: var(--papel); color: rgb(var(--er-600)); }
.fc-modal__cuerpo { padding: 24px var(--modal-pad); overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.fc-modal__pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 16px var(--modal-pad) 22px; border-top: 1px solid var(--linea); flex: none; background: rgb(var(--g-0)); }
.fc-modal__pie .fc-btn { padding: 10px 18px; font-size: 14px; border-radius: 10px; }
.fc-modal__pie > :first-child:not(.fc-btn) { margin-right: auto; }
.fc-modal [hidden] { display: none !important; }
@media (max-width: 640px) {
    :root { --modal-pad: 18px; }
    dialog.fc-modal, .fc-modal--chica, .fc-modal--grande { width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}

/* ---------- importar clientes desde XML (componente común) ---------- */
.fc-ic-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fc-ic-fuente { display: flex; gap: 12px; align-items: center; text-align: left; border: 1.5px dashed rgb(var(--g-300)); border-radius: 14px; padding: 16px; background: rgb(var(--g-0)); cursor: pointer; font: inherit; color: var(--texto); }
.fc-ic-fuente:hover { border-color: var(--acento); background: var(--acento-suave); }
.fc-ic-fuente b { display: block; font-size: 14px; }
.fc-ic-fuente small { display: block; font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }
.fc-ic-fuente span:first-child { font-size: 22px; flex: none; }
.fc-ic-resumen { font-size: 13.5px; color: var(--texto); background: var(--papel); border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
.fc-ic-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fc-ic-barra input[type=search] { flex: 1 1 220px; font: inherit; font-size: 14px; border: 1px solid rgb(var(--g-300)); border-radius: 10px; padding: 10px 12px; }
.fc-ic-filtro { border: 1px solid var(--linea); background: rgb(var(--g-0)); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--texto-tenue); cursor: pointer; }
.fc-ic-filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: rgb(var(--g-0)); }
.fc-ic-tabla-caja { border: 1px solid var(--linea); border-radius: 14px; overflow: auto; }
.fc-ic-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fc-ic-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-tenue); background: var(--papel); padding: 10px 12px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.fc-ic-tabla td { padding: 10px 12px; border-top: 1px solid rgb(var(--g-100)); vertical-align: middle; }
.fc-ic-tabla input:not([type=checkbox]), .fc-ic-tabla select { width: 100%; font: inherit; font-size: 13px; border: 1px solid rgb(var(--g-200)); border-radius: 8px; padding: 7px 9px; background: rgb(var(--g-0)); }
.fc-ic-tabla td small { display: block; font-family: var(--fuente-mono); font-size: 11.5px; color: var(--texto-tenue); margin-top: 3px; }
.fc-ic-tabla .fc-ic-cp { width: 84px; }
.fc-ic-tabla tr.fc-ic--igual td { color: var(--texto-tenue); }
.fc-ic-chip { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.fc-ic-chip--nuevo { background: rgb(var(--ok-50)); color: rgb(var(--ok-600)); } .fc-ic-chip--distinto { background: rgb(var(--av-50)); color: rgb(var(--av-600)); }
.fc-ic-chip--igual { background: rgb(var(--g-100)); color: rgb(var(--g-600)); } .fc-ic-chip--falta { background: rgb(var(--er-50)); color: rgb(var(--er-600)); margin-left: 4px; }
.fc-ic-error { font-size: 13px; font-weight: 600; color: rgb(var(--er-600)); background: rgb(var(--er-50)); border: 1px solid rgb(var(--er-200)); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 640px) { .fc-ic-fuentes { grid-template-columns: 1fr; } }
.fc-ic-tabla td:nth-child(2) { width: 32%; min-width: 240px; }
.fc-ic-tabla td:nth-child(3) { width: 96px; min-width: 96px; }
.fc-ic-tabla td:nth-child(4), .fc-ic-tabla td:nth-child(5) { width: 19%; }
.fc-ic-tabla td:nth-child(1), .fc-ic-tabla th:nth-child(1) { width: 1%; }

/* Barras de pestañas: se deslizan de lado sin mostrar barra de desplazamiento (en Windows salían flechitas ▲▼) */
.pestanas, .fc-vista, .fa-subtabs, .fa-pasos, .ficha-tabs, .xml-pestanas { overflow-y: hidden; scrollbar-width: none; }
.pestanas::-webkit-scrollbar, .fc-vista::-webkit-scrollbar, .fa-subtabs::-webkit-scrollbar, .fa-pasos::-webkit-scrollbar,
.ficha-tabs::-webkit-scrollbar, .xml-pestanas::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- documentos guardados (componente común) ---------- */
.fc-docs-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fc-docs-filtro { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texto-tenue); }
.fc-docs-filtro select { font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); border: 1px solid rgb(var(--g-300)); border-radius: 10px; padding: 9px 12px; background: rgb(var(--g-0)); }
.fc-docs-barra input[type=search] { flex: 1 1 240px; font: inherit; font-size: 14px; border: 1px solid rgb(var(--g-300)); border-radius: 10px; padding: 10px 12px; }
.fc-docs-barra input[type=search]:focus, .fc-docs-filtro select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.fc-docs-nota { flex-basis: 100%; font-size: 12.5px; color: var(--texto-tenue); }
.fc-docs-tabla-caja { border: 1px solid var(--linea); border-radius: 14px; overflow: auto; flex: 1; min-height: 0; }
.fc-docs-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-docs-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); background: var(--papel); padding: 12px 14px; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.fc-docs-tabla td { padding: 12px 14px; border-top: 1px solid rgb(var(--g-100)); white-space: nowrap; color: var(--texto); }
.fc-docs-tabla tbody tr:hover td { background: rgb(var(--g-50)); }
.fc-docs-principal { font-weight: 700; }
.fc-docs-check { width: 1%; padding-right: 4px !important; }
.fc-docs-check input { width: 16px; height: 16px; accent-color: var(--acento); }
.fc-docs-acc { width: 1%; text-align: right; }
.fc-docs-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); background: rgb(var(--g-0)); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--texto); cursor: pointer; margin-left: 6px; }
.fc-docs-btn:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.fc-docs-btn--icono { padding: 7px 9px; }
.fc-docs-btn:disabled { opacity: .5; cursor: default; }
.fc-docs-vacio { text-align: center; color: var(--texto-tenue); padding: 40px 16px !important; white-space: normal !important; }
.fc-docs-cuenta { font-size: 13.5px; color: var(--texto-tenue); }
.fc-modal--fija .fc-modal__cuerpo { min-height: 0; }

/* ---------- progreso dentro de la misma tarjeta (sin tarjeta aparte) ---------- */
.fc-avance { margin-top: 16px; border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; background: var(--papel); }
.fc-avance__fila { display: flex; align-items: center; gap: 12px; }
.fc-avance__texto { flex: 1; font-size: 14px; font-weight: 600; color: var(--texto); }
.fc-avance__giro { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid var(--acento-suave); border-top-color: var(--acento); animation: fc-giro .8s linear infinite; }
@keyframes fc-giro { to { transform: rotate(360deg); } }
.fc-avance__barra { height: 6px; border-radius: 999px; background: rgb(var(--g-200)); overflow: hidden; margin-top: 12px; }
.fc-avance__barra > div { height: 100%; width: 8%; background: var(--acento); border-radius: 999px; transition: width .6s ease; }
.fc-avance__detener { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--texto-tenue); cursor: pointer; padding: 4px 0; }
.fc-avance__detener:hover { color: rgb(var(--er-600)); }
.fc-resultado { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-radius: 12px; padding: 13px 16px; font-size: 14px; }
.fc-resultado--bien { background: rgb(var(--ok-50)); border: 1px solid rgb(var(--ok-200)); color: rgb(var(--ok-600)); }
.fc-resultado--mal { background: rgb(var(--av-50)); border: 1px solid rgb(var(--av-200)); color: rgb(var(--av-600)); }
.fc-resultado span { flex: 1 1 220px; }
.fc-resultado button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.fc-guardadas { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linea); background: rgb(var(--g-0)); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--texto); cursor: pointer; }
.fc-guardadas:hover { border-color: var(--acento); color: var(--acento); }
.fc-guardadas b { background: var(--acento-suave); color: var(--acento); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
@media (max-width: 640px) {
    .fc-docs-tabla thead { display: none; }
    .fc-docs-tabla, .fc-docs-tabla tbody { display: block; }
    .fc-docs-tabla tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; padding: 12px; border-top: 1px solid rgb(var(--g-100)); align-items: center; }
    .fc-docs-tabla tr:first-child { border-top: 0; }
    .fc-docs-tabla td { border: 0 !important; padding: 0 !important; white-space: normal; grid-column: 2; font-size: 12.5px; color: var(--texto-tenue); }
    .fc-docs-tabla td.fc-docs-check { grid-column: 1; grid-row: 1 / span 5; width: auto; }
    .fc-docs-tabla td.fc-docs-principal { font-size: 14.5px; color: var(--texto); }
    .fc-docs-tabla td.fc-docs-acc { grid-column: 3; grid-row: 1 / span 5; display: flex; flex-direction: column; gap: 6px; width: auto; }
    .fc-docs-tabla td:nth-child(n+6):not(.fc-docs-acc) { display: none; }
    .fc-docs-tabla td.fc-docs-vacio { grid-column: 1 / -1; }
    .fc-docs-btn { margin-left: 0; justify-content: center; }
    .fc-docs-tabla-caja { flex: none; }
}

/* ---------- compartir por enlace (componente común) ---------- */
.fc-cmp-rejilla { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.fc-cmp-campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fc-cmp-campo--ancho { grid-column: span 2; } .fc-cmp-campo--todo { grid-column: 1 / -1; }
.fc-cmp-campo span { font-size: 11.5px; font-weight: 700; color: rgb(var(--g-700)); text-transform: uppercase; letter-spacing: .03em; }
.fc-cmp-campo span i { text-transform: none; font-style: normal; font-weight: 500; color: rgb(var(--g-500)); letter-spacing: 0; }
.fc-cmp-campo input, .fc-cmp-campo select, .fc-cmp-campo textarea { font: inherit; font-size: 14.5px; border: 1px solid rgb(var(--g-300)); border-radius: 10px; padding: 11px 13px; background: rgb(var(--g-0)); }
.fc-cmp-campo input:focus, .fc-cmp-campo select:focus, .fc-cmp-campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.fc-cmp-ok { font-size: 14px; color: rgb(var(--ok-600)); background: rgb(var(--ok-50)); border: 1px solid rgb(var(--ok-200)); border-radius: 12px; padding: 12px 14px; }
.fc-cmp-enlace { display: flex; gap: 10px; margin-top: 14px; }
.fc-cmp-enlace input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; font-family: var(--fuente-mono); border: 1px solid rgb(var(--g-300)); border-radius: 10px; padding: 10px 12px; background: var(--papel); }
.fc-cmp-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.fc-cmp-acciones .fc-btn { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }
.fc-cmp-correo { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 18px; }
.fc-cmp-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.fc-cmp-nota { font-size: 13px; color: var(--texto-tenue); }
.fc-cmp-chip { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: rgb(var(--g-100)); color: rgb(var(--g-600)); }
.fc-cmp-chip--ok { background: rgb(var(--ok-50)); color: rgb(var(--ok-600)); } .fc-cmp-chip--mal { background: rgb(var(--er-50)); color: rgb(var(--er-600)); }
.fc-docs-btn.fc-cmp-rojo:hover { border-color: rgb(var(--er-200)); color: rgb(var(--er-600)); background: rgb(var(--er-50)); }
a.fc-docs-btn { text-decoration: none; }
/* Un renglón con varios documentos (una declaración): cada uno es una etiqueta que se abre en el visor */
.fc-docs-chip { display: inline-flex; align-items: center; height: 28px; margin: 2px 0 2px 6px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 999px;
    background: rgb(var(--g-50)); font: inherit; font-size: var(--t-12); font-weight: 600; color: rgb(var(--g-900)); cursor: pointer; white-space: nowrap; }
.fc-docs-chip:hover { border-color: rgb(var(--ac-600)); color: rgb(var(--ac-700)); background: rgb(var(--ac-50)); }
@media (max-width: 640px) { .fc-cmp-rejilla { grid-template-columns: 1fr; } .fc-cmp-campo--ancho, .fc-cmp-campo--todo { grid-column: auto; } }

/* ---------- Cambio de empresa: velo «Cargando datos de…», destello y aviso ---------- */
.fc-cambio { position: fixed; inset: 60px 0 0 0; z-index: 900; display: grid; place-items: center; background: rgba(248, 250, 252, .72);
             backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.fc-cambio[hidden] { display: none; }
.fc-cambio--ve { opacity: 1; }
.fc-cambio__caja { display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgb(var(--g-0)); border: 1px solid rgb(var(--g-200)); border-radius: 18px;
                   padding: 22px 30px; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); text-align: center; max-width: calc(100vw - 32px); }
.fc-cambio__caja p { font-size: 15px; color: rgb(var(--g-700)); margin: 0; }
.fc-cambio__caja b { color: rgb(var(--g-900)); }
.fc-cambio__caja small { font-family: var(--fuente-mono); font-size: 12px; color: rgb(var(--g-600)); }
.fc-cambio__giro { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgb(var(--g-200)); border-top-color: rgb(var(--ok-600)); animation: fc-giro .7s linear infinite; }
@keyframes fc-giro { to { transform: rotate(360deg); } }
main.fc-recien { animation: fc-recien .35s ease-out; }
@keyframes fc-recien { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fc-brindis { position: fixed; left: 50%; bottom: 22px; z-index: 950; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
              background: rgb(var(--g-900)); color: rgb(var(--g-0)); font-size: 13.5px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
              transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-brindis span { color: rgb(var(--ac-400)); font-weight: 800; }
.fc-brindis--ve { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { main.fc-recien { animation: none; } .fc-cambio__giro { animation-duration: 2s; } }

/* ---------- Módulos que el plan no incluye ---------- */
.fc-plan-chip { font-style: normal; font-weight: 700; color: rgb(var(--av-600)); }
.fc-plan { border: 0; border-radius: 20px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(15, 23, 42, .25); }
.fc-plan::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.fc-plan__caja { padding: 26px 26px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.fc-plan__ico { position: relative; width: 56px; height: 56px; border-radius: 16px; background: var(--tono-suave); color: var(--tono); display: grid; place-items: center; margin-bottom: 6px; }
.fc-plan__ico svg { width: 26px; height: 26px; }
.fc-plan__candado { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%; background: rgb(var(--g-900)); color: rgb(var(--g-0)); display: grid; place-items: center; border: 3px solid rgb(var(--g-0)); }
.fc-plan__candado svg { width: 13px; height: 13px; }
.fc-plan h3 { font-size: 19px; font-weight: 800; color: rgb(var(--g-900)); }
.fc-plan p { font-size: 14px; color: rgb(var(--g-600)); margin: 0; line-height: 1.5; }
.fc-plan__desc { font-size: 13px !important; color: rgb(var(--g-600)) !important; }
.fc-plan__contacto { background: rgb(var(--av-50)); border: 1px solid rgb(var(--av-200)); color: rgb(var(--av-600)) !important; border-radius: 12px; padding: 10px 12px; margin-top: 6px !important; font-weight: 600; width: 100%; }
.fc-plan__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* ============================================================
   RIEL: barra lateral compartida (módulos y Ajustes). Ver /ui/.
   Plegar solo cambia el ancho: íconos, alturas y espacios no se mueven (sin saltos).
   ============================================================ */
.ui-riel { display: flex; flex-direction: column; width: var(--lateral-ancho); min-width: 0; background: rgb(var(--g-0));
           border-right: 1px solid var(--linea); overflow: hidden; transition: width .18s ease; }
.ui-riel__cabeza { flex: none; height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 13px 0 21px; white-space: nowrap;
                   font-size: var(--t-16); font-weight: 700; color: rgb(var(--g-900)); overflow: hidden; }
.ui-riel__titulo-riel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-riel__buscar { flex: none; display: flex; align-items: center; gap: 10px; height: 34px; margin: 10px 10px 4px; padding: 0 10px;
                   border: 1px solid var(--linea); border-radius: var(--r-control); background: rgb(var(--g-50)); color: rgb(var(--g-500));
                   font: inherit; font-size: var(--t-13); cursor: pointer; white-space: nowrap; overflow: hidden; text-align: left; }
.ui-riel__buscar:hover, .ui-riel__buscar:focus-within { border-color: rgb(var(--g-300)); color: rgb(var(--g-700)); }
.ui-riel__buscar svg { width: 18px; height: 18px; flex: none; }
.ui-riel__buscar .ui-riel__texto { flex: 1; }
.ui-riel__buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: rgb(var(--g-900)); }
.ui-riel__buscar kbd { font: 600 11px var(--fuente-mono); color: rgb(var(--g-500)); border: 1px solid var(--linea); border-radius: 4px; padding: 0 4px; background: rgb(var(--g-0)); }
.ui-riel__lista { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 10px; scrollbar-width: none; }
.ui-riel__lista::-webkit-scrollbar { width: 0; }
.ui-riel__lista:hover { scrollbar-width: thin; scrollbar-color: rgb(var(--g-300)) transparent; }
.ui-riel__lista:hover::-webkit-scrollbar { width: 6px; }
.ui-riel__lista:hover::-webkit-scrollbar-thumb { background: rgb(var(--g-300)); border-radius: 3px; }
.ui-riel__item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 11px; border: 0; background: none;
                 border-radius: var(--r-control); font: inherit; font-size: var(--t-13); font-weight: 500; color: rgb(var(--g-700));
                 text-decoration: none; white-space: nowrap; cursor: pointer; text-align: left; }
.ui-riel__item svg { width: 18px; height: 18px; flex: none; color: rgb(var(--g-500)); }
.ui-riel__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-riel__item:hover { background: rgb(var(--g-100)); color: rgb(var(--g-900)); }
.ui-riel__item:focus-visible, .ui-riel__titulo:focus-visible, .ui-riel__plegar:focus-visible, .ui-riel__buscar:focus-visible { outline: 2px solid rgb(var(--ac-600)); outline-offset: -2px; }
.ui-riel__item--actual { background: rgb(var(--ac-50)); color: rgb(var(--ac-700)); font-weight: 600; }
.ui-riel__item--actual svg { color: rgb(var(--ac-600)); }
.ui-riel__item--vedado, .ui-riel__item--pronto { color: rgb(var(--g-500)); }
.ui-riel__item--pronto { cursor: default; }
.ui-riel__item--pronto:hover { background: none; color: rgb(var(--g-500)); }
.ui-riel__num { display: inline-block; min-width: 14px; margin-right: 6px; font: 600 11px var(--fuente-mono); color: rgb(var(--g-500)); }
.ui-riel__item--actual .ui-riel__num { color: rgb(var(--ac-600)); }
.ui-riel__pronto { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: rgb(var(--g-500)); background: rgb(var(--g-100)); border-radius: 99px; padding: 1px 7px; }
.ui-riel__candado { margin-left: auto; display: grid; color: rgb(var(--g-400)); }
.ui-riel__candado svg { width: 13px; height: 13px; color: inherit; }
.ui-riel__sep { height: 8px; }        /* sin rayitas: con el espacio basta */
.ui-riel__titulo { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 30px; margin-top: 6px; padding: 0 11px;
                   border: 0; background: none; font: inherit; font-size: var(--t-12); font-weight: 600; color: rgb(var(--g-500)); cursor: pointer; white-space: nowrap; border-radius: var(--r-control); }
.ui-riel__titulo:hover { color: rgb(var(--g-800)); }
.ui-riel__titulo svg { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.ui-riel__grupo--plegado .ui-riel__titulo svg { transform: rotate(-90deg); }
.ui-riel__grupo--plegado .ui-riel__items { display: none; }
.ui-riel__vacio { font-size: var(--t-13); color: rgb(var(--g-500)); padding: 8px 11px; white-space: normal; }
.ui-riel__plegar { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 21px; border: 0; border-top: 1px solid var(--linea);
                   background: none; font: inherit; font-size: var(--t-13); color: rgb(var(--g-600)); cursor: pointer; white-space: nowrap; overflow: hidden; }
.ui-riel__plegar:hover { color: rgb(var(--g-900)); background: rgb(var(--g-50)); }
.ui-riel__grupo-ico, .ui-riel__flotante-titulo { display: none; }
.ui-riel__plegar svg { width: 18px; height: 18px; flex: none; transition: transform .18s; }

/* Plegada: solo íconos. Los textos se recortan (no se mueven), los títulos de grupo son una línea delgada
   y todos los grupos se ven. El nombre sale a un lado al pasar el cursor. */
.fc-lateral-chico .ui-riel { width: var(--lateral-chico); }
.fc-lateral-chico .ui-riel__cabeza { display: none; }
.fc-lateral-chico .ui-riel__buscar { border-color: transparent; background: none; }
.fc-lateral-chico .ui-riel__buscar kbd, .fc-lateral-chico .ui-riel__pronto, .fc-lateral-chico .ui-riel__candado { visibility: hidden; }
.fc-lateral-chico .ui-riel__lista { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; }
.fc-lateral-chico .ui-riel__lista > .ui-riel__item, .fc-lateral-chico .ui-riel__grupo-ico { width: 36px; height: 36px; padding: 0; justify-content: center; flex: none; }
.fc-lateral-chico .ui-riel__sep, .fc-lateral-chico .ui-riel__grupo { margin-top: 8px; }   /* 4 + 8 = 12 px entre grupos */
.fc-lateral-chico .ui-riel__sep { height: 0; }
.fc-lateral-chico .ui-riel__titulo { display: none; }
.fc-lateral-chico .ui-riel__grupo-ico { display: grid; place-items: center; border: 0; border-radius: var(--r-control); background: none; color: rgb(var(--g-500)); cursor: pointer; }
.fc-lateral-chico .ui-riel__grupo-ico svg { width: 18px; height: 18px; }
.fc-lateral-chico .ui-riel__grupo-ico:hover, .fc-lateral-chico .ui-riel__grupo--flotando > .ui-riel__grupo-ico { background: rgb(var(--g-100)); color: rgb(var(--g-900)); }
.fc-lateral-chico .ui-riel__grupo-ico--actual { background: rgb(var(--ac-50)); color: rgb(var(--ac-600)); }
.fc-lateral-chico .ui-riel__grupo-ico:focus-visible { outline: 2px solid rgb(var(--ac-600)); outline-offset: -2px; }
.fc-lateral-chico .ui-riel__items, .fc-lateral-chico .ui-riel__grupo--plegado .ui-riel__items { display: none; }
.fc-lateral-chico .ui-riel__grupo--flotando > .ui-riel__items {
    display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 70; left: calc(var(--riel-x, var(--lateral-chico)) + 8px); top: var(--flot-top, 80px);
    min-width: 220px; max-height: calc(100vh - var(--flot-top, 80px) - 12px); overflow-y: auto; padding: 8px;
    background: rgb(var(--g-0)); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-2); }
.fc-lateral-chico .ui-riel__grupo--flotando > .ui-riel__items::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; }   /* puente: el cursor no lo pierde */
.fc-lateral-chico .ui-riel__flotante-titulo { display: block; margin: 2px 8px 6px; font-size: var(--t-12); font-weight: 600; color: rgb(var(--g-500)); white-space: nowrap; }
.fc-lateral-chico .ui-riel__items .ui-riel__item { width: 100%; height: 34px; padding: 0 10px; }
.fc-lateral-chico .ui-riel__items .ui-riel__item svg { display: none; }
.fc-lateral-chico .ui-riel__items .ui-riel__pronto, .fc-lateral-chico .ui-riel__items .ui-riel__candado { visibility: visible; }
.fc-lateral-chico .ui-riel__plegar svg { transform: rotate(180deg); }
.fc-lateral-chico .ui-riel__lista > .ui-riel__item:hover::after, .fc-lateral-chico .ui-riel__lista > .ui-riel__item:focus-visible::after,
.fc-lateral-chico .ui-riel__buscar:hover::after, .fc-lateral-chico .ui-riel__plegar:hover::after {
    content: attr(data-nombre); position: fixed; left: calc(var(--riel-x, var(--lateral-chico)) + 8px); z-index: 60; pointer-events: none;
    background: rgb(var(--g-900)); color: rgb(var(--g-0)); font-size: var(--t-12); font-weight: 600; padding: 5px 10px; border-radius: var(--r-control);
    white-space: nowrap; box-shadow: var(--sombra-2); }

/* La barra de módulos en computadora (en el teléfono se usa el botón «Módulos») */
.fc-lateral { display: none; }
@media (min-width: 1024px) {
    /* Misma estructura con la barra de módulos (fc-con-lateral) y con la de Ajustes (fc-con-riel) */
    html.fc-con-lateral body, html.fc-con-riel body { padding-left: var(--lateral-ancho); transition: padding-left .18s ease; }
    html.fc-con-lateral.fc-lateral-chico body, html.fc-con-riel.fc-lateral-chico body { padding-left: var(--lateral-chico); }
    html.fc-con-lateral .fc-barra, html.fc-con-riel .fc-barra { margin-left: calc(var(--lateral-ancho) * -1); width: calc(100% + var(--lateral-ancho)); transition: margin-left .18s ease, width .18s ease; }
    html.fc-con-lateral.fc-lateral-chico .fc-barra, html.fc-con-riel.fc-lateral-chico .fc-barra { margin-left: calc(var(--lateral-chico) * -1); width: calc(100% + var(--lateral-chico)); }
    html.fc-con-riel .cf-menu { position: fixed; z-index: 35; left: 0; top: var(--barra-alto); bottom: 0; height: auto; }
    html.fc-con-lateral .fc-modulos-btn { display: none; }
    html.fc-con-lateral .fc-cambio, html.fc-con-riel .fc-cambio { left: var(--lateral-ancho); }
    html.fc-con-lateral.fc-lateral-chico .fc-cambio, html.fc-con-riel.fc-lateral-chico .fc-cambio { left: var(--lateral-chico); }
    .fc-lateral { display: flex; position: fixed; z-index: 35; left: 0; top: var(--barra-alto); bottom: 0; view-transition-name: fc-lateral; }

    /* Barra de arriba a todo lo ancho: el logo sobre la barra lateral y los botones pegados a la derecha */
    html.fc-con-lateral .fc-barra__interior, html.fc-con-riel .fc-barra__interior { max-width: none; padding-left: 0; }
    html.fc-con-lateral .fc-marca, html.fc-con-riel .fc-marca { width: var(--lateral-ancho); padding-left: 16px; transition: width .18s ease; }
    html.fc-con-lateral.fc-lateral-chico .fc-marca, html.fc-con-riel.fc-lateral-chico .fc-marca { width: var(--lateral-chico); overflow: hidden; }
    html.fc-con-lateral.fc-lateral-chico .fc-marca__nombre, html.fc-con-riel.fc-lateral-chico .fc-marca__nombre { display: none; }

    /* Módulos con tabla: el contenido empieza pegado a la barra lateral */
    html.fc-con-lateral .xml-pagina, html.fc-con-lateral .dm-pagina,
    html.fc-con-lateral .mod-pagina:not(.mod-pagina--angosta) { margin-left: 0; margin-right: auto; }
    html.fc-con-lateral .xml-pagina { max-width: none; }
}

/* Transiciones entre páginas: la barra y el lateral se quedan fijos, el contenido cambia suave */
@view-transition { navigation: auto; }
.fc-barra { view-transition-name: fc-barra; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
/* Sin títulos repetidos (G-11): en computadora el módulo actual ya se ve en el lateral y en el título de la página */
@media (min-width: 1024px) { html.fc-con-lateral .fc-miga--actual, html.fc-con-riel .fc-miga--actual { display: none; } }

/* ============================================================
   PIEZAS COMPARTIDAS (ver /ui/). Regla: si no está en /ui/, no
   se usa en un módulo; si falta algo, primero se agrega ahí.
   ============================================================ */

/* --- Botones: primario (uno por pantalla), secundario, terciario y peligro; 28, 32 y 36 px --- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: 32px; padding: 0 var(--e-3);
          border-radius: var(--r-control); border: 1px solid transparent; font: inherit; font-size: var(--t-13); font-weight: 600;
          line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.ui-btn svg { width: 16px; height: 16px; flex: none; }
.ui-btn--28 { height: 28px; padding: 0 var(--e-2); font-size: var(--t-12); }
.ui-btn--36 { height: 36px; padding: 0 var(--e-4); font-size: var(--t-14); }
.ui-btn--primario { background: rgb(var(--ac-600)); color: rgb(var(--g-0)); }
.ui-btn--primario:hover { background: rgb(var(--ac-700)); }
.ui-btn--secundario { background: rgb(var(--g-0)); color: rgb(var(--g-900)); border-color: rgb(var(--g-300)); }
.ui-btn--secundario:hover { background: rgb(var(--g-50)); border-color: rgb(var(--g-400)); }
.ui-btn--terciario { background: none; color: rgb(var(--ac-700)); padding-left: var(--e-2); padding-right: var(--e-2); }
.ui-btn--terciario:hover { background: rgb(var(--ac-50)); }
.ui-btn--peligro { background: rgb(var(--g-0)); color: rgb(var(--er-600)); border-color: rgb(var(--er-200)); }
.ui-btn--peligro:hover { background: rgb(var(--er-50)); border-color: rgb(var(--er-600)); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ui-btn--cargando { position: relative; color: transparent !important; pointer-events: none; }
.ui-btn--cargando::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor;
                           border-color: rgb(var(--g-300)); border-top-color: rgb(var(--ac-600)); animation: fc-giro .7s linear infinite; }
.ui-btn--primario.ui-btn--cargando::after { border-color: rgb(255 255 255 / .4); border-top-color: rgb(var(--g-0)); }

/* --- Campos --- */
.ui-campo { display: flex; flex-direction: column; gap: var(--e-1); }
.ui-etiqueta { font-size: var(--t-13); font-weight: 600; color: rgb(var(--g-700)); }
.ui-etiqueta i { font-style: normal; font-weight: 400; color: rgb(var(--g-600)); }
.ui-input, .ui-select { height: 36px; padding: 0 var(--e-3); border: 1px solid rgb(var(--g-300)); border-radius: var(--r-control);
                        background: rgb(var(--g-0)); font: inherit; font-size: var(--t-14); color: rgb(var(--g-900)); width: 100%; }
.ui-input::placeholder { color: rgb(var(--g-500)); }
.ui-input:hover, .ui-select:hover { border-color: rgb(var(--g-400)); }
.ui-input:focus, .ui-select:focus { outline: none; border-color: rgb(var(--ac-600)); box-shadow: 0 0 0 3px rgb(var(--ac-600) / .18); }
.ui-input:disabled, .ui-select:disabled { background: rgb(var(--g-100)); color: rgb(var(--g-500)); cursor: not-allowed; }
.ui-input--error { border-color: rgb(var(--er-600)); }
.ui-input--error:focus { box-shadow: 0 0 0 3px rgb(var(--er-600) / .15); }
.ui-ayuda { font-size: var(--t-12); color: rgb(var(--g-600)); }
.ui-ayuda--error { color: rgb(var(--er-600)); }
.ui-check { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-14); color: rgb(var(--g-900)); cursor: pointer; }
.ui-check input { width: 16px; height: 16px; accent-color: rgb(var(--ac-600)); }
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-14); cursor: pointer; }
.ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-switch__riel { width: 32px; height: 18px; border-radius: 999px; background: rgb(var(--g-300)); position: relative; transition: background .15s; flex: none; }
.ui-switch__riel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--g-0)); transition: transform .15s; box-shadow: var(--sombra-1); }
.ui-switch input:checked + .ui-switch__riel { background: rgb(var(--ac-600)); }
.ui-switch input:checked + .ui-switch__riel::after { transform: translateX(14px); }
.ui-switch input:focus-visible + .ui-switch__riel { outline: 2px solid var(--acento); outline-offset: 2px; }
.ui-switch input:disabled + .ui-switch__riel { opacity: .45; }

/* --- Estados: punto de color + texto (nada de etiquetas pastel) --- */
.ui-estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: rgb(var(--g-700)); white-space: nowrap; }
.ui-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--g-400)); flex: none; }
.ui-estado--ok::before { background: rgb(var(--ok-600)); }
.ui-estado--aviso::before { background: rgb(var(--av-600)); }
.ui-estado--error::before { background: rgb(var(--er-600)); }
.ui-estado--info::before { background: rgb(var(--in-600)); }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--e-1) 0 var(--e-3); border: 1px solid rgb(var(--g-300));
           border-radius: 999px; background: rgb(var(--g-0)); font-size: var(--t-13); color: rgb(var(--g-800)); }
.ui-chip b { font-weight: 600; }
.ui-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: rgb(var(--g-600)); cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.ui-chip button:hover { background: rgb(var(--g-100)); color: rgb(var(--g-900)); }
.ui-aviso { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r-tarjeta); border: 1px solid rgb(var(--in-200));
            background: rgb(var(--in-50)); font-size: var(--t-14); color: rgb(var(--g-900)); }
.ui-aviso--aviso { border-color: rgb(var(--av-200)); background: rgb(var(--av-50)); }
.ui-aviso--error { border-color: rgb(var(--er-200)); background: rgb(var(--er-50)); }
.ui-aviso--ok { border-color: rgb(var(--ok-200)); background: rgb(var(--ok-50)); }

/* --- Tarjeta, encabezado de módulo --- */
.ui-tarjeta { background: rgb(var(--g-0)); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--e-4); }
.ui-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-height: 40px; margin-bottom: var(--e-4); }
.ui-cabeza h1 { font-size: var(--t-20); font-weight: 700; letter-spacing: -.01em; color: rgb(var(--g-900)); margin: 0; }
.ui-cabeza__ayuda { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(var(--g-300)); background: rgb(var(--g-0)); color: rgb(var(--g-600));
                    font-size: var(--t-12); font-weight: 700; cursor: pointer; }
.ui-cabeza__acciones { margin-left: auto; display: flex; gap: var(--e-2); }

/* --- Carga, vacío y error (G-10) --- */
.ui-skel { display: block; border-radius: var(--r-control); background: linear-gradient(90deg, rgb(var(--g-100)) 25%, rgb(var(--g-200)) 37%, rgb(var(--g-100)) 63%);
           background-size: 400% 100%; animation: ui-brillo 1.3s ease infinite; height: 12px; }
@keyframes ui-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ui-vacio, .ui-falla { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; padding: var(--e-10) var(--e-4); color: rgb(var(--g-600)); font-size: var(--t-14); }
.ui-vacio svg, .ui-falla svg { width: 28px; height: 28px; color: rgb(var(--g-400)); }
.ui-vacio b, .ui-falla b { color: rgb(var(--g-900)); font-size: var(--t-16); font-weight: 600; }
.ui-falla svg { color: rgb(var(--er-600)); }

/* --- Tabla densa: filas de 36 px, encabezado fijo, primera columna fija, importes tabulares --- */
.ui-tabla-caja { overflow: auto; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: rgb(var(--g-0)); max-height: 420px; }
.ui-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-13); }
.ui-tabla th { position: sticky; top: 0; z-index: 1; background: rgb(var(--g-50)); color: rgb(var(--g-600)); font-weight: 600; font-size: var(--t-12);
               text-align: left; height: 36px; padding: 0 var(--e-3); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.ui-tabla td { height: 36px; padding: 0 var(--e-3); border-bottom: 1px solid rgb(var(--g-100)); color: rgb(var(--g-900)); white-space: nowrap;
               max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ui-tabla tr:hover td { background: rgb(var(--g-50)); }
.ui-tabla .ui-fija { position: sticky; left: 0; z-index: 2; background: rgb(var(--g-0)); box-shadow: 1px 0 0 var(--linea); }
.ui-tabla th.ui-fija { z-index: 3; background: rgb(var(--g-50)); }
.ui-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-tabla tfoot td { position: sticky; bottom: 0; background: rgb(var(--g-50)); font-weight: 600; border-top: 1px solid var(--linea); }
.ui-folio { font-family: var(--fuente-mono); font-size: var(--t-12); color: rgb(var(--ac-700)); text-decoration: none; }
.ui-folio:hover { text-decoration: underline; }

/* --- Modal estándar (dialog) --- */
.ui-modal { border: 0; border-radius: var(--r-modal); padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: var(--sombra-2); color: rgb(var(--g-900)); }
.ui-modal::backdrop { background: rgb(var(--g-900) / .45); }
.ui-modal__cuerpo { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); font-size: var(--t-14); }
.ui-modal__cuerpo h3 { font-size: var(--t-16); font-weight: 700; margin: 0; }
.ui-modal__pie { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-6) var(--e-5); }
/* Fiscontable.confirmar */
.fc-confirmar .fc-confirmar__texto { margin: 0; color: rgb(var(--g-700)); line-height: 1.5; white-space: pre-line; }
.fc-confirmar__escribir { display: grid; gap: 6px; font-size: var(--t-13); color: rgb(var(--g-700)); }
.fc-confirmar__escribir input { height: 36px; padding: 0 10px; border: 1px solid rgb(var(--g-300)); border-radius: var(--r-control); font: inherit; font-family: var(--fuente-mono); text-transform: uppercase; }
.fc-confirmar .ui-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Mis descargas: aviso de lo programado y enlace chico dentro de una tarjeta */
.fc-nota-prog { display: block; margin: 0 0 var(--e-3); padding: 8px 12px; border-radius: var(--r-control); background: rgb(var(--g-50)); color: rgb(var(--g-700)); font-size: var(--t-12); text-decoration: none; }
.fc-nota-prog:hover { background: rgb(var(--g-100)); }
.fc-enlace-chico { border: 0; background: none; padding: 0; margin-top: 4px; font: inherit; font-size: var(--t-12); color: rgb(var(--av-700)); text-decoration: underline; cursor: pointer; }
/* En el teléfono las pestañas del título se deslizan en lugar de salirse de la pantalla */
@media (max-width: 640px) {
    .fc-titulo { min-width: 0; max-width: 100%; }
    .fc-titulo .fc-vista { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .fc-titulo .fc-vista button { flex: none; white-space: nowrap; }
}

/* --- Zona para soltar archivos (comun/zona-archivos.js) --- */
.ui-zona { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); border: 1px dashed rgb(var(--g-400)); border-radius: var(--r-tarjeta);
           background: rgb(var(--g-50)); cursor: pointer; transition: border-color .15s, background-color .15s; }
.ui-zona:hover, .ui-zona:focus-visible, .ui-zona--sobre { border-color: rgb(var(--ac-600)); background: rgb(var(--ac-50)); }
.ui-zona svg { width: 24px; height: 24px; color: rgb(var(--g-500)); flex: none; }
.ui-zona__texto { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-14); color: rgb(var(--g-900)); }
.ui-zona__texto b { font-weight: 600; }
.ui-zona__texto small { font-size: var(--t-12); color: rgb(var(--g-600)); }
.ui-zona__estado { margin: var(--e-2) 0 0; font-size: var(--t-13); color: rgb(var(--g-700)); }
.ui-zona__estado--ok { color: rgb(var(--ok-600)); }
.ui-zona__estado--error { color: rgb(var(--er-600)); }

/* --- Íconos (Fiscontable.icono) --- */
.ui-ico { width: 16px; height: 16px; flex: none; }
.ui-icono-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-control); background: none;
                color: rgb(var(--g-600)); cursor: pointer; }
.ui-icono-btn svg { width: 16px; height: 16px; }
.ui-icono-btn:hover { background: rgb(var(--g-100)); color: rgb(var(--g-900)); }
.ui-icono-btn--peligro:hover { background: rgb(var(--er-50)); color: rgb(var(--er-600)); }
.ui-icono-btn--ok { color: rgb(var(--ac-600)); }
.ui-icono-btn--ok:hover { background: rgb(var(--ac-50)); color: rgb(var(--ac-700)); }

.fc-ic-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-control); background: rgb(var(--g-100)); color: rgb(var(--g-700)); }
.fc-ic-ico svg { width: 18px; height: 18px; }
.fc-ic-fuente:focus-visible { outline: 2px solid rgb(var(--ac-600)); outline-offset: 2px; }
.fc-ic-cambios { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: rgb(var(--g-700)); }
.fc-ic-cambios s { color: rgb(var(--g-500)); }
.fc-ic-mal { color: rgb(var(--er-600)); }
.fc-ic-cambios { min-width: 210px; }

/* --- Barra de arriba clara (opción en /ui/) --- */
:root[data-barra="clara"] .fc-barra { background: rgb(var(--g-0)); color: rgb(var(--g-900)); box-shadow: 0 1px 0 var(--linea); }
:root[data-barra="clara"] .fc-marca { color: rgb(var(--g-900)); }
:root[data-barra="clara"] .fc-miga { color: rgb(var(--g-600)); }
:root[data-barra="clara"] a.fc-miga:hover, :root[data-barra="clara"] .fc-miga--actual { color: rgb(var(--g-900)); }
:root[data-barra="clara"] .fc-miga__sep { color: rgb(var(--g-400)); }
:root[data-barra="clara"] .fc-accion, :root[data-barra="clara"] .fc-modulos-btn, :root[data-barra="clara"] .fc-ayuda { color: rgb(var(--g-700)); }
:root[data-barra="clara"] .fc-accion:hover, :root[data-barra="clara"] .fc-modulos-btn:hover, :root[data-barra="clara"] .fc-ayuda:hover { background: rgb(var(--g-100)); color: rgb(var(--g-900)); }
:root[data-barra="clara"] .fc-empresa { border-color: var(--linea); }
:root[data-barra="clara"] .fc-ayuda__icono { background: rgb(var(--g-100)); color: rgb(var(--g-700)); }
:root[data-barra="clara"] .fc-ayuda:hover .fc-ayuda__icono { background: rgb(var(--g-200)); color: rgb(var(--g-900)); }
:root[data-barra="clara"] .fc-modulos-btn { border-color: var(--linea); background: rgb(var(--g-50)); }
:root[data-barra="clara"] .fc-modulos-btn:hover, :root[data-barra="clara"] .fc-modulos-btn[aria-expanded="true"] { background: rgb(var(--g-100)); border-color: rgb(var(--g-300)); color: rgb(var(--g-900)); }
:root[data-barra="clara"] .fc-accion--activa { color: rgb(var(--g-900)); }

/* --- Pantalla bloqueada por inactividad (S-01) --- */
.fc-bloqueo-pantalla { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
                       background: rgb(var(--g-900) / .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fc-bloqueo-pantalla[hidden] { display: none; }
.fc-bloqueo-pantalla__caja { width: min(380px, 100%); background: rgb(var(--g-0)); border-radius: var(--r-modal); box-shadow: var(--sombra-2);
                             padding: var(--e-6); display: grid; gap: var(--e-3); justify-items: center; text-align: center; }
.fc-bloqueo-pantalla__caja h2 { margin: 0; font-size: var(--t-20); font-weight: 700; color: rgb(var(--g-900)); }
.fc-bloqueo-pantalla__caja p { margin: 0; font-size: var(--t-14); color: rgb(var(--g-600)); }
.fc-bloqueo-pantalla__caja .fc-marca__sello { width: 52px; height: 52px; }
.fc-bloqueo-pantalla__caja form { display: flex; gap: var(--e-2); width: 100%; }
.fc-bloqueo-pantalla__caja form .ui-input { flex: 1; text-align: center; letter-spacing: .3em; font-size: var(--t-16); }
.fc-bloqueo-pantalla__msj { color: rgb(var(--er-600)) !important; font-size: var(--t-13) !important; min-height: 1em; }
.fc-bloqueo-pantalla__olvide { font-size: var(--t-13); color: rgb(var(--g-600)); text-decoration: underline; text-underline-offset: 3px; }
.fc-bloqueo-pantalla__olvide:hover { color: rgb(var(--g-900)); }
html.fc-bloqueada body { overflow: hidden; }

/* --- Selector de empresa (G-02): favoritas, recientes y todas --- */
.fc-empresas__grupo { margin: 8px 10px 4px; font-size: var(--t-12); font-weight: 600; color: rgb(var(--g-500)); }
.fc-empresas__grupo:first-child { margin-top: 2px; }
.fc-empresas__chip { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font: 600 10.5px var(--fuente); font-style: normal;
                     color: rgb(var(--g-600)); background: rgb(var(--g-100)); vertical-align: 1px; }
.fc-empresas__chip--ok { color: rgb(var(--ok-600)); background: rgb(var(--ok-50)); }
.fc-empresas__check { display: grid; color: rgb(var(--ac-600)); }
.fc-empresas__check svg { width: 16px; height: 16px; }
.fc-empresas__estrella { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-control);
                         color: rgb(var(--g-400)); cursor: pointer; }
.fc-empresas__estrella svg, .fc-empresas__editar svg { width: 16px; height: 16px; }
.fc-empresas__estrella:hover { background: rgb(var(--g-100)); color: rgb(var(--g-700)); }
.fc-empresas__estrella--si { color: rgb(var(--av-600)); }
.fc-empresas__estrella--si svg { fill: currentColor; }
.fc-empresas__item:focus-visible { outline: 2px solid rgb(var(--ac-600)); outline-offset: -2px; }

/* «¿Para quién?» (G-02): con la empresa activa no se repite (ya está en la barra); con otro contribuyente, aviso fijo */
.pc--empresa .pc-marco { border: 0; background: none; box-shadow: none; margin-bottom: 8px; }
.pc--empresa .pc-cerrado { justify-content: flex-end; padding: 0; min-height: 0; background: none; border: 0; }
.pc--empresa .pc-quien, .pc--empresa .pc-sello { display: none; }
.pc--empresa .pc-cambiar { font-size: var(--t-13); }
.pc--otro .pc-marco { border-color: rgb(var(--av-200)); overflow: hidden; }
.pc--otro .pc-cerrado { background: rgb(var(--av-50)); }
.pc--otro .pc-nombre::before { content: "Trabajando con "; font-weight: 500; color: rgb(var(--g-700)); }
.pc-volver { border: 1px solid rgb(var(--av-200)); background: rgb(var(--g-0)); color: rgb(var(--g-900)); font: inherit; font-size: var(--t-13); font-weight: 600;
             border-radius: var(--r-control); padding: 5px 10px; cursor: pointer; }
.pc-volver:hover { background: rgb(var(--g-50)); }

/* --- Acciones del módulo en una barra (G-06) --- */
.mod-layout.mod-layout--sin-lado:not([hidden]) { display: block; }
.mod-acciones.mod-acciones--barra { position: static; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: 0; margin: 0 0 10px;
                                    background: none; border: 0; border-radius: 0; flex-direction: row; }
.mod-acciones__der { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-left: auto; }
.mod-acciones--barra > .mod-acciones__der > .mod-accion { width: auto; }
.mod-acciones--barra .mod-accion b { display: none; }
.mod-acciones__nota--barra { margin: 0 !important; font-size: var(--t-12) !important; color: rgb(var(--g-600)); }
.mod-menu { position: relative; }
.mod-menu[hidden] { display: none; }
.mod-menu__btn svg { width: 14px; height: 14px; margin-left: 2px; }
.mod-menu__lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: var(--e-1); background: rgb(var(--g-0));
                   border: 1px solid var(--linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-2); display: grid; gap: 1px; }
.mod-menu__lista[hidden] { display: none; }
.mod-menu__lista .mod-accion { display: flex; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-control); font-size: var(--t-13); font-weight: 500;
                               color: rgb(var(--g-900)); text-decoration: none; }
.mod-menu__lista .mod-accion[hidden] { display: none; }
.mod-menu__lista .mod-accion:hover:not(:disabled) { background: rgb(var(--g-100)); border-color: transparent; }

/* --- Detalle de CFDI en panel lateral (G-07) --- */
.fc-cfdi { position: fixed; top: 0; right: 0; bottom: 0; z-index: 85; width: min(760px, 100vw); display: flex; flex-direction: column;
           background: rgb(var(--g-0)); border-left: 1px solid var(--linea); box-shadow: -18px 0 40px -20px rgb(var(--g-900) / .35); }
.fc-cfdi[hidden] { display: none; }
.fc-cfdi__cabeza { flex: none; display: flex; align-items: center; gap: var(--e-1); height: 48px; padding: 0 var(--e-3) 0 var(--e-4); border-bottom: 1px solid var(--linea); }
.fc-cfdi__cabeza b { font-size: var(--t-14); color: rgb(var(--g-900)); }
.fc-cfdi__pos { flex: 1; font-size: var(--t-12); color: rgb(var(--g-500)); margin-left: var(--e-2); }
.fc-cfdi__cabeza .ui-icono-btn:disabled { opacity: .35; cursor: default; }
.fc-cfdi__cabeza .ui-icono-btn svg { width: 16px; height: 16px; }
.fc-cfdi__marco { flex: 1; width: 100%; border: 0; background: var(--papel); }
/* Panel lateral de detalle (Fiscontable.panel): misma cabeza que el de CFDI, cuerpo con datos */
.fc-cfdi--panel { width: min(520px, 100vw); }
.fc-panel__cuerpo { flex: 1; overflow-y: auto; padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-4); background: rgb(var(--g-0)); }
.fc-panel__cuerpo h4 { margin: 0; font-size: var(--t-16); font-weight: 700; color: rgb(var(--g-900)); }
.fc-panel__datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: var(--t-13); }
.fc-panel__datos dt { color: rgb(var(--g-500)); }
.fc-panel__datos dd { margin: 0; color: rgb(var(--g-900)); overflow-wrap: anywhere; }
.fc-panel__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fc-panel__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-13); background: rgb(var(--g-50)); border: 1px solid var(--linea); border-radius: var(--r-control); padding: 10px 12px; }
/* Línea de tiempo de estado (Recibida → En proceso → Entregada) */
.fc-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.fc-pasos li { position: relative; padding: 0 0 14px 22px; font-size: var(--t-13); color: rgb(var(--g-500)); }
.fc-pasos li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--g-300)); }
.fc-pasos li::after { content: ""; position: absolute; left: 8px; top: 15px; bottom: 0; width: 1px; background: rgb(var(--g-200)); }
.fc-pasos li:last-child::after { content: none; }
.fc-pasos li b { display: block; color: inherit; font-weight: 600; }
.fc-pasos .fc-paso--hecho { color: rgb(var(--g-900)); }
.fc-pasos .fc-paso--hecho::before { background: rgb(var(--ok-600)); }
.fc-pasos .fc-paso--actual { color: rgb(var(--g-900)); }
.fc-pasos .fc-paso--actual::before { background: rgb(var(--ac-600)); box-shadow: 0 0 0 3px rgb(var(--ac-600) / .2); }
.fc-pasos .fc-paso--mal::before { background: rgb(var(--er-600)); }
/* Dentro de una ventana o panel (incrustado) los letreros generales ya se ven en la página de afuera */
html.fc-incrustado .fc-letrero { display: none !important; }

/* Cancelaciones: barra del historial (buscar, fechas, resultado, exportar) */
.ca-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 10px; }
.ca-barra .ui-input, .ca-barra .ui-select { height: 32px; }
.ca-barra #h-buscar { flex: 1 1 220px; max-width: 320px; }
.ca-campo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: rgb(var(--g-600)); }
.ca-barra #h-excel { margin-left: auto; }

/* G-02: con la empresa activa (ya está en la barra) el selector del módulo es solo un enlace */
.ctx-campo.ctx-campo--discreto { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; min-height: 28px; padding: 2px 6px; border-color: transparent; background: none; box-shadow: none; color: rgb(var(--ac-700)); }
.ctx-campo--discreto small { display: none; }
.ctx-campo--discreto strong { font-size: var(--t-13); font-weight: 600; }
.ctx-campo--discreto:hover { border-color: transparent; background: rgb(var(--g-100)); }
.fc-lateral-chico .ui-riel__lista > .ui-riel__item .ui-riel__texto, .fc-lateral-chico .ui-riel__lista > .ui-riel__item .ui-riel__num,
.fc-lateral-chico .ui-riel__lista > .ui-riel__item .ui-riel__pronto, .fc-lateral-chico .ui-riel__lista > .ui-riel__item .ui-riel__candado { display: none; }
@media (max-width: 1023px) { .fc-lateral-chico .cf-menu .ui-riel__lista > .ui-riel__item .ui-riel__texto { display: inline; } }

/* --- Tabla estándar (G-04): FCTabla.estandar --- */
.fct { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.fct .fct-caja { flex: 1 1 auto; min-height: 320px; height: auto; }
.fct-rapidos { margin-bottom: var(--e-2); }
.fct-esqueleto { display: grid; gap: var(--e-3); padding: var(--e-5); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: rgb(var(--g-0)); }
.fct-esqueleto p { margin: 0 0 var(--e-1); font-size: var(--t-13); }
.fct-estado > .ui-vacio, .fct-estado > .ui-falla { border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: rgb(var(--g-0)); }
.fct-filtro { display: grid; gap: 4px; padding: 6px 8px; font-size: var(--t-12); font-weight: 600; color: rgb(var(--g-600)); }
.fct-filtro .ui-select { width: 100%; }
.fct-menu-filtros { min-width: 280px; }

/* --- Programación unificada (G-09) --- */
.fpu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-height: 32px; margin: 0 0 var(--e-2); font-size: var(--t-13); color: rgb(var(--g-700)); }
.fpu .ui-estado { font-size: var(--t-13); }
.fpu__todas { font-size: var(--t-12); color: rgb(var(--g-600)); }
.fpu-dlg .ui-modal__cuerpo label:not(.ui-check) { display: grid; gap: 4px; font-size: var(--t-13); font-weight: 600; color: rgb(var(--g-700)); }
.fpu-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.fpu-nota { font-size: var(--t-12); margin: 0; }
.fpu-error { color: rgb(var(--er-700)); font-size: var(--t-13); margin: 0; }

/* --- Centro de actividad (G-13) --- */
.fc-act-grupo { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-12); font-weight: 700; color: rgb(var(--g-600)); text-transform: uppercase; letter-spacing: .04em; }
.fc-act-item { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3); border-radius: var(--r-control); color: rgb(var(--g-900)); text-decoration: none; }
.fc-act-item + .fc-act-item { border-top: 1px solid rgb(var(--g-100)); }
a.fc-act-item:hover { background: rgb(var(--g-50)); }
.fc-act-item svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: rgb(var(--g-500)); }
.fc-act-item div { display: grid; gap: 2px; min-width: 0; }
.fc-act-item b { font-size: var(--t-13); font-weight: 600; }
.fc-act-item span { font-size: var(--t-12); color: rgb(var(--g-600)); overflow-wrap: anywhere; }
.fc-act-item small { font-size: var(--t-12); color: rgb(var(--g-500)); }
.fc-act-item--nuevo b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--ac-600)); margin-right: 6px; vertical-align: middle; }
.fc-act-item--curso svg { color: rgb(var(--in-600)); }
.fc-act-navegador { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-4); padding: var(--e-3);
                    border: 1px solid var(--linea); border-radius: var(--r-control); font-size: var(--t-13); }
.fc-act-pie { display: flex; gap: var(--e-2); flex-wrap: wrap; }
#fc-btn-actividad { position: relative; }
/* Mis descargas: las mismas tarjetas del panel de la barra, en dos columnas cuando caben */
.dsc-tarjetas { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dsc-tarjetas .fc-item { margin: 0; }
.dsc-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-bottom: var(--e-4); }
.dsc-filtros .ui-select { width: auto; }

/* --- Bloque de estado de un documento (G-08) --- */
.ui-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); padding: var(--e-4); border: 1px solid var(--linea);
             border-radius: var(--r-tarjeta); background: rgb(var(--g-0)); margin-bottom: var(--e-4); }
.ui-bloque__icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgb(var(--g-100)); color: rgb(var(--g-600)); flex: none; }
.ui-bloque__icono svg { width: 22px; height: 22px; }
.ui-bloque--ok .ui-bloque__icono { background: rgb(var(--ok-50)); color: rgb(var(--ok-700)); }
.ui-bloque--aviso .ui-bloque__icono { background: rgb(var(--av-50)); color: rgb(var(--av-700)); }
.ui-bloque--error .ui-bloque__icono { background: rgb(var(--er-50)); color: rgb(var(--er-700)); }
.ui-bloque__texto { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.ui-bloque__texto b { font-size: var(--t-16); font-weight: 650; color: rgb(var(--g-900)); }
.ui-bloque__texto span { font-size: var(--t-13); color: rgb(var(--g-600)); }
.ui-bloque__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fc-correo-campo { display: grid; gap: 4px; font-size: var(--t-13); font-weight: 600; color: rgb(var(--g-700)); }
.fc-correo-campo textarea { resize: vertical; min-height: 72px; padding-top: 8px; }
.fc-correo-error { color: rgb(var(--er-700)); font-size: var(--t-13); margin: 0; }
.dm-avanzado { margin: 0 0 12px; }
.dm-avanzado > summary { cursor: pointer; font-size: var(--t-13); color: rgb(var(--g-600)); padding: 4px 0; list-style-position: inside; }
.dm-avanzado > summary b { color: rgb(var(--g-900)); font-weight: 600; }
.dm-avanzado[open] > summary { margin-bottom: 8px; }
.fpu .ui-estado { white-space: normal; min-width: 0; flex: 0 1 auto; align-items: flex-start; }
.fpu .ui-estado::before { margin-top: 5px; }

/* --- «Ver como» (N-04) --- */
.fc-ver-como { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
               padding: 8px 10px 8px 14px; border-radius: 999px; background: rgb(var(--av-50)); border: 1px solid rgb(var(--av-200));
               color: rgb(var(--g-900)); font-size: var(--t-13); box-shadow: var(--sombra-2); max-width: calc(100vw - 24px); }
.fc-ver-como svg { width: 16px; height: 16px; color: rgb(var(--av-700)); flex: none; }
.fc-ver-como span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- Ayuda: guía rápida y recorrido visual (G-15) --- */
.fc-ayuda-modal__sub { font-size: var(--t-12); font-weight: 700; color: rgb(var(--g-500)); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 4px; }
.fc-ayuda-modal__pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; }
.fc-ayuda-modal__pie .fc-ayuda-modal__cerrar { margin-top: 0; }
.fc-tour { position: fixed; inset: 0; z-index: 200; }
.fc-tour__luz { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgb(var(--g-900) / .55); transition: all .2s ease; pointer-events: none; }
.fc-tour__luz[hidden] { display: none; }
.fc-tour:has(.fc-tour__luz[hidden]) { background: rgb(var(--g-900) / .55); }
.fc-tour__globo { position: fixed; width: min(340px, calc(100vw - 24px)); background: rgb(var(--g-0)); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-2);
                  padding: 16px 16px 12px; display: grid; gap: 6px; }
.fc-tour__titulo { font-size: var(--t-16); color: rgb(var(--g-900)); padding-right: 24px; }
.fc-tour__texto { font-size: var(--t-14); color: rgb(var(--g-700)); margin: 0; line-height: 1.45; }
.fc-tour__pie { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fc-tour__n { font-size: var(--t-12); color: rgb(var(--g-500)); margin-right: auto; }
.fc-tour__cerrar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; font-size: 18px; color: rgb(var(--g-500)); cursor: pointer; }
.fc-tour__cerrar:hover { background: rgb(var(--g-100)); }
.fc-avatar--foto { padding: 0; overflow: hidden; }
.fc-avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Ambiente de pruebas: letrero fijo abajo a la izquierda y barra superior morada para no confundirlo --- */
.fc-ambiente { position: fixed; left: 12px; bottom: 12px; z-index: 95; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
               padding: 6px 12px; border-radius: 10px; background: rgb(124 58 237); color: rgb(var(--g-0)); font-size: 12px; box-shadow: var(--sombra-2);
               max-width: calc(100vw - 24px); }
.fc-ambiente b { font-size: 12.5px; }
.fc-ambiente a { color: rgb(var(--g-0)); text-decoration: underline; }
html.fc-ambiente-pruebas .fc-barra, html.fc-ambiente-pruebas #app-header > header { box-shadow: inset 0 -3px 0 rgb(124 58 237); }
/* Constancia / Opinión: varios a la vez desde tus clientes (modulo-sat.js) */
.msat-cli { margin-bottom: 12px; }
.msat-cli__barra { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.msat-cli__barra .ui-input { flex: 1; }
.msat-cli__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; max-height: 260px; overflow-y: auto; margin-top: 10px; padding: 8px 2px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.msat-cli__item { align-items: flex-start; }
.msat-cli__item span { display: flex; flex-direction: column; min-width: 0; }
.msat-cli__item b { font-weight: 600; font-size: var(--t-13); color: rgb(var(--g-900)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msat-cli__item small { font-size: var(--t-12); color: rgb(var(--g-500)); font-family: ui-monospace, monospace; }
.msat-cli__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.msat-cli__aviso { margin: 10px 0 0; font-size: var(--t-13); color: rgb(var(--av-600)); }
.msat-cli__o { margin: 4px 0 10px; font-size: var(--t-13); font-weight: 600; color: rgb(var(--g-600)); }
.msat-carpeta { margin: 4px 0 14px; }
.msat-carpeta > summary { cursor: pointer; font-size: var(--t-13); font-weight: 600; color: rgb(var(--g-600)); padding: 6px 0; }
.msat-carpeta[open] > summary { margin-bottom: 10px; }

/* Foco visible al navegar con Tab (filas y tarjetas que se abren con Enter) */
tr[tabindex="0"]:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid rgb(var(--ac-600)); outline-offset: -2px; }