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

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