/* =============================================================
   Agenda NeuroLab · Estilos
   -------------------------------------------------------------
   Todo se aplica con clases reutilizables (nada de estilos sueltos).
   Colores, letras y medidas viven en las variables de :root:
   para cambiar la paleta solo se edita esa sección.

   Índice
   1. Variables          6. Tarjetas y datos
   2. Base               7. Tablas e insignias
   3. Utilidades         8. Alertas y estados vacíos
   4. Botones            9. Panel (menú lateral y contenido)
   5. Formularios       10. Páginas públicas y de acceso
                        11. Acciones rápidas, filtros y carga
                        12. Agendas (colores), avisos y ayudas de uso
                        13. Pantallas táctiles (celulares y tabletas)
   ============================================================= */

/* 1. Variables ------------------------------------------------ */
:root {
    /* Colores de marca, tomados del logo del NeuroLab */
    --marca-noche: #0A111B;
    --marca-noche-2: #111B29;
    --marca-noche-3: #1B2839;
    --marca-azul: #01A3F5;
    --marca-rojo: #BD0723;

    /* Colores de uso */
    --color-primario: #0077CC;
    --color-primario-hover: #005FA3;
    --color-primario-suave: #DCEBFA;
    --color-peligro: #BD0723;
    --color-peligro-hover: #990519;
    --color-peligro-suave: #F8E1E5;
    --color-exito: #147A3B;
    --color-exito-suave: #DCF0E3;
    --color-aviso: #A55A06;
    --color-aviso-suave: #F8EBD3;
    --color-neutro-suave: #E2E8F0;

    --texto: #121B28;
    --texto-suave: #536074;
    --texto-apagado: #8590A1;
    --texto-invertido: #F3F6FA;
    --texto-invertido-suave: #9AA8BA;
    --fondo: #E6EBF1;          /* fondo de la página */
    --superficie: #F4F6F9;     /* tarjetas */
    --superficie-2: #EBEFF4;   /* encabezados de tabla, filas alternas, recuadros */
    --superficie-3: #DFE5EC;   /* resaltado al pasar el mouse */
    --campo: #FAFBFC;          /* campos de formulario */
    --borde: #D2DAE4;
    --borde-fuerte: #B6C1CF;

    /* Letras */
    --fuente-titulos: 'Red Hat Display', system-ui, sans-serif;
    --fuente-texto: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Espacios */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;

    /* Bordes y sombras */
    --radio-sm: 6px;
    --radio: 10px;
    --radio-lg: 16px;
    --sombra: 0 1px 2px rgba(10, 17, 27, .05), 0 4px 14px rgba(10, 17, 27, .06);
    --sombra-lg: 0 18px 40px rgba(10, 17, 27, .28);
    --anillo-foco: 0 0 0 3px rgba(1, 163, 245, .35);

    --ancho-menu: 272px;
    --ancho-contenido: 1200px;

    /* Color de la agenda en uso. Cada agenda lo cambia con su clase agenda-{tema} (sección 12). */
    --agenda: #0077CC;
    --agenda-fuerte: #005FA3;
    --agenda-suave: #DCEBFA;
    --agenda-claro: #5CC3FF;
}

/* 2. Base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fondo);
    /* Palabras muy largas (correos, enlaces) se cortan en vez de salirse de su caja */
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    line-height: 1.25;
}

p { margin: 0; }
a { color: var(--color-primario); }
a:hover { color: var(--color-primario-hover); }
img { max-width: 100%; display: block; }

:focus-visible { outline: none; box-shadow: var(--anillo-foco); }

[hidden] { display: none !important; }

.icono { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.icono-lg { width: 2rem; height: 2rem; }

/* 3. Utilidades de diseño ------------------------------------ */
.pila { display: flex; flex-direction: column; gap: var(--e-4); }
.pila-sm { gap: var(--e-2); }

.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

.rejilla { display: grid; gap: var(--e-4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
/* 4 columnas en pantallas grandes, 2 en medianas, 1 en celulares (nunca queda una sola tarjeta suelta) */
.rejilla-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } }

/* Contenido principal + columna lateral (se apilan en pantallas medianas y chicas) */
.rejilla-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (min-width: 1150px) { .rejilla-lateral { grid-template-columns: minmax(0, 1fr) 360px; } }

/* Campos cortos lado a lado (fechas, horas) */
.rejilla-campos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* Formulario en 2 columnas desde tabletas; .campo-completo ocupa todo el ancho */
.rejilla-formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
@media (min-width: 640px) {
    .rejilla-formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campo-completo { grid-column: 1 / -1; }
}

/* Contenido principal + resumen lateral. En celulares el resumen va primero (arriba). */
.disposicion-resumen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (min-width: 960px) {
    .disposicion-resumen { grid-template-columns: minmax(0, 1fr) 340px; }
    .disposicion-resumen-lateral { grid-column: 2; grid-row: 1; position: sticky; top: var(--e-4); }
    .disposicion-resumen-principal { grid-column: 1; grid-row: 1; }
}

/* Dos tarjetas lado a lado en pantallas medianas (calendario + horas) */
.rejilla-reserva { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }
@media (min-width: 900px) { .rejilla-reserva { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.columna-angosta { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }
.centrado { margin-left: auto; margin-right: auto; }

.titulo-pagina { font-size: 1.6rem; }
.titulo-seccion { font-size: 1.15rem; }
.texto-suave { color: var(--texto-suave); }
.texto-apagado { color: var(--texto-apagado); }
.texto-preformateado { white-space: pre-line; }
.texto-aviso { color: var(--color-aviso); }
.texto-pequeno { font-size: 0.85rem; }
.texto-centro { text-align: center; }

/* Texto solo para lectores de pantalla (invisible, sin ocupar espacio) */
.oculto-visual {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 4. Botones ------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.5rem 0.95rem;
    border: 1px solid transparent;
    font-size: 0.9rem;
    border-radius: var(--radio-sm);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Botón de un formulario que ya se está enviando (assets/js/app.js evita el doble envío) */
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.btn-primario { background: var(--color-primario); color: #fff; }
.btn-primario:hover { background: var(--color-primario-hover); color: #fff; }

.btn-secundario { background: var(--campo); color: var(--texto); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--color-neutro-suave); color: var(--texto); }

.btn-peligro { background: var(--color-peligro); color: #fff; }
.btn-peligro:hover { background: var(--color-peligro-hover); color: #fff; }

.btn-exito { background: var(--color-exito); color: #fff; }
.btn-exito:hover { background: #0F5E2D; color: #fff; }

/* Botón con el color de la agenda en uso */
.btn-agenda { background: var(--agenda); color: #fff; }
.btn-agenda:hover { background: var(--agenda-fuerte); color: #fff; }

.btn-fantasma { background: transparent; color: inherit; }
.btn-fantasma:hover { background: rgba(127, 140, 160, .14); color: inherit; }

/* Acción peligrosa discreta (ej. "Eliminar" dentro de una tabla) */
.btn-peligro-suave { background: transparent; color: var(--color-peligro); }
.btn-peligro-suave:hover { background: var(--color-peligro-suave); color: var(--color-peligro-hover); }

.btn-sm { padding: 0.32rem 0.65rem; font-size: 0.82rem; }
.btn-grande { padding: 0.65rem 1.3rem; font-size: 0.95rem; }
.btn-bloque { width: 100%; }
.btn-icono { padding: 0.5rem; }

/* 5. Formularios --------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 0.8rem; }

.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.etiqueta { font-weight: 600; font-size: 0.82rem; }
.etiqueta-opcional { font-weight: 400; color: var(--texto-suave); }

.entrada {
    width: 100%;
    padding: 0.42rem 0.65rem;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--texto);
    background: var(--campo);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    transition: border-color .15s, box-shadow .15s;
}
.entrada:focus { outline: none; border-color: var(--marca-azul); box-shadow: var(--anillo-foco); }
.entrada-auto { width: auto; min-width: 14rem; max-width: 100%; }
.entrada-compacta { width: auto; max-width: 100%; padding: 0.45rem 0.65rem; font-size: 0.9rem; }
.entrada[aria-invalid="true"] { border-color: var(--color-peligro); }
textarea.entrada { min-height: 4.25rem; resize: vertical; }
.entrada::placeholder { font-size: 0.8rem; color: var(--texto-apagado); opacity: 1; }

.ayuda { font-size: 0.76rem; line-height: 1.4; color: var(--texto-suave); }
.error-campo { font-size: 0.76rem; line-height: 1.4; font-weight: 600; color: var(--color-peligro); }

.casilla { display: flex; align-items: flex-start; gap: var(--e-2); font-size: 0.84rem; }
.casilla input { flex-shrink: 0; margin-top: 0.25rem; width: 1rem; height: 1rem; accent-color: var(--color-primario); }

/* Texto legal de consentimiento (con scroll si es largo) */
.consentimiento {
    max-height: 9rem;
    overflow-y: auto;
    padding: var(--e-3) var(--e-4);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--texto-suave);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
}

/* Campo invisible para detectar spam (las personas no lo ven) */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 6. Tarjetas y datos ---------------------------------------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--borde);
}
.tarjeta-cuerpo { padding: 1.25rem; }
.tarjeta-angosta { width: 100%; max-width: 640px; }

/* Barra al pie de una tarjeta con el botón principal (queda visible al hacer scroll) */
.barra-acciones {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-5);
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--radio) var(--radio);
}

/* Barra de acciones como tarjeta propia (al final de un formulario largo) */
.barra-acciones-sola { border-radius: var(--radio); }

/* Persona: avatar + nombre + detalle (tablas, fichas) */
.persona { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.persona > div { min-width: 0; }
.persona-nombre { display: block; font-weight: 600; }
.persona-detalle { display: block; font-size: 0.82rem; color: var(--texto-suave); overflow-wrap: anywhere; }

/* Lista de datos: etiqueta a la izquierda, valor a la derecha */
.datos-lista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2) var(--e-5); margin: 0; }
.datos-lista dt { color: var(--texto-suave); }
.datos-lista dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.dato {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.dato-icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radio);
    color: var(--color-primario);
    background: var(--color-primario-suave);
}
.dato-icono .icono { width: 1.35rem; height: 1.35rem; }
.dato-texto { min-width: 0; }
.dato-valor { font-family: var(--fuente-titulos); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.dato-etiqueta { font-size: 0.84rem; color: var(--texto-suave); }
.dato-detalle { margin-top: 2px; font-size: 0.74rem; color: var(--texto-apagado); }

/* 7. Tablas e insignias -------------------------------------- */
/* La tabla se desliza horizontalmente dentro de su tarjeta si no cabe (celulares) */
.tabla-contenedor { position: relative; overflow-x: auto; container: tabla / inline-size; }

.tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla th {
    padding: var(--e-3) var(--e-5);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto);
    background: var(--superficie-2);
    border-bottom: 2px solid var(--borde-fuerte);
    white-space: nowrap;
}
.tabla td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { padding: 0.6rem 1rem; }
.tabla tbody tr:nth-child(even) { background: var(--superficie-2); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-3); }
/* Columnas especiales (clase col-{tipo} que pone componente_tabla) */
.tabla .col-acciones, .tabla .col-codigo { width: 1%; white-space: nowrap; }
.celda { min-width: 0; }
.tabla .col-numero { text-align: right; font-variant-numeric: tabular-nums; }
.fila-inactiva td { color: var(--texto-suave); }
.fila-inactiva .avatar { opacity: .5; }

.insignia {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--texto-suave);
    background: var(--color-neutro-suave);
}
/* Colores genéricos */
.insignia-exito   { color: var(--color-exito); background: var(--color-exito-suave); }
.insignia-aviso   { color: var(--color-aviso); background: var(--color-aviso-suave); }
.insignia-peligro { color: var(--color-peligro); background: var(--color-peligro-suave); }
.insignia-info    { color: var(--color-primario); background: var(--color-primario-suave); }
.insignia-neutro  { color: var(--texto-suave); background: var(--color-neutro-suave); }

/* Estados de cita: la clase coincide con el estado guardado (insignia-confirmada, etc.) */
.insignia-confirmada { color: var(--color-primario); background: var(--color-primario-suave); }
.insignia-asistio    { color: var(--color-exito); background: var(--color-exito-suave); }
.insignia-tarde      { color: var(--color-aviso); background: var(--color-aviso-suave); }
.insignia-no_asistio { color: var(--color-peligro); background: var(--color-peligro-suave); }
.insignia-cancelada  { color: var(--texto-suave); background: var(--color-neutro-suave); text-decoration: line-through; }
.insignia-pendiente  { color: #7A4300; background: #FFE2B0; box-shadow: inset 0 0 0 1px #E3B25F; }

/* 8. Alertas y estados vacíos -------------------------------- */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
}
.alerta .icono { margin-top: 0.15rem; }
.alerta-exito { color: var(--color-exito); background: var(--color-exito-suave); border-color: #BFE3CB; }
.alerta-error { color: var(--color-peligro); background: var(--color-peligro-suave); border-color: #F3C4CB; }
.alerta-aviso { color: var(--color-aviso); background: var(--color-aviso-suave); border-color: #F2D9B0; }
.alerta-info  { color: var(--color-primario); background: var(--color-primario-suave); border-color: #BFE0F7; }

.vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-6) var(--e-4);
    text-align: center;
    color: var(--texto-suave);
}
.vacio .icono { color: var(--borde-fuerte); }

/* 9. Panel: menú lateral y contenido ------------------------- */
.app { display: flex; min-height: 100vh; }

.menu-lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: var(--ancho-menu);
    height: 100vh;
    flex-shrink: 0;
    color: var(--texto-invertido);
    background: var(--marca-noche);
    overflow-y: auto;
}

.menu-marca { padding: var(--e-5) var(--e-5) var(--e-4); border-bottom: 1px solid var(--marca-noche-3); }
.menu-logo { width: 180px; }
.menu-producto {
    display: block;
    margin-top: var(--e-2);
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--marca-azul);
}

.menu-nav { flex: 1; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-3); }
.menu-seccion {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 var(--e-3) var(--e-2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-invertido-suave);
}
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
/* Cada agenda es un bloque propio del menú, con su ícono y su color: así nunca se confunden */
.menu-grupo-agenda { padding: var(--e-2); border-radius: var(--radio); background: var(--marca-noche-2); box-shadow: inset 3px 0 0 var(--agenda-claro); }
.menu-grupo-agenda .menu-seccion { margin: var(--e-1) var(--e-2) var(--e-2); font-size: 0.82rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; }
.menu-grupo-agenda .agenda-icono { width: 1.6rem; height: 1.6rem; }
.menu-grupo-agenda .agenda-icono .icono { width: 0.95rem; height: 0.95rem; }

.menu-enlace {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: 0.55rem var(--e-3);
    border-radius: var(--radio-sm);
    color: var(--texto-invertido);
    text-decoration: none;
    font-weight: 500;
}
.menu-enlace-texto { flex: 1; min-width: 0; }
.menu-cantidad { font-size: 0.72rem; white-space: nowrap; color: var(--texto-invertido-suave); }
.menu-enlace:hover { color: #fff; background: var(--marca-noche-2); }
.menu-grupo-agenda .menu-enlace:hover { background: var(--marca-noche-3); }
.menu-enlace.activo { color: #fff; background: var(--marca-noche-3); box-shadow: inset 3px 0 0 var(--marca-azul); }
.menu-enlace.activo .icono { color: var(--marca-azul); }
.menu-grupo-agenda .menu-enlace.activo { background: rgba(255, 255, 255, .1); box-shadow: none; }
.menu-grupo-agenda .menu-enlace.activo .icono { color: var(--agenda-claro); }
.menu-lateral .contador { box-shadow: 0 0 0 2px var(--marca-noche-2); }

.menu-usuario {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-top: 1px solid var(--marca-noche-3);
}
.menu-usuario-datos { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.3; color: inherit; text-decoration: none; }
.menu-usuario-datos:hover { color: inherit; }
.menu-usuario-datos:hover .menu-usuario-nombre { color: var(--marca-azul); }
.menu-usuario-nombre { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario-rol { color: var(--texto-invertido-suave); }

.avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--marca-rojo);
}
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.72rem; }
.avatar-suave { color: var(--color-primario); background: var(--color-primario-suave); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-superior {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-3);
    padding: var(--e-3) var(--e-6);
    background: rgba(230, 235, 241, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--borde);
}
.barra-titulo { flex: 1 1 7rem; min-width: 0; font-size: 1.2rem; }
.barra-accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-left: auto; }
.boton-menu { display: none; }

/* Campana de avisos: el globo rojo dice cuántas cosas esperan una acción */
.campana { position: relative; }
.campana .contador { position: absolute; top: -3px; right: -5px; box-shadow: 0 0 0 2px var(--fondo); }
.campana-activa { color: var(--marca-rojo); }

.contenido { width: 100%; min-width: 0; max-width: var(--ancho-contenido); padding: var(--e-6); }

.saludo-fecha::first-letter { text-transform: uppercase; }

/* Barra de herramientas de la agenda: navegación + filtros (se acomoda en varias líneas si no cabe) */
.barra-herramientas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
.barra-herramientas-navegacion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; }
.barra-herramientas-titulo { font-size: 1.05rem; min-width: 0; }
.barra-herramientas-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.barra-herramientas-formulario { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Selector de opciones pegadas (Día | Semana) */
.segmentado { display: inline-flex; padding: 3px; border-radius: var(--radio-sm); background: var(--color-neutro-suave); }
.segmentado-opcion {
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-decoration: none;
}
.segmentado-opcion:hover { color: var(--texto); }
.segmentado-opcion.activo { color: var(--texto); background: var(--superficie); box-shadow: 0 1px 2px rgba(10, 17, 27, .12); }

/* Tarjeta compacta de cita (agenda, pendientes). El borde izquierdo indica el estado. */
.cita-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio-sm);
    color: var(--texto);
    background: var(--superficie);
    text-decoration: none;
}
.cita-mini:hover { color: var(--texto); border-color: var(--color-primario); background: var(--superficie-2); }
.cita-mini-asistio    { border-left-color: var(--color-exito); }
.cita-mini-tarde      { border-left-color: var(--color-aviso); }
.cita-mini-no_asistio { border-left-color: var(--color-peligro); }
.cita-mini-cancelada  { border-left-color: var(--borde-fuerte); opacity: .7; }
.cita-mini-pendiente  { border-style: dashed; border-left-style: solid; border-left-color: #E3B25F; background: #FFF6E5; }
.cita-mini-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-2); }
.cita-mini-hora { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cita-mini-nombre { font-weight: 600; overflow-wrap: anywhere; }
.cita-mini-detalle { display: flex; align-items: center; gap: var(--e-1); font-size: 0.8rem; color: var(--texto-suave); }
.cita-mini-detalle .icono { width: 0.9rem; height: 0.9rem; }
.lista-citas { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* Vista por día: línea de tiempo */
.linea-tiempo { margin: 0; padding: 0; list-style: none; }
.linea-fila { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--e-3); padding: var(--e-2) var(--e-5); border-bottom: 1px solid var(--borde); }
.linea-fila:last-child { border-bottom: 0; }
.linea-hora { padding-top: var(--e-2); font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.linea-contenido { display: grid; gap: var(--e-2); min-width: 0; }
.linea-libre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    font-size: 0.88rem;
    color: var(--color-exito);
    border: 1px dashed #BFE3CB;
    border-radius: var(--radio-sm);
    background: var(--color-exito-suave);
}
.linea-bloqueo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    font-size: 0.88rem;
    color: var(--texto-suave);
    border-radius: var(--radio-sm);
    background: repeating-linear-gradient(135deg, var(--color-neutro-suave) 0 8px, var(--superficie-2) 8px 16px);
}
@media (max-width: 900px) { .linea-fila { padding: var(--e-2) var(--e-3); grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--e-2); } }

/* Vista por semana: una tarjeta por día */
.semana { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); align-items: start; }
.semana-dia { overflow: hidden; }
.semana-dia-hoy { border-color: var(--color-primario); }
.semana-dia-cabecera {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    color: var(--texto);
    text-decoration: none;
    border-bottom: 1px solid var(--borde);
}
.semana-dia-cabecera:hover { color: var(--color-primario); background: var(--color-primario-suave); }
.semana-dia-hoy .semana-dia-cabecera { color: #fff; background: var(--color-primario); }
.semana-dia-nombre { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.semana-dia-numero { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 700; }
.semana-dia-total { margin-left: auto; font-size: 0.8rem; font-weight: 600; }
.semana-dia-citas { display: grid; gap: var(--e-2); padding: var(--e-3); }

/* Sección que se abre y cierra (<details>) */
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable-contenido { margin-top: var(--e-3); }

/* Notas de sesión */
.nota { padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie-2); }
.nota-autor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin-bottom: var(--e-2); font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.acciones-asistencia { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Buscador (estudiantes, nueva cita) */
.buscar-estudiante { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.buscar-estudiante-campo { flex: 1 1 16rem; min-width: 0; }

/* Paginación */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

/* Números pequeños en la ficha del estudiante */
.rejilla-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.mini-dato { display: flex; flex-direction: column; padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); background: var(--fondo); }
.mini-dato-valor { font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 700; }
.mini-dato-etiqueta { font-size: 0.78rem; color: var(--texto-suave); }

/* Gráfico de barras verticales (reportes). Una sola serie: un color, sin leyenda. */
.grafico-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 14rem; }
.grafico-columna { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; outline: none; }
.grafico-valor { margin-bottom: var(--e-1); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.grafico-pista { display: flex; flex: 1; align-items: flex-end; justify-content: center; width: 100%; border-bottom: 1px solid var(--borde-fuerte); }
.grafico-barra { display: block; width: min(2.25rem, 64%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--color-primario); transition: background-color .12s; }
.grafico-columna:hover .grafico-barra,
.grafico-columna:focus-visible .grafico-barra { background: var(--color-primario-hover); }
.grafico-columna:focus-visible .grafico-etiqueta { color: var(--texto); font-weight: 600; }
.grafico-etiqueta { padding-top: var(--e-2); font-size: 0.78rem; color: var(--texto-suave); }
.grafico-ayuda {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    display: none;
    width: max-content;
    max-width: 11rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #fff;
    background: var(--marca-noche);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);
    transform: translate(-50%, -100%);
}
.grafico-columna:first-child .grafico-ayuda { left: 0; transform: translateY(-100%); }
.grafico-columna:last-child .grafico-ayuda { left: auto; right: 0; transform: translateY(-100%); }
.grafico-columna:hover .grafico-ayuda,
.grafico-columna:focus-visible .grafico-ayuda { display: block; }

/* Barras horizontales (reportes): etiqueta · barra · valor */
.barra-horizontal { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--e-3); font-size: 0.88rem; }
.barra-horizontal-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-horizontal-pista { display: block; height: 0.75rem; border-left: 1px solid var(--borde-fuerte); }
.barra-horizontal-relleno { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--color-primario); }
.barra-horizontal-valor { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Tamaños de barra en pasos de 5 % (así no hacen falta estilos escritos en el HTML) */
.grafico-altura-0 { height: 0; min-height: 0; } .grafico-altura-5 { height: 5%; } .grafico-altura-10 { height: 10%; }
.grafico-altura-15 { height: 15%; } .grafico-altura-20 { height: 20%; } .grafico-altura-25 { height: 25%; }
.grafico-altura-30 { height: 30%; } .grafico-altura-35 { height: 35%; } .grafico-altura-40 { height: 40%; }
.grafico-altura-45 { height: 45%; } .grafico-altura-50 { height: 50%; } .grafico-altura-55 { height: 55%; }
.grafico-altura-60 { height: 60%; } .grafico-altura-65 { height: 65%; } .grafico-altura-70 { height: 70%; }
.grafico-altura-75 { height: 75%; } .grafico-altura-80 { height: 80%; } .grafico-altura-85 { height: 85%; }
.grafico-altura-90 { height: 90%; } .grafico-altura-95 { height: 95%; } .grafico-altura-100 { height: 100%; }
.grafico-ancho-0 { width: 0; min-width: 0; } .grafico-ancho-5 { width: 5%; } .grafico-ancho-10 { width: 10%; }
.grafico-ancho-15 { width: 15%; } .grafico-ancho-20 { width: 20%; } .grafico-ancho-25 { width: 25%; }
.grafico-ancho-30 { width: 30%; } .grafico-ancho-35 { width: 35%; } .grafico-ancho-40 { width: 40%; }
.grafico-ancho-45 { width: 45%; } .grafico-ancho-50 { width: 50%; } .grafico-ancho-55 { width: 55%; }
.grafico-ancho-60 { width: 60%; } .grafico-ancho-65 { width: 65%; } .grafico-ancho-70 { width: 70%; }
.grafico-ancho-75 { width: 75%; } .grafico-ancho-80 { width: 80%; } .grafico-ancho-85 { width: 85%; }
.grafico-ancho-90 { width: 90%; } .grafico-ancho-95 { width: 95%; } .grafico-ancho-100 { width: 100%; }

/* Cuadrícula de disponibilidad semanal: una fila por franja, una columna por día */
.horario { overflow-x: auto; }
.horario-rejilla { display: grid; gap: 3px; min-width: 18rem; user-select: none; }
.horario-dias-1 { grid-template-columns: 3.25rem repeat(1, minmax(2.25rem, 1fr)); }
.horario-dias-2 { grid-template-columns: 3.25rem repeat(2, minmax(2.25rem, 1fr)); }
.horario-dias-3 { grid-template-columns: 3.25rem repeat(3, minmax(2.25rem, 1fr)); }
.horario-dias-4 { grid-template-columns: 3.25rem repeat(4, minmax(2.25rem, 1fr)); }
.horario-dias-5 { grid-template-columns: 3.25rem repeat(5, minmax(2.25rem, 1fr)); }
.horario-dias-6 { grid-template-columns: 3.25rem repeat(6, minmax(2.25rem, 1fr)); }
.horario-dias-7 { grid-template-columns: 3.25rem repeat(7, minmax(2.25rem, 1fr)); }

.horario-dia {
    position: sticky;
    top: 0;
    padding: 0.4rem 0;
    border: 0;
    border-radius: var(--radio-sm);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--texto);
    background: var(--superficie);
    cursor: pointer;
}
.horario-dia:hover { background: var(--color-primario-suave); color: var(--color-primario); }

.horario-hora {
    padding-right: var(--e-2);
    font-size: 0.75rem;
    line-height: 1.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}
.horario-hora-media { color: var(--texto-suave); font-size: 0.7rem; }

.horario-celda { position: relative; display: block; height: 1.75rem; cursor: pointer; }
.horario-celda input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.horario-celda span {
    display: block;
    height: 100%;
    border: 1px solid var(--borde);
    border-radius: 4px;
    background: var(--color-neutro-suave);
    transition: background-color .08s, border-color .08s;
}
.horario-celda:hover span { border-color: var(--marca-azul); }
.horario-celda input:checked + span { background: var(--agenda); border-color: var(--agenda-fuerte); }
.horario-celda input:focus-visible + span { box-shadow: var(--anillo-foco); }
/* Hora que la persona ya atiende en otra agenda: no se puede marcar (no se puede estar en dos aulas a la vez) */
.horario-celda-ocupada,
.horario-celda-ocupada input { cursor: not-allowed; }
.horario-celda-ocupada span,
.leyenda-muestra-ocupada { border-color: var(--borde-fuerte); background: repeating-linear-gradient(135deg, var(--borde-fuerte) 0 3px, var(--superficie-2) 3px 7px); }
.horario-celda-ocupada:hover span { border-color: var(--borde-fuerte); }

/* Leyenda de colores */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: 0.82rem; color: var(--texto-suave); }
.leyenda-item { display: inline-flex; align-items: center; gap: var(--e-2); }
.leyenda-muestra { width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--borde); background: var(--color-neutro-suave); }
.leyenda-muestra-activa { border-color: var(--agenda-fuerte); background: var(--agenda); }
.leyenda-muestra-libre { border-color: var(--color-primario); background: var(--color-primario-suave); }
.leyenda-muestra-elegida { border-color: var(--color-primario-hover); background: var(--color-primario); }
.leyenda-centrada { justify-content: center; }

/* Calendario mensual */
.calendario { width: 100%; max-width: 420px; margin: 0 auto; }
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
.calendario-titulo { font-family: var(--fuente-titulos); font-size: 1.05rem; font-weight: 700; text-align: center; }
.calendario-nav-apagado { opacity: .3; cursor: default; }
.calendario-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario-dia-semana {
    padding: var(--e-1) 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.calendario-dia {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: 2.1rem;
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--texto-apagado);
    text-decoration: none;
}
.calendario-dia-vacio { visibility: hidden; }
.calendario-dia-hoy { box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
.calendario-dia-libre { font-weight: 600; color: var(--color-primario); background: var(--color-primario-suave); }
.calendario-dia-libre:hover { color: var(--color-primario-hover); box-shadow: inset 0 0 0 2px var(--color-primario); }
.calendario-dia-seleccionado,
.calendario-dia-seleccionado:hover { color: #fff; background: var(--color-primario); }

.subtitulo-fecha { font-family: var(--fuente-titulos); font-weight: 700; }

/* Horas libres (enlaces o casillas de opción) */
.horas-grupo + .horas-grupo { margin-top: var(--e-4); }
.horas-periodo {
    margin-bottom: var(--e-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--e-2); }
.hora,
.hora-opcion span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
    background: var(--superficie);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.hora:hover,
.hora-opcion:hover span { color: var(--color-primario); background: var(--color-primario-suave); border-color: var(--color-primario); }
.hora-opcion { position: relative; display: block; padding: 0; border: 0; background: none; }
.hora-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hora-opcion input:checked + span { color: #fff; background: var(--color-primario); border-color: var(--color-primario-hover); }
.hora-opcion input:focus-visible + span { box-shadow: var(--anillo-foco); }

/* Pasos del proceso de reserva */
.pasos { display: flex; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.paso {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--e-2);
    min-width: 0;
    padding: var(--e-2) var(--e-3);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--texto-suave);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.paso-numero {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 700;
    background: var(--color-neutro-suave);
}
.paso-numero .icono { width: 1rem; height: 1rem; }
.paso-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso-enlace { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: inherit; text-decoration: none; }
.paso-enlace:hover { color: var(--texto); }
.paso-enlace:hover .paso-texto { text-decoration: underline; }
.paso-actual { color: var(--texto); border-color: var(--color-primario); }
.paso-actual .paso-numero { color: #fff; background: var(--color-primario); }
.paso-hecho .paso-numero { color: var(--color-exito); background: var(--color-exito-suave); }
@media (max-width: 520px) {
    .paso:not(.paso-actual) { flex: 0 0 auto; }
    .paso:not(.paso-actual) .paso-texto { display: none; }
}

/* Resumen de una cita con íconos */
.resumen { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.resumen-fila { display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; }
.resumen-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radio-sm);
    color: var(--color-primario);
    background: var(--color-primario-suave);
}
.resumen-etiqueta { display: block; font-size: 0.78rem; color: var(--texto-suave); }
.resumen-valor { display: block; font-weight: 600; overflow-wrap: anywhere; }

/* Móvil: el menú lateral se vuelve un panel deslizable */
.menu-fondo { display: none; }

@media (max-width: 900px) {
    .menu-lateral {
        position: fixed;
        z-index: 20;
        left: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-lg);
    }
    .menu-abierto .menu-lateral { transform: translateX(0); }
    .menu-abierto .menu-fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(10, 17, 27, .5);
    }
    .boton-menu { display: inline-flex; }
    .barra-superior { padding: var(--e-2) var(--e-4); }
    .barra-titulo { font-size: 1.05rem; }
    .contenido { padding: var(--e-4); }
    .tabla th, .tabla td { padding: var(--e-3); }
}

/* 10. Páginas públicas y de acceso --------------------------- */
.fondo-marca {
    color: var(--texto-invertido);
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(1, 163, 245, .16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 90% 100%, rgba(189, 7, 35, .14), transparent 70%),
        var(--marca-noche);
}

/* Inicio de sesión, instalador y páginas de error */
.acceso {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--e-5) var(--e-4);
}
.acceso-caja { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--e-5); }
.acceso-caja-ancha { max-width: 560px; }
.acceso-marca { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
.acceso-logo { width: 240px; }
.acceso-producto {
    font-family: var(--fuente-titulos);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--marca-azul);
}
.acceso .tarjeta { color: var(--texto); box-shadow: var(--sombra-lg); border: 0; }
.acceso-pie { text-align: center; font-size: 0.85rem; color: var(--texto-invertido-suave); }
.acceso-pie a { color: var(--texto-invertido); }

/* Página pública del estudiante */
.publico-cabecera { border-bottom: 1px solid var(--marca-noche-3); }
.publico-cabecera-interior,
.publico-heroe-interior,
.publico-principal,
.publico-pie-interior {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding-left: var(--e-4);
    padding-right: var(--e-4);
}
.publico-cabecera-interior { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding-top: var(--e-4); padding-bottom: var(--e-4); }
.publico-logo { width: 170px; }
.publico-enlace { font-size: 0.9rem; color: var(--texto-invertido-suave); text-decoration: none; }
.publico-enlace:hover { color: #fff; }

.publico-heroe-interior { padding-top: var(--e-7); padding-bottom: calc(var(--e-7) + var(--e-6)); }
.publico-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--fuente-titulos);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--marca-azul);
}
.publico-titulo { margin-top: var(--e-3); font-size: clamp(1.9rem, 4.5vw, 2.9rem); max-width: 18ch; }
.publico-titulo-acento { color: var(--marca-azul); }
/* Dentro de una agenda, la franja superior toma su color claro */
[class*="agenda-"] .publico-etiqueta { color: var(--agenda-claro); }
.publico-bajada { margin-top: var(--e-4); max-width: 58ch; font-size: 1.05rem; color: var(--texto-invertido-suave); }
.publico-bajada .icono { vertical-align: -0.15em; }

.publico-heroe-compacto { padding-top: var(--e-6); padding-bottom: calc(var(--e-6) + var(--e-5)); }
.publico-heroe-compacto .publico-titulo { max-width: none; font-size: clamp(1.5rem, 3.5vw, 2.1rem); }

.publico-principal { margin-top: calc(-1 * var(--e-6)); padding-bottom: var(--e-7); }

/* En celulares la franja superior es más baja: las opciones para agendar se ven sin tener que bajar */
@media (max-width: 560px) {
    .publico-cabecera-interior { padding-top: var(--e-3); padding-bottom: var(--e-3); }
    .publico-logo { width: 140px; }
    .publico-heroe-interior { padding-top: var(--e-5); padding-bottom: calc(var(--e-5) + var(--e-6)); }
    .publico-heroe-compacto { padding-top: var(--e-4); padding-bottom: calc(var(--e-4) + var(--e-6)); }
    .publico-bajada { margin-top: var(--e-2); font-size: 0.95rem; }
}

.caracteristica { display: flex; gap: var(--e-3); align-items: flex-start; }
.caracteristica .dato-icono { flex-shrink: 0; }
.caracteristica-titulo { font-weight: 600; }

.publico-pie { border-top: 1px solid var(--borde); }
.publico-pie-interior {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-3);
    padding-top: var(--e-5);
    padding-bottom: var(--e-5);
    font-size: 0.85rem;
    color: var(--texto-suave);
}

/* 11. Acciones rápidas, códigos, filtros, accesos y carga ------ */

/* Código visible de cada registro (C-0034, E-0012, U-0003) */
.codigo {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-primario-hover);
    background: var(--color-primario-suave);
}
a .codigo:hover { background: var(--superficie-3); }

/* Celda con dato principal y detalle debajo */
.celda-principal { display: block; font-weight: 600; color: var(--texto); text-decoration: none; }
a.celda-principal:hover { color: var(--color-primario); }
.celda-detalle { display: block; font-size: 0.76rem; color: var(--texto-suave); overflow-wrap: anywhere; }

/* Botones de acción solo con ícono (ver, editar, WhatsApp…) */
.acciones { display: flex; flex-wrap: wrap; gap: 4px; }
.tabla .col-acciones .acciones { justify-content: flex-end; flex-wrap: nowrap; }
.accion-formulario { display: contents; }
.accion {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    font: inherit;
    color: var(--texto-suave);
    background: var(--campo);
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.accion .icono { width: 1rem; height: 1rem; }
.accion:hover { color: var(--color-primario); border-color: var(--color-primario); background: var(--color-primario-suave); }
.accion-primario { color: var(--color-primario); border-color: transparent; background: var(--color-primario-suave); }
.accion-primario:hover { color: #fff; background: var(--color-primario); }
.accion-peligro { color: var(--color-peligro); }
.accion-peligro:hover { color: var(--color-peligro-hover); border-color: var(--color-peligro); background: var(--color-peligro-suave); }
/* Verde oscuro de WhatsApp: el ícono blanco se ve claro (contraste suficiente) */
.accion-whatsapp { color: #fff; border-color: transparent; background: #1B8A4C; }
.accion-whatsapp:hover { color: #fff; border-color: transparent; background: #146C3B; }

/* Accesos rápidos (inicio del panel) */
.accesos-rapidos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.acceso-rapido {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-3);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    background: var(--superficie);
    text-decoration: none;
    transition: border-color .12s, background-color .12s;
}
.acceso-rapido:hover { color: var(--texto); border-color: var(--color-primario); background: var(--superficie-2); }
.acceso-rapido-icono { display: grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: var(--radio-sm); color: var(--color-primario); background: var(--color-primario-suave); }
.acceso-rapido-texto { min-width: 0; }
.acceso-rapido-titulo { display: block; font-weight: 700; font-size: 0.9rem; }
.acceso-rapido-descripcion { display: block; font-size: 0.76rem; color: var(--texto-suave); }

/* Barra de filtros */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); padding: 0.9rem 1rem; }
.filtros-campos { flex: 1 1 32rem; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); min-width: 0; }
.filtros-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Silueta de carga (skeleton) mientras se abre otra página */
.esqueleto-pagina { display: none; }
body.cargando [data-contenido] { display: none; }
body.cargando .esqueleto-pagina { display: flex; }
.esqueleto {
    border-radius: var(--radio-sm);
    background: linear-gradient(90deg, var(--superficie-3) 25%, var(--superficie-2) 50%, var(--superficie-3) 75%);
    background-size: 200% 100%;
    animation: esqueleto-brillo 1.2s linear infinite;
}
.esqueleto-titulo { width: min(22rem, 60%); height: 1.6rem; }
.esqueleto-dato { height: 4.6rem; border-radius: var(--radio); }
.esqueleto-linea { height: 0.85rem; }
.esqueleto-linea-corta { width: 30%; }
.esqueleto-linea-media { width: 60%; }
@keyframes esqueleto-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

/* Tabla sin espacio (celular, tableta, laptop pequeña o columna angosta): cada fila es una tarjeta
   y cada dato muestra el nombre de su columna. Depende del ancho de la tabla, no de la pantalla. */
@container tabla (max-width: 760px) {
    .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabla, .tabla tbody, .tabla tr { display: block; }
    .tabla tbody { display: grid; gap: var(--e-2); padding: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
    .tabla tbody tr,
    .tabla tbody tr:nth-child(even) { border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--campo); }
    .tabla td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--e-2); align-items: center; padding: 0.45rem 0.75rem; border-bottom: 1px dashed var(--borde); }
    .tabla td::before { content: attr(data-etiqueta); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
    .tabla tr td:last-child { border-bottom: 0; }
    .tabla .col-numero { text-align: left; }
    .tabla .col-acciones, .tabla .col-codigo { width: auto; white-space: normal; }
    .tabla .col-acciones .acciones { justify-content: flex-start; flex-wrap: wrap; }
    .accion { width: 2.25rem; height: 2.25rem; }
}

/* Tarjetas KPI que funcionan como botón (llevan a la lista exacta de ese número) */
a.dato { color: var(--texto); text-decoration: none; transition: border-color .12s, background-color .12s, box-shadow .12s; }
.dato-enlace:hover { color: var(--texto); border-color: var(--color-primario); background: var(--superficie-2); }
.dato-enlace:focus-visible { box-shadow: var(--anillo-foco); }
.dato-flecha { margin-left: auto; align-self: center; color: var(--texto-apagado); }
.dato-enlace:hover .dato-flecha { color: var(--color-primario); }
.dato-activo { border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario); }
.dato-activo .dato-flecha { color: var(--color-primario); }

/* 12. Agendas (colores), avisos y ayudas de uso ---------------- */

/* Cada agenda tiene su color. La clase agenda-{tema} cambia estas variables
   y todo lo que está dentro (íconos, bordes, botones btn-agenda) las usa. */
.agenda-azul    { --agenda: #0077CC; --agenda-fuerte: #005FA3; --agenda-suave: #DCEBFA; --agenda-claro: #5CC3FF; }
.agenda-violeta { --agenda: #6D3FC4; --agenda-fuerte: #5530A0; --agenda-suave: #E9E1F8; --agenda-claro: #B9A0FF; }
.agenda-verde   { --agenda: #147A3B; --agenda-fuerte: #0F5E2D; --agenda-suave: #DCF0E3; --agenda-claro: #6FD39A; }
.agenda-ambar   { --agenda: #A55A06; --agenda-fuerte: #7F4504; --agenda-suave: #F8EBD3; --agenda-claro: #F2B45F; }

/* Páginas públicas de una agenda: toda la página (calendario, horas, pasos, botones) toma su color */
body[class*="agenda-"] {
    --color-primario: var(--agenda);
    --color-primario-hover: var(--agenda-fuerte);
    --color-primario-suave: var(--agenda-suave);
}

/* Etiqueta de agenda (ícono + nombre) y cuadro con su ícono */
.agenda-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.15rem 0.6rem 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--agenda-fuerte);
    background: var(--agenda-suave);
    vertical-align: middle;
}
.agenda-etiqueta .icono { width: 0.95rem; height: 0.95rem; }
.agenda-etiqueta span { min-width: 0; overflow-wrap: anywhere; }
.agenda-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radio-sm);
    color: #fff;
    background: var(--agenda);
}
.agenda-icono .icono { width: 1.15rem; height: 1.15rem; }

/* Tarjeta que pertenece a una agenda: franja superior de su color */
.tarjeta-agenda { border-top: 4px solid var(--agenda); }
.tarjeta-agenda .resumen-icono { color: var(--agenda); background: var(--agenda-suave); }

/* Globo de aviso con número: algo espera una acción */
.contador {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-family: var(--fuente-texto);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: #fff;
    background: var(--marca-rojo);
    vertical-align: middle;
}
.titulo-seccion .icono { vertical-align: -0.15em; }
.titulo-seccion .contador { margin-left: var(--e-1); }

/* Indicador que pide una acción (solicitudes por aprobar, sesiones sin registrar) */
.dato-alerta,
.dato-alerta:hover { border-color: #E3A6B0; background: #FBEDEF; }
.dato-alerta .dato-icono { color: #fff; background: var(--marca-rojo); }
.dato-alerta .dato-valor { color: var(--marca-rojo); }
.dato-alerta:hover { box-shadow: inset 0 0 0 1px var(--marca-rojo); }

/* Tarjeta con algo por atender */
.tarjeta-atencion { border-color: #E3A6B0; }
.tarjeta-atencion > .tarjeta-cabecera { border-radius: var(--radio) var(--radio) 0 0; background: #FBEDEF; }
.tarjeta-pie { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borde); color: var(--texto-suave); }
.tarjeta-cabecera-interna { border-top: 1px solid var(--borde); }
.respuesta-solicitud { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-3); }
.respuesta-solicitud .desplegable { flex: 1 1 16rem; min-width: 0; }

/* Tablero del inicio: una tarjeta por agenda con sus números y sus botones */
.tablero { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); align-items: start; }
.tablero-agenda {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-4);
    border: 1px solid var(--borde);
    border-top: 5px solid var(--agenda);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    container: tablero / inline-size;
}
.tablero-agenda-cabecera { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.tablero-agenda-icono {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radio);
    color: #fff;
    background: var(--agenda);
}
.tablero-agenda-icono > .icono { width: 1.6rem; height: 1.6rem; }
.tablero-agenda-icono .contador { position: absolute; top: -7px; right: -9px; box-shadow: 0 0 0 2px var(--superficie); }
.tablero-agenda-titulo { min-width: 0; }
.tablero-agenda-nombre { font-size: 1.2rem; color: var(--agenda-fuerte); }
.tablero-agenda-detalle { display: flex; align-items: center; gap: var(--e-1); font-size: 0.82rem; color: var(--texto-suave); }
.tablero-agenda-aviso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.tablero-numeros { display: grid; gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tablero-numeros .dato { gap: var(--e-3); padding: var(--e-3); box-shadow: none; background: var(--campo); }
.tablero-numeros .dato-alerta { background: #FBEDEF; }
.tablero-numeros .dato-icono { width: 2.25rem; height: 2.25rem; flex-shrink: 0; color: var(--agenda); background: var(--agenda-suave); }
.tablero-numeros .dato-alerta .dato-icono { color: #fff; background: var(--marca-rojo); }
.tablero-numeros .dato-flecha { display: none; }
@container tablero (max-width: 21rem) { .tablero-numeros { grid-template-columns: minmax(0, 1fr); } }
.tablero-agenda-siguiente {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-sm);
    font-size: 0.88rem;
    color: var(--agenda-fuerte);
    background: var(--agenda-suave);
}
.tablero-agenda-siguiente .icono { margin-top: 0.2rem; }
.tablero-agenda-siguiente a { color: inherit; }
.tablero-agenda-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Cabecera de las páginas de una agenda: su nombre, su aula y sus pestañas */
.agenda-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3) var(--e-4);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--agenda);
    border-radius: var(--radio);
    background: linear-gradient(90deg, var(--agenda-suave), var(--superficie) 75%);
    box-shadow: var(--sombra);
}
.agenda-cabecera-titulo { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.agenda-cabecera-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radio);
    color: #fff;
    background: var(--agenda);
}
.agenda-cabecera-icono .icono { width: 1.5rem; height: 1.5rem; }
.agenda-cabecera-nombre { font-size: 1.15rem; color: var(--agenda-fuerte); }
.agenda-cabecera-detalle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); font-size: 0.82rem; color: var(--texto-suave); }
.agenda-pestanas { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--campo); }
.agenda-pestana {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-decoration: none;
}
.agenda-pestana:hover { color: var(--agenda-fuerte); background: var(--agenda-suave); }
.agenda-pestana.activo,
.agenda-pestana.activo:hover { color: #fff; background: var(--agenda); }

/* Tarjetas de servicio: página pública (elegir qué agendar) y Panel → Agendas */
.servicios { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: stretch; }
.servicio {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-5);
    border: 1px solid var(--borde);
    border-top: 6px solid var(--agenda);
    border-radius: var(--radio-lg);
    color: var(--texto);
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.servicio-inactivo { border-top-color: var(--borde-fuerte); background: var(--superficie-2); }
.servicio-cabecera { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.servicio-cabecera > div { min-width: 0; }
.servicio-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radio);
    color: #fff;
    background: var(--agenda);
}
.servicio-inactivo .servicio-icono { background: var(--texto-apagado); }
.servicio-icono .icono { width: 1.9rem; height: 1.9rem; }
.servicio-nombre { font-size: 1.35rem; color: var(--agenda-fuerte); }
.servicio-descripcion { color: var(--texto-suave); }
.servicio-datos { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.servicio-datos li { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; }
.servicio-datos .icono { margin-top: 0.2rem; color: var(--agenda); }
.servicio-datos span { min-width: 0; overflow-wrap: anywhere; }
.servicio-acciones { display: flex; flex-direction: column; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); }
.servicio-acciones.fila { flex-direction: row; }
.servicio-proxima { font-size: 0.85rem; text-align: center; color: var(--texto-suave); }
.servicio-proxima a { font-weight: 600; }

/* Selector de agenda (Disponibilidad) */
.selector-agenda { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.selector-agenda-opcion {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-width: 0;
    padding: var(--e-3);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    background: var(--superficie);
    text-decoration: none;
}
.selector-agenda-opcion > span:last-child { min-width: 0; }
.selector-agenda-opcion:hover { color: var(--texto); border-color: var(--agenda); }
.selector-agenda-opcion.activo { border-color: var(--agenda); background: var(--agenda-suave); }
.selector-agenda-nombre { display: block; font-weight: 700; }
.selector-agenda-detalle { display: block; font-size: 0.78rem; color: var(--texto-suave); }

/* Casillas para elegir agendas (Usuarios) */
.grupo-casillas { margin: 0; padding: 0; border: 0; gap: var(--e-2); }
.grupo-casillas legend { padding: 0; margin-bottom: var(--e-1); }
.casilla-agenda { align-items: center; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--campo); cursor: pointer; }
.casilla-agenda input { margin-top: 0; accent-color: var(--agenda); }
.casilla-agenda:has(input:checked) { border-color: var(--agenda); background: var(--agenda-suave); }
.casilla-agenda > span:last-child { min-width: 0; }

/* Acciones rápidas con color propio */
.accion-exito { color: #fff; border-color: transparent; background: var(--color-exito); }
.accion-exito:hover { color: #fff; border-color: transparent; background: #0F5E2D; }
.accion-agenda { color: var(--agenda); border-color: transparent; background: var(--agenda-suave); }
.accion-agenda:hover { color: #fff; border-color: transparent; background: var(--agenda); }
.acceso-rapido[class*="agenda-"] .acceso-rapido-icono { color: #fff; background: var(--agenda); }
.acceso-rapido[class*="agenda-"]:hover { border-color: var(--agenda); }

/* Menú que se abre al pulsar un botón (campana de avisos, "Nueva cita" con varias agendas) */
.menu-flotante { position: relative; }
.menu-flotante > summary { list-style: none; cursor: pointer; }
.menu-flotante > summary::-webkit-details-marker { display: none; }
.menu-flotante-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: max-content;
    min-width: 15rem;
    max-width: min(23rem, calc(100vw - 2rem));
    padding: var(--e-2);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    background: var(--campo);
    box-shadow: var(--sombra-lg);
}
.menu-flotante-ancho { min-width: min(19rem, calc(100vw - 2rem)); }
.menu-flotante-titulo { padding: var(--e-1) var(--e-2) var(--e-2); font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.menu-flotante-opcion {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2);
    border-radius: var(--radio-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texto);
    text-decoration: none;
}
.menu-flotante-opcion > span:last-child { min-width: 0; }
.menu-flotante-opcion:hover { color: var(--agenda-fuerte); background: var(--agenda-suave); }
.menu-flotante-detalle { display: block; font-size: 0.76rem; font-weight: 500; color: var(--texto-suave); }
.menu-flotante-vacio { display: flex; align-items: flex-start; gap: var(--e-2); padding: var(--e-2); font-size: 0.88rem; color: var(--color-exito); }
.menu-flotante-vacio .icono { margin-top: 0.2rem; }
/* En celulares el menú ocupa el ancho de la barra superior (no se sale de la pantalla) */
@media (max-width: 640px) {
    .barra-superior .menu-flotante { position: static; }
    .barra-superior .menu-flotante-panel { top: calc(100% + 4px); left: var(--e-4); right: var(--e-4); width: auto; max-width: none; }
}

/* Ruta de navegación: Inicio › Agenda › Citas */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--texto-suave); }
.migas li { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
.migas li + li::before { content: "›"; color: var(--texto-apagado); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--color-primario); text-decoration: underline; }
.migas [aria-current] { font-weight: 600; color: var(--texto); }
/* En celulares solo se muestra el nivel anterior, como botón de "volver" */
@media (max-width: 560px) {
    .migas li { display: none; }
    .migas li:nth-last-child(2) { display: inline-flex; }
    .migas li:nth-last-child(2)::before { content: "‹"; }
    .migas li:nth-last-child(2) a { padding: var(--e-1) 0; font-weight: 600; }
}

/* Resumen de errores de un formulario: dice qué corregir y enlaza a cada campo */
.alerta > div { min-width: 0; }
.alerta-resumen ul { margin: var(--e-1) 0 0; padding-left: 1.1rem; }
.alerta-resumen a { color: inherit; font-weight: 600; }
.alerta-resumen:focus { outline: none; box-shadow: var(--anillo-foco); }

/* Enlace para saltar el menú con el teclado (visible solo al enfocarlo) */
.saltar { position: absolute; left: var(--e-3); top: -4rem; z-index: 50; padding: var(--e-2) var(--e-3); border-radius: var(--radio-sm); font-weight: 600; color: #fff; background: var(--color-primario); }
.saltar:focus { top: var(--e-3); color: #fff; }

/* Ayuda: temas que se abren y cierran */
.ayuda-temas { display: grid; gap: var(--e-2); }
.ayuda-tema-titulo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); font-weight: 700; cursor: pointer; list-style: none; }
.ayuda-tema-titulo::-webkit-details-marker { display: none; }
.ayuda-tema-titulo .dato-icono { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.ayuda-tema-titulo > span:nth-child(2) { flex: 1; min-width: 0; }
.ayuda-tema-flecha { color: var(--texto-apagado); transition: transform .15s; }
.ayuda-tema[open] .ayuda-tema-flecha { transform: rotate(90deg); }
.ayuda-tema-cuerpo { padding: 0 var(--e-4) var(--e-4) calc(var(--e-4) + 2.25rem + var(--e-3)); }
.ayuda-pasos { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding-left: 1.1rem; }
@media (max-width: 560px) { .ayuda-tema-cuerpo { padding-left: var(--e-4); } }

/* 13. Pantallas táctiles (celulares y tabletas) ---------------- */

/* Letra de 16 px en los campos: con menos, Safari en iPhone amplía la página sola al tocar un campo. */
@media (pointer: coarse), (max-width: 900px) {
    .entrada,
    .entrada-compacta,
    select.entrada,
    textarea.entrada { font-size: 16px; }
    .entrada::placeholder { font-size: 14px; }
}

/* Botones y casillas más altos para tocarlos con el dedo sin fallar */
@media (pointer: coarse) {
    .btn { min-height: 2.75rem; }
    .btn-sm { min-height: 2.4rem; }
    .accion { width: 2.5rem; height: 2.5rem; }
    .hora,
    .hora-opcion span { min-height: 2.75rem; }
    .menu-enlace { padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .casilla input { width: 1.2rem; height: 1.2rem; }
    .horario-celda { height: 2.25rem; }
    .horario-hora { line-height: 2.25rem; }
    .calendario-dia { min-height: 2.5rem; }
    .agenda-pestana { min-height: 2.5rem; }
}