/* =====================================================================
   TIPOGRAFÍA E ICONOS SERVIDOS DESDE ESTE SERVIDOR
   ---------------------------------------------------------------------
   Antes la interfaz dependía de dos terceros: Google Fonts para las
   tipografías y un CDN para la tipografía de iconos. Si alguno fallaba —red
   corporativa, bloqueador, mala cobertura— la pantalla aparecía con otra
   letra y con cuadros vacíos en lugar de iconos.

   Ahora:
   · Los títulos usan Lora y el texto de interfaz, Inter: las mismas de
     antes, pero servidas desde aquí (un archivo variable cada una, con
     todos los grosores). Se descargan una vez y se guardan un mes.
   · Mientras llegan, el navegador usa la tipografía del sistema
     (font-display: swap): el texto se lee desde el primer instante.
   · Los iconos son un archivo SVG propio (assets/iconos/iconos.svg).
   ===================================================================== */
@font-face {
    font-family: 'Inter';
    src: url('../fuentes/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fuentes/lora-variable.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('../fuentes/lora-variable-italica.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* Icono del sprite: hereda tamaño y color del texto que acompaña. */
.icono {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* =====================================================================
   TOKENS DE DISEÑO
   ---------------------------------------------------------------------
   Interfaz de trabajo: neutros fríos (gris pizarra) y UN solo acento, el
   color de marca. El acento aparece únicamente en la acción principal, la
   página actual del menú, los íconos de acciones frecuentes, el foco y los
   enlaces; todo lo demás es neutro. Los estados (verde, ámbar, rojo) son
   semánticos y siempre llevan texto o ícono: el color nunca es la única
   señal.

   EL COLOR DE MARCA ES UNO SOLO Y CONFIGURABLE
   · El administrador lo elige en Sistema → Identidad. El servidor lo
     escribe en el <head> (html:root, ver _tema_cabecera.php) junto con
     --sobre-primario: blanco u oscuro, el que se lea mejor sobre ese color.
   · Todo lo demás se deriva de --color-primario con color-mix(): cambiarlo
     re-tematiza la interfaz sin tocar otra regla. Se probó con un azul
     marino y con un amarillo claro (pruebas/contraste.py).
   · En oscuro, el color de marca como texto o ícono se aclara
     (--color-primario-texto) y el botón principal pasa a usar ese tono
     claro con texto oscuro (--relleno-primario / --sobre-relleno): un
     azul marino sobre fondo oscuro no se vería.

   CONTRASTE (WCAG 2.2, medido en pruebas/contraste.py): texto ≥ 4.5:1
   (el principal ≥ 7), bordes de campos e íconos ≥ 3:1, en claro y oscuro.
   Nada de blanco ni negro puros para el texto.

   TIPOGRAFÍA: la del sistema operativo, sin fuentes web. La única excepción
   es la credencial (un documento que se imprime y se descarga), que fija
   las suyas más abajo (.gafete).
   ===================================================================== */
:root {
    --color-primario: #0B1F3A;            /* lo sobrescribe el servidor desde Identidad */
    --sobre-primario: #FFFFFF;            /* texto sobre el color de marca */
    --color-primario-texto: var(--primario-legible, var(--color-primario));   /* marca como texto o ícono sobre tarjetas */
    --tinte-marca: color-mix(in srgb, var(--color-primario) 12%, var(--color-surface));
    --foco: var(--primario-legible, var(--color-primario));
    --relleno-primario: var(--color-primario);       /* fondo del botón principal */
    --sobre-relleno: var(--sobre-primario);

    --color-paper: #F5F6F8;               /* fondo de la aplicación */
    --color-surface: #FFFFFF;             /* tarjetas, menú, barra superior */
    --color-surface-alt: #F9FAFB;         /* encabezado de tabla, botón secundario */
    --color-surface-hover: #F2F4F7;       /* hover de filas y del menú */
    --color-text: #101828;
    --color-text-muted: #475467;          /* ≥ 6.8:1 sobre el fondo */
    --color-titulo: #101828;
    --color-line: #E3E6EB;                /* separadores y bordes de tarjeta */
    --color-borde-campo: #7C8697;         /* bordes de campos: ≥ 3:1 sobre blanco y sobre el fondo */
    --color-campo-deshabilitado: #F2F4F7;
    --color-chip-bg: #EEF0F4;
    --color-chip-text: #475467;
    --color-vacio-bg: #E3E6EB;            /* marco de "sin fotografía" */
    --color-vacio-text: #8A93A3;

    --color-ok: #067647;
    --color-ok-bg: #ECFDF3;
    --color-warn: #A34A07;                /* era #B45309: 4.25:1 sobre su fondo, por debajo de AA */
    --color-warn-bg: #FCEACB;
    --color-warn-text: #92400E;
    --color-warn-line: #F3CB86;
    --color-danger: #B42318;
    --color-danger-bg: #FEF2F2;
    --color-danger-text: #7A1B15;
    --color-danger-line: #FCDCDC;
    --color-info-bg: #DCEBFB;
    --color-info-text: #0B3E73;
    --color-aviso-suave-bg: #FFFBF3;      /* notificación sin leer */
    --color-blanco: #FFFFFF;              /* siempre blanco: texto sobre fondos de color */
    --color-velo-claro: rgba(255,255,255,.12);
    --velo-movil: rgba(8,15,27,.5);

    /* Nombres anteriores: la marca ocupa ahora el lugar del azul marino y
       del dorado, así que los estilos que los usaban siguen funcionando. */
    --color-ink: var(--color-primario);
    --color-ink-soft: var(--color-primario-texto);
    --color-primario-hover: var(--color-primario);
    --color-gold: var(--color-primario-texto);
    --color-gold-soft: var(--tinte-marca);
    --color-titulo-marca: var(--color-primario-texto);

    /* Barra lateral: ya no es un bloque de color, es una superficie más. */
    --barra-fondo: var(--color-surface);
    --barra-fondo-alto: var(--color-surface);
    --barra-fondo-bajo: var(--color-surface);
    --barra-texto: var(--color-text-muted);
    --barra-texto-claro: var(--color-titulo);
    --barra-texto-suave: var(--color-text-muted);
    --barra-icono: var(--color-text-muted);
    --barra-separador: var(--color-line);
    --barra-hover: var(--color-surface-hover);
    --barra-activo: var(--tinte-marca);
    --barra-salir: var(--color-danger);
    --barra-salir-hover: var(--color-danger-bg);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 10px;
    --shadow-card: none;                  /* bordes de 1px en vez de sombras */
    --shadow-lifted: 0 4px 12px rgba(16,24,40,.08);
    --sidebar-ancho: 260px;
    --topbar-alto: 64px;
    --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--fuente-base);
    --font-body: var(--fuente-base);
}

* { box-sizing: border-box; }

/* Compatibilidad móvil (sobre todo Firefox para Android): que el navegador
   no agrande el texto por su cuenta al girar el teléfono, y que ninguna
   imagen pueda provocar desplazamiento horizontal. */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
img, svg { max-width: 100%; }

/* EXCEPCIÓN: imágenes de tamaño fijo (fotografías, logotipos, avatares e
   íconos). La regla anterior evita que una imagen de contenido desborde la
   pantalla, pero aplicada a una foto de 36 × 36 px dentro de una tabla
   ESTRECHA solo el ancho —la altura está fijada—, y el círculo se volvía un
   óvalo: en la lista de Colegiados, con nombres de colegio largos, la foto
   quedaba en 27 × 36 px y a 1024 px de ancho desaparecía. Estas imágenes ya
   tienen su medida exacta: no deben encogerse nunca. */
.miniatura-foto, .foto-actual, .foto-validacion, .gafete-foto, .identidad-foto, .cabecera-foto,
.tablero-logo, .barra-app-avatar img, .previa-icono img, .previa-pestana img, .icono {
    max-width: none;
    flex-shrink: 0;
}

/* Con la app instalada en iPhone y Android con muesca, los laterales
   también tienen zona segura (en horizontal). */
@media (display-mode: standalone) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    background: var(--color-paper);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-titulo);
}
h1 { font-weight: 650; letter-spacing: -0.015em; }

/* Cifras y tablas: los dígitos ocupan lo mismo y las columnas se alinean. */
table, .tabular { font-variant-numeric: tabular-nums; }

a { color: var(--color-primario-texto); }

/* "Saltar al contenido": primer elemento al que llega el teclado. */
.saltar-contenido {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--relleno-primario);
    color: var(--sobre-relleno);
    font-weight: 600;
    text-decoration: none;
}
.saltar-contenido:focus { top: 12px; }

/* =====================================================================
   LOGIN Y PANTALLAS PÚBLICAS DE AUTENTICACIÓN
   ===================================================================== */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--color-paper);
}

.tarjeta-login {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-lifted);
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
}

.tarjeta-login h1 {
    font-size: 1.3rem;
    margin: 0 0 4px;
    text-align: center;
}

.subtitulo {
    text-align: center;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    font-size: 0.9rem;
}

.tarjeta-login label {
    display: block;
    font-size: 0.82rem;
    margin: 14px 0 6px;
    font-weight: 600;
    color: var(--color-titulo);
}

.tarjeta-login input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font-body);
}

.tarjeta-login input:focus {
    outline: none;
    border-color: var(--foco);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}

.tarjeta-login button {
    width: 100%;
    margin-top: 22px;
    padding: 13px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--relleno-primario);
    color: var(--sobre-relleno);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s;
}

.tarjeta-login button:hover { filter: brightness(1.08); }
.tarjeta-login button:active { transform: scale(.98); }

.alerta {
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.alerta-error { background: var(--color-danger-bg); color: var(--color-danger-text); }
.alerta-info { background: var(--color-info-bg); color: var(--color-info-text); }

.enlace-secundario {
    text-align: center;
    margin-top: 18px;
    font-size: 0.85rem;
}

.enlace-secundario a { color: var(--color-primario-texto); text-decoration: none; font-weight: 600; }
.enlace-secundario a:hover { text-decoration: underline; }

/* =====================================================================
   ESTRUCTURA DEL PANEL (sidebar + área principal)
   ===================================================================== */
.app-shell-body { margin: 0; background: var(--color-paper); }
.app-shell { display: flex; min-height: 100vh; }

/* Texto solo para lectores de pantalla (la insignia lo dice con palabras). */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Barra lateral: una superficie más, con un filete a la derecha. Sin bloque
   de color: el único color de la pantalla es el acento de marca. */
.barra-lateral {
    width: var(--sidebar-ancho);
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
}

.marca-lateral {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--topbar-alto);
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-line);
}

.marca-icono { color: var(--color-primario-texto); font-size: 1.35rem; flex-shrink: 0; }
.marca-texto { font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--color-titulo); }

/* "+ Nuevo": el ÚNICO botón relleno de la barra. Abre las altas frecuentes
   (las mismas que las "Acciones frecuentes" del Inicio). */
.menu-nuevo { position: relative; margin: 14px 12px 6px; }
.menu-nuevo > summary { list-style: none; }
.menu-nuevo > summary::-webkit-details-marker { display: none; }
.boton-nuevo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border-radius: var(--radius-sm);
    background: var(--relleno-primario);
    color: var(--sobre-relleno);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    user-select: none;
}
.boton-nuevo:hover { filter: brightness(1.08); }
.boton-nuevo:active { transform: scale(.97); }
.boton-nuevo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.menu-nuevo-lista {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lifted);
}
.menu-nuevo-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9rem;
    text-decoration: none;
}
.menu-nuevo-opcion .icono { width: 16px; height: 16px; color: var(--color-primario-texto); }
.menu-nuevo-opcion:hover { background: var(--color-surface-hover); }
.menu-nuevo-opcion:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.nav-lateral {
    flex: 1;
    padding: 8px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
}

/* Etiqueta de grupo: pequeña, en mayúsculas, apagada. */
.nav-lateral-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    padding: 16px 12px 6px;
}

.nav-lateral-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
}
/* Los nombres largos pasan a una segunda línea; nunca se cortan con «…». */
.nav-lateral-enlace > span:not(.badge-notificacion):not(.solo-lectores) { min-width: 0; overflow-wrap: anywhere; }
.nav-lateral-enlace .icono { width: 20px; height: 20px; color: var(--color-text-muted); }
.nav-lateral-enlace:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-lateral-enlace:hover .icono { color: var(--color-text); }
.nav-lateral-enlace:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
/* Página actual: tinte de marca, texto de marca, más peso y el ícono relleno
   (no depende solo del color). */
.nav-lateral-enlace.activo { background: var(--tinte-marca); color: var(--color-primario-texto); font-weight: 650; }
.nav-lateral-enlace.activo .icono { color: var(--color-primario-texto); }

/* --- Grupo plegable "Sistema" -------------------------------------------
   Región común: los subelementos quedan dentro de un mismo contorno y con
   sangría, así se leen como parte de "Sistema" (ley de región común). */
.nav-grupo { margin: 0; }
.nav-grupo > summary { list-style: none; cursor: pointer; user-select: none; }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo-cabecera .nav-grupo-flecha {
    margin-left: auto;
    width: 14px !important;
    height: 14px !important;
    transition: transform .18s ease;
}
.nav-grupo[open] > .nav-grupo-cabecera .nav-grupo-flecha { transform: rotate(90deg); }
.nav-grupo-cabecera.en-seccion { color: var(--color-titulo); }
.nav-grupo-cabecera.en-seccion > .icono:first-child { color: var(--color-primario-texto); }

.nav-grupo-contenido {
    margin: 2px 0 6px 21px;
    padding-left: 10px;
    border-left: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-subenlace { padding: 9px 12px; font-size: 0.88rem; }
.nav-subenlace .icono { width: 16px; height: 16px; }
.nav-grupo-separador { height: 1px; margin: 5px 12px; background: var(--color-line); }

/* Insignia de pendientes: círculo rojo con el número; el texto accesible
   (.solo-lectores) dice qué cuenta. */
.badge-notificacion {
    background: #D92D20;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 22px;
    padding: 1px 7px;
    margin-left: auto;
    line-height: 1.5;
    text-align: center;
}

.nav-lateral-pie { padding: 10px 12px 14px; border-top: 1px solid var(--color-line); }
.nav-lateral-salir:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
.nav-lateral-salir:hover .icono { color: var(--color-danger-text); }

/* --- Barra superior de escritorio (≥ 992 px) -------------------------- */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--topbar-alto);
    padding: 0 28px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}
.migas { flex: 1; min-width: 0; font-size: 0.86rem; color: var(--color-text-muted); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.migas li + li::before { content: "›"; margin-right: 6px; color: var(--color-text-muted); }
.migas a { color: var(--color-text-muted); text-decoration: none; }
.migas a:hover { color: var(--color-text); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--color-titulo); font-weight: 700; }

.buscador-global { position: relative; width: min(320px, 32vw); }
.buscador-global .icono {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}
.buscador-global input {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 36px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
}
.buscador-global input::placeholder { color: var(--color-text-muted); }
.buscador-global input:hover { border-color: var(--color-borde-campo); }
.buscador-global input:focus {
    outline: none;
    border-color: var(--foco);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 18%, transparent);
}
.buscador-global kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.6;
    pointer-events: none;
}
.buscador-global input:focus + kbd { display: none; }

.barra-superior-acciones { display: flex; align-items: center; gap: 8px; }
.barra-superior .controles-cabecera { display: flex; gap: 6px; }
.barra-superior .boton-cabecera {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
}
.barra-superior .boton-cabecera:hover { background: var(--color-surface-hover); color: var(--color-text); }
.barra-superior .boton-cabecera svg { width: 18px; height: 18px; }

.usuario-barra { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.usuario-barra-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.usuario-barra-avatar img { width: 100%; height: 100%; object-fit: cover; }
.usuario-barra-datos { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.usuario-barra-nombre { font-size: 0.86rem; font-weight: 600; color: var(--color-titulo); max-width: 160px; overflow-wrap: anywhere; }
.usuario-barra-rol { font-size: 0.78rem; color: var(--color-text-muted); }

.area-principal { flex: 1; margin-left: var(--sidebar-ancho); min-width: 0; display: flex; flex-direction: column; }


.contenido-panel { max-width: 1440px; margin: 0 auto; padding: 32px 28px 60px; width: 100%; }

/* Ya no hay barra lateral deslizable: por debajo de 992 px el panel usa el
   armazón móvil (barra inferior y hojas), y de 992 px en adelante la barra
   lateral es fija, como siempre. Ver la sección "Experiencia móvil". */

/* =====================================================================
   ENCABEZADOS DE SECCIÓN Y BOTONES
   ===================================================================== */
.encabezado-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.encabezado-seccion h1 { font-size: 1.5rem; margin: 0; }
.encabezado-seccion > div, .encabezado-seccion > a { display: flex; gap: 10px; flex-wrap: wrap; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
    font-family: var(--font-body);
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.boton-primario { background: var(--relleno-primario); color: var(--sobre-relleno); border-color: var(--color-primario-texto); }
.boton-primario:hover { filter: brightness(1.08); }
.boton-primario:active { transform: scale(.97); }

/* Secundario: contorno y texto de marca sobre la superficie. */
.boton-secundario { background: var(--color-surface); color: var(--color-primario-texto); border-color: var(--color-primario-texto); }
.boton-secundario:hover { background: var(--tinte-marca); }

.boton-advertencia { background: var(--color-surface); color: var(--color-warn-text); border-color: var(--color-warn-line); }
.boton-advertencia:hover { background: var(--color-warn-bg); }

.boton-peligro { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-line); }
.boton-peligro:hover { background: var(--color-danger-bg); }

.boton-enlace {
    background: none;
    border: none;
    color: var(--color-ink-soft);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
    font-family: var(--font-body);
}

.boton-enlace-peligro { color: var(--color-danger); }
.form-en-linea { display: inline; }

/* =====================================================================
   GAFETE CON FONDO PERSONALIZADO
   ---------------------------------------------------------------------
   Cuando el administrador carga una imagen de fondo, el gafete renuncia
   a su decoración propia —franja azul, reglas doradas y pie— y queda
   solo con los datos sobre el diseño. Las posiciones de los datos NO
   cambian: son las mismas que documenta la plantilla guía, para que un
   fondo diseñado sobre ella encaje exactamente.
   ===================================================================== */
.gafete.gafete-con-fondo {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    /* La vista previa debe tener la MISMA proporción que la descarga
       (1012 × 638). Sin esto, la altura la marca el contenido y el fondo
       se recorta de forma distinta a como saldrá en el archivo. */
    aspect-ratio: 1012 / 638;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gafete.gafete-con-fondo .gafete-autoridades { border-top: 0; padding: 2px 14px 4px; }
.gafete.gafete-con-fondo .gafete-pie { padding: 0 14px 6px; }

/* Con la altura fijada por la proporción, el contenido debe caber dentro.
   Se compacta ligeramente: es una VISTA PREVIA; el archivo descargado se
   dibuja aparte, con medidas exactas. */
.gafete.gafete-con-fondo .gafete-cuerpo { padding: 8px 14px 4px; gap: 10px; }
.gafete.gafete-con-fondo .gafete-nombre { font-size: 0.86rem; line-height: 1.2; }
.gafete.gafete-con-fondo .gafete-linea { font-size: 0.68rem; margin: 1px 0; }
.gafete.gafete-con-fondo .gafete-autoridad-nombre { font-size: 0.62rem; }
.gafete.gafete-con-fondo .gafete-autoridad-cargo { font-size: 0.55rem; }
.gafete.gafete-con-fondo .gafete-foto { width: 64px; height: 64px; }
.gafete.gafete-con-fondo .gafete-qr { width: 78px; height: 78px; padding: 5px; }
.gafete.gafete-con-fondo .gafete-qr img { width: 68px !important; height: 68px !important; }
.gafete.gafete-con-fondo .etiqueta { font-size: 0.6rem; padding: 2px 8px; }

/* El recuadro blanco tras el QR es obligatorio: sin él, un fondo oscuro
   o con textura impediría que las cámaras lean el código. */
.gafete.gafete-con-fondo .gafete-qr {
    background: var(--color-surface);
    border-radius: 3px;
}

/* =====================================================================
   DISEÑO DE LA CREDENCIAL (pantalla de configuración)
   ===================================================================== */
.rejilla-diseno {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.columna-diseno-principal, .columna-diseno-guia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.previsualizacion-fondo {
    margin: 4px 0 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-paper);
}

.previsualizacion-fondo img { display: block; width: 100%; height: auto; }

.previsualizacion-fondo-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    aspect-ratio: 1012 / 638;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    border-style: dashed;
}

.formulario-retirar { margin-top: 14px; text-align: right; }
.boton-ancho-total { width: 100%; margin: 4px 0 16px; }

.lista-zonas { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.lista-zonas li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }

.zona-marca {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 2px solid;
}

.zona-marca-libre        { border-color: #1D7A5F; background: #1D7A5F22; }
.zona-marca-foto         { border-color: #16305C; background: #16305C22; }
.zona-marca-datos        { border-color: #966E1E; background: #966E1E22; }
.zona-marca-qr           { border-color: #6E3C8C; background: #6E3C8C22; }
.zona-marca-autoridades  { border-color: #6E7887; background: #6E788722; }

@media (max-width: 1100px) {
    .rejilla-diseno { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   IDENTIDAD DE LA APP (nombre, color e ícono instalable)
   ---------------------------------------------------------------------
   Vista previa de cómo se verá el ícono en Android (recortado en
   círculo), en iPhone (cuadrado redondeado) y en la pestaña del navegador.
   ===================================================================== */
.formulario-identidad { max-width: none; }
.formulario-identidad .subtitulo-tarjeta { margin-top: 22px; }
.formulario-identidad .subtitulo-tarjeta:first-of-type { margin-top: 0; }

.fila-campos-identidad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.campo-color { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.campo-color input { margin-bottom: 0 !important; }
.campo-color input[type="color"] {
    width: 48px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
}
.campo-color input[type="text"] { max-width: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

.previa-dispositivo { margin-top: 14px; }
.previa-etiqueta-dispositivo {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Fondo de pantalla de inicio: neutro y fijo, para juzgar el ícono igual
   en tema claro y oscuro. */
.previa-pantalla {
    display: flex;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, #3B4A6B 0%, #1C2436 100%);
}
.previa-iphone .previa-pantalla { background: linear-gradient(160deg, #8C7AA8 0%, #3F4F7A 100%); }

.previa-app { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; }

.previa-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.previa-icono img { display: block; width: 100%; height: 100%; object-fit: cover; }
.previa-icono img.previa-compuesta { object-fit: cover; }
.previa-icono-circulo { border-radius: 50%; }
.previa-icono-ios { width: 58px; height: 58px; border-radius: 13px; }

.previa-nombre {
    max-width: 80px;
    overflow: hidden;
    font-size: .7rem;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.previa-pestana {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--color-surface);
    font-size: .82rem;
    color: var(--color-titulo);
}
.previa-pestana img { width: 16px; height: 16px; flex-shrink: 0; object-fit: cover; }
.previa-pestana span[data-previa-nombre] { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.previa-pestana-cerrar { color: var(--color-muted); }

@media (max-width: 575.98px) {
    .fila-campos-identidad { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   PANTALLA DE CREDENCIAL
   ---------------------------------------------------------------------
   Estructura en dos columnas para escritorio: a la izquierda la
   credencial en sí —lo que se mira y se descarga—, a la derecha su
   gestión. Antes todo caía en una sola columna estrecha que dejaba
   media pantalla vacía y obligaba a desplazarse para relacionar el
   gafete con sus datos.
   ===================================================================== */
.panel-identidad {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px 22px;
    margin-bottom: 20px;
}

.identidad-foto {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-line);
}

.identidad-foto-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper);
    color: var(--color-text-muted);
    font-size: 2rem;
}

.identidad-datos { flex: 1 1 260px; min-width: 0; }

.identidad-nombre {
    margin: 0 0 4px;
    font-size: 1.35rem;
    line-height: 1.25;
    word-break: break-word;
}

.identidad-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.identidad-meta i { color: var(--color-gold); margin-right: 2px; }

.identidad-estados { display: flex; gap: 28px; flex-shrink: 0; }

.identidad-estado-bloque { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.identidad-estado-titulo {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
}

/* Dos columnas: la de la credencial tiene ancho fijo porque el gafete
   no crece; el resto del espacio va a la gestión. */
.rejilla-credencial {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* La credencial acompaña al desplazamiento: al revisar el historial o
   cambiar el estado se sigue viendo de qué credencial se habla. */
/* minmax(0,1fr) es imprescindible: sin él, el ancho mínimo de la tabla
   de versiones anteriores (560 px) empuja la columna fuera de su carril
   y desborda la página. Con esto la tarjeta se encoge y es la tabla la
   que se desplaza dentro de su propia envoltura. */
.columna-credencial {
    position: sticky;
    top: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.columna-gestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.tarjeta-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

.tarjeta-panel > .subtitulo-tarjeta:first-child { margin-top: 0; }
.tarjeta-panel .gafete { margin: 0 auto; }
.tarjeta-panel .contenedor-qr { margin: 0; padding: 0; text-align: center; }
.tarjeta-panel .tabla-datos-envoltura { box-shadow: none; border: 1px solid var(--color-line); }

.acciones-descarga { display: flex; gap: 10px; margin-top: 16px; }
.acciones-descarga .boton { flex: 1; }

.acciones-estado { display: flex; flex-wrap: wrap; gap: 10px; }

/* Lista de datos en dos columnas: etiqueta a la izquierda, valor a la
   derecha, con separadores finos. Se lee de un vistazo. */
.lista-datos { margin: 0; }

.lista-datos-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-paper);
}

.lista-datos-fila:last-child { border-bottom: 0; padding-bottom: 0; }

.lista-datos dt {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.lista-datos dd {
    margin: 0;
    text-align: right;
    font-size: 0.92rem;
    color: var(--color-text);
    word-break: break-word;
}

.campos-en-linea { display: flex; gap: 14px; flex-wrap: wrap; }
.campos-en-linea > div { flex: 1 1 180px; min-width: 0; }
.campos-en-linea input { width: 100%; }

/* Dentro de la columna de gestión, estos bloques son una tarjeta más:
   ocupan todo el ancho disponible y no arrastran su caja propia. */
.columna-gestion .zona-peligro { max-width: none; margin-top: 0; }

.tarjeta-panel > .detalle-renovar {
    max-width: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

/* Por debajo de 1100 px no hay barra lateral fija y el contenido es más
   estrecho: una sola columna, con la credencial primero. */
@media (max-width: 1100px) {
    .rejilla-credencial { grid-template-columns: minmax(0, 1fr); }
    .columna-credencial { position: static; }
    .tarjeta-panel .gafete { margin: 0 auto; }
}

@media (max-width: 640px) {
    .panel-identidad { padding: 16px; gap: 14px; }
    .identidad-foto { width: 58px; height: 58px; }
    .identidad-nombre { font-size: 1.12rem; }
    .identidad-estados { gap: 20px; width: 100%; }
    .lista-datos-fila { flex-direction: column; align-items: flex-start; gap: 3px; }
    .lista-datos dd { text-align: left; }
    .acciones-estado .boton { width: 100%; }
    .acciones-estado form { width: 100%; }
}

/* =====================================================================
   SUBIDA AUTOMÁTICA DE IMAGEN — aviso de estado
   ===================================================================== */
.aviso-subida {
    margin: 6px 0 0;
    font-size: 0.82rem;
    min-height: 1.2em;
    color: var(--color-text-muted);
}

.aviso-subida-proceso { color: var(--color-text-muted); }
.aviso-subida-exito   { color: var(--color-ok); font-weight: 600; }
.aviso-subida-error   { color: var(--color-danger); font-weight: 600; }

/* La vista previa cambia sola al guardarse: una transición suave evita
   que el salto de imagen pase desapercibido. */
.foto-actual { transition: opacity .2s ease; }

/* =====================================================================
   ACCIONES EN TABLA — botones de icono
   ---------------------------------------------------------------------
   Cada botón lleva SIEMPRE un aria-label (lo que anuncia el lector de
   pantalla) y un title (la ayuda emergente nativa del navegador). No se
   usa una ayuda emergente en CSS porque la tabla vive dentro de un
   contenedor con scroll, que la recortaría.

   El color nunca es el único indicador: cada acción tiene además un
   icono distinto y su propia etiqueta.
   ===================================================================== */
.acciones-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.boton-icono {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.boton-icono:hover {
    background: var(--color-paper);
    border-color: var(--color-line);
    color: var(--color-titulo);
}

/* Anillo de foco visible solo para navegación con teclado. */
.boton-icono:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.boton-icono-principal { color: var(--color-ink-soft); }
.boton-icono-exito:hover      { color: var(--color-ok);     background: var(--color-ok-bg);     border-color: transparent; }
.boton-icono-advertencia:hover{ color: var(--color-warn);   background: var(--color-warn-bg);   border-color: transparent; }
.boton-icono-peligro:hover    { color: var(--color-danger); background: var(--color-danger-bg); border-color: transparent; }

/* Separa las acciones destructivas del resto: evita pulsarlas por error. */
.acciones-separador {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--color-line);
    flex-shrink: 0;
}

/* En pantallas táctiles el objetivo crece al mínimo recomendado. */
@media (pointer: coarse) {
    .boton-icono { width: 42px; height: 42px; font-size: 1.1rem; }
    .acciones-fila { gap: 4px; }
}

/* =====================================================================
   TABLAS (con scroll horizontal afinado para móvil)
   ===================================================================== */
.tabla-datos-envoltura {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
}

.tabla-datos {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: var(--color-surface);
    table-layout: auto;
}

.tabla-datos th, .tabla-datos td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.88rem;
}

.tabla-datos th {
    background: var(--color-surface-alt);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.tabla-datos tbody tr:hover { background: var(--color-surface-hover); }
.tabla-datos tbody tr:last-child td { border-bottom: none; }

/* Con iconos la columna ocupa mucho menos: se fija al contenido y se
   alinea a la derecha, el borde donde el ojo espera las acciones.
   El selector repetido gana en especificidad a la regla general de
   alineación de `.tabla-datos th`, para que el encabezado quede sobre
   los botones y no desplazado a la izquierda. */
.tabla-datos th.col-acciones,
.tabla-datos td.col-acciones { white-space: nowrap; width: 1%; text-align: right; }

.etiqueta {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.etiqueta-activo { background: var(--color-ok-bg); color: var(--color-ok); }
.etiqueta-inactivo { background: var(--color-chip-bg); color: var(--color-chip-text); }
.etiqueta-suspendido { background: var(--color-warn-bg); color: var(--color-warn); }

.miniatura-foto {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

.miniatura-vacia {
    background: var(--color-vacio-bg);
    color: var(--color-vacio-text);
    text-align: center;
    line-height: 36px;
    font-size: 0.7rem;
}

.foto-actual {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    object-fit: cover;
    margin-bottom: 16px;
    display: block;
}

.texto-vacio { color: var(--color-text-muted); }

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.formulario-tarjeta, .tarjeta-credencial-info {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 26px;
    max-width: 520px;
    box-shadow: var(--shadow-card);
}

.tarjeta-credencial-info { margin-bottom: 20px; }
.tarjeta-credencial-info p { margin: 6px 0; font-size: 0.9rem; }

.formulario-tarjeta label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-titulo);
}

.formulario-tarjeta input,
.formulario-tarjeta select,
.formulario-tarjeta input[type="file"] {
    width: 100%;
    padding: 11px 13px;
    min-height: 44px;
    border: 1px solid var(--color-borde-campo);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    margin-bottom: 6px;
    font-family: var(--font-body);
    background: var(--color-surface);
}

.formulario-tarjeta input:focus, .formulario-tarjeta select:focus {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
    border-color: var(--foco);
}

.formulario-tarjeta input:disabled { background: var(--color-campo-deshabilitado); color: var(--color-text-muted); }

.ayuda-campo { font-size: 0.8rem; color: var(--color-text-muted); margin: 4px 0 14px; line-height: 1.5; }

.acciones-formulario { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.acciones-formulario form { display: inline-block; margin-right: 0; }

.subtitulo-tarjeta { font-size: 1rem; margin: 0 0 16px; }

/* =====================================================================
   BARRA DE FILTROS
   ===================================================================== */
.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    background: var(--color-surface);
    padding: 14px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.barra-filtros input[type="text"] {
    padding: 10px 13px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 220px;
    font-family: var(--font-body);
}

.barra-filtros select {
    padding: 10px 13px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: var(--color-surface);
    font-family: var(--font-body);
}

/* =====================================================================
   CREDENCIAL / GAFETE / QR
   ===================================================================== */
.contenedor-qr {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 24px;
    max-width: 280px;
    text-align: center;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}

.acciones-credencial { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.acciones-credencial form { margin: 0; }

.detalle-renovar {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    max-width: 320px;
    box-shadow: var(--shadow-card);
}

.detalle-renovar summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-ink-soft);
    list-style: none;
}

.detalle-renovar summary::-webkit-details-marker { display: none; }
.detalle-renovar[open] summary { margin-bottom: 4px; }
.detalle-renovar form { margin-top: 14px; }

.detalle-renovar label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 10px 0 4px;
}

.detalle-renovar input,
.detalle-renovar select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-family: var(--font-body);
    background: var(--color-surface);
}

.detalle-renovar button { margin-top: 12px; width: 100%; }

.zona-peligro {
    margin-top: 28px;
    border: 1px solid var(--color-danger-line);
    background: var(--color-danger-bg);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    max-width: 480px;
}

.zona-peligro-titulo {
    font-size: 0.85rem;
    color: var(--color-danger-text);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.zona-peligro-texto { font-size: 0.8rem; color: var(--color-danger-text); margin: 0 0 14px; line-height: 1.5; }

.seccion-gafete { margin-bottom: 24px; }

.gafete {
    width: 340px;
    max-width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    border: 1px solid var(--color-line);
    margin-bottom: 16px;
}

.gafete-encabezado {
    background: var(--color-ink);
    color: var(--color-blanco);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    padding: 9px 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-gold);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.gafete-cuerpo { display: flex; align-items: center; gap: 12px; padding: 14px; }

.gafete-foto {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-vacio-bg);
}

.gafete-foto-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-vacio-text);
    font-size: 0.65rem;
    text-align: center;
}

.gafete-datos { flex: 1; min-width: 0; }

.gafete-nombre {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    margin: 0 0 4px;
    color: var(--color-ink);
    line-height: 1.25;
}

.gafete-linea { font-size: 0.75rem; color: var(--color-text-muted); margin: 2px 0; }

.gafete-qr {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    padding: 8px;
    background: var(--color-surface);
    box-sizing: border-box;
    overflow: hidden;
}

.gafete-qr img { width: 80px !important; height: 80px !important; display: block; }

.gafete-pie { padding: 8px 14px 12px; text-align: center; }

/* Autoridades del gafete: solo nombre y cargo. Las firmas se retiraron del
   sistema; el nombre es el dato primario de la autoridad. */
.gafete-autoridades {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--color-line);
    margin-top: 2px;
}

.gafete-autoridad-item {
    text-align: center;
    min-width: 0;
}

.gafete-autoridad-nombre {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
}

.gafete-autoridad-cargo {
    display: block;
    font-size: 0.6rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 1px;
}

/* =====================================================================
   DASHBOARD (tablero)
   ---------------------------------------------------------------------
   Pantalla de trabajo, no de presentación: superficies planas con un filete
   de 1 px en lugar de sombras, una sola franja de indicadores, y el color
   reservado para lo que significa algo (verde en regla, ámbar por vencer o
   vencido, rojo suspendido; gris para lo inactivo). Todo sale de los
   tokens de la paleta, así que claro, oscuro y automático funcionan igual.
   ===================================================================== */
.tablero-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.tablero-cabecera-titulo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tablero-cabecera h1 { font-size: 1.5rem; margin: 0; }
.tablero-subtitulo { margin: 2px 0 0; color: var(--color-text-muted); font-size: 0.88rem; }
.tablero-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--color-line);
    background: var(--color-surface);
}

/* Panel de resumen: un contenedor, tres columnas, cada una un enlace. */
.panel-resumen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    margin-bottom: 28px;
}
.resumen-celda {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 22px 20px;
    min-width: 0;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    transition: background-color .12s;
}
.resumen-celda:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.resumen-celda:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.resumen-celda + .resumen-celda { border-left: 1px solid var(--color-line); }
.resumen-celda:hover { background: var(--color-surface-hover); }
.resumen-celda:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.resumen-etiqueta { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); }
.resumen-cifra {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-titulo);
    font-variant-numeric: tabular-nums;
}
.resumen-cifra-riesgo { color: var(--color-danger); }
html[data-tema-efectivo="oscuro"] .resumen-cifra-riesgo { color: #F97066; }
.resumen-detalle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.resumen-detalle .icono { width: 14px; height: 14px; flex-shrink: 0; }

.inicio-titulo-seccion {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--color-titulo);
}
.acciones-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.accion-celda {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: background-color .12s, border-color .12s;
}
.accion-celda:hover { background: var(--color-surface-hover); border-color: var(--color-borde-campo); }
.accion-celda:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.accion-icono {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
}
.accion-icono .icono { width: 20px; height: 20px; }
.accion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accion-titulo { font-size: 0.92rem; font-weight: 600; color: var(--color-titulo); }
.accion-descripcion { font-size: 0.8rem; color: var(--color-text-muted); }
.accion-flecha { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }

.tablero-rejilla { display: grid; gap: 16px; margin-bottom: 16px; }
.tablero-rejilla-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tablero-tarjeta {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 18px 20px 12px;
    min-width: 0;
}
.tablero-tarjeta-titulo {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--color-titulo);
}

/* Matices de estado: se usan en la barra, en los puntos y en los avisos. */
.matiz-ok      { background: var(--color-ok); }
.matiz-aviso   { background: var(--color-warn); }
.matiz-peligro { background: var(--color-danger); }
.matiz-neutro  { background: var(--color-borde-campo); }

/* Distribución por estado: barra proporcional + lista. */
.distribucion-barra {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-chip-bg);
    margin-bottom: 10px;
}
.distribucion-tramo { min-width: 6px; border-radius: 999px; }

.distribucion-lista { list-style: none; margin: 0; padding: 0; }
.distribucion-fila {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto 3.25rem;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 0.875rem;
}
.distribucion-fila + .distribucion-fila { border-top: 1px solid var(--color-line); }
.distribucion-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.distribucion-etiqueta { color: var(--color-text); }
.distribucion-valor { font-weight: 600; color: var(--color-titulo); font-variant-numeric: tabular-nums; }
.distribucion-porcentaje {
    text-align: right;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.distribucion-fila.es-cero .distribucion-etiqueta,
.distribucion-fila.es-cero .distribucion-valor { color: var(--color-text-muted); font-weight: 500; }

/* Listas de filas: avisos y accesos. */
.tablero-lista { list-style: none; margin: 0 -8px; padding: 0; }
.tablero-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.875rem;
    text-decoration: none;
}
.tablero-fila-texto { flex: 1; min-width: 0; }
.tablero-fila-enlace { transition: background-color .12s; }
.tablero-fila-enlace:hover { background: var(--color-surface-hover); }
.tablero-fila-enlace:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.tablero-fila-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-chip-bg);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.tablero-fila-icono .icono { width: 16px; height: 16px; }
.tablero-fila-enlace:hover .tablero-fila-icono { color: var(--color-titulo); }
.tablero-fila-flecha { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }
/* Los avisos sin enlace no llevan hueco de flecha ni se ven pulsables. */
.tablero-lista .distribucion-punto { margin: 0 12px 0 10px; }

.tablero-vacio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 12px 0 4px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.tablero-vacio .icono { width: 18px; height: 18px; color: var(--color-ok); flex-shrink: 0; }

@media (max-width: 991.98px) {
    /* En el móvil el botón "+" de la barra inferior ya cumple esta función. */
    .tablero-accion-principal { display: none; }
}
@media (max-width: 760px) {
    .panel-resumen { grid-template-columns: minmax(0, 1fr); }
    .resumen-celda, .resumen-celda:first-child, .resumen-celda:last-child { border-radius: 0; }
    .resumen-celda:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .resumen-celda:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
    .resumen-celda + .resumen-celda { border-left: 0; border-top: 1px solid var(--color-line); }
    .acciones-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .tablero-rejilla-dos { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   NOTIFICACIONES
   ===================================================================== */
.lista-notificaciones { display: flex; flex-direction: column; gap: 8px; }

.item-notificacion {
    display: flex;
    gap: 14px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border: 1px solid var(--color-line);
}

.item-notificacion-nueva { border-color: var(--color-primario-texto); background: var(--tinte-marca); }

.item-notificacion-icono {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-paper);
    color: var(--color-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.item-notificacion-mensaje { margin: 0 0 4px; font-size: 0.9rem; color: var(--color-text); }
.item-notificacion-fecha { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); }

/* =====================================================================
   HISTORIAL DE CREDENCIAL
   ===================================================================== */
.panel-historial {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
    max-width: 600px;
}

.lista-historial { list-style: none; margin: 0; padding: 0; }

.lista-historial li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line);
}

.lista-historial li:last-child { border-bottom: none; padding-bottom: 0; }

.lista-historial-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primario-texto);
    margin-top: 6px;
    flex-shrink: 0;
}

.lista-historial-texto { margin: 0; font-size: 0.87rem; color: var(--color-text); }
.lista-historial-meta { margin: 3px 0 0; font-size: 0.76rem; color: var(--color-text-muted); }

/* =====================================================================
   PANTALLA "MI CREDENCIAL" DEL COLEGIADO
   ---------------------------------------------------------------------
   Pantalla pensada para el teléfono y para usarse de pie: primero el
   estado (la pregunta real del usuario), después la credencial, luego los
   avisos, y al final —plegado— lo que casi nunca se consulta. Las
   descargas viven en una barra fija al alcance del pulgar.
   ===================================================================== */
.pantalla-colegiado {
    background: var(--color-paper);
    min-height: 100vh;
}

.cabecera-colegiado {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--color-surface);
    color: var(--color-titulo);
    border-bottom: 1px solid var(--color-line);
}

.cabecera-identidad { display: flex; align-items: center; gap: 11px; min-width: 0; }

.cabecera-foto {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    background: var(--tinte-marca);
}

.cabecera-foto-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primario-texto);
}

.cabecera-textos { min-width: 0; }

.cabecera-nombre {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.25;
    /* Un nombre largo no debe empujar los controles fuera de la pantalla. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabecera-colegio {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: var(--barra-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contenido-colegiado {
    max-width: 520px;
    margin: 0 auto;
    padding: 18px 16px 36px;
}

/* Espacio para que la barra fija nunca tape el final del contenido. */
.contenido-colegiado.con-barra-acciones {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

/* --- 1. Panel de estado ------------------------------------------------ */
.panel-estado {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    margin-bottom: 18px;
}

.panel-estado-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.panel-estado-icono svg { width: 24px; height: 24px; }
.panel-estado-cuerpo { min-width: 0; flex: 1; }

.panel-estado-titulo {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    margin: 0 0 4px;
    line-height: 1.3;
}

.panel-estado-texto {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.panel-estado-ok     .panel-estado-icono { background: var(--color-ok-bg); color: var(--color-ok); }
.panel-estado-aviso  .panel-estado-icono { background: var(--color-warn-bg); color: var(--color-warn); }
.panel-estado-alerta .panel-estado-icono { background: var(--color-danger-bg); color: var(--color-danger); }

/* Cuánto del periodo de vigencia va transcurrido. */
.vigencia-progreso { margin-top: 14px; }

.vigencia-pista {
    height: 8px;
    border-radius: 999px;
    background: var(--color-chip-bg);
    overflow: hidden;
}

.vigencia-pista span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-ok);
}

.panel-estado-aviso .vigencia-pista span { background: var(--color-warn); }

.vigencia-extremos {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* --- Bloques de contenido --------------------------------------------- */
.bloque-colegiado {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
}

.titulo-bloque {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

.bloque-colegiado .gafete { margin: 0 auto 16px; }

.boton-ancho { width: 100%; }
.icono-boton { width: 18px; height: 18px; flex-shrink: 0; }

/* --- 3. Avisos --------------------------------------------------------- */
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.aviso-vacio {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-md);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.aviso {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
}

.aviso-icono { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.aviso-icono svg { width: 20px; height: 20px; }

.aviso-titulo { margin: 0 0 3px; font-size: 0.9rem; font-weight: 600; color: var(--color-titulo); }
.aviso-texto { margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--color-text-muted); }

.aviso-ok     { background: var(--color-ok-bg); border-color: transparent; }
.aviso-ok     .aviso-icono { color: var(--color-ok); }
.aviso-aviso  { background: var(--color-warn-bg); border-color: transparent; }
.aviso-aviso  .aviso-icono { color: var(--color-warn); }
.aviso-alerta { background: var(--color-danger-bg); border-color: transparent; }
.aviso-alerta .aviso-icono { color: var(--color-danger); }

/* --- Secciones plegables ---------------------------------------------- */
.plegable { margin-top: 14px; }
.bloque-colegiado.plegable { margin-top: 0; padding: 0; }

.plegable-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Altura cómoda para el dedo, no solo para el ratón. */
    min-height: 52px;
    padding: 14px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-titulo);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-lg);
}

.plegable-titulo::-webkit-details-marker { display: none; }
.plegable-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.plegable-marca {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.plegable[open] .plegable-marca { transform: rotate(-135deg); margin-bottom: -2px; }

.plegable > :not(summary) { padding: 0 18px 18px; }
.plegable.plegable > .linea-tiempo { padding-top: 2px; }

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 10px; }

.linea-tiempo li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 0.84rem;
    padding-left: 14px;
    border-left: 2px solid var(--color-line);
}

.linea-tiempo-fecha { color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.linea-tiempo-texto { color: var(--color-text); }

.datos-colegiado {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 8px 16px;
    font-size: 0.86rem;
}

.datos-colegiado dt { color: var(--color-text-muted); }
.datos-colegiado dd { margin: 0; color: var(--color-text); text-align: right; word-break: break-word; }

.nota-datos { margin: 14px 0 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }

.pie-colegiado { margin-top: 22px; }

/* --- Barra de acciones fija ------------------------------------------- */
.barra-acciones-colegiado {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -6px 20px rgba(11,31,58,0.08);
}

.barra-acciones-botones {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
}

.barra-acciones-botones .boton { flex: 1; height: 50px; }
.barra-acciones-colegiado .ayuda-campo { max-width: 520px; margin: 0 auto 8px; text-align: center; }
.barra-acciones-colegiado .ayuda-campo:empty { display: none; }

/* --- Visor del QR a pantalla completa --------------------------------- */
.sin-desplazamiento { overflow: hidden; }

.visor-qr {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8,15,27,.82);
}

.visor-qr.visible { display: flex; }

/* El panel es BLANCO siempre, también en tema oscuro: un lector de QR
   necesita contraste real entre el código y su fondo. */
.visor-qr-panel {
    background: #FFFFFF;
    color: #1A2333;
    border-radius: var(--radius-lg);
    padding: 22px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: var(--shadow-lifted);
}

.visor-qr-marco { display: flex; justify-content: center; }
.visor-qr-marco img { width: 100%; max-width: 280px; height: auto; display: block; }

.visor-qr-numero {
    margin: 14px 0 2px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: #0B1F3A;
}

.visor-qr-nota { margin: 0 0 18px; font-size: 0.82rem; color: #5C6675; line-height: 1.45; }
.visor-qr-panel .boton-secundario { background: #F6F7F9; color: #0B1F3A; border-color: #E2E6EC; }

/* En teléfonos estrechos el gafete conserva sus 340 px de ancho, así que
   la foto y el QR ceden unos píxeles para que el nombre y la vigencia no
   se partan en tres líneas. La descarga no se ve afectada: se dibuja en su
   propio lienzo de 1012 x 638, no a partir de estos tamaños. */
@media (max-width: 430px) {
    .contenido-colegiado { padding-left: 12px; padding-right: 12px; }
    .bloque-colegiado { padding: 16px 13px; }
    .bloque-colegiado.plegable { padding: 0; }
    .plegable-titulo { padding: 14px 15px; }
    .plegable > :not(summary) { padding: 0 15px 16px; }
    .gafete-cuerpo { gap: 9px; padding: 12px; }
    .gafete-foto { width: 60px; height: 60px; }
    .gafete-qr { width: 82px; height: 82px; padding: 6px; }
    .gafete-qr img { width: 70px !important; height: 70px !important; }
    .gafete-autoridades { gap: 14px; }
}

/* En pantallas grandes la barra de acciones deja de ser flotante: ahí no
   hay "zona del pulgar" que respetar y una barra fija solo roba espacio. */
@media (min-width: 720px) {
    .barra-acciones-colegiado {
        position: static;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        margin: 0 auto;
        max-width: 520px;
        padding: 14px 16px;
    }
    .contenido-colegiado.con-barra-acciones { padding-bottom: 24px; }
    .pantalla-colegiado { display: flex; flex-direction: column; }
    .cabecera-colegiado { padding: 14px 24px; }
}

/* =====================================================================
   RESPONSIVO — AJUSTES FINOS PARA MÓVIL
   ===================================================================== */
/* =====================================================================
   TABLAS EN MÓVIL — cada fila se convierte en una tarjeta
   ---------------------------------------------------------------------
   Una tabla de siete columnas no cabe en 390 px por mucho que se ajusten
   los anchos: el scroll horizontal esconde datos y obliga a arrastrar
   para leer una sola fila. Por debajo de 720 px la tabla se reorganiza
   en tarjetas, donde cada dato ocupa su propio renglón con su etiqueta
   al lado. Así desaparece el scroll y todo queda visible de un vistazo.

   El corte son 900 px, el mismo punto en el que la barra lateral pasa a
   ser deslizable: por debajo estamos en teléfono o tablet. Se midió que
   la tabla de colegiados necesita 876 px, así que a 768 px seguía
   desbordando 140 px — un umbral más bajo no habría resuelto el problema
   en tablet.

   La etiqueta se toma del atributo data-etiqueta de cada celda, que
   repite el encabezado de su columna.
   ===================================================================== */
@media (max-width: 991.98px) {
    .tabla-datos-envoltura {
        overflow-x: visible;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    .tabla-datos { min-width: 0; border-collapse: separate; }
    .tabla-datos thead { display: none; }
    .tabla-datos, .tabla-datos tbody { display: block; width: 100%; }

    .tabla-datos tr {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        margin-bottom: 14px;
        overflow: hidden;
    }

    .tabla-datos td {
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--color-paper);
        text-align: right;
        font-size: 0.9rem;
        min-width: 0;
    }

    .tabla-datos td:last-child { border-bottom: 0; }

    .tabla-datos td::before {
        content: attr(data-etiqueta);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--color-text-muted);
    }

    /* La miniatura y el nombre comparten renglón y encabezan la tarjeta. */
    .tabla-datos td.celda-avatar {
        flex: 0 0 auto;
        padding-right: 0;
        border-bottom: 1px solid var(--color-line);
        align-items: center;
    }
    .tabla-datos td.celda-avatar::before { content: none; }

    .tabla-datos td.celda-principal {
        flex: 1 1 0;
        justify-content: flex-start;
        text-align: left;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-titulo);
        padding-top: 13px;
        padding-bottom: 13px;
        border-bottom: 1px solid var(--color-line);
        word-break: break-word;
    }
    .tabla-datos td.celda-principal::before { content: none; }

    /* Las acciones cierran la tarjeta, separadas y alineadas a la derecha. */
    .tabla-datos td.col-acciones {
        width: auto;
        justify-content: flex-end;
        background: var(--color-paper);
        border-top: 1px solid var(--color-line);
        border-bottom: 0;
        padding: 8px 10px;
    }
    .tabla-datos td.col-acciones::before { content: none; }
    .tabla-datos td.col-acciones .acciones-fila { width: 100%; }

    /* Una celda vacía no aporta nada en una tarjeta: se oculta. */
    .tabla-datos td.celda-oculta-movil { display: none; }

    /* Excepción: la tabla de ejemplo del CSV debe seguir viéndose como
       tabla, porque lo que comunica es precisamente la estructura de
       columnas del archivo. Conserva su scroll horizontal. */
    .tabla-datos.tabla-siempre-tabla,
    .tabla-datos.tabla-siempre-tabla tbody { display: table; width: 100%; }
    .tabla-datos.tabla-siempre-tabla thead { display: table-header-group; }
    .tabla-datos.tabla-siempre-tabla tr { display: table-row; border: 0; box-shadow: none; margin: 0; border-radius: 0; }
    .tabla-datos.tabla-siempre-tabla td { display: table-cell; text-align: left; border-bottom: 1px solid var(--color-line); }
    .tabla-datos.tabla-siempre-tabla td::before { content: none; }
    .tabla-siempre-tabla-envoltura { overflow-x: auto; }
}

/* Entre 901 y 1200 px la tabla sigue siendo tabla, pero el espacio es
   justo: se compacta el relleno y se permite que los encabezados
   partan en dos líneas para evitar el scroll horizontal. */
@media (min-width: 992px) and (max-width: 1200px) {
    .tabla-datos th, .tabla-datos td { padding: 10px 9px; font-size: 0.84rem; }
    .tabla-datos th { white-space: normal; }
    .contenido-panel { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 640px) {
    .tarjeta-login { padding: 28px 22px; }
    .encabezado-seccion h1 { font-size: 1.28rem; }
    .encabezado-seccion > div { width: 100%; }
    .encabezado-seccion > div .boton { flex: 1; }
    .encabezado-seccion > a.boton { flex: 1 0 100%; }

    .boton { height: 44px; font-size: 0.92rem; padding: 0 16px; }

    .formulario-tarjeta, .tarjeta-credencial-info { padding: 18px; max-width: 100%; }

    .gafete { width: 100%; }

    .barra-filtros { flex-direction: column; align-items: stretch; }
    .barra-filtros input[type="text"], .barra-filtros select { min-width: 0; width: 100%; }

    .acciones-formulario { flex-direction: column; align-items: stretch; }
    .acciones-formulario .boton { width: 100%; }
}

/* =====================================================================
   TEMA OSCURO
   ---------------------------------------------------------------------
   El tema se aplica con el atributo data-tema-efectivo en <html>, que un
   guion mínimo en la cabecera escribe ANTES de pintar la página (de ahí
   que no haya parpadeo blanco al abrir en oscuro). El selector guarda la
   preferencia —claro, oscuro o automático— y "automático" sigue al
   sistema operativo, actualizándose si el teléfono cambia solo al
   atardecer.

   Cambiar de tema es cambiar valores, no reglas: abajo solo se
   redefinen los tokens.
   ===================================================================== */
html[data-tema-efectivo="claro"] { color-scheme: light; }

html[data-tema-efectivo="oscuro"] {
    color-scheme: dark;

    --color-paper: #0F141B;
    --color-surface: #171E27;
    --color-surface-alt: #1E2631;
    --color-surface-hover: #1C2430;
    --color-campo-deshabilitado: #1B2430;
    --color-line: #2A3441;
    /* Blanco roto, no puro: sin el halo del blanco sobre fondo oscuro. */
    --color-text: #E6EAF0;
    --color-text-muted: #A3ACB9;
    --color-titulo: #E6EAF0;
    --color-borde-campo: #5F6B7C;

    /* La marca, como texto o ícono, se aclara; y el botón principal usa ese
       tono claro con texto oscuro, para que se vea sea cual sea la marca. */
    --color-primario-texto: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
    --tinte-marca: color-mix(in srgb, var(--color-primario) 30%, var(--color-surface));
    --foco: color-mix(in srgb, var(--color-primario) 40%, #FFFFFF);
    --relleno-primario: var(--color-primario-texto);
    --sobre-relleno: #0F141B;

    --color-ok: #6EE7A8;
    --color-ok-bg: #10291D;
    --color-warn: #F0B45E;
    --color-warn-bg: #352713;
    --color-warn-text: #F6D9A6;
    --color-warn-line: #6B5121;
    --color-danger: #F2958C;
    --color-danger-bg: #3A1517;
    --color-danger-text: #FCA5A5;
    --color-danger-line: #5C2427;

    --color-chip-bg: #26303D;
    --color-chip-text: #A3ACB9;
    --color-vacio-bg: #2A3441;
    --color-vacio-text: #7D8A9D;
    --color-info-bg: #15304F;
    --color-info-text: #BBD7F6;
    --color-aviso-suave-bg: #1E2631;

    --shadow-card: none;                  /* bordes de 1px en vez de sombras */
    --shadow-lifted: 0 6px 16px rgba(0,0,0,.5);
}

/* Campos de formulario: colores explícitos en todos los temas.
   Sin esto el navegador aplica los suyos —y en tema oscuro los campos
   aparecían con un fondo que no pertenece a la paleta del sistema, igual
   que el relleno automático de contraseñas, que pinta su propio color. */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], input[type="tel"], input[type="number"], select, textarea {
    background: var(--color-surface);
    color: var(--color-text);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    caret-color: var(--color-text);
}

/* LA CREDENCIAL NO CAMBIA CON EL TEMA.
   Es un documento, no interfaz: se descarga, se imprime y se enseña a
   terceros. Si siguiera al tema oscuro, la misma credencial se vería
   distinta según el teléfono de quien la consulta, y el archivo PNG/PDF
   saldría con fondo negro. Por eso el gafete vuelve a fijar aquí sus
   colores, y los conserva en cualquier tema. */
.gafete {
    --color-surface: #FFFFFF;
    --color-ink: #0B1F3A;
    --color-titulo: #0B1F3A;
    --color-text: #1A2333;
    --color-text-muted: #5C6675;
    --color-line: #E2E6EC;
    --color-vacio-bg: #E7EAEF;
    --color-vacio-text: #9AA4B2;
    --color-ok: #1D7A5F;
    --color-ok-bg: #DDF3EA;
    --color-warn: #B45309;
    --color-warn-bg: #FCEACB;
    --color-danger: #B3261E;
    --color-danger-bg: #FBE3E1;
    --color-chip-bg: #EEF0F3;
    --color-chip-text: #5C6675;
    /* Marca y tipografía propias del documento: no siguen a la interfaz. */
    --color-primario: #0B1F3A;
    --color-ink-soft: #16305C;
    --color-gold: #B4872E;
    --color-gold-soft: #E8D8B0;
    --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-family: var(--font-body);
    color-scheme: light;
    color: #1A2333;
}

/* =====================================================================
   CONTROLES DE TEMA Y ACCESO DIRECTO
   ===================================================================== */
.bloque-preferencias {
    padding: 12px 10px 4px;
    border-top: 1px solid var(--barra-separador);
}

.bloque-preferencias-titulo {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--barra-texto-suave);
    margin: 0 0 8px 6px;
}

/* Selector de tema: tres opciones visibles a la vez, para que se vea cuál
   está activa sin tener que abrir nada. */
.selector-tema {
    display: flex;
    gap: 4px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 3px;
}

.selector-tema-opcion {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.selector-tema-opcion svg { width: 15px; height: 15px; flex-shrink: 0; }
.selector-tema-opcion:hover { color: var(--color-titulo); }

.selector-tema-opcion[aria-pressed="true"] {
    background: var(--tinte-marca);
    color: var(--color-primario-texto);
}

.selector-tema-opcion:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* Botón de instalación: oculto por defecto; el guion lo muestra solo
   cuando el dispositivo puede instalar realmente el acceso directo. */
.boton-instalar {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--barra-separador);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-titulo);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.boton-instalar.visible { display: flex; }
.boton-instalar:hover { background: var(--color-surface-hover); }
.boton-instalar svg { width: 18px; height: 18px; flex-shrink: 0; }
.boton-instalar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Variante compacta: barra superior móvil y pantalla del colegiado, donde
   solo hay sitio para el icono. */
.controles-cabecera {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.boton-cabecera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
}

.boton-cabecera svg { width: 19px; height: 19px; }
.boton-cabecera:hover { background: var(--color-surface-hover); color: var(--color-titulo); }
.boton-cabecera:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.boton-cabecera.boton-instalar { display: none; width: 44px; margin-top: 0; padding: 0; border: none; }
.boton-cabecera.boton-instalar.visible { display: inline-flex; }

/* En la pantalla de login y en la pública los controles van sueltos sobre
   el fondo, sin barra que los contenga. */
.controles-sueltos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.controles-sueltos .boton-cabecera {
    width: 44px;
    height: 44px;
    background: var(--color-surface-alt);
    color: var(--color-titulo);
    border: 1px solid var(--color-line);
}

.controles-sueltos .boton-cabecera:hover {
    background: var(--color-chip-bg);
}

/* La hoja de instalación usa el mismo panel que las demás hojas; aquí solo
   quedan los estilos de su lista de pasos. */
.pasos-instalacion {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 0.88rem;
    line-height: 1.7;
}

.pasos-instalacion strong { color: var(--color-titulo); }

@media (min-width: 560px) {
    .hoja-instalacion { align-items: center; }
    
}

/* Aviso cuando el código QR no se puede generar (sin conexión al generador). */
.aviso-qr {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-danger-text);
    text-align: center;
}

.aviso-qr:empty { display: none; }

/* =====================================================================
   EXPERIENCIA MÓVIL  ·  menos de 992 px
   ---------------------------------------------------------------------
   Todo lo que sigue solo se aplica en teléfonos y tabletas. El escritorio
   (992 px en adelante) conserva exactamente la interfaz anterior: barra
   lateral fija, sin barra inferior y sin hojas.

   Cada bloque indica la ley de UX que lo justifica.
   ===================================================================== */

/* El armazón móvil no existe en escritorio, salvo la hoja de instalación:
   esa sí puede abrirse desde cualquier tamaño, porque el sistema también se
   instala en una computadora.

   La regla va dentro de una consulta de medios —y no suelta con un :not()—
   para que la sección móvil de más abajo pueda activarlas sin pelearse por
   especificidad. */
@media (min-width: 992px) {
    .barra-app,
    .barra-inferior,
    .hoja:not(.hoja-instalacion) { display: none; }
}

.hoja-instalacion { display: flex; }
.hoja[hidden] { display: none; }
.hoja-texto { margin: 0 8px 14px; font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); }

@media (max-width: 991.98px) {

    /* --- Barra lateral y restos del diseño anterior -------------------
       En móvil ya no hay menú lateral ni botón de hamburguesa: los
       sustituye la barra inferior, que está donde llega el pulgar.
       LEY DE FITTS: lo que más se toca, en la zona más fácil de alcanzar. */
    .barra-lateral,
    .barra-superior,
    .fondo-lateral-movil { display: none !important; }

    .area-principal { margin-left: 0; }

    /* --- Barra superior (56 px) ---------------------------------------
       Marca pequeña + título de la pantalla + instalar + cuenta.
       LEY DE JAKOB: la misma estructura que cualquier aplicación. */
    .barra-app {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 10px;
        height: calc(56px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 12px 0;
        background: var(--color-surface);
        color: var(--color-titulo);
        border-bottom: 1px solid var(--color-line);
    }

    .barra-app-marca {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: var(--tinte-marca);
        color: var(--color-primario-texto);
        flex-shrink: 0;
        text-decoration: none;
    }

    .barra-app-marca .icono { width: 18px; height: 18px; }

    /* El título se corta con puntos suspensivos: un nombre largo no debe
       empujar los botones fuera de la pantalla. */
    .barra-app-titulo {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-titulo);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Botón "Instalar": píldora discreta; el guion lo muestra solo cuando
       el dispositivo puede instalar de verdad. */
    .barra-app-instalar {
        display: none;
        align-items: center;
        gap: 6px;
        height: 44px;
        margin: 0;
        padding: 0 14px;
        border: 0;
        border-radius: 999px;
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        color: var(--color-titulo);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        width: auto;
    }

    .barra-app-instalar.visible { display: inline-flex; }
    .barra-app-instalar .icono { width: 15px; height: 15px; }

    .barra-app-avatar {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        overflow: hidden;
        background: var(--tinte-marca);
        color: var(--color-primario-texto);
        font-family: var(--font-heading);
        font-size: 0.9rem;
        font-weight: 600;
        flex-shrink: 0;
    }

    .barra-app-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* --- Barra inferior ------------------------------------------------
       4 destinos + la acción principal. No más: con más opciones a la
       vista la decisión se vuelve lenta (LEY DE HICK). */
    .barra-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--color-surface);
        border-top: 1px solid var(--color-line);
    }

    .barra-inferior-elemento {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 100%;
        min-height: 44px; /* área de toque cómoda */
        padding: 0 2px;
        border: 0;
        background: none;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .barra-inferior-icono {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 30px;
        border-radius: 999px;
        transition: background .16s ease;
    }

    .barra-inferior-icono .icono { width: 20px; height: 20px; }

    /* Activo: píldora con el tinte de marca e icono relleno. El color por
       sí solo no basta, por eso cambia también la forma del icono. */
    .barra-inferior-elemento.activo { color: var(--color-primario-texto); }
    .barra-inferior-elemento.activo .barra-inferior-icono { background: var(--tinte-marca); }

    .barra-inferior-texto {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* DOHERTY: respuesta visual inmediata al tocar, sin esperar a que
       cargue la página siguiente. */
    .barra-inferior-elemento:active { transform: scale(0.94); }

    /* Insignia de pendientes: número sobre el icono, hasta 99+. */
    .insignia-pendientes {
        position: absolute;
        top: -2px;
        right: 8px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--color-danger);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    /* Acción principal: el ÚNICO botón relleno y elevado (VON RESTORFF). */
    .barra-inferior-accion {
        justify-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        margin-top: -24px;
        border: 4px solid var(--color-paper);
        border-radius: 18px;
        background: var(--relleno-primario);
        color: var(--sobre-relleno);
        transition: transform .12s ease;
    }

    .barra-inferior-accion .icono { width: 24px; height: 24px; }
    .barra-inferior-accion:active { transform: scale(0.92); }


    /* El contenido reserva sitio para la barra: nunca debe tapar lo último
       de la página. */
    .contenido-panel {
        padding: 18px 16px calc(84px + env(safe-area-inset-bottom));
    }

    /* El H1 que repite el título de la barra se oculta (lo marca el guion). */
    .titulo-repetido { display: none; }

    /* HICK: una acción ofrecida dos veces en la misma pantalla es una
       decisión de más. Los botones de la cabecera que ya viven en la hoja
       del botón central desaparecen en móvil; los que no, se quedan. */
    .accion-duplicada { display: none; }

    .encabezado-seccion { margin-bottom: 16px; }
    .encabezado-seccion h1 { font-size: 1.25rem; }
    .encabezado-seccion > div, .encabezado-seccion > a { width: 100%; }
    .encabezado-seccion .boton { flex: 1; }

    /* --- Hojas inferiores ---------------------------------------------
       JAKOB: el patrón de "hoja" que ya usan las aplicaciones del teléfono. */
    .hoja {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 60;
        align-items: flex-end;
        justify-content: center;
        background: rgba(8,15,27,0);
        transition: background .2s ease;
    }

    .hoja[hidden] { display: none; }
    .hoja.visible { background: var(--velo-movil); }

    .hoja-panel {
        width: 100%;
        max-width: 560px;
        max-height: 88dvh;
        display: flex;
        flex-direction: column;
        padding: 10px 0 calc(14px + env(safe-area-inset-bottom));
        background: var(--color-surface);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px rgba(8,15,27,.35);
        transform: translateY(100%);
        transition: transform .22s ease;
    }

    .hoja.visible .hoja-panel { transform: translateY(0); }

    /* Asa de arrastre: indica que la hoja se puede deslizar hacia abajo. */
    .hoja-asa {
        width: 40px;
        height: 5px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: var(--color-line);
    }

    .hoja-titulo {
        margin: 0 18px 12px;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        font-weight: 600;
    }

    .hoja-cuerpo {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 14px;
    }

    /* Filas de acción de 68 px: título, una línea de explicación y flecha. */
    .fila-accion {
        display: flex;
        align-items: center;
        gap: 13px;
        min-height: 68px;
        padding: 10px 8px;
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--color-text);
    }

    .fila-accion:active { transform: scale(0.97); background: var(--color-surface-alt); }

    .fila-accion-icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        flex-shrink: 0;
    }

    .fila-accion-icono .icono { width: 21px; height: 21px; }
    .fila-accion-icono.tono-principal { background: var(--color-info-bg); color: var(--color-info-text); }
    .fila-accion-icono.tono-info      { background: var(--color-ok-bg); color: var(--color-ok); }
    .fila-accion-icono.tono-oro       { background: var(--color-warn-bg); color: var(--color-warn); }
    .fila-accion-icono.tono-neutro    { background: var(--color-chip-bg); color: var(--color-chip-text); }

    .fila-accion-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .fila-accion-titulo { font-size: 0.93rem; font-weight: 600; color: var(--color-titulo); }

    .fila-accion-descripcion {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fila-accion-flecha { width: 15px; height: 15px; color: var(--color-text-muted); flex-shrink: 0; }

    /* Grupos de la hoja "Más": título pequeño + mosaicos.
       MILLER / PROXIMIDAD: bloques cortos con nombre, no una lista larga. */
    .hoja-grupo-titulo {
        margin: 16px 8px 8px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
    }

    .mosaicos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mosaicos-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .mosaico {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 84px;
        padding: 10px 6px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface-alt);
        color: var(--color-text);
        text-decoration: none;
        text-align: center;
    }

    .mosaico:active { transform: scale(0.95); }
    .mosaico-icono { display: inline-flex; color: var(--color-primario-texto); }
    .mosaico-icono .icono { width: 22px; height: 22px; }
    .mosaico-texto { font-size: 0.73rem; font-weight: 600; line-height: 1.25; }

    .mosaico.activo {
        border-color: var(--color-primario-texto);
        background: var(--tinte-marca);
    }

    /* Dentro de la hoja, el selector de tema se ve sobre fondo claro. */
    .hoja .bloque-preferencias { padding: 0 8px; border-top: 0; }
    .hoja .bloque-preferencias-titulo { display: none; }
    .hoja .selector-tema { background: var(--color-surface-alt); border: 1px solid var(--color-line); }
    .hoja .selector-tema-opcion { color: var(--color-text-muted); }
    .hoja .selector-tema-opcion[aria-pressed="true"] { background: var(--tinte-marca); color: var(--color-primario-texto); }
    .hoja .boton-instalar { color: var(--color-titulo); background: var(--color-surface-alt); border-color: var(--color-line); }
    .hoja-salir { margin: 14px 8px 4px; width: calc(100% - 16px); }

    /* --- Contenido ----------------------------------------------------- */

    /* Filtros y pestañas en UNA línea deslizable, en lugar de apilarse y
       empujar el contenido hacia abajo. */
    .barra-filtros {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 8px;
        padding: 12px;
    }

    .barra-filtros::-webkit-scrollbar { display: none; }
    .barra-filtros > * { flex: 0 0 auto; }

    .barra-filtros select,
    .barra-filtros .boton {
        border-radius: 999px;
        height: 44px;
    }

    /* La búsqueda ocupa todo el ancho y va primero. */
    .barra-filtros input[type="search"],
    .barra-filtros input[type="text"] {
        flex: 1 0 100%;
        order: -1;
        min-width: 0;
        height: 44px;
        border-radius: 999px;
    }

    /* Campos: 44 px de alto y letra de 16 px. Con menos de 16 px, iOS
       amplía la pantalla al escribir y descoloca el formulario. */
    input, select, textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .formulario-tarjeta label { font-size: 0.85rem; }

    /* Botones de acción a lo ancho y separando el destructivo, para no
       tocar "Eliminar" queriendo tocar "Editar". */
    .acciones-formulario { flex-direction: column-reverse; gap: 10px; }
    .acciones-formulario .boton { width: 100%; }
    .zona-peligro .boton { width: 100%; }
}

/* En escritorio, a partir de 992 px, la barra lateral vuelve a su sitio.
   Entre 992 y 1100 px el contenido es más estrecho, así que la barra se
   encoge un poco para que las tablas sigan cabiendo. */
@media (min-width: 992px) and (max-width: 1100px) {
    :root { --sidebar-ancho: 248px; }
    .barra-superior { padding: 0 20px; }
    .buscador-global { width: 220px; }
    .contenido-panel { padding-left: 20px; padding-right: 20px; }
}

/* Quien pide menos animación, menos animación. */
@media (prefers-reduced-motion: reduce) {
    .hoja-panel,
    .barra-inferior-icono,
    .barra-inferior-accion,
    .plegable-marca { transition: none !important; }
    .barra-inferior-elemento:active,
    .barra-inferior-accion:active,
    .fila-accion:active,
    .mosaico:active { transform: none; }
}

/* =====================================================================
   BORDE DE CAMPOS (contraste 3:1, WCAG 1.4.11)
   ---------------------------------------------------------------------
   Va al final de la hoja para imponerse a los bordes de cada formulario.
   ===================================================================== */
html input[type="text"], html input[type="email"], html input[type="password"], html input[type="date"],
html input[type="search"], html input[type="tel"], html input[type="number"], html input[type="file"],
html select, html textarea {
    border-color: var(--color-borde-campo);
}

/* =====================================================================
   SECCIÓN SISTEMA: pestañas y portada
   ===================================================================== */
/* Pestañas: la actual se marca con el acento dorado (subrayado) y texto
   del color de título; las demás quedan en gris legible (AA). */
.pestanas-seccion {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -4px 0 22px;
    padding: 4px;
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pestanas-seccion::-webkit-scrollbar { display: none; }

.pestana {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;            /* objetivo táctil mínimo */
    padding: 0 16px;
    border-radius: 9px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.pestana .icono { width: 16px; height: 16px; }
/* (el :hover de .pestana está junto al de las tarjetas, solo con ratón) */
.pestana.activa { background: var(--color-chip-bg); color: var(--color-titulo); font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-primario-texto); }
.pestana.activa .icono { color: var(--color-primario-texto); }
.pestana:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.pestanas-separador { width: 1px; height: 22px; margin: 0 4px; background: var(--color-line); flex-shrink: 0; }

.subtitulo-seccion { margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.92rem; }

.grupo-sistema { margin-bottom: 26px; }
.grupo-sistema-titulo {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.rejilla-sistema { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }

.tarjeta-sistema {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
@media (hover: hover) {
    .tarjeta-sistema:hover { border-color: var(--color-primario-texto); }
    .pestana:hover { background: var(--color-surface-alt); color: var(--color-titulo); }
}
.tarjeta-sistema:active { transform: scale(.99); }
.tarjeta-sistema:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.tarjeta-sistema-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}
.tarjeta-sistema-icono .icono { width: 20px; height: 20px; }
.tarjeta-sistema-icono.tono-info   { background: var(--color-info-bg); color: var(--color-info-text); }
.tarjeta-sistema-icono.tono-oro    { background: var(--color-warn-bg); color: var(--color-warn-text); }
.tarjeta-sistema-icono.tono-neutro { background: var(--color-chip-bg); color: var(--color-chip-text); }

.tarjeta-sistema-cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tarjeta-sistema-titulo { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; color: var(--color-titulo); }
.tarjeta-sistema-texto { font-size: 0.86rem; color: var(--color-text-muted); line-height: 1.45; }
.tarjeta-sistema-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}
.tarjeta-sistema-detalle { font-size: 0.8rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.tarjeta-sistema-flecha { width: 16px; height: 16px; margin-top: 4px; color: var(--color-text-muted); flex-shrink: 0; }

.estado-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.estado-texto { flex: 1; min-width: 0; }
.estado-punto.estado-ok     { background: var(--color-ok); }
.estado-punto.estado-info   { background: var(--color-info-text); }
.estado-punto.estado-neutro { background: var(--color-text-muted); }
.muestra-color { width: 14px; height: 14px; margin-left: 6px; border-radius: 4px; border: 1px solid var(--color-borde-campo); }
.texto-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; color: var(--color-text-muted); }

@media (max-width: 991.98px) {
    /* En el móvil las pestañas pegan con los bordes para que se note que
       la fila se puede deslizar (el corte sugiere que hay más). */
    .pestanas-seccion { margin: 0 -16px 18px; padding: 4px 12px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--color-line); background: transparent; }
    .pestana { padding: 0 12px; }
}

/* =====================================================================
   BOTÓN ENVIANDO (ver assets/js/envio-unico.js)
   ---------------------------------------------------------------------
   El botón pulsado muestra un indicador giratorio mientras el formulario
   viaja: el usuario ve que el sistema recibió el clic (umbral de Doherty)
   y no tiene motivo para pulsar otra vez.
   ===================================================================== */
.boton-enviando { position: relative; cursor: progress; }
.boton-enviando::before {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.5em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: giro-envio .7s linear infinite;
}
button:disabled.boton-enviando { opacity: .85; }
@keyframes giro-envio { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .boton-enviando::before { animation-duration: 2s; }
}

/* "Cerrar sesión" ahora es un formulario POST: el botón conserva el
   aspecto del enlace que reemplaza. */
.formulario-salir { margin: 0; }
.formulario-salir button.nav-lateral-enlace {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.formulario-salir .boton-ancho:not(.hoja-salir) { width: 100%; }

.migas a { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================
   PREDICTOR DEL BUSCADOR (assets/js/buscador.js)
   ===================================================================== */
.campo-buscador { position: relative; flex: 1 1 260px; max-width: 420px; min-width: 220px; }
.campo-buscador input[type="text"] { width: 100%; min-height: 44px; }

.sugerencias {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: min(420px, 60vh);
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lifted);
    text-align: left;
}
.sugerencias[hidden] { display: none; }
/* La barra superior es estrecha: la lista puede ser más ancha que el campo. */
.buscador-global .sugerencias { left: 0; right: auto; width: max(100%, 380px); }

.sugerencia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text);
}
.sugerencia[aria-selected="true"] { background: var(--tinte-marca); }
.sugerencia-nombre { font-size: 0.9rem; font-weight: 600; color: var(--color-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugerencia-detalle { grid-column: 1 / -1; font-size: 0.78rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugerencia-estado {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-chip-bg);
    color: var(--color-chip-text);
}
.sugerencia-estado-activo { background: var(--color-ok-bg); color: var(--color-ok); }
.sugerencia-estado-suspendido { background: var(--color-danger-bg); color: var(--color-danger-text); }
.sugerencias mark { background: var(--tinte-marca); color: inherit; font-weight: 700; border-radius: 2px; box-shadow: 0 1px 0 var(--color-primario-texto); }
.sugerencia[aria-selected="true"] mark { background: transparent; }
.sugerencia-todos { display: block; font-size: 0.84rem; color: var(--color-primario-texto); font-weight: 600; margin-top: 4px; border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding-top: 12px; }
.sugerencia-vacia { padding: 12px 10px; font-size: 0.86rem; color: var(--color-text-muted); }

@media (max-width: 991.98px) {
    /* En el celular los filtros forman una fila deslizable que recortaría
       la lista flotante: aquí las sugerencias se despliegan en línea. */
    .campo-buscador { flex: 1 0 100%; order: -1; max-width: none; min-width: 0; }
    .sugerencias { position: static; margin-top: 8px; box-shadow: none; }
}