/**
 * Hoja de estilos principal del sistema OlivIA
 * Desarrollado por Iñaki Serrano para Webcomunica.solutions
 *
 * ÍNDICE:
 * 1. Variables y reset
 * 2. Tipografía
 * 3. Navegación
 * 4. Estructura y layout
 * 5. Tarjetas y paneles
 * 6. Tablas
 * 7. Formularios
 * 8. Botones
 * 9. Alertas y mensajes
 * 10. Login
 * 11. Pie de página
 * 12. Utilidades
 * 13. Responsive
 */

/* ============================================================
   1. VARIABLES Y RESET
   ============================================================ */
:root {
    --color-primario: #011838;
    --color-secundario: #6E6E6E;
    --color-acento: #011838;
    --color-fondo: #EEEEEE;
    --color-blanco: #FFFFFF;
    --color-texto: #011838;
    --color-texto-claro: #6E6E6E;
    --color-borde: #dde1e5;
    --color-exito: #27ae60;
    --color-aviso: #d4a017;
    --color-error: #c0392b;
    --sombra-suave: 0 1px 3px rgba(1, 24, 56, 0.06);
    --sombra-media: 0 2px 8px rgba(1, 24, 56, 0.10);
    --radio-borde: 4px;
    --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   2. TIPOGRAFÍA
   ============================================================ */
html {
    font-size: 15px;
}

body {
    font-family: var(--fuente-base);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: paginaEntrar 0.25s ease;
}

@keyframes paginaEntrar {
    from { opacity: 0; }
    to   { opacity: 1; }
}

h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 0.5em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a {
    color: var(--color-acento);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================
   3. NAVEGACIÓN
   ============================================================ */
.nav-principal {
    background: var(--color-primario);
    padding: 0 1.5rem;
}

.nav-contenedor {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 56px;
    padding: 0.5rem 0;
}

.nav-marca {
    margin-right: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.nav-olivia {
    color: var(--color-blanco);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0.9;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 1rem;
}

.nav-olivia-reg {
    font-size: 0.55rem;
    font-weight: 400;
    vertical-align: super;
    opacity: 0.5;
}

.nav-logo {
    width: 200px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    padding: 0.5rem 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2px;
    flex: 1;
}

.nav-menu a {
    color: rgba(255, 255, 255, 0.6);
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.nav-menu a:hover {
    color: var(--color-blanco);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.nav-menu a.activo {
    color: var(--color-blanco);
    background: rgba(255, 255, 255, 0.12);
}

.nav-usuario {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.nav-usuario-nombre {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
}

.nav-salir {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.78rem;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    transition: all 0.2s;
}

.nav-salir:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

/* ============================================================
   4. ESTRUCTURA Y LAYOUT
   ============================================================ */
.contenido-principal {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
    width: 100%;
    flex: 1;
}

.titulo-pagina {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-borde);
}

.rejilla {
    display: grid;
    gap: 1rem;
}

.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }

/* Panel cabecera */
.panel-cabecera {
    margin-bottom: 1.75rem;
}

.panel-saludo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 0.15rem;
    letter-spacing: -0.01em;
}

.panel-fecha {
    color: var(--color-texto-claro);
    font-size: 0.88rem;
    text-transform: capitalize;
}

/* Panel secciones */
.panel-seccion {
    margin-bottom: 1.5rem;
}

.panel-seccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.panel-seccion-cabecera h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* ============================================================
   5. TARJETAS Y PANELES
   ============================================================ */
.tarjeta {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--sombra-suave);
}

.tarjeta-titulo {
    font-size: 0.75rem;
    color: var(--color-texto-claro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.tarjeta-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primario);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.35rem 0 0.2rem;
}

.tarjeta-valor-unidad {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-claro);
}

.tarjeta-detalle {
    font-size: 0.8rem;
    color: var(--color-texto-claro);
}

/* Resumen del día */
.resumen-dia {
    display: flex;
    align-items: center;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.25rem 1.75rem;
    box-shadow: var(--sombra-suave);
    gap: 1.75rem;
}

.resumen-dia-bloque {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.resumen-dia-cifra {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primario);
    letter-spacing: -0.02em;
    line-height: 1;
}

.resumen-dia-texto {
    font-size: 0.84rem;
    color: var(--color-texto-claro);
}

.resumen-dia-sep {
    width: 1px;
    height: 28px;
    background: var(--color-borde);
    flex-shrink: 0;
}

.resumen-dia-alerta .resumen-dia-cifra {
    color: #c48200;
}

.resumen-dia-alerta .resumen-dia-texto {
    color: #c48200;
    font-weight: 600;
}

/* Filtros del panel */
.panel-filtros {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.panel-filtro-input {
    flex: 1;
    min-width: 180px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-family: var(--fuente-base);
    font-size: 0.88rem;
    color: var(--color-texto);
    background: var(--color-blanco);
    transition: border-color 0.2s;
}

.panel-filtro-input:focus {
    outline: none;
    border-color: var(--color-primario);
}

.panel-filtro-rango {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.panel-filtro-rango-sep {
    color: var(--color-texto-claro);
    font-size: 0.82rem;
}

.panel-filtro-fecha,
.panel-filtro-select {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-family: var(--fuente-base);
    font-size: 0.88rem;
    color: var(--color-texto);
    background: var(--color-blanco);
}

.panel-filtro-fecha:focus,
.panel-filtro-select:focus {
    outline: none;
    border-color: var(--color-primario);
}

/* Paginación */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.paginacion-info {
    font-size: 0.84rem;
    color: var(--color-texto-claro);
}

/* ============================================================
   FICHA DE LLAMADA
   ============================================================ */
.ficha-cabecera {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--sombra-suave);
}

.ficha-cabecera-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.ficha-cabecera-titulo h1 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0;
    white-space: nowrap;
}

.ficha-cabecera-nav {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ficha-estado-badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ficha-estado-pendiente .ficha-estado-badge {
    background: #fef5e7;
    color: #c48200;
}

.ficha-estado-proceso .ficha-estado-badge {
    background: #eaf2f8;
    color: var(--color-primario);
}

.ficha-estado-resuelta .ficha-estado-badge {
    background: #eafaf1;
    color: #1e8449;
}

/* Datos del ciudadano */
.ficha-ciudadano {
    background: var(--color-primario);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    color: var(--color-blanco);
}

.ficha-ciudadano-nombre {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

a.ficha-ciudadano-telefono,
div.ficha-ciudadano-telefono {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-blanco);
    opacity: 0.85;
    text-decoration: none;
    letter-spacing: 0.02em;
}

a.ficha-ciudadano-telefono:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Acordeón */
.acordeon-toggle {
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
    user-select: none;
}

.acordeon-toggle::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-texto-claro);
    transition: transform 0.2s;
}

.acordeon-abierto .acordeon-toggle::after {
    content: "-";
}

.acordeon-contenido {
    display: none;
    padding-top: 1rem;
    animation: tabEntrar 0.2s ease;
}

.acordeon-abierto .acordeon-contenido {
    display: block;
}

/* Tarjeta estado OlivIA */
.tarjeta-estado-activa {
    background: #f0faf4;
    border-color: #a9dfbf;
}

.tarjeta-estado-inactiva {
    background: #fef5e7;
    border-color: #f0c040;
}

/* Etiqueta info */
.etiqueta-info {
    background: #eaf2f8;
    color: var(--color-primario);
}

/* ============================================================
   6. TABLAS
   ============================================================ */
.tabla-contenedor {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}

.tabla-contenedor table {
    width: 100%;
    border-collapse: collapse;
}

.tabla-contenedor th {
    background: var(--color-fondo);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primario);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-contenedor td {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-contenedor tr:last-child td {
    border-bottom: none;
}

.tabla-contenedor tr:hover {
    background: #f8f9fb;
}

.tabla-contenedor tr.fila-enlace:hover {
    background: #f0f4f8;
}

.tabla-contenedor td strong {
    color: var(--color-primario);
}

/* ============================================================
   7. FORMULARIOS
   ============================================================ */
.formulario-grupo {
    margin-bottom: 1rem;
}

.formulario-grupo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 0.3rem;
}

.formulario-grupo input[type="text"],
.formulario-grupo input[type="email"],
.formulario-grupo input[type="password"],
.formulario-grupo input[type="number"],
.formulario-grupo input[type="tel"],
.formulario-grupo input[type="date"],
.formulario-grupo select,
.formulario-grupo textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-family: var(--fuente-base);
    font-size: 0.9rem;
    color: var(--color-texto);
    background: var(--color-blanco);
    transition: border-color 0.2s;
}

.formulario-grupo input:focus,
.formulario-grupo select:focus,
.formulario-grupo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
}

.formulario-grupo textarea {
    resize: vertical;
    min-height: 80px;
}

/* ============================================================
   7b. PESTAÑAS
   ============================================================ */
.pestanas {
    display: flex;
    gap: 0.3rem;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.3rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.pestanas::-webkit-scrollbar { display: none; }

.pestana {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-claro);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.pestana:hover {
    color: var(--color-primario);
    background: var(--color-fondo);
    text-decoration: none;
}

.pestana-activa {
    color: var(--color-blanco);
    background: var(--color-primario);
    font-weight: 600;
}

.pestana-activa:hover {
    color: var(--color-blanco);
    background: var(--color-primario);
}

.tab-contenido {
    animation: tabEntrar 0.2s ease;
}

@keyframes tabEntrar {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   7c. ZONA DE SUBIDA
   ============================================================ */
.zona-subida {
    border: 2px dashed var(--color-borde);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--color-texto-claro);
}

.zona-subida:hover,
.zona-subida.zona-subida-activa {
    border-color: var(--color-primario);
    background: rgba(1, 24, 56, 0.02);
}

.zona-subida p {
    margin: 0;
}

/* ============================================================
   8. BOTONES
   ============================================================ */
.btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    font-family: var(--fuente-base);
    font-size: 0.88rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radio-borde);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover {
    text-decoration: none;
    opacity: 0.9;
}

.btn-primario {
    background: var(--color-acento);
    color: var(--color-blanco);
}

.btn-secundario {
    background: var(--color-blanco);
    color: var(--color-texto);
    border-color: var(--color-borde);
}

.btn-secundario:hover {
    background: var(--color-fondo);
}

.btn-peligro {
    background: var(--color-error);
    color: var(--color-blanco);
}

.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

/* ============================================================
   9. ALERTAS Y MENSAJES
   ============================================================ */
.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--radio-borde);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.alerta-exito {
    background: #eafaf1;
    color: var(--color-exito);
    border: 1px solid #a9dfbf;
}

.alerta-error {
    background: #fdedec;
    color: var(--color-error);
    border: 1px solid #f5b7b1;
}

.alerta-aviso {
    background: #fef9e7;
    color: #7d6608;
    border: 1px solid #f9e79f;
}

.alerta-info {
    background: #eaf2f8;
    color: var(--color-acento);
    border: 1px solid #aed6f1;
}

/* ============================================================
   10. LOGIN
   ============================================================ */
.login-body {
    background: var(--color-primario);
}

.login-pagina {
    display: flex;
    min-height: 100vh;
}

/* Panel izquierdo: marca */
.login-panel-izq {
    flex: 1;
    background: var(--color-primario);
    background-image:
        radial-gradient(ellipse at 20% 100%, rgba(20,60,130,0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 0%, rgba(30,80,170,0.3) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

/* Blob animado 1 */
.login-panel-izq::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -15%;
    right: -10%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, rgba(40,100,200,0.2) 0%, rgba(80,140,240,0.05) 100%);
    filter: blur(40px);
    animation: flotar 20s ease-in-out infinite;
}

/* Blob animado 2 */
.login-panel-izq::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -10%;
    left: -5%;
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    background: linear-gradient(315deg, rgba(60,120,220,0.15) 0%, rgba(100,160,255,0.03) 100%);
    filter: blur(50px);
    animation: flotar 16s ease-in-out infinite reverse;
}

@keyframes flotar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(20px, -15px) scale(1.03); }
    50%      { transform: translate(-10px, 10px) scale(0.97); }
    75%      { transform: translate(15px, 5px) scale(1.02); }
}

.login-panel-izq-contenido::before,
.login-panel-izq-contenido::after {
    display: none;
}

.login-panel-izq-contenido {
    position: relative;
    z-index: 1;
    max-width: 380px;
}

.login-logo {
    height: 110px;
    filter: brightness(0) invert(1);
    margin-bottom: 3rem;
}

.login-marca {
    margin-bottom: 0.5rem;
    cursor: default;
    position: relative;
}

.login-marca-nombre {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-blanco);
    letter-spacing: -0.03em;
    line-height: 1;
    display: inline-block;
}

.login-marca-reg {
    font-size: 1rem;
    font-weight: 400;
    vertical-align: super;
    opacity: 0.5;
    margin-left: 2px;
}

.login-marca::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--color-blanco);
    color: var(--color-primario);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.login-marca:hover::after {
    opacity: 1;
}

.login-panel-izq-texto h2 {
    color: rgba(255,255,255,0.7);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    letter-spacing: 0;
}

.login-panel-izq-texto p {
    color: rgba(255,255,255,0.5);
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-panel-izq-dato {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.login-dato-numero {
    color: rgba(255,255,255,0.6);
    font-size: 0.88rem;
    font-weight: 600;
}

.login-dato-desc {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

/* Panel derecho: formulario */
.login-panel-der {
    width: 480px;
    min-width: 480px;
    background: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.login-formulario {
    width: 100%;
    max-width: 340px;
}

.login-formulario h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 0.35rem;
}

.login-subtitulo {
    color: var(--color-texto-claro);
    font-size: 0.88rem;
    margin-bottom: 2rem;
}

.login-formulario .formulario-grupo {
    margin-bottom: 1.25rem;
}

.login-formulario .formulario-grupo label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-claro);
    margin-bottom: 0.4rem;
}

.login-formulario .formulario-grupo input {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    font-size: 0.95rem;
    border: 1px solid var(--color-borde);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-formulario .formulario-grupo input:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(1, 24, 56, 0.08);
}

.login-formulario .formulario-grupo input::placeholder {
    color: #b0b8c1;
}

.btn-login {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    font-family: var(--fuente-base);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

.btn-login:hover {
    background: #0a3060;
}

.btn-login:active {
    transform: scale(0.99);
}

.login-pie {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    color: var(--color-texto-claro);
    text-align: center;
}

.login-pie a {
    color: var(--color-texto-claro);
    text-decoration: underline;
}

/* ============================================================
   11. PIE DE PÁGINA
   ============================================================ */
.pie-pagina {
    text-align: center;
    padding: 1rem;
    font-size: 0.78rem;
    color: var(--color-texto-claro);
    border-top: 1px solid var(--color-borde);
    margin-top: auto;
}

/* ============================================================
   12. CALENDARIO
   ============================================================ */
.rejilla-calendario {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
}

.tabla-calendario {
    table-layout: fixed;
}

.tabla-calendario th {
    text-align: center;
    padding: 0.5rem;
}

.tabla-calendario td {
    vertical-align: top;
    height: 90px;
    padding: 0.3rem;
    border-bottom: 1px solid var(--color-borde);
}

.calendario-vacio {
    background: var(--color-fondo);
}

.calendario-numero {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-texto-claro);
    margin-bottom: 0.2rem;
}

.calendario-hoy .calendario-numero {
    color: var(--color-blanco);
    background: var(--color-acento);
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
}

.calendario-cita {
    display: block;
    font-size: 0.72rem;
    padding: 0.15rem 0.3rem;
    margin-bottom: 0.15rem;
    border-radius: 2px;
    background: #eaf2f8;
    color: var(--color-acento);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendario-cita:hover {
    background: #d5e6f5;
    text-decoration: none;
}

.calendario-cita-confirmada {
    background: #eafaf1;
    color: var(--color-exito);
}

.calendario-cita-cancelada {
    background: #fdedec;
    color: var(--color-error);
    text-decoration: line-through;
}

/* Layout formulario cita + calendario lateral */
.cita-layout {
    grid-template-columns: 1fr 280px;
}

/* Mini calendario */
.mini-calendario {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mini-calendario th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-texto-claro);
    text-align: center;
    padding: 0.3rem;
}

.mini-calendario td {
    text-align: center;
    padding: 0.4rem 0.2rem;
    font-size: 0.82rem;
    cursor: default;
    position: relative;
    border-radius: 4px;
}

.mini-calendario td:hover {
    background: var(--color-fondo);
}

.mini-cal-finde {
    color: #d1d5db;
    background: #fafafa;
    pointer-events: none;
}

.mini-cal-hoy {
    font-weight: 700;
    color: var(--color-blanco);
    background: var(--color-primario);
}

.mini-cal-hoy:hover {
    background: var(--color-primario);
}

.mini-cal-ocupado {
    font-weight: 600;
}

.mini-cal-punto {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primario);
    margin: 2px auto 0;
}

.mini-cal-hoy .mini-cal-punto {
    background: var(--color-blanco);
}

/* ============================================================
   13. UTILIDADES
   ============================================================ */
.texto-centro { text-align: center; }
.texto-derecha { text-align: right; }
.texto-claro { color: var(--color-texto-claro); }
.texto-exito { color: var(--color-exito); }
.texto-error { color: var(--color-error); }
.texto-aviso { color: var(--color-aviso); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.oculto { display: none; }

@media (max-width: 768px) {
    .ocultar-movil { display: none; }
}

.actuacion-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-texto-claro);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 3.8rem;
}

.historial-resumen {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-texto-claro);
    font-size: 0.85rem;
}

/* ── Chips de selección (departamentos, etiquetas) ── */
.chip-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.4rem;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.9rem;
    border: 1px solid var(--color-borde);
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #555;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.13s, background 0.13s, color 0.13s;
    letter-spacing: 0.01em;
}

.chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.chip:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
}

.chip:has(input:checked) {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}

.chip:has(input:checked):hover {
    background: #01285a;
    border-color: #01285a;
}

.etiqueta {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.etiqueta-exito {
    background: #eafaf1;
    color: var(--color-exito);
}

.etiqueta-error {
    background: #fdedec;
    color: var(--color-error);
}

.etiqueta-aviso {
    background: #fef9e7;
    color: #7d6608;
}

.flex-entre {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Autocompletar */
.autocompletar-lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 2px;
}

.autocompletar-opcion {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    transition: background 0.15s;
}

.autocompletar-opcion:hover {
    background: var(--color-fondo);
}

.autocompletar-opcion strong {
    font-size: 0.9rem;
    color: var(--color-primario);
}

.autocompletar-detalle {
    font-size: 0.78rem;
    color: var(--color-texto-claro);
}

.autocompletar-vacio {
    padding: 0.75rem;
    text-align: center;
    color: var(--color-texto-claro);
    font-size: 0.85rem;
}

/* ============================================================
   MENSAJERÍA - CHAT
   ============================================================ */
.chat-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 140px);
    max-height: 600px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
}

/* Panel izquierdo */
.chat-panel-izq {
    border-right: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    background: #f8f9fb;
}

.chat-panel-izq-header {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-blanco);
}

.chat-panel-izq-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.chat-panel-izq-buscar {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-borde);
    background: var(--color-blanco);
}

.chat-panel-izq-buscar input {
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: var(--fuente-base);
}

.chat-panel-izq-buscar input:focus {
    outline: none;
    border-color: var(--color-primario);
}

.chat-lista {
    flex: 1;
    overflow-y: auto;
}

/* Conversación item */
.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f1f3;
    position: relative;
}

.chat-conv-item:hover {
    background: #eef1f5;
}

.chat-conv-activa {
    background: #e4eaf3;
}

.chat-conv-nueva {
    background: #f0f5fa;
}

.chat-conv-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primario);
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.chat-conv-info {
    flex: 1;
    min-width: 0;
}

.chat-conv-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}

.chat-conv-cabecera strong {
    font-size: 0.88rem;
    color: var(--color-primario);
}

.chat-conv-cabecera span {
    font-size: 0.72rem;
    color: var(--color-texto-claro);
    flex-shrink: 0;
}

.chat-conv-preview {
    font-size: 0.8rem;
    color: var(--color-texto-claro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-nueva .chat-conv-cabecera strong,
.chat-conv-nueva .chat-conv-preview {
    font-weight: 700;
    color: var(--color-primario);
}

.chat-conv-badge {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: #c0392b;
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 5px;
}

/* Panel derecho */
.chat-panel-der {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-vacio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-claro);
}

.chat-vacio h3 {
    color: var(--color-texto-claro);
    font-weight: 500;
}

.chat-activo {
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-der-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.chat-der-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primario);
    color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.chat-volver-mobile {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-texto-claro);
}

/* Mensajes */
.chat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f8f9fb;
    min-height: 0;
}

.chat-fecha-sep {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-texto-claro);
    padding: 0.75rem 0 0.25rem;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.chat-msg-mio {
    align-self: flex-end;
}

.chat-msg-otro {
    align-self: flex-start;
}

.chat-msg-burbuja {
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.55;
    word-wrap: break-word;
    position: relative;
}

.chat-msg-mio .chat-msg-burbuja {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-bottom-right-radius: 4px;
}

.chat-msg-otro .chat-msg-burbuja {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-bottom-left-radius: 4px;
}

.chat-msg-hora {
    font-size: 0.68rem;
    color: var(--color-texto-claro);
    margin-top: 0.15rem;
}

.chat-msg-mio .chat-msg-hora {
    align-self: flex-end;
}

/* Acciones en mensajes */
.chat-msg-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.chat-msg:hover .chat-msg-acciones {
    opacity: 1;
}

.chat-msg-acciones a {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}

.chat-msg-acciones a:hover {
    color: var(--color-blanco);
    text-decoration: none;
}

.chat-msg-accion-eliminar:hover {
    color: #ff8a8a;
}

.chat-msg-editar textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    font-family: var(--fuente-base);
    font-size: 0.88rem;
    background: rgba(255,255,255,0.15);
    color: var(--color-blanco);
    resize: none;
}

.chat-msg-adjuntos {
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.chat-msg-adjuntos a {
    display: block;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}

.chat-msg-otro .chat-msg-acciones a {
    color: var(--color-texto-claro);
}

.chat-msg-otro .chat-msg-adjuntos {
    border-top-color: var(--color-borde);
}

.chat-msg-otro .chat-msg-adjuntos a {
    color: var(--color-acento);
}

/* Input */
.chat-input {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-borde);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-input textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-family: var(--fuente-base);
    font-size: 0.9rem;
    resize: none;
    max-height: 100px;
}

.chat-input textarea:focus {
    outline: none;
    border-color: var(--color-primario);
}

.chat-input-btns {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Modal */
.chat-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.chat-modal-visible {
    display: flex;
}

.chat-modal {
    background: var(--color-blanco);
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.chat-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-modal-header h3 {
    margin: 0;
    font-size: 1rem;
}

.chat-modal-cerrar {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-texto-claro);
    cursor: pointer;
}

.chat-modal-body {
    padding: 1.25rem;
}

.chat-modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-borde);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-container {
        grid-template-columns: 1fr;
        height: calc(100vh - 120px);
    }

    .chat-panel-der {
        display: none;
    }

    .chat-panel-der-activo {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: var(--color-blanco);
    }

    .chat-volver-mobile {
        display: block;
    }
}

/* ============================================================
   DOCUMENTACIÓN API
   ============================================================ */
.doc-seccion {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-borde);
}

.doc-seccion:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.doc-seccion h4 {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--color-primario);
}

.doc-endpoint {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--color-fondo);
    border-radius: 6px;
}

.doc-endpoint code {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primario);
}

.doc-endpoint p {
    font-size: 0.85rem;
    color: var(--color-texto);
    margin: 0.35rem 0 0;
    line-height: 1.5;
}

.doc-metodo {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

.doc-get { background: #e8f5e9; color: #2e7d32; }
.doc-post { background: #e3f2fd; color: #1565c0; }
.doc-patch { background: #fff3e0; color: #e65100; }
.doc-put { background: #f3e5f5; color: #7b1fa2; }
.doc-delete { background: #ffebee; color: #c62828; }

.doc-ejemplo {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 4px;
}

.doc-ejemplo strong {
    font-size: 0.8rem;
    color: var(--color-texto-claro);
    display: block;
    margin-bottom: 0.3rem;
}

.doc-ejemplo pre {
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
    margin: 0;
    color: var(--color-texto);
}

/* Soporte flotante */
.soporte-flotante {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 999;
}

.soporte-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soporte-btn:hover {
    transform: scale(1.08);
}

.soporte-btn-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(1, 24, 56, 0.25);
}

.soporte-btn-tickets {
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    background: var(--color-blanco);
    color: var(--color-texto-claro);
    border: 1px solid var(--color-borde);
    font-family: var(--fuente-base);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.soporte-btn-tickets:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
}

/* Chat WhatsApp bidireccional */
.chat-contenedor .acordeon-contenido { padding-top: 0; }

.chat-whatsapp {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    overflow: hidden;
    background: #e8e0d8;
}

.chat-mensajes {
    min-height: 120px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    scroll-behavior: smooth;
}

.chat-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    text-align: center;
}

.chat-vacio p { font-size: 0.85rem; }

/* Separador de fecha */
.chat-separador-fecha {
    text-align: center;
    margin: 0.5rem 0;
}

.chat-separador-fecha span {
    display: inline-block;
    background: rgba(255,255,255,0.85);
    color: var(--color-texto-claro);
    font-size: 0.72rem;
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}

/* Burbujas de mensaje */
.chat-burbuja {
    max-width: 80%;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
}

.chat-burbuja-saliente {
    align-self: flex-end;
    background: #d9fdd3;
    border-bottom-right-radius: 3px;
}

.chat-burbuja-entrante {
    align-self: flex-start;
    background: var(--color-blanco);
    border-bottom-left-radius: 3px;
}

.chat-remitente {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.chat-burbuja-entrante .chat-remitente { color: #1a6b4b; }
.chat-burbuja-saliente .chat-remitente { color: var(--color-primario); }

.chat-texto {
    color: var(--color-texto);
    font-size: 0.88rem;
}

.chat-traduccion {
    margin-top: 0.3rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-texto-claro);
}

.chat-traduccion-label {
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
}

/* Pie del mensaje: hora + estado */
.chat-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: rgba(0,0,0,0.4);
}

.chat-tipo-indicador {
    font-weight: 600;
    color: rgba(0,0,0,0.3);
}

/* Checks de estado */
.chat-check {
    width: 14px;
    height: 14px;
    color: rgba(0,0,0,0.35);
}

.chat-check-doble {
    width: 18px;
}

.chat-check-leido {
    color: #53bdeb;
}

.chat-estado-error {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
}

.chat-demo {
    font-size: 0.6rem;
    background: var(--color-aviso);
    color: #fff;
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 600;
}

.chat-error {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--color-error);
    font-style: italic;
}

/* Input del chat */
.chat-input {
    background: #f0f0f0;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--color-borde);
}

.chat-input-fila {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
}

.chat-input-fila textarea {
    flex: 1;
    border: 1px solid var(--color-borde);
    border-radius: 20px;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
    font-family: var(--fuente-base);
    resize: none;
    max-height: 120px;
    line-height: 1.4;
    outline: none;
}

.chat-input-fila textarea:focus {
    border-color: var(--color-primario);
}

.chat-btn-enviar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--color-primario);
    color: var(--color-blanco);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.chat-btn-enviar:hover { opacity: 0.85; }
.chat-btn-enviar:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-acciones-extra {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.4rem;
}

/* Aviso ventana 24h */
.chat-aviso-plantilla {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: #fff3e0;
    border-top: 1px solid #ffe0b2;
    font-size: 0.8rem;
    color: #e65100;
}

/* Panel llamada saliente */
.chat-panel-llamada {
    padding: 0.75rem;
    background: var(--color-fondo);
    border-top: 1px solid var(--color-borde);
}

/* Dashboard ROI / Valor OlivIA */
.roi-banner-valor {
    background: linear-gradient(135deg, var(--color-primario) 0%, #0a2e5c 100%);
    color: var(--color-blanco);
    border-radius: var(--radio-borde);
    padding: 1.75rem 1.5rem;
}

.roi-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.roi-banner-cifra {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #5ddb8a;
    line-height: 1.1;
}

.roi-banner-label {
    display: block;
    font-size: 0.78rem;
    opacity: 0.8;
    margin-top: 0.2rem;
}

/* Badge de idioma */
.idioma-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.08rem 0.22rem;
    border-radius: 2px;
    background: var(--color-texto-claro);
    color: var(--color-blanco);
    vertical-align: baseline;
    margin-left: 0.2rem;
    line-height: 1;
    position: relative;
    top: -0.05rem;
}

.ficha-ciudadano .idioma-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255,255,255,0.2);
    margin-left: 0.4rem;
    opacity: 1;
}

/* Descripción de rol */
.rol-descripcion {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-texto);
}

.rol-descripcion strong {
    color: var(--color-primario);
}

/* Menciones en notas */
.mencion {
    background: #e8f0fe;
    color: var(--color-primario);
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

/* Badge de mensajes */
.badge-mensajes {
    display: inline-block;
    background: #c0392b;
    color: var(--color-blanco);
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 5px;
    vertical-align: middle;
    margin-left: 3px;
}

/* Fila no leída */
.fila-no-leido {
    background: #f0f5fa;
}

.fila-no-leido td {
    font-weight: 600;
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
/* Hamburguesa (solo móvil) */
.nav-hamburguesa {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.nav-hamburguesa span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 1px;
}

.nav-menu-wrapper { display: contents; }
.nav-menu-overlay { display: none; }
.nav-menu-panel { display: contents; }
.nav-menu-panel-cabecera,
.nav-menu-panel-pie { display: none; }
.nav-menu-cerrar { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 768px) {
    .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
    .rejilla-calendario, .cita-layout { grid-template-columns: 1fr; }
    .tabla-calendario td { height: 60px; }

    /* Hamburguesa */
    .nav-hamburguesa { display: flex; }
    .nav-usuario { display: none; }

    .nav-contenedor {
        min-height: 60px;
        height: auto;
        padding: 0.25rem 0;
    }

    .nav-marca {
        margin-right: auto;
    }

    .nav-logo { width: 120px; padding: 0.75rem 0; }
    .nav-olivia { font-size: 0.95rem; padding-left: 0.75rem; }

    /* Panel lateral */
    .nav-menu-wrapper {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .nav-menu-wrapper.nav-menu-abierto { display: block; }

    .nav-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
    }

    .nav-menu-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 270px;
        background: var(--color-primario);
        box-shadow: -4px 0 20px rgba(0,0,0,0.3);
        animation: menuEntrar 0.25s ease;
    }

    @keyframes menuEntrar {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    .nav-menu-panel-cabecera {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: var(--color-blanco);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .nav-menu-panel .nav-menu {
        flex-direction: column;
        padding: 0.75rem;
        gap: 2px;
        flex: 1;
    }

    .nav-menu-panel .nav-menu a {
        display: block;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        border-radius: 6px;
    }

    .nav-menu-panel-pie {
        display: block;
        padding: 1rem 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .nav-menu-panel-pie .nav-salir {
        display: block;
        text-align: center;
        padding: 0.6rem;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        color: rgba(255,255,255,0.6);
        font-size: 0.85rem;
        text-decoration: none;
    }

    /* Contenido */
    .contenido-principal { padding: 0 0.75rem; margin: 0.75rem auto; }
    .titulo-pagina h1 { font-size: 1.1rem; }
    .tarjeta { padding: 0.85rem; }
    .tarjeta-valor { font-size: 1.4rem; }

    .resumen-dia { display: none; }

    .tabla-contenedor { overflow-x: auto; }
    .flex-entre { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* Pestañas responsive */
    .pestanas { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pestanas::-webkit-scrollbar { display: none; }
    .pestana { white-space: nowrap; flex-shrink: 0; font-size: 0.78rem; padding: 0.45rem 0.85rem; }

    /* Filtros responsive */
    .panel-filtros { flex-direction: column; gap: 0.5rem; }
    .panel-filtro-input { min-width: auto; width: 100%; }
    .panel-filtro-rango { width: 100%; }
    .panel-filtro-rango input { flex: 1; }
    .panel-filtro-select { width: 100%; }
    .panel-filtros .btn { width: 100%; text-align: center; }

    /* Ficha llamada */
    .ficha-cabecera { flex-direction: column; align-items: flex-start; }
    .ficha-cabecera-info { flex-direction: column; align-items: flex-start; }
    .ficha-cabecera-titulo h1 { white-space: normal; font-size: 0.85rem; }
    .ficha-ciudadano-nombre { font-size: 1.2rem; }

    /* Chat responsive */
    .chat-burbuja { max-width: 92%; }
    .chat-mensajes { max-height: 350px; }
    .chat-aviso-plantilla { flex-direction: column; gap: 0.4rem; text-align: center; }

    /* ROI responsive */
    .roi-banner-stats { grid-template-columns: repeat(2, 1fr); }
    .roi-banner-cifra { font-size: 1.4rem; }

    /* Login */
    .login-pagina { flex-direction: column; }
    .login-panel-izq { padding: 2rem 1.5rem; min-height: auto; }
    .login-logo { height: 48px; margin-bottom: 1.5rem; }
    .login-marca-nombre { font-size: 2.2rem; }
    .login-panel-izq-texto h2 { font-size: 1rem; }
    .login-panel-izq-dato { margin-top: 1.5rem; padding-top: 1.5rem; }
    .login-panel-der { width: 100%; min-width: auto; padding: 2rem 1.5rem; }
    .login-formulario { max-width: 100%; }

    /* Estadísticas */
    .estadisticas-filtros-rapidos { flex-wrap: wrap; gap: 0.4rem; }
    .estadisticas-filtros-rapidos .btn { font-size: 0.75rem; padding: 0.35rem 0.6rem; }

    /* Soporte flotante */
    .soporte-flotante { bottom: 1rem; right: 1rem; }
    .soporte-btn { width: 40px; height: 40px; }
    .soporte-btn-tickets { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
}

@media (max-width: 380px) {
    .login-titulo h1 { font-size: 1rem; }
    .login-caja { padding: 1.25rem; }
    .nav-menu-panel { width: 100%; }
}

/* ============================================================
   15. CALENDARIO AVANZADO (semana / día / mes)
   ============================================================ */
.cal-wrap {
    background: var(--color-blanco);
    border: 1px solid #e5e8ef;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(1,24,56,0.07);
}

.cal-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f0f2f7;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--color-blanco);
}

.cal-nav-arr {
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.55rem !important;
    border-radius: 8px !important;
    border-color: #e5e8ef !important;
    color: var(--color-primario) !important;
    font-weight: 700;
}
.cal-nav-arr:hover { background: #f0f4ff !important; }

.cal-titulo-periodo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0 0.4rem;
    letter-spacing: -0.01em;
}

/* Vista tabs — texto con subrayado */
.cal-vistas-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid #e5e8ef;
    border-radius: 8px;
    overflow: hidden;
}
.cal-vista-tab {
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-right: 1px solid #e5e8ef;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.cal-vista-tab:last-child { border-right: none; }
.cal-vista-tab:hover { background: #f5f7ff; color: var(--color-primario); text-decoration: none; }
.cal-vista-activa {
    background: var(--color-primario) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Botón Mis citas */
#btn-drawer-citas {
    border-radius: 20px !important;
    border-color: var(--color-primario) !important;
    color: var(--color-primario) !important;
    background: #fff !important;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.28rem 0.85rem !important;
    transition: background 0.15s, color 0.15s;
}
#btn-drawer-citas:hover {
    background: var(--color-primario) !important;
    color: #fff !important;
}

/* Grid time/events */
.cal-grid {
    display: grid;
    overflow: hidden;
}

.cal-corner {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #f0f2f7;
    border-right: 1px solid #f0f2f7;
    background: var(--color-blanco);
}

.cal-dia-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.4rem;
    border-bottom: 1px solid #f0f2f7;
    border-left: 1px solid #f0f2f7;
    background: var(--color-blanco);
}

.cal-dia-header-hoy { background: #f5f8ff; }

.cal-dia-nombre {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
}

.cal-dia-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-texto);
    text-decoration: none;
    transition: background 0.15s;
}

.cal-dia-num:hover { background: #f0f4ff; text-decoration: none; }

.cal-dia-num-hoy {
    background: var(--color-primario) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(1,24,56,0.25);
}

.cal-time-col {
    position: relative;
    border-right: 1px solid #f0f2f7;
    background: var(--color-blanco);
}

.cal-time-label {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}

.cal-time-label-first { transform: translateY(3px); }

.cal-events-col {
    position: relative;
    border-left: 1px solid #f0f2f7;
    overflow: hidden;
}

.cal-events-col[data-fecha] { cursor: crosshair; }

.cal-col-hoy { background: #fafbff; }

.cal-linea-hora {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: rgba(1, 24, 56, 0.12);
    pointer-events: none;
}

.cal-linea-media {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1px dashed rgba(1, 24, 56, 0.06);
    pointer-events: none;
}

.cal-ahora {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #d93025;
    z-index: 4;
    pointer-events: none;
    display: none;
}

.cal-ahora::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d93025;
}

/* Bloques de evento */
.cal-evento {
    position: absolute;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.78rem;
    overflow: hidden;
    text-decoration: none;
    z-index: 2;
    line-height: 1.35;
    box-sizing: border-box;
    transition: box-shadow 0.15s, filter 0.12s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin: 2px 0 1px;
}

.cal-evento:hover {
    filter: brightness(0.93);
    text-decoration: none;
    z-index: 3;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* Paleta de 8 colores por evento (id % 8) */
.ev-c0 { background: #dbeafe; color: #1e3a8a; }
.ev-c1 { background: #d1fae5; color: #064e3b; }
.ev-c2 { background: #ede9fe; color: #4c1d95; }
.ev-c3 { background: #ffedd5; color: #7c2d12; }
.ev-c4 { background: #cffafe; color: #164e63; }
.ev-c5 { background: #fce7f3; color: #831843; }
.ev-c6 { background: #e0e7ff; color: #312e81; }
.ev-c7 { background: #fef9c3; color: #713f12; }

/* Estado: solo opacidad, sin borde */
.ev-cancelada  { opacity: 0.55; }
.ev-completada { opacity: 0.65; }

.cal-ev-hora   { display: block; font-weight: 700; font-size: 0.74rem; line-height: 1.2; }
.cal-ev-titulo { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-extra  { display: block; font-size: 0.72rem; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drawer mis citas */
/* ── Drawer mis citas ── */
#drawer-citas { font-family: inherit; }

/* Cabecera */
#drawer-citas > div:first-child {
    background: #fff;
    border-bottom: 2px solid #f0f2f7;
    padding: 1.1rem 1.25rem;
}
#drawer-citas > div:first-child strong { color: var(--color-primario); font-size: 1.05rem; }
#drawer-citas > div:first-child span  { color: #9ca3af; font-size: 0.8rem; }
#drawer-citas > div:first-child button { color: #9ca3af; font-size: 1.4rem; line-height:1; }
#drawer-citas > div:first-child button:hover { color: #374151; }

/* Secciones de mes */
.drawer-mes { border-top: 1px solid #f0f2f7; }
.drawer-mes:first-of-type { border-top: none; }

.drawer-mes-hdr {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem 0.5rem 1.25rem;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #374151;
    gap: 0.5rem;
}
.drawer-mes-hdr:hover { background: #f9fafb; }

/* Mes actual */
.drawer-mes-actual .drawer-mes-hdr { color: var(--color-primario); }
/* Meses futuros */
.drawer-mes-futuro .drawer-mes-hdr { color: #374151; }
/* Meses pasados: apagado */
.drawer-mes-pasado .drawer-mes-hdr { color: #c4c9d4; }

.drawer-mes-count {
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--color-primario);
    color: #fff;
    border-radius: 20px;
    min-width: 1.4rem;
    text-align: center;
    padding: 0.05rem 0.45rem;
    line-height: 1.6;
}
.drawer-mes-futuro .drawer-mes-count  { background: #6b7280; }
.drawer-mes-pasado .drawer-mes-count  { background: #d1d5db; color: #9ca3af; }
.drawer-mes-actual .drawer-mes-count  { background: var(--color-primario); }

.drawer-mes-chevron { font-size: 0.5rem; color: #9ca3af; margin-left: 0.1rem; }

/* Cuerpo del mes */
.drawer-mes-body { padding: 0.35rem 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }

/* Tarjeta de cita */
.drawer-cita {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    text-decoration: none;
    color: var(--color-texto);
    font-size: 0.82rem;
    background: #fff;
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.drawer-cita:hover {
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(1,24,56,0.1);
    border-color: #c7d2fe;
}
.drawer-mes-pasado .drawer-cita {
    background: #fff;
    color: #9ca3af;
}
.drawer-mes-pasado .drawer-cita:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

.drawer-cita-fecha {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 36px;
    flex-shrink: 0;
    gap: 0;
}
.drawer-cita-dia-num {
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.1;
    color: var(--color-primario);
}
.drawer-cita-dia-sem {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}
.drawer-mes-pasado .drawer-cita-dia-num { color: #c4c9d4; }
.drawer-mes-pasado .drawer-cita-dia-sem { color: #c4c9d4; }

.drawer-cita-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.drawer-cita-titulo {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.81rem;
}
.drawer-cita-sub {
    font-size: 0.7rem;
    color: var(--color-texto-claro);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-cita-estado {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Vista mes */
.cal-mes-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; }

.cal-mes-tabla th {
    text-align: center;
    padding: 0.6rem 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-texto-claro);
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde);
}

.cal-mes-dia {
    vertical-align: top;
    height: 140px;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--color-borde);
    border-right: 1px solid var(--color-borde);
    background: var(--color-blanco);
}

.cal-mes-vacio {
    border-bottom: 1px solid var(--color-borde);
    border-right: 1px solid var(--color-borde);
    background: var(--color-fondo);
}

.cal-mes-hoy { background: #f8faff; }

.cal-mes-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto);
    text-decoration: none;
    margin-bottom: 0.2rem;
}

.cal-mes-num:hover { background: var(--color-fondo); text-decoration: none; }

.cal-mes-num-hoy {
    background: var(--color-primario);
    color: var(--color-blanco);
    font-weight: 700;
}

.cal-mes-num-hoy:hover { background: var(--color-primario); }

.cal-mes-ev {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 0.18rem 0.4rem;
    margin-bottom: 0.18rem;
    border-radius: 4px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.cal-mes-ev:hover { opacity: 0.82; text-decoration: none; }

.cal-mes-ev.ev-cancelada  { opacity: 0.55; }
.cal-mes-ev.ev-completada { opacity: 0.65; }

.cal-mes-mas {
    display: block;
    font-size: 0.73rem;
    color: var(--color-texto-claro);
    padding: 0.1rem 0.4rem;
    text-decoration: none;
    font-weight: 600;
}

.cal-mes-mas:hover { color: var(--color-primario); text-decoration: none; }

@media (max-width: 768px) {
    .cal-toolbar { flex-direction: column; align-items: flex-start; }
    .cal-titulo-periodo { font-size: 0.85rem; }
    .cal-mes-dia { height: 80px; }
    .cal-dia-nombre { font-size: 0.6rem; }
    .cal-dia-num { width: 24px; height: 24px; font-size: 0.82rem; }
}

/* ============================================================
   CENTRO DE AYUDA — FAQ master-detail
   ============================================================ */

/* Botón ? en la cabecera */
.nav-ayuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    margin-right: 0.75rem;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.nav-ayuda:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.8); color:#fff; text-decoration:none; }
.nav-ayuda.activo { background: rgba(255,255,255,0.2); border-color:#fff; color:#fff; }

/* Tooltip del botón ? */
.nav-ayuda[data-tooltip] { position: relative; }
.nav-ayuda[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    right: 0.65rem;
    border: 5px solid transparent;
    border-bottom-color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 501;
}
.nav-ayuda[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    white-space: nowrap;
    background: #fff;
    color: var(--color-primario);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.85rem;
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 500;
}
.nav-ayuda[data-tooltip]:hover::before,
.nav-ayuda[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ── Layout principal ──────────────────────────────────────────────────── */
.faq-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - 56px);   /* descontar nav */
    overflow: hidden;
}

/* ── Menú izquierdo ────────────────────────────────────────────────────── */
.faq-menu {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-borde);
    background: #fff;
    overflow: hidden;
}

.faq-buscar-wrap {
    padding: 0.85rem 0.9rem 0.7rem;
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
}
.faq-buscar-input {
    width: 100%;
    padding: 0.48rem 0.75rem;
    font-size: 0.84rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: #f7f8fa;
    color: var(--color-texto);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.faq-buscar-input:focus { border-color: var(--color-primario); background:#fff; }

#faq-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0;
    scrollbar-width: thin;
    scrollbar-color: #d0d5dd transparent;
}
#faq-nav::-webkit-scrollbar { width: 4px; }
#faq-nav::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }

/* Grupo sección */
.faq-grupo { margin-bottom: 1px; }

/* Botón de sección (cabecera del acordeón) */
.faq-sec-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.55rem 0.9rem 0.55rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primario);
    text-align: left;
    transition: background 0.12s;
}
.faq-sec-btn:hover { background: #f3f5f8; }
.faq-sec-btn.activo { background: #edf1f8; }

.faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    background: var(--color-primario);
    color: #fff;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.faq-sec-label { flex: 1; }

.faq-flecha {
    font-size: 1rem;
    color: #bbb;
    transition: transform 0.22s ease, color 0.15s;
    line-height: 1;
    display: inline-block;
}
.faq-flecha.abierto { transform: rotate(90deg); color: var(--color-primario); }

/* Subsecciones colapsables — grid trick: único hijo directo <div> */
.faq-subs {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s ease;
}
.faq-subs.abierto { grid-template-rows: 1fr; }
.faq-subs > div { min-height: 0; overflow: hidden; }

/* Botón de subsección */
.faq-sub-btn {
    display: block;
    width: 100%;
    padding: 0.38rem 0.9rem 0.38rem 2.4rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.79rem;
    color: #555;
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.12s, color 0.12s;
    border-left: 2px solid transparent;
    margin-left: 1px;
}
.faq-sub-btn:hover { background: #f5f7fa; color: var(--color-primario); }
.faq-sub-btn.activo {
    color: var(--color-primario);
    font-weight: 600;
    border-left-color: var(--color-primario);
    background: rgba(1,24,56,0.04);
}

/* ── Panel derecho ─────────────────────────────────────────────────────── */
.faq-panel {
    overflow-y: auto;
    padding: 2.5rem 3rem;
    background: var(--color-fondo);
}

/* Bienvenida */
.faq-bienvenida {
    max-width: 560px;
    margin: 4rem auto 0;
    text-align: center;
}
.faq-bienvenida-icono {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.35;
}
.faq-bienvenida h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0 0 0.75rem;
}
.faq-bienvenida p {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.65;
    margin: 0 0 0.5rem;
}
.faq-bienvenida-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.78rem;
    color: #aaa;
}
.faq-sep { opacity: 0.4; }

/* Contenido de artículo */
.faq-contenido {
    max-width: 760px;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 2rem 2.25rem;
}

.faq-breadcrumb {
    font-size: 0.75rem;
    color: #aaa;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.faq-breadcrumb span { margin: 0 0.25rem; }

.faq-contenido-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0 0 0.6rem;
}
.faq-contenido-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.65;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-borde);
}
.faq-h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 0.75rem;
}

/* Pasos */
.faq-pasos {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}
.faq-pasos li {
    counter-increment: paso;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #333;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f5f5f5;
}
.faq-pasos li:last-child { border-bottom: none; }
.faq-pasos li::before {
    content: counter(paso);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    background: rgba(1,24,56,0.08);
    color: var(--color-primario);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Notas */
.faq-notas {
    display: flex;
    gap: 0.75rem;
    background: #f0f4fa;
    border-left: 3px solid var(--color-primario);
    border-radius: 0 6px 6px 0;
    padding: 0.9rem 1rem;
    margin-top: 0.5rem;
}
.faq-notas-icono { font-size: 1rem; color: var(--color-primario); flex-shrink: 0; margin-top: 0.05rem; }
.faq-notas p { font-size: 0.84rem; color: #444; margin: 0 0 0.3rem; line-height: 1.55; }
.faq-notas p:last-child { margin: 0; }

/* Responsive */
@media (max-width: 860px) {
    .faq-wrap { grid-template-columns: 1fr; height: auto; }
    .faq-menu { height: auto; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--color-borde); }
    .faq-panel { padding: 1.5rem 1.25rem; }
    .faq-contenido { padding: 1.25rem; }
}