/* ==========================================================================
   Preferencias personales de la agenda del día (/agenda)
   Dos piezas, las dos con prefijo propio:
     · `ags-pref-*` → el menú "Mi agenda", junto a las pestañas de sala.
       Render: funciones/preferenciasAgenda.php → agendaMenuPreferenciasHtml().
     · `avc-*`      → el aviso que presenta la vista compacta (Swal).
       Render: agendaPrincipal/js/preferenciasAgenda.js → mostrarAvisoVistaCompacta().

   Vivían en salaSimplificada.css mientras el menú solo elegía la sala; se separaron
   al pasar a gobernar también la interfaz, que no es cosa de esa vista.

   Paleta: la del Workspace Clínico, igual que la Sala Simplificada, para que el menú
   no parezca de otro sistema. Las variables `--ags-*` las define salaSimplificada.css,
   que se carga siempre en /agenda; acá se repiten los pocos literales que hacen falta
   para que el aviso (que se pinta dentro de un Swal, fuera de la tabla) no dependa de él.
   ========================================================================== */

/* ==========================================================================
   SELECTOR DE SALA PREDETERMINADA — vive junto a las pestañas de sala, fuera de
   `.ags-wrap`. Render: funciones/salaPreferidaAgenda.php → salaAgendaSelectorHtml().
   Deliberadamente discreto: es una preferencia que se toca una vez, no una acción
   del día, así que no compite con las pestañas ni con "Bloquear día".
   ========================================================================== */
.ags-pref-btn {
    border: 1px solid var(--ags-borde-2);
    border-radius: 8px;
    background: #fff;
    color: var(--ags-texto-2);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    white-space: nowrap;
}

.ags-pref-btn:hover,
.ags-pref-btn:focus {
    background: var(--ags-fondo-2);
    border-color: var(--ags-suave);
    color: var(--ags-texto);
}

.ags-pref-menu {
    min-width: 290px;
    max-width: 320px;
    padding: 6px 0 0;
    border: 1px solid var(--ags-borde);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.ags-pref-menu .dropdown-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ags-tenue);
    padding: 4px 14px 8px;
}

.ags-pref-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 14px;
    white-space: normal;
}

.ags-pref-item:hover {
    background: var(--ags-hover);
}

.ags-pref-check {
    flex-shrink: 0;
    padding-top: 2px;
    font-size: 13px;
    color: var(--ags-tenue);
}

.ags-pref-item--activa .ags-pref-check {
    color: var(--ags-verde);
}

.ags-pref-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ags-pref-texto strong {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ags-texto);
}

.ags-pref-texto small {
    font-size: 11px;
    line-height: 1.35;
    color: var(--ags-suave);
}

/* "Ver de nuevo qué cambió" — deliberadamente más discreto que los ítems de arriba: no es
   una preferencia, es una ayuda que se usa una o dos veces. Va entre el último ítem y el pie
   para que no compita con lo que sí se elige. */
.ags-pref-verla {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    border-top: 1px solid var(--ags-borde);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ags-suave);
}

.ags-pref-verla:hover { background: var(--ags-hover); color: var(--ags-azul); }
.ags-pref-verla i { font-size: 12px; }

.ags-pref-pie {
    margin-top: 4px;
    padding: 8px 14px;
    border-top: 1px solid var(--ags-borde);
    background: var(--ags-fondo);
    border-radius: 0 0 10px 10px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--ags-tenue);
}

/* Interruptor de la vista compacta: el mismo molde que los ítems de sala, pero el
   check es un toggle, porque no se elige entre varias sino que se prende o apaga. */
.ags-pref-item .fa-toggle-on { color: #198754; }
.ags-pref-item .fa-toggle-off { color: #9ca3af; }

.ags-pref-menu .dropdown-divider { margin: 6px 0; }

/* ==========================================================================
   AVISO DE LA VISTA COMPACTA
   Se muestra UNA vez por usuario, la primera vez que entra a la agenda tras el
   despliegue. Es OPT-IN: presenta la novedad y deja decidir; quien no acepta sigue
   con la agenda de siempre.
   ========================================================================== */
.avc-popup { border-radius: 16px; }

.avc { text-align: left; }

.avc-titulo {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}

.avc-bajada {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* ── La animación: una agenda en miniatura donde la cabecera se aparta ───────
   Es el mismo comportamiento real: al recorrer las citas la cabecera se pliega y la
   lista crece para ocupar el hueco, por eso aparecen DOS filas más.

   🔴 La miniatura lleva TEXTO de verdad —"Dar cita", "Kira", "10:00"— y no cajas
   grises. La primera versión dibujaba rectángulos `#e9edf0` sobre blanco y barritas
   de 9 px: en pantalla no se veía nada y el usuario lo reportó. Una ilustración de
   una pantalla tiene que parecerse a la pantalla.

   Los alto están calzados para que el salto se note: la cabecera son DOS filas (52 px,
   como en la realidad), así que plegada la lista pasa de 4 filas visibles a 6.
   Todas las medidas son fijas a propósito; si se tocan, recalcular el conteo del pie.

   Cada regla lleva el prefijo `.avc` para no depender de la especificidad de
   SweetAlert2 ni de los estilos globales del sistema.
   ========================================================================== */
.avc-demo { margin-bottom: 18px; }

.avc .avc-ventana {
    height: 190px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cbd5dc;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Lo que se pliega: las dos filas de controles. */
.avc .avc-cabecera {
    flex-shrink: 0;
    max-height: 52px;
    overflow: hidden;
    background: #fff;
    animation: avc-plegar 7s ease-in-out infinite;
}

.avc .avc-cfila {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 8px;
}

.avc .avc-cfila + .avc-cfila { border-top: 1px solid #f1f4f6; }

.avc .avc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 18px;
    padding: 0 7px;
    border: 1px solid #d7dee4;
    border-radius: 5px;
    background: #fff;
    color: #55646f;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.avc .avc-btn--hoy { background: #e8f0fb; border-color: #bcd4f0; color: #2563b0; }
.avc .avc-btn--cita { background: #198754; border-color: #198754; color: #fff; }
.avc .avc-btn--urg { background: #fbe9eb; border-color: #eeb8bf; color: #a71d2a; }
.avc .avc-btn--busca {
    flex: 1 1 auto;
    justify-content: flex-start;
    font-weight: 400;
    color: #9aa7b1;
}

.avc .avc-salas {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
    padding: 0 8px;
    border-top: 1px solid #e3e8ec;
    border-bottom: 1px solid #cbd5dc;
    background: #fff;
}

.avc .avc-sala {
    padding: 4px 8px;
    border-radius: 5px 5px 0 0;
    background: #f1f4f6;
    color: #8a97a3;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.avc .avc-sala.avc-on { background: #e4f0ec; color: #14663f; }

.avc .avc-lista { flex: 1 1 auto; min-height: 0; overflow: hidden; }

.avc .avc-cita {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 27px;
    padding: 0 9px;
    border-bottom: 1px solid #eef1f3;
    border-left: 3px solid #e3e8ec;
    font-size: 9.5px;
    line-height: 1;
}

.avc .avc-hora { flex-shrink: 0; width: 28px; font-weight: 700; color: #55646f; }
.avc .avc-paciente { flex: 1 1 auto; font-weight: 700; color: #1f2937; }
.avc .avc-estado { flex-shrink: 0; color: #8a97a3; font-weight: 600; }

.avc .avc-cita.avc-celeste { border-left-color: #38bdf8; }
.avc .avc-cita.avc-azul { border-left-color: #1a6fc4; }
.avc .avc-cita.avc-azul .avc-estado { color: #1a6fc4; }
.avc .avc-cita.avc-ambar { border-left-color: #b45309; }
.avc .avc-cita.avc-ambar .avc-estado { color: #92400e; }
.avc .avc-cita.avc-verde { border-left-color: #198754; opacity: .55; }

/* Los dos tiempos se cruzan a la mitad del ciclo, igual que la cabecera. */
@keyframes avc-plegar {
    0%, 20%   { max-height: 52px; }
    32%, 70%  { max-height: 0; }
    82%, 100% { max-height: 52px; }
}

@keyframes avc-cuenta-antes {
    0%, 20%   { opacity: 1; }
    32%, 70%  { opacity: 0; }
    82%, 100% { opacity: 1; }
}

@keyframes avc-cuenta-despues {
    0%, 20%   { opacity: 0; }
    32%, 70%  { opacity: 1; }
    82%, 100% { opacity: 0; }
}

/* El pie cuenta lo que la animación muestra. Los dos textos se superponen en la misma
   caja —de ahí el `grid` con las dos en la celda 1/1— para que el bloque no cambie de
   alto al cruzarse y el modal no dé un salto. */
.avc-pie-demo {
    display: grid;
    margin: 9px 0 0;
    text-align: center;
}

.avc-cuenta {
    grid-area: 1 / 1;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}

.avc-cuenta--antes {
    color: #9ca3af;
    animation: avc-cuenta-antes 7s ease-in-out infinite;
}

.avc-cuenta--despues {
    color: #198754;
    animation: avc-cuenta-despues 7s ease-in-out infinite;
}

/* ── Los tres puntos de la novedad ──────────────────────────────────────── */
.avc-puntos { margin: 0; padding: 0; list-style: none; }

.avc-puntos li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 9px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4b5563;
}
.avc-puntos li + li { border-top: 1px solid #f1f4f6; }
.avc-puntos strong { color: #1f2937; }
.avc-puntos em { font-style: normal; font-weight: 600; color: #198754; }

.avc-puntos i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eaf4f0;
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.avc-manual {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1a6fc4;
    text-decoration: none;
}
.avc-manual:hover { color: #145390; text-decoration: underline; }

/* El aviso se muestra UNA sola vez y hay que decirlo: si no, el usuario que elige
   "Ahora no" queda esperando que vuelva a ofrecérselo. */
.avc-pie {
    margin: 14px 0 0;
    padding-top: 11px;
    border-top: 1px solid #f1f4f6;
    font-size: 11.5px;
    line-height: 1.45;
    color: #9ca3af;
}
.avc-pie strong { color: #6b7280; }

/* ── Botones del aviso (buttonsStyling: false) ──────────────────────────── */
.avc-si, .avc-no {
    border-radius: 9px;
    border: 1px solid transparent;
    padding: 10px 20px;
    margin: 0 5px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.avc-si { background: #198754; color: #fff; }
.avc-si:hover { background: #157347; }
.avc-no { background: #fff; border-color: #d1d5db; color: #4b5563; }
.avc-no:hover { background: #f3f4f6; }

@media (max-width: 575.98px) {
    .avc-titulo { font-size: 18px; }
    .avc-ventana { height: 152px; }
    .avc-si, .avc-no { width: 100%; margin: 4px 0; }
}

/* Sin movimiento: se congela en el estado PLEGADO, que es lo que el aviso ofrece, y se
   deja visible solo el texto que le corresponde. */
@media (prefers-reduced-motion: reduce) {
    .avc .avc-cabecera { animation: none; max-height: 0; }
    .avc-cuenta { animation: none; }
    .avc-cuenta--antes { display: none; }
    .avc-cuenta--despues { opacity: 1; }
}