/* Widget de reservas — Clínica Doctor Gimeno
   Paleta sobria de consulta médica: fondo cálido casi blanco, tinta azul-pizarra,
   acento verde-azulado. Sin negro puro, sin iconos-emoji, transiciones explícitas. */

.gba-w {
    --gba-acento: #0F6070;
    --gba-acento-fuerte: #0A4A57;
    --gba-tinta: #16262B;
    --gba-tinta-suave: #566A70;
    --gba-linea: #DDE5E6;
    --gba-panel: #FFFFFF;
    --gba-fondo: #F5F8F8;
    --gba-ok: #1F6B48;
    --gba-ok-fondo: #E7F3EC;
    --gba-err: #8C3126;
    --gba-err-fondo: #F8E9E7;

    --gba-salida: cubic-bezier(0.23, 1, 0.32, 1);
    --gba-sombra: 0 4px 12px -4px rgba(22, 38, 43, .18), 0 24px 48px -24px rgba(22, 38, 43, .32);

    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gba-tinta);
}

/* ------------------------------------------------------------------ Blindaje
   Astra y Elementor estilan `button` e `input` de forma global (ancho completo,
   mayúsculas, sombras, alturas mínimas). Dentro del widget eso se neutraliza.
   El `!important` está acotado a las propiedades que el tema pisa y solo aplica
   a lo que hay dentro de `.gba-w`: fuera no cambia nada. */

.gba-w button:not(.gba-w-lanzador):not(.gba-w-cerrar),
.gba-w input {
    box-sizing: border-box;
    margin: 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.4;
}

/* ---------------------------------------------------------------- Lanzador */

.gba-w-lanzador {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99998;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px 13px 17px;
    border: none;
    border-radius: 999px;
    background: var(--gba-acento);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--gba-sombra);
    transition: background-color 200ms var(--gba-salida), transform 160ms var(--gba-salida);
}
.gba-w-lanzador:hover { background: var(--gba-acento-fuerte); }
.gba-w-lanzador:active { transform: scale(0.97); }
.gba-w-lanzador:focus-visible { outline: 3px solid var(--gba-acento); outline-offset: 3px; }
.gba-w-lanzador svg { width: 19px; height: 19px; flex: none; }
.gba-w-lanzador[hidden] { display: none; }

/* ------------------------------------------------------------------ Panel */

.gba-w-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    width: min(378px, calc(100vw - 32px));
    height: min(580px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    background: var(--gba-panel);
    border: 1px solid var(--gba-linea);
    border-radius: 14px;
    box-shadow: var(--gba-sombra);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 220ms var(--gba-salida), transform 220ms var(--gba-salida);
}
.gba-w-panel.abierto { opacity: 1; transform: none; }
.gba-w-panel[hidden] { display: none; }

.gba-w-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    background: var(--gba-acento);
    color: #fff;
}
.gba-w-cab h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.gba-w-cab p { margin: 2px 0 0; font-size: 12.5px; opacity: .82; line-height: 1.3; }
.gba-w button.gba-w-cerrar {
    flex: none;
    width: 30px !important; height: 30px !important;
    min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important;
    display: grid; place-items: center;
    border: none !important; border-radius: 8px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important; cursor: pointer;
    box-shadow: none !important;
    transition: background-color 160ms var(--gba-salida), transform 160ms var(--gba-salida);
}
.gba-w button.gba-w-cerrar:hover { background: rgba(255,255,255,.26) !important; }
.gba-w-cerrar:active { transform: scale(0.94); }
.gba-w-cerrar svg { width: 15px; height: 15px; }

.gba-w-hilo {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--gba-fondo);
    scroll-behavior: smooth;
}

.gba-w-pie {
    padding: 9px 16px;
    border-top: 1px solid var(--gba-linea);
    background: var(--gba-panel);
    font-size: 11.5px;
    color: var(--gba-tinta-suave);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.gba-w .gba-w-pie button {
    border: none !important; background: none !important; padding: 0 !important;
    color: var(--gba-acento) !important; font-size: 11.5px !important; font-weight: 500;
    cursor: pointer; border-radius: 0 !important;
    text-decoration: underline; text-underline-offset: 2px;
}

/* --------------------------------------------------------------- Burbujas */

.gba-msg {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14.5px;
    animation: gba-entra 260ms var(--gba-salida) both;
}
.gba-bot { align-self: flex-start; background: var(--gba-panel); border: 1px solid var(--gba-linea); border-bottom-left-radius: 5px; }
.gba-yo  { align-self: flex-end; background: var(--gba-acento); color: #fff; border-bottom-right-radius: 5px; }
.gba-ok  { align-self: flex-start; background: var(--gba-ok-fondo); border: 1px solid #BFDCCB; color: var(--gba-ok); }
.gba-err { align-self: flex-start; background: var(--gba-err-fondo); border: 1px solid #E3BAB4; color: var(--gba-err); }

@keyframes gba-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- Opciones */

.gba-ops {
    align-self: flex-start;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}
.gba-w .gba-ops button.gba-op {
    padding: 8px 13px !important;
    border: 1px solid var(--gba-acento) !important;
    border-radius: 999px !important;
    background: var(--gba-panel) !important;
    color: var(--gba-acento) !important;
    font-size: 13.5px !important;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 160ms var(--gba-salida), color 160ms var(--gba-salida), transform 160ms var(--gba-salida);
    animation: gba-entra 260ms var(--gba-salida) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.gba-w .gba-ops button.gba-op:hover { background: var(--gba-acento) !important; color: #fff !important; }
.gba-w .gba-ops button.gba-op:active { transform: scale(0.97); }
.gba-w .gba-ops button.gba-op:focus-visible { outline: 2px solid var(--gba-acento); outline-offset: 2px; }

/* ------------------------------------------------------------ Formularios */

.gba-form { align-self: stretch; display: flex; gap: 6px; padding-top: 2px; }
.gba-w .gba-form input {
    flex: 1 1 auto; min-width: 0 !important; width: 100% !important;
    padding: 9px 12px;
    border: 1px solid var(--gba-linea);
    border-radius: 9px;
    background: var(--gba-panel);
    color: var(--gba-tinta);
    font: inherit; font-size: 14.5px;
    transition: border-color 160ms var(--gba-salida);
}
.gba-form input:focus { outline: none; border-color: var(--gba-acento); }
.gba-w button.gba-enviar {
    padding: 9px 15px !important;
    border: none !important; border-radius: 9px !important;
    background: var(--gba-acento) !important; color: #fff !important;
    font-size: 14px !important; font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms var(--gba-salida), transform 160ms var(--gba-salida);
}
.gba-w button.gba-enviar:hover { background: var(--gba-acento-fuerte) !important; }
.gba-w button.gba-enviar:active { transform: scale(0.97); }

/* ---------------------------------------------------------- Puntos espera */

.gba-esp {
    align-self: flex-start;
    display: flex; gap: 4px;
    padding: 12px 14px;
    background: var(--gba-panel);
    border: 1px solid var(--gba-linea);
    border-radius: 14px; border-bottom-left-radius: 5px;
}
.gba-esp span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gba-tinta-suave);
    animation: gba-latido 1.25s ease-in-out infinite;
}
.gba-esp span:nth-child(2) { animation-delay: .17s; }
.gba-esp span:nth-child(3) { animation-delay: .34s; }

@keyframes gba-latido {
    0%, 60%, 100% { opacity: .28; }
    30%           { opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
    .gba-w-panel, .gba-msg, .gba-op, .gba-w-lanzador, .gba-enviar, .gba-w-cerrar {
        transition-duration: 1ms;
        animation-duration: 1ms;
    }
    .gba-esp span { animation: none; opacity: .6; }
    .gba-w-hilo { scroll-behavior: auto; }
}

/* ------------------------------------ Variante dentro del panel de WordPress */

.gba-admin-hilo {
    background: var(--gba-fondo);
    border: 1px solid var(--gba-linea);
    border-radius: 10px;
    padding: 16px;
    min-height: 22rem;
    max-height: 34rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 40rem;
}