/* ==========================================================================
   Citas · Liquid Glass — capa ligera de vidrio + transiciones estilo Apple
   Se apoya en las clases ya existentes (citas-*, cita-card, gcal-*) definidas
   en optometria-premium.css; aquí solo se refinan blur, curvas y microfísica.
   Filosofía: blur real solo en 3-4 superficies grandes (nunca por tarjeta),
   animaciones basadas en transform/opacity (GPU, baratas) y curva de resorte
   estilo iOS/macOS (cubic-bezier(.22,1,.36,1)) en vez de "ease" genérico.
   ========================================================================== */

#view-citas {
    --cg-spring: cubic-bezier(.22, 1, .36, 1);
    --cg-fast: .18s;
    --cg-med: .32s;
    position: relative;
}

/* Fondo ambiental sutil (solo gradientes, sin blur → prácticamente gratis) para
   que las superficies de vidrio tengan algo de color debajo que difuminar. */
#view-citas::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .10), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(56, 189, 248, .10), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(129, 140, 248, .06), transparent 40%);
}

[data-theme="dark"] #view-citas::before {
    background:
        radial-gradient(circle at 12% 0%, rgba(99, 102, 241, .16), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(56, 189, 248, .14), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(129, 140, 248, .1), transparent 40%);
}

/* ── Vidrio real: solo en superficies grandes y poco numerosas ────────────── */
#view-citas .citas-header {
    background: linear-gradient(135deg, rgba(10, 90, 190, .82) 0%, rgba(10, 65, 140, .86) 100%) !important;
    border-radius: 26px !important;
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    transition: box-shadow var(--cg-med) var(--cg-spring);
}

#view-citas .citas-toolbar-shell {
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    transition: box-shadow var(--cg-med) var(--cg-spring), transform var(--cg-med) var(--cg-spring);
}

#view-citas .citas-form-card {
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

#view-citas .citas-list-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
}

/* ── Curva de resorte Apple para todo lo interactivo (sin tocar el blur) ──── */
#view-citas .citas-header-btn,
#view-citas .citas-btn-agendar,
#view-citas .citas-filter-wrap,
#view-citas .citas-filter-input,
#view-citas .cita-card-action,
#view-citas .cita-estado-select,
#view-citas .citas-btn-confirmar,
#view-citas .venta-card.cita-card {
    transition-timing-function: var(--cg-spring) !important;
}

/* ── Tarjetas de cita: reposo liviano + realce en hover, sin blur por tarjeta */
#view-citas .venta-card.cita-card {
    transition-property: transform, box-shadow, border-color !important;
    transition-duration: var(--cg-med) !important;
    will-change: transform;
    position: relative;
}

#view-citas .venta-card.cita-card:hover {
    transform: translateY(-3px) scale(1.003);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
    border-color: rgba(99, 102, 241, .28);
}

#view-citas .venta-card.cita-card:active {
    transition-duration: var(--cg-fast) !important;
    transform: translateY(-1px) scale(.995);
}

/* Entrada escalonada al pintar la lista — solo transform/opacity (barato) */
@keyframes citasCardIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#lista-citas-contenedor > .venta-card.cita-card {
    animation: citasCardIn .42s var(--cg-spring) both;
}

#lista-citas-contenedor > .venta-card.cita-card:nth-child(n+2)  { animation-delay: .03s; }
#lista-citas-contenedor > .venta-card.cita-card:nth-child(n+3)  { animation-delay: .06s; }
#lista-citas-contenedor > .venta-card.cita-card:nth-child(n+4)  { animation-delay: .09s; }
#lista-citas-contenedor > .venta-card.cita-card:nth-child(n+5)  { animation-delay: .12s; }
#lista-citas-contenedor > .venta-card.cita-card:nth-child(n+6)  { animation-delay: .15s; }

/* Botones: feedback táctil tipo iOS (press = pequeño "squish") */
#view-citas .citas-header-btn,
#view-citas .citas-btn-agendar,
#view-citas .citas-btn-confirmar,
#view-citas .cita-card-action {
    transition: transform var(--cg-fast) var(--cg-spring), box-shadow var(--cg-med) var(--cg-spring), background var(--cg-med) var(--cg-spring), opacity var(--cg-fast) var(--cg-spring) !important;
}

#view-citas .citas-header-btn:active,
#view-citas .citas-btn-agendar:active,
#view-citas .citas-btn-confirmar:active,
#view-citas .cita-card-action:active {
    transform: scale(.94);
}

/* Panel "Nueva cita": entrada suave cada vez que deja de estar display:none */
@keyframes citasFormIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#view-citas .citas-form-card {
    animation: citasFormIn var(--cg-med) var(--cg-spring);
}

/* ==========================================================================
   "Nueva Cita" — hoja de vidrio flotante estilo Apple
   Todo va scopeado bajo #panel-agendar-cita para no tocar el resto del sistema.
   ========================================================================== */

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

@keyframes citasSheetIn {
    from { opacity: 0; transform: translateY(22px) scale(.955); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Los campos entran escalonados, como las hojas de ajustes de iOS */
@keyframes citasFieldIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: translateY(0); }
}

#panel-agendar-cita.citas-form-panel {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    /* Despeja la barra superior (sticky, ~92px) sin robarle alto útil a la hoja */
    padding: 100px 16px 20px;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    background:
        radial-gradient(circle at 22% 12%, rgba(99, 102, 241, .28), transparent 46%),
        radial-gradient(circle at 82% 82%, rgba(56, 189, 248, .22), transparent 44%),
        rgba(15, 23, 42, .42);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    animation: citasBackdropIn .26s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

/* ── La lámina de vidrio ─────────────────────────────────────────────────── */
#panel-agendar-cita .citas-form-card {
    position: relative;
    width: min(1080px, 100%);
    max-height: min(88vh, 940px);
    overflow-y: auto;
    margin: 0;
    padding: 0 26px 26px !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-left: none !important;
    border-radius: 30px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .82) 0%, rgba(244, 248, 255, .68) 52%, rgba(238, 244, 255, .76) 100%);
    backdrop-filter: blur(40px) saturate(1.85);
    -webkit-backdrop-filter: blur(40px) saturate(1.85);
    box-shadow:
        0 42px 100px -24px rgba(15, 23, 42, .5),
        0 8px 26px -12px rgba(30, 64, 175, .3),
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(255, 255, 255, .45);
    animation: citasSheetIn .42s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
    scrollbar-width: thin;
}

#panel-agendar-cita .citas-form-card:hover {
    /* Anula el realce de hover heredado: aquí la lámina ya está en primer plano */
    box-shadow:
        0 42px 100px -24px rgba(15, 23, 42, .5),
        0 8px 26px -12px rgba(30, 64, 175, .3),
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 -1px 0 rgba(255, 255, 255, .45);
}

/* Brillo especular diagonal que cruza la lámina (como el vidrio de visionOS) */
#panel-agendar-cita .citas-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .5) 48%, transparent 62%);
    opacity: .75;
}

#panel-agendar-cita .citas-form-card::-webkit-scrollbar { width: 8px; }
#panel-agendar-cita .citas-form-card::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .28);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ── Cabecera fija: icono + título + subtítulo + cerrar ──────────────────── */
#panel-agendar-cita #citas-form-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 -26px 18px !important;
    padding: 20px 26px 16px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5));
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .8);
    border-radius: 30px 30px 0 0;
}

#panel-agendar-cita .citas-form-head-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#panel-agendar-cita .citas-form-head-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(224, 231, 255, .8));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255, 255, 255, 1);
}

#panel-agendar-cita .citas-form-head-icon .material-symbols-outlined {
    font-size: 24px;
    color: #4f46e5;
}

#panel-agendar-cita .citas-form-head-copy { min-width: 0; }

#panel-agendar-cita .citas-form-head-copy h3 {
    margin: 0;
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #16233d;
    white-space: nowrap;
}

#panel-agendar-cita .citas-form-head-copy p {
    margin: 3px 0 0;
    font-size: .79rem;
    font-weight: 600;
    color: #6b7c9b;
}

#panel-agendar-cita .citas-form-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .4), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)),
                background .26s ease, color .26s ease;
}

#panel-agendar-cita .citas-form-close:hover {
    background: rgba(254, 226, 226, .9);
    color: #ef4444;
}

#panel-agendar-cita .citas-form-close:active { transform: scale(.9); }
#panel-agendar-cita .citas-form-close .material-symbols-outlined { font-size: 20px; }

/* Botón de dictado: pastilla de vidrio (pisa los estilos inline del script) */
#panel-agendar-cita #btn-cita-smart-voice {
    padding: 10px 20px !important;
    font-size: .82rem !important;
    letter-spacing: .01em;
    color: #3730a3 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(224, 231, 255, .78)) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    box-shadow: 0 10px 24px -12px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)), box-shadow .3s ease;
}

#panel-agendar-cita #btn-cita-smart-voice:hover { transform: translateY(-1px); }
#panel-agendar-cita #btn-cita-smart-voice:active { transform: scale(.95); }

/* Cuando está grabando el script pone fondo rojo inline: lo respetamos en texto */
#panel-agendar-cita #btn-cita-smart-voice.is-listening {
    color: #fff !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ── Campos ──────────────────────────────────────────────────────────────── */
#panel-agendar-cita .premium-label {
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #61728f !important;
    margin-bottom: 7px !important;
}

#panel-agendar-cita input[type="text"],
#panel-agendar-cita input[type="tel"],
#panel-agendar-cita input[type="email"],
#panel-agendar-cita input[type="date"],
#panel-agendar-cita select {
    height: 46px !important;
    padding: 0 14px !important;
    font-size: .88rem !important;
    font-weight: 600;
    color: #16233d !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    /* background-color, NO el atajo `background`: el atajo con !important
       borraba (background-image: none) los íconos de los campos de más abajo,
       que se declaran sin !important — el campo quedaba con 44px de sangría
       y sin ícono, o sea el texto "corrido" dentro de un cajón vacío. */
    background-color: rgba(255, 255, 255, .62) !important;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transition: border-color .28s var(--cg-spring, cubic-bezier(.22, 1, .36, 1)),
                box-shadow .28s var(--cg-spring, cubic-bezier(.22, 1, .36, 1)),
                background .28s ease, transform .28s var(--cg-spring, cubic-bezier(.22, 1, .36, 1)) !important;
}

#panel-agendar-cita input::placeholder { color: #93a3bd; font-weight: 500; }

#panel-agendar-cita input:hover,
#panel-agendar-cita select:hover {
    background-color: rgba(255, 255, 255, .8) !important;
}

#panel-agendar-cita input:focus,
#panel-agendar-cita select:focus {
    outline: none;
    transform: translateY(-1px);
    background-color: rgba(255, 255, 255, .96) !important;
    border-color: rgba(129, 140, 248, .9) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .16), 0 10px 24px -14px rgba(79, 70, 229, .8) !important;
}

/* Íconos dentro de los campos de texto (background-image: no altera el HTML).
   Los 4 selects (tipo doc, tipo, motivo, optómetra) NO van aquí: su ícono +
   chevron se define más abajo en un solo bloque autocontenido, porque tenerlo
   repartido entre varias reglas fue justo lo que rompió el background-repeat. */
#panel-agendar-cita #cita-id,
#panel-agendar-cita #cita-cliente,
#panel-agendar-cita #cita-tel,
#panel-agendar-cita #cita-email,
#panel-agendar-cita #cita-fecha {
    padding-left: 44px !important;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 19px 19px;
}

#panel-agendar-cita #cita-id {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='11' r='2'/%3E%3Cpath d='M5 16c.6-1.5 1.9-2.2 3.5-2.2S11.4 14.5 12 16M15 10h4M15 14h2.5'/%3E%3C/svg%3E");
}

#panel-agendar-cita #cita-cliente {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-1.8A4.2 4.2 0 0 0 15.8 15H8.2A4.2 4.2 0 0 0 4 19.2V21'/%3E%3Ccircle cx='12' cy='7.5' r='3.8'/%3E%3C/svg%3E");
}

#panel-agendar-cita #cita-tel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 5.5v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M8 9.5c0 4 2.5 6.5 6.5 6.5'/%3E%3C/svg%3E");
}

#panel-agendar-cita #cita-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 5.5L20.5 7'/%3E%3C/svg%3E");
}

#panel-agendar-cita #cita-fecha {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}

/* Los selects llevan cursor de mano y pierden el chevron nativo; el ícono
   propio de cada uno (izquierda) y el chevron (derecha) van en el bloque
   "Que un desplegable SE VEA como desplegable", más abajo, en UNA sola regla
   por elemento — ver la nota de ahí sobre por qué se consolidó. */
#panel-agendar-cita select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Entrada escalonada de las filas del formulario */
#panel-agendar-cita .citas-form-card > div:not(#citas-form-header) {
    animation: citasFieldIn .4s var(--cg-spring, cubic-bezier(.22, 1, .36, 1)) both;
}

#panel-agendar-cita .citas-form-card > div:nth-of-type(2) { animation-delay: .04s; }
#panel-agendar-cita .citas-form-card > div:nth-of-type(3) { animation-delay: .08s; }
#panel-agendar-cita .citas-form-card > div:nth-of-type(4) { animation-delay: .12s; }

/* Botoncitos auxiliares (lupa, engranaje, guardar predeterminado) como vidrio */
#panel-agendar-cita #cita-btn-escanear-cedula,
#panel-agendar-cita #cita-btn-buscar-persona,
#panel-agendar-cita .citas-form-card button[onclick*="abrirModalSeleccionMotivo"],
#panel-agendar-cita .citas-form-card button[onclick*="citaGuardarOptometraPredeterminado"] {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 14px !important;
    color: #4f46e5 !important;
    background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(224, 231, 255, .7)) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    box-shadow: 0 6px 16px -10px rgba(79, 70, 229, .8), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)), box-shadow .28s ease !important;
}

#panel-agendar-cita #cita-btn-escanear-cedula:hover,
#panel-agendar-cita #cita-btn-buscar-persona:hover,
#panel-agendar-cita .citas-form-card button[onclick*="abrirModalSeleccionMotivo"]:hover,
#panel-agendar-cita .citas-form-card button[onclick*="citaGuardarOptometraPredeterminado"]:hover {
    transform: translateY(-1px);
}

#panel-agendar-cita #cita-btn-escanear-cedula:active,
#panel-agendar-cita #cita-btn-buscar-persona:active,
#panel-agendar-cita .citas-form-card button[onclick*="abrirModalSeleccionMotivo"]:active,
#panel-agendar-cita .citas-form-card button[onclick*="citaGuardarOptometraPredeterminado"]:active {
    transform: scale(.92);
}

/* ── Bloque de fecha + horarios: panel interior de vidrio ────────────────── */
#panel-agendar-cita .citas-form-row-schedule {
    margin-top: 18px !important;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34));
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 24px -18px rgba(15, 23, 42, .5);
}

#panel-agendar-cita #cita-visual-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 9px;
    padding: 2px;
    overflow-y: auto;
}

/* Franjas horarias como pastillas de vidrio */
#panel-agendar-cita .time-slot-btn {
    position: relative;
    min-height: 48px;
    padding: 6px 8px !important;
    border-radius: 15px !important;
    font-size: .84rem !important;
    font-weight: 750 !important;
    color: #2563eb !important;
    cursor: pointer;
    background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(240, 246, 255, .74)) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)),
                box-shadow .28s ease, background .28s ease, color .28s ease !important;
}

#panel-agendar-cita .time-slot-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(37, 99, 235, .9), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#panel-agendar-cita .time-slot-btn:not(:disabled):active { transform: scale(.94); }

/* Seleccionada: pastilla morada con palomita, como en el diseño */
#panel-agendar-cita .time-slot-btn.selected {
    color: #fff !important;
    background: linear-gradient(140deg, #6366f1, #4f46e5 55%, #4338ca) !important;
    border-color: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 14px 28px -12px rgba(79, 70, 229, .95), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

#panel-agendar-cita .time-slot-btn.selected::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    box-shadow: 0 4px 10px -3px rgba(15, 23, 42, .45);
}

#panel-agendar-cita .time-slot-btn.occupied,
#panel-agendar-cita .time-slot-btn:disabled {
    color: #97a5bd !important;
    text-decoration: line-through;
    background: rgba(226, 232, 240, .42) !important;
    border-color: rgba(255, 255, 255, .6) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

#panel-agendar-cita .time-slot-btn.blocked {
    color: #b45309 !important;
    background: linear-gradient(160deg, rgba(255, 247, 237, .95), rgba(254, 235, 200, .7)) !important;
    border-color: rgba(253, 186, 116, .55) !important;
}

/* ── Botón Agendar: cápsula morada con halo ──────────────────────────────── */
#panel-agendar-cita .citas-btn-confirmar {
    min-height: 56px;
    padding: 0 30px !important;
    gap: 10px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 52%, #4338ca 100%) !important;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    box-shadow:
        0 20px 40px -16px rgba(79, 70, 229, .95),
        0 0 26px -8px rgba(99, 102, 241, .7),
        inset 0 1px 0 rgba(255, 255, 255, .45) !important;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)), box-shadow .3s ease !important;
}

#panel-agendar-cita .citas-btn-confirmar:hover {
    transform: translateY(-2px);
    box-shadow:
        0 26px 50px -16px rgba(79, 70, 229, 1),
        0 0 34px -6px rgba(99, 102, 241, .85),
        inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

#panel-agendar-cita .citas-btn-confirmar:active { transform: scale(.96); opacity: 1; }

#panel-agendar-cita .citas-form-schedule-slots button:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════════════════════════
   Hojas desplegables (Intervalo / Varios días) — vidrio, no bloques planos
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes citasSheetDrop {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#panel-agendar-cita .citas-sheet {
    margin: 0 0 12px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(240, 245, 255, .7));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 14px 34px -20px rgba(15, 23, 42, .65), inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    animation: citasSheetDrop .3s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

/* La hoja de "cerrar fechas" usa el mismo vidrio que el resto: el bloque naranja
   competía con el formulario. El único acento de color va en el botón de acción. */
#panel-agendar-cita .citas-sheet.is-warn {
    background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(240, 245, 255, .7));
    border-color: rgba(255, 255, 255, .95);
}

#panel-agendar-cita .citas-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
}

#panel-agendar-cita .citas-sheet-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #4f46e5;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(224, 231, 255, .85));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .7);
}

#panel-agendar-cita .citas-sheet.is-warn .citas-sheet-icon {
    color: #4f46e5;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(224, 231, 255, .85));
    box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .7);
}

#panel-agendar-cita .citas-sheet-icon .material-symbols-outlined { font-size: 20px; }

#panel-agendar-cita .citas-sheet-copy { min-width: 0; }

#panel-agendar-cita .citas-sheet-copy strong {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #16233d;
}

#panel-agendar-cita .citas-sheet-copy > span {
    display: block;
    margin-top: 3px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    color: #6b7c9b;
}

#panel-agendar-cita .citas-sheet.is-warn .citas-sheet-copy strong { color: #16233d; }
#panel-agendar-cita .citas-sheet.is-warn .citas-sheet-copy > span { color: #6b7c9b; }

#panel-agendar-cita .citas-sheet-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 11px;
    align-items: end;
}

#panel-agendar-cita .citas-sheet-field { min-width: 0; }

#panel-agendar-cita .citas-sheet-field label {
    display: block;
    margin-bottom: 6px;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #61728f;
}

#panel-agendar-cita .citas-sheet.is-warn .citas-sheet-field label { color: #61728f; }

/* Campos de la hoja: mismos códigos visuales que el resto del formulario */
#panel-agendar-cita .citas-sheet input[type="time"],
#panel-agendar-cita .citas-sheet input[type="date"],
#panel-agendar-cita .citas-sheet input[type="number"],
#panel-agendar-cita .citas-sheet select {
    width: 100%;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: .84rem !important;
    font-weight: 650;
    color: #16233d !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    background: rgba(255, 255, 255, .78) !important;
    background-image: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 8px -5px rgba(15, 23, 42, .4) !important;
}

#panel-agendar-cita .citas-sheet select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7fa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 15px 15px !important;
}

#panel-agendar-cita .citas-sheet-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 13px;
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)), box-shadow .28s ease;
}

#panel-agendar-cita .citas-sheet-btn .material-symbols-outlined { font-size: 18px; }
#panel-agendar-cita .citas-sheet-btn:hover { transform: translateY(-1px); }
#panel-agendar-cita .citas-sheet-btn:active { transform: scale(.95); }

#panel-agendar-cita .citas-sheet-btn.is-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 12px 26px -14px rgba(79, 70, 229, 1);
}

#panel-agendar-cita .citas-sheet-btn.is-danger {
    background: linear-gradient(135deg, #f97316, #c2410c);
    box-shadow: 0 12px 26px -14px rgba(194, 65, 12, 1);
}

#panel-agendar-cita .citas-sheet-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* El botón de acción va como una celda más de la rejilla, alineado con los
   campos: así la hoja no crece una fila extra y cabe sin scroll. */
#panel-agendar-cita .citas-sheet-fields > .citas-sheet-btn {
    align-self: end;
    width: 100%;
}

/* Etiqueta de paso ("1. ¿Qué días?", "2. ¿Todo el día...?") — deja clara la
   secuencia cuando una hoja tiene más de una decisión antes del botón final. */
#panel-agendar-cita .citas-sheet-step {
    display: block;
    margin: 14px 0 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #7c8db0;
}

#panel-agendar-cita .citas-sheet-step:first-of-type { margin-top: 2px; }

/* Interruptor "cerrar el día completo" */
#panel-agendar-cita .citas-sheet-choice {
    margin-top: 6px;
}

#panel-agendar-cita .citas-sheet-switch {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
}

#panel-agendar-cita .citas-sheet-switch input { position: absolute; opacity: 0; pointer-events: none; }

#panel-agendar-cita .citas-sheet-switch-track {
    flex-shrink: 0;
    width: 42px;
    height: 25px;
    margin-top: 1px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .18);
    transition: background .28s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

#panel-agendar-cita .citas-sheet-switch-dot {
    display: block;
    width: 19px;
    height: 19px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35);
    transition: transform .28s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

#panel-agendar-cita .citas-sheet-switch input:checked + .citas-sheet-switch-track {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

#panel-agendar-cita .citas-sheet-switch input:checked + .citas-sheet-switch-track .citas-sheet-switch-dot {
    transform: translateX(17px);
}

#panel-agendar-cita .citas-sheet-switch-copy strong {
    display: block;
    font-size: .81rem;
    font-weight: 800;
    color: #16233d;
}

#panel-agendar-cita .citas-sheet-switch-copy > span {
    display: block;
    margin-top: 2px;
    font-size: .73rem;
    font-weight: 600;
    line-height: 1.4;
    color: #6b7c9b;
}

#panel-agendar-cita #bloqueo-rango-horas { margin-top: 13px; }

#panel-agendar-cita #bloqueo-rango-lista { margin-top: 14px; }

#panel-agendar-cita .citas-bloqueo-vacio {
    font-size: .75rem;
    font-weight: 600;
    color: #8496b3;
    padding: 4px 0;
}

#panel-agendar-cita .citas-bloqueo-titulo {
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #61728f;
    margin-bottom: 8px;
}

#panel-agendar-cita .citas-bloqueo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 116px;
    overflow-y: auto;
}

#panel-agendar-cita .citas-bloqueo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 10px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 700;
    color: #44546f;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, 1);
}

#panel-agendar-cita .citas-bloqueo-chip .material-symbols-outlined {
    font-size: 15px;
    color: #94a3b8;
}

#panel-agendar-cita .citas-bloqueo-chip button {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: #64748b;
    background: rgba(148, 163, 184, .2);
    transition: background .2s ease, color .2s ease, transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

#panel-agendar-cita .citas-bloqueo-chip button:hover {
    background: rgba(239, 68, 68, .16);
    color: #ef4444;
}

#panel-agendar-cita .citas-bloqueo-chip button:active { transform: scale(.88); }

[data-theme="dark"] #panel-agendar-cita .citas-bloqueo-chip {
    color: #cbd5e1;
    background: rgba(30, 41, 59, .8);
    border-color: rgba(255, 255, 255, .12);
}

/* ── Botones de la barra de horarios (Bloquear / Varios días / Intervalo) ── */
#panel-agendar-cita .citas-form-schedule-slots > div:first-child > div > button {
    min-height: 36px;
    padding: 0 14px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    font-size: .74rem !important;
    font-weight: 750 !important;
    color: #55688a !important;
    background: rgba(255, 255, 255, .85) !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    box-shadow: 0 5px 14px -9px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: transform var(--cg-fast, .18s) var(--cg-spring, cubic-bezier(.22, 1, .36, 1)),
                background .26s ease, color .26s ease, box-shadow .26s ease !important;
}

#panel-agendar-cita .citas-form-schedule-slots > div:first-child > div > button:hover {
    transform: translateY(-1px);
}

#panel-agendar-cita .citas-form-schedule-slots > div:first-child > div > button:active {
    transform: scale(.94);
}

/* Modo bloqueo activo: el botón se enciende en ámbar */
#panel-agendar-cita #btn-modo-bloqueo.activo {
    color: #fff !important;
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: 0 10px 22px -12px rgba(194, 65, 12, 1) !important;
}

/* Panel abierto: el botón queda "hundido" y encendido, para que se vea de un
   vistazo cuál sección está desplegada (antes no se notaba abrir o cerrar). */
#panel-agendar-cita #btn-varios-dias.activo,
#panel-agendar-cita #btn-intervalo-agenda.activo {
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border-color: rgba(255, 255, 255, .45) !important;
    box-shadow: 0 10px 22px -12px rgba(79, 70, 229, 1), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Textos cortados: más aire en los campos angostos
   ══════════════════════════════════════════════════════════════════════════ */

/* La rejilla original (1.5fr 2fr 1fr 1fr) dejaba "Cédula Ciudadanía" y
   "Primera Vez" sin espacio. Se reparte entre las cuatro columnas.
   La primera (cédula) es la que más ancho necesita: comparte celda con los
   dos botones de 46px (escanear + buscar), así que del ancho de columna el
   input solo se queda con lo que sobra tras 100px de botones. */
#panel-agendar-cita .citas-form-card > div[style*="grid-template-columns: 1.5fr"] {
    grid-template-columns: 1.55fr 1.5fr 1.2fr 1.05fr !important;
}

#panel-agendar-cita select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Los selects angostos no llevan ícono a la izquierda: se gana ancho útil.
   El chevron lo pone el bloque de "que se vea como desplegable" más abajo. */

/* El select de optómetra comparte fila con el botón de guardar: debe poder encoger */
#panel-agendar-cita .citas-form-grid-3 > div > div { min-width: 0; }
#panel-agendar-cita #cita-optometra { width: 100%; min-width: 0; }

/* El correo suele ser largo: un punto menos de tamaño evita que se corte */
#panel-agendar-cita #cita-email { font-size: .83rem !important; }

/* ── Sugerencias de paciente (autocompletado del nombre) ─────────────────── */
/* El desplegable lo pinta setupClientAutocomplete() con los estilos genéricos
   de .pos-suggest, pensados para el POS. Sobre el vidrio de esta hoja se veía
   mal: letra bastante más grande que la del formulario, ancho pegado al campo
   (los nombres completos se partían en dos líneas) y, sobre todo, se dibujaba
   POR DEBAJO de la fila de Correo/WhatsApp, que se leía encima de los nombres.
   Por eso en este panel la lista se saca al <body> en posición fija (clase
   .pos-suggest-float, ver ui-utils.js) y se estiliza aquí. El resto de módulos
   que usan el mismo componente no cambia. */
.pos-suggest.pos-suggest-float {
    /* position/top/left/z-index los fija el JS al abrir */
    right: auto;
    /* Puede salirse del ancho del campo: así el nombre cabe en una sola línea */
    width: max-content;
    max-width: min(400px, 88vw);
    padding: 6px !important;
    max-height: 264px;
    /* Opaco a propósito: el panel es vidrio y con fondo translúcido se leían
       los campos de abajo a través de las sugerencias. */
    background: #fff !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 18px !important;
    box-shadow:
        0 26px 52px -22px rgba(15, 23, 42, .55),
        0 4px 12px -6px rgba(15, 23, 42, .2) !important;
    overscroll-behavior: contain;
}

.pos-suggest.pos-suggest-float .pos-suggest-item {
    padding: 8px 11px !important;
    border-bottom: none !important;
    border-radius: 12px;
}

.pos-suggest.pos-suggest-float .pos-suggest-item + .pos-suggest-item {
    border-top: 1px solid rgba(241, 245, 249, .95);
}

.pos-suggest.pos-suggest-float .pos-suggest-name {
    font-size: .84rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-suggest.pos-suggest-float .pos-suggest-meta {
    font-size: .72rem !important;
    line-height: 1.35;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   Efecto burbuja al desplegar un campo (liviano: una sola sombra animada)
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes citasBubblePop {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, .38), 0 0 0 0 rgba(99, 102, 241, .22); }
    55%  { box-shadow: 0 0 0 7px rgba(99, 102, 241, .14), 0 0 0 14px rgba(99, 102, 241, .07); }
    100% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0), 0 0 0 22px rgba(99, 102, 241, 0); }
}

#panel-agendar-cita select:focus,
#panel-agendar-cita input[type="date"]:focus,
#panel-agendar-cita input[type="time"]:focus {
    animation: citasBubblePop .55s var(--cg-spring, cubic-bezier(.22, 1, .36, 1));
}

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
[data-theme="dark"] #panel-agendar-cita .citas-sheet {
    background: linear-gradient(160deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .72));
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] #panel-agendar-cita .citas-sheet.is-warn {
    background: linear-gradient(160deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .72));
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] #panel-agendar-cita .citas-sheet-copy strong,
[data-theme="dark"] #panel-agendar-cita .citas-sheet.is-warn .citas-sheet-copy strong,
[data-theme="dark"] #panel-agendar-cita .citas-sheet-switch-copy strong { color: #e8eeff; }

[data-theme="dark"] #panel-agendar-cita .citas-sheet-copy > span,
[data-theme="dark"] #panel-agendar-cita .citas-sheet.is-warn .citas-sheet-copy > span,
[data-theme="dark"] #panel-agendar-cita .citas-sheet-switch-copy > span,
[data-theme="dark"] #panel-agendar-cita .citas-sheet-field label,
[data-theme="dark"] #panel-agendar-cita .citas-sheet.is-warn .citas-sheet-field label { color: #93a3bd; }

[data-theme="dark"] #panel-agendar-cita .citas-sheet input[type="time"],
[data-theme="dark"] #panel-agendar-cita .citas-sheet input[type="date"],
[data-theme="dark"] #panel-agendar-cita .citas-sheet select {
    color: #e8eeff !important;
    background: rgba(15, 23, 42, .7) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

[data-theme="dark"] #panel-agendar-cita .citas-form-schedule-slots > div:first-child > div > button {
    color: #cbd5e1 !important;
    background: rgba(30, 41, 59, .8) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

[data-theme="dark"] #panel-agendar-cita.citas-form-panel {
    background:
        radial-gradient(circle at 22% 12%, rgba(99, 102, 241, .3), transparent 46%),
        radial-gradient(circle at 82% 82%, rgba(56, 189, 248, .22), transparent 44%),
        rgba(2, 6, 23, .62);
}

[data-theme="dark"] #panel-agendar-cita .citas-form-card,
[data-theme="dark"] #panel-agendar-cita .citas-form-card:hover {
    background: linear-gradient(150deg, rgba(30, 41, 59, .8) 0%, rgba(15, 23, 42, .72) 100%);
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 42px 100px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}

[data-theme="dark"] #panel-agendar-cita .citas-form-card::before { opacity: .18; }

[data-theme="dark"] #panel-agendar-cita #citas-form-header {
    background: linear-gradient(180deg, rgba(15, 23, 42, .85), rgba(15, 23, 42, .55));
    border-bottom-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] #panel-agendar-cita .citas-form-head-copy h3 { color: #e8eeff; }
[data-theme="dark"] #panel-agendar-cita .citas-form-head-copy p { color: #93a3bd; }
[data-theme="dark"] #panel-agendar-cita .premium-label { color: #93a3bd !important; }

[data-theme="dark"] #panel-agendar-cita input[type="text"],
[data-theme="dark"] #panel-agendar-cita input[type="tel"],
[data-theme="dark"] #panel-agendar-cita input[type="email"],
[data-theme="dark"] #panel-agendar-cita input[type="date"],
[data-theme="dark"] #panel-agendar-cita select,
[data-theme="dark"] #panel-agendar-cita #cita-optometra {
    color: #e8eeff !important;
    background-color: rgba(15, 23, 42, .6) !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

[data-theme="dark"] #panel-agendar-cita .citas-form-row-schedule {
    background: linear-gradient(160deg, rgba(15, 23, 42, .55), rgba(15, 23, 42, .35));
    border-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] #panel-agendar-cita .time-slot-btn {
    color: #93c5fd !important;
    background: linear-gradient(160deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .7)) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

[data-theme="dark"] #panel-agendar-cita .time-slot-btn.selected {
    color: #fff !important;
    background: linear-gradient(140deg, #6366f1, #4f46e5 55%, #4338ca) !important;
}

/* ── Adaptación a pantallas chicas ───────────────────────────────────────── */
@media (max-width: 900px) {
    #panel-agendar-cita .citas-form-card > div[style*="grid-template-columns: 1.5fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    #panel-agendar-cita .citas-form-row-schedule {
        flex-direction: column;
        align-items: stretch !important;
    }

    #panel-agendar-cita .citas-btn-confirmar { width: 100%; }
}

@media (max-width: 680px) {
    #panel-agendar-cita.citas-form-panel {
        padding: 0;
        align-items: flex-end;
    }

    #panel-agendar-cita .citas-form-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 26px 26px 0 0;
        padding: 0 16px 20px !important;
    }

    #panel-agendar-cita #citas-form-header {
        margin: 0 -16px 14px !important;
        padding: 16px 16px 12px !important;
        border-radius: 26px 26px 0 0;
    }

    #panel-agendar-cita .citas-form-head-copy p { display: none; }
    #panel-agendar-cita .citas-form-head-copy h3 { font-size: 1.02rem; }
    #panel-agendar-cita .citas-form-card > div[style*="grid-template-columns"],
    #panel-agendar-cita .citas-form-grid-3 { grid-template-columns: 1fr !important; }
    #panel-agendar-cita #cita-visual-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── Pestañas de calendario por optómetra (modal Calendario, solo modo citas) */
.cal-optometra-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 2px 4px;
}

.cal-optometra-tab {
    border: 1px solid rgba(99, 102, 241, .22);
    background: rgba(99, 102, 241, .06);
    color: #4338ca;
    font-size: .76rem;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), background .28s cubic-bezier(.22, 1, .36, 1), color .28s ease, box-shadow .28s ease;
}

.cal-optometra-tab:hover {
    background: rgba(99, 102, 241, .12);
}

.cal-optometra-tab:active {
    transform: scale(.94);
}

.cal-optometra-tab.is-active {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}

[data-theme="dark"] .cal-optometra-tab {
    background: rgba(99, 102, 241, .14);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, .3);
}

/* ── Respeto a accesibilidad y bajo consumo ────────────────────────────────
   Si el usuario pide menos movimiento, o el navegador no soporta backdrop-filter
   con buen rendimiento (equipos modestos en clínicas), degradamos con gusto. */
@media (prefers-reduced-motion: reduce) {
    #view-citas *,
    .cal-optometra-tab {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    #view-citas .citas-header,
    #view-citas .citas-toolbar-shell,
    #view-citas .citas-form-card,
    #view-citas .citas-list-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ── Modo oscuro ────────────────────────────────────────────────────────── */
[data-theme="dark"] #view-citas .citas-list-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(15, 23, 42, .3));
}

/* ==========================================================================
   Modal "Motivos de consulta" — mismo lenguaje de vidrio que Nueva Cita
   Vive fuera de #panel-agendar-cita, por eso lleva sus propias clases.
   ========================================================================== */

.motivos-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001; /* por encima de la hoja de Nueva Cita, que es quien lo abre */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    /* Velo suave a propósito: casi siempre se abre ENCIMA del velo de Nueva Cita,
       y dos fondos oscuros + dos desenfoques encimados enturbian la pantalla.
       Basta con un matiz que separe las dos capas. */
    background: rgba(15, 23, 42, .22);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    animation: citasBackdropIn .24s cubic-bezier(.22, 1, .36, 1);
}

/* Al abrirse encima, la hoja de Nueva Cita retrocede un poco: deja claro cuál
   de las dos ventanas está activa, igual que las hojas apiladas de iOS.
   Si el navegador no soporta :has(), simplemente no retrocede — nada se rompe. */
#view-citas:has(.motivos-overlay[style*="display: flex"]) #panel-agendar-cita .citas-form-card {
    transform: scale(.985);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.motivos-sheet {
    position: relative;
    width: min(480px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, .8);
    background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(244, 248, 255, .74) 100%);
    backdrop-filter: blur(38px) saturate(1.8);
    -webkit-backdrop-filter: blur(38px) saturate(1.8);
    box-shadow:
        0 38px 90px -24px rgba(15, 23, 42, .55),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    animation: citasSheetIn .36s cubic-bezier(.22, 1, .36, 1);
}

.motivos-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.motivos-head-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #4f46e5;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(224, 231, 255, .82));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 18px -9px rgba(79, 70, 229, .65), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.motivos-head-icon .material-symbols-outlined { font-size: 22px; }

.motivos-head-copy { flex: 1; min-width: 0; }

.motivos-head-copy h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #16233d;
}

.motivos-head-copy p {
    margin: 3px 0 0;
    font-size: .77rem;
    font-weight: 600;
    line-height: 1.4;
    color: #6b7c9b;
}

.motivos-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 5px 14px -8px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), background .26s ease, color .26s ease;
}

.motivos-close:hover { background: rgba(254, 226, 226, .9); color: #ef4444; }
.motivos-close:active { transform: scale(.9); }
.motivos-close .material-symbols-outlined { font-size: 19px; }

/* Campo para crear un motivo nuevo */
.motivos-add {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.motivos-add input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 15px;
    font-size: .87rem;
    font-weight: 600;
    color: #16233d;
    border-radius: 14px;
    outline: none;
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 8px -5px rgba(15, 23, 42, .4);
    transition: border-color .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s cubic-bezier(.22, 1, .36, 1),
                background .26s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.motivos-add input::placeholder { color: #93a3bd; font-weight: 500; }

.motivos-add input:focus {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .96);
    border-color: rgba(129, 140, 248, .9);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .16), 0 10px 22px -14px rgba(79, 70, 229, .8);
}

.motivos-add button {
    flex-shrink: 0;
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 17px;
    font-size: .83rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 14px 28px -16px rgba(79, 70, 229, 1), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}

.motivos-add button .material-symbols-outlined { font-size: 19px; }
.motivos-add button:hover { transform: translateY(-1px); }
.motivos-add button:active { transform: scale(.95); }

/* Lista de motivos */
.motivos-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.motivos-lista::-webkit-scrollbar { width: 7px; }
.motivos-lista::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .26);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.motivos-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 5px 14px -11px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, background .26s ease;
}

.motivos-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 24px -16px rgba(79, 70, 229, .85), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.motivos-item-pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    text-align: left;
    font-size: .87rem;
    font-weight: 700;
    color: #16233d;
    background: transparent;
    border: none;
    border-radius: 11px;
    cursor: pointer;
}

.motivos-item-pick > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.motivos-item-pick .material-symbols-outlined {
    font-size: 19px;
    color: #c7cede;
    transition: color .24s ease;
}

.motivos-item:hover .motivos-item-pick .material-symbols-outlined { color: #6366f1; }

.motivos-item-del {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    color: #97a5bd;
    background: transparent;
    transition: background .24s ease, color .24s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}

.motivos-item-del .material-symbols-outlined { font-size: 19px; }
.motivos-item-del:hover { background: rgba(239, 68, 68, .12); color: #ef4444; }
.motivos-item-del:active { transform: scale(.9); }

/* Estado vacío */
.motivos-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 34px 18px;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, .5);
    background: rgba(255, 255, 255, .45);
}

.motivos-vacio .material-symbols-outlined {
    font-size: 34px;
    color: #b9c3d6;
    margin-bottom: 3px;
}

.motivos-vacio strong { font-size: .88rem; font-weight: 800; color: #44546f; }
.motivos-vacio > span:last-child { font-size: .77rem; font-weight: 600; color: #8496b3; }

/* Modo oscuro */
[data-theme="dark"] .motivos-sheet {
    background: linear-gradient(150deg, rgba(30, 41, 59, .85) 0%, rgba(15, 23, 42, .78) 100%);
    border-color: rgba(255, 255, 255, .14);
}

[data-theme="dark"] .motivos-head-copy h3,
[data-theme="dark"] .motivos-item-pick,
[data-theme="dark"] .motivos-vacio strong { color: #e8eeff; }

[data-theme="dark"] .motivos-head-copy p,
[data-theme="dark"] .motivos-vacio > span:last-child { color: #93a3bd; }

[data-theme="dark"] .motivos-add input {
    color: #e8eeff;
    background: rgba(15, 23, 42, .65);
    border-color: rgba(255, 255, 255, .14);
}

[data-theme="dark"] .motivos-item {
    background: rgba(30, 41, 59, .78);
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .motivos-item:hover { background: rgba(30, 41, 59, .95); }

@media (prefers-reduced-motion: reduce) {
    .motivos-overlay,
    .motivos-sheet,
    .motivos-item,
    .motivos-add input,
    .motivos-add button { animation: none !important; transition-duration: .01ms !important; }
}

@media (max-width: 520px) {
    .motivos-overlay { padding: 0; align-items: flex-end; }
    .motivos-sheet {
        width: 100%;
        max-height: 90vh;
        border-radius: 26px 26px 0 0;
    }
    .motivos-add { flex-direction: column; }
    .motivos-add button { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Desplegables de vidrio (reemplazan el menú nativo, que no se puede animar)
   Los dibuja js/citas-dropdown.js directamente en <body>.
   ========================================================================== */

.cg-select-panel {
    position: fixed;
    z-index: 1000010; /* sobre la hoja de Nueva Cita y sobre el modal de motivos */
    box-sizing: border-box;
    padding: 6px;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(242, 246, 255, .82));
    backdrop-filter: blur(30px) saturate(1.8);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    box-shadow:
        0 26px 60px -22px rgba(15, 23, 42, .6),
        0 4px 14px -8px rgba(30, 64, 175, .3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    scrollbar-width: thin;

    /* Estado inicial = burbuja encogida; la clase .is-open la infla */
    opacity: 0;
    transform: scale(.86) translateY(-6px);
    transition:
        opacity .17s cubic-bezier(.22, 1, .36, 1),
        transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cg-select-panel.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Al cerrar la burbuja se desinfla más rápido de lo que se infló */
.cg-select-panel.is-closing {
    opacity: 0;
    transform: scale(.9) translateY(-4px);
    transition-duration: .14s, .16s;
}

.cg-select-panel::-webkit-scrollbar { width: 8px; }
.cg-select-panel::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .28);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.cg-select-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: .86rem;
    font-weight: 650;
    color: #16233d;
    transition: background .18s ease, color .18s ease, transform .16s cubic-bezier(.22, 1, .36, 1);
}

.cg-select-item > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-select-item:hover:not(.is-disabled),
.cg-select-item.is-activo:not(.is-disabled) {
    background: rgba(99, 102, 241, .1);
    color: #3730a3;
}

.cg-select-item:active:not(.is-disabled) { transform: scale(.98); }

.cg-select-item.is-selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, .16), rgba(79, 70, 229, .1));
    color: #4338ca;
    font-weight: 800;
}

.cg-select-item.is-disabled {
    color: #a3aec2;
    cursor: default;
    font-weight: 600;
}

.cg-select-check {
    flex-shrink: 0;
    font-size: 18px;
    color: #4f46e5;
}

/* Entrada escalonada de las opciones: refuerza la sensación de "burbuja" */
.cg-select-panel.is-open .cg-select-item {
    animation: cgSelectItemIn .26s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cgSelectItemIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cg-select-panel.is-open .cg-select-item:nth-child(1) { animation-delay: 0s; }
.cg-select-panel.is-open .cg-select-item:nth-child(2) { animation-delay: .018s; }
.cg-select-panel.is-open .cg-select-item:nth-child(3) { animation-delay: .036s; }
.cg-select-panel.is-open .cg-select-item:nth-child(4) { animation-delay: .054s; }
.cg-select-panel.is-open .cg-select-item:nth-child(5) { animation-delay: .072s; }
.cg-select-panel.is-open .cg-select-item:nth-child(n+6) { animation-delay: .09s; }

/* El campo se mantiene "encendido" mientras su lista está desplegada */
#panel-agendar-cita select.cg-select-abierto {
    background-color: rgba(255, 255, 255, .96) !important;
    border-color: rgba(129, 140, 248, .9) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .16), 0 10px 24px -14px rgba(79, 70, 229, .8) !important;
}

/* Modo oscuro */
[data-theme="dark"] .cg-select-panel {
    background: linear-gradient(160deg, rgba(30, 41, 59, .93), rgba(15, 23, 42, .88));
    border-color: rgba(255, 255, 255, .14);
}

[data-theme="dark"] .cg-select-item { color: #e8eeff; }
[data-theme="dark"] .cg-select-item:hover:not(.is-disabled),
[data-theme="dark"] .cg-select-item.is-activo:not(.is-disabled) { color: #c7d2fe; }
[data-theme="dark"] .cg-select-item.is-disabled { color: #64748b; }

@media (prefers-reduced-motion: reduce) {
    .cg-select-panel,
    .cg-select-item { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Aviso "¿Agregar a Google Calendar?" — ventana propia dentro del panel
   ========================================================================== */

.gcal-aviso-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000020; /* por encima de todo lo del panel de citas, sin excepción */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15, 23, 42, .3);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    opacity: 0;
    transition: opacity .2s cubic-bezier(.22, 1, .36, 1);
}

.gcal-aviso-overlay.is-open { opacity: 1; }
.gcal-aviso-overlay.is-closing { opacity: 0; }

.gcal-aviso-sheet {
    width: min(400px, 100%);
    padding: 26px 24px 22px;
    text-align: center;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: linear-gradient(160deg, rgba(255, 255, 255, .93), rgba(243, 247, 255, .85));
    backdrop-filter: blur(34px) saturate(1.8);
    -webkit-backdrop-filter: blur(34px) saturate(1.8);
    box-shadow:
        0 34px 80px -26px rgba(15, 23, 42, .6),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: scale(.9) translateY(12px);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.gcal-aviso-overlay.is-open .gcal-aviso-sheet { transform: scale(1) translateY(0); }
.gcal-aviso-overlay.is-closing .gcal-aviso-sheet { transform: scale(.94) translateY(6px); }

.gcal-aviso-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 19px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(219, 234, 254, .9));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 12px 26px -12px rgba(66, 133, 244, .8), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.gcal-aviso-sheet h3 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: #16233d;
}

.gcal-aviso-sheet p {
    margin: 10px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: .82rem;
    line-height: 1.4;
    color: #6b7c9b;
}

.gcal-aviso-sheet p strong { font-weight: 800; color: #44546f; }
.gcal-aviso-sheet p span { text-transform: capitalize; }

.gcal-aviso-actions {
    display: flex;
    gap: 9px;
}

.gcal-aviso-btn {
    flex: 1;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    color: #55688a;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 5px 14px -9px rgba(15, 23, 42, .6), inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, background .26s ease;
}

.gcal-aviso-btn .material-symbols-outlined { font-size: 19px; }
.gcal-aviso-btn:hover { transform: translateY(-1px); }
.gcal-aviso-btn:active { transform: scale(.95); }

.gcal-aviso-btn.is-primary {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    background: linear-gradient(135deg, #4285F4, #1a73e8);
    box-shadow: 0 14px 28px -14px rgba(26, 115, 232, 1), inset 0 1px 0 rgba(255, 255, 255, .4);
}

[data-theme="dark"] .gcal-aviso-sheet {
    background: linear-gradient(160deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .86));
    border-color: rgba(255, 255, 255, .14);
}

[data-theme="dark"] .gcal-aviso-sheet h3 { color: #e8eeff; }
[data-theme="dark"] .gcal-aviso-sheet p { color: #93a3bd; }
[data-theme="dark"] .gcal-aviso-sheet p strong { color: #cbd5e1; }

[data-theme="dark"] .gcal-aviso-btn {
    color: #cbd5e1;
    background: rgba(30, 41, 59, .8);
    border-color: rgba(255, 255, 255, .12);
}

@media (prefers-reduced-motion: reduce) {
    .gcal-aviso-overlay,
    .gcal-aviso-sheet { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Que un desplegable SE VEA como desplegable
   Con el rediseño quedaron igual de planos que los campos de texto y no se
   distinguía cuáles se despliegan. Se les da un botón de chevron visible.

   IMPORTANTE — por qué esto va en UNA sola regla por elemento y no repartido:
   estos 4 selects tuvieron un bug real donde el ícono y el chevron salían
   repetidos en mosaico por todo el campo. La causa: background-image (2 capas)
   se declaraba en una regla, y background-repeat (1 solo valor, sin !important)
   en OTRA regla más antigua de mayor especificidad — el navegador terminaba
   sin un "no-repeat" ganador para la segunda capa y la estampaba en mosaico.
   Para que no vuelva a pasar, cada elemento define AQUÍ, junto y con
   !important, sus 4 propiedades de fondo (imagen, repetición, posición,
   tamaño) con el mismo número de capas en las cuatro. Ninguna otra regla del
   archivo debe volver a tocar background-image en estos 4 selects.
   ========================================================================== */

#panel-agendar-cita select {
    /* Un <select> no admite pseudo-elementos, así que el "botón" de chevron se
       dibuja como segunda capa de background: una pastilla de 32px pegada al
       borde derecho, con su hueco de padding para que el texto no la pise. */
    padding-right: 46px !important;
}

#panel-agendar-cita #cita-tipo-doc,
#panel-agendar-cita #cita-tipo {
    padding-left: 14px !important; /* van sin ícono izquierdo: solo el chevron */
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    background-size: 32px 32px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23eef2ff'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#panel-agendar-cita #cita-motivo {
    /* La base fija padding:0 14px (shorthand) en todos los inputs/selects; sin
       este padding-left explícito el texto arranca en el mismo x que el ícono
       izquierdo y se dibujan encimados — eso era el "SELECCIONAR" con la S tachada. */
    padding-left: 44px !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 14px center, right 7px center !important;
    background-size: 19px 19px, 32px 32px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.5H21M8.5 12H21M8.5 17.5H21M3.5 6.5h.01M3.5 12h.01M3.5 17.5h.01'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23eef2ff'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#panel-agendar-cita #cita-optometra {
    /* Este select trae `padding:0 10px; background:#fff` inline en el HTML;
       un estilo inline le gana a cualquier regla externa que no sea !important,
       así que hay que reponer TODO lo que ese inline pisa (incluyendo el
       padding-left, sin el cual el ícono quedaba encimado con el texto). */
    height: 46px !important;
    padding-left: 44px !important;
    border-radius: 14px !important;
    background-color: rgba(255, 255, 255, .62) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 14px center, right 7px center !important;
    background-size: 19px 19px, 32px 32px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='14.5' r='3.6'/%3E%3Ccircle cx='18' cy='14.5' r='3.6'/%3E%3Cpath d='M9.6 14.5a2.4 2.4 0 0 1 4.8 0M2.6 12.5 4.2 7M21.4 12.5 19.8 7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23eef2ff'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Mientras la lista está desplegada, el chevron se marca en índigo lleno.
   Repite exactamente la imagen izquierda de cada select (si la tiene) para no
   volver a partir la declaración en dos lugares. */
#panel-agendar-cita #cita-tipo-doc.cg-select-abierto,
#panel-agendar-cita #cita-tipo.cg-select-abierto {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%234f46e5'/%3E%3Cpath d='M11 18l5-5 5 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#panel-agendar-cita #cita-motivo.cg-select-abierto {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.5H21M8.5 12H21M8.5 17.5H21M3.5 6.5h.01M3.5 12h.01M3.5 17.5h.01'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%234f46e5'/%3E%3Cpath d='M11 18l5-5 5 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#panel-agendar-cita #cita-optometra.cg-select-abierto {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='14.5' r='3.6'/%3E%3Ccircle cx='18' cy='14.5' r='3.6'/%3E%3Cpath d='M9.6 14.5a2.4 2.4 0 0 1 4.8 0M2.6 12.5 4.2 7M21.4 12.5 19.8 7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%234f46e5'/%3E%3Cpath d='M11 18l5-5 5 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Modo oscuro: misma consolidación — solo cambia el color de fondo de la
   pastilla del chevron (cerrada), para que no sea un cuadrito claro perdido
   sobre fondo oscuro. Abierta ya es índigo lleno y se ve igual en ambos temas. */
[data-theme="dark"] #panel-agendar-cita #cita-tipo-doc:not(.cg-select-abierto),
[data-theme="dark"] #panel-agendar-cita #cita-tipo:not(.cg-select-abierto) {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23312e81'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%23c7d2fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] #panel-agendar-cita #cita-motivo:not(.cg-select-abierto) {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.5H21M8.5 12H21M8.5 17.5H21M3.5 6.5h.01M3.5 12h.01M3.5 17.5h.01'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23312e81'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%23c7d2fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] #panel-agendar-cita #cita-optometra:not(.cg-select-abierto) {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='14.5' r='3.6'/%3E%3Ccircle cx='18' cy='14.5' r='3.6'/%3E%3Cpath d='M9.6 14.5a2.4 2.4 0 0 1 4.8 0M2.6 12.5 4.2 7M21.4 12.5 19.8 7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='0' y='0' width='32' height='32' rx='11' fill='%23312e81'/%3E%3Cpath d='M11 14l5 5 5-5' fill='none' stroke='%23c7d2fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}