/**
 * 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-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; }
}

.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%; }
}