/* ==========================================================================
   Evolución Clínica · Liquid Glass — mismo lenguaje visual que
   cierre-caja-liquid-glass.css / citas-liquid-glass.css: vidrio real,
   ambiente de color del tema de la clínica detrás del panel, tarjetas
   uniformes de vidrio (un solo acento de color por tarjeta), curva de
   resorte estilo iOS/macOS. Siempre activo (no depende de ?boceto=glass).
   Aplica a #modal-historia-evolutiva. La mayoría de los nodos del template
   usan estilos inline (background:white, etc.), así que estas reglas
   necesitan !important para ganarles — mismo patrón que cierre-caja.
   ========================================================================== */

#modal-historia-evolutiva {
    --evo-spring: cubic-bezier(.22, 1, .36, 1);
    --evo-fast: .18s;
    --evo-med: .28s;
}

#modal-historia-evolutiva {
    background: rgba(10, 15, 30, .6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Panel principal: vidrio real, bien translúcido para que el ambiente de
   color y el blur se noten ─────────────────────────────────────────────── */
#modal-historia-evolutiva .evo-container {
    position: relative;
    background: linear-gradient(155deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .42)) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 36px 70px -26px rgba(10, 15, 40, .5),
        0 12px 28px -14px rgba(10, 15, 40, .28) !important;
}

/* Ambiente de color del tema de la clínica detrás del vidrio */
#modal-historia-evolutiva .evo-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(46% 42% at 4% -8%, color-mix(in srgb, var(--glass-primary) 55%, transparent), transparent 68%),
        radial-gradient(40% 38% at 106% 0%, color-mix(in srgb, var(--glass-accent) 46%, transparent), transparent 68%),
        radial-gradient(44% 40% at 100% 110%, color-mix(in srgb, var(--glass-secondary) 30%, transparent), transparent 70%);
}

/* Barrido especular diagonal — la línea de brillo que lee como vidrio */
#modal-historia-evolutiva .evo-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 62%);
    opacity: .5;
    mix-blend-mode: screen;
}

#modal-historia-evolutiva .evo-container > * {
    position: relative;
    z-index: 1;
}

/* ── Sidebar del timeline: segunda superficie grande de vidrio, más clara ── */
#modal-historia-evolutiva .evo-sidebar {
    background: rgba(248, 250, 252, .38) !important;
    border-right: 1px solid rgba(255, 255, 255, .5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

#modal-historia-evolutiva .evo-sidebar > div:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
}

#modal-historia-evolutiva .evo-sidebar > div:last-child {
    background: rgba(255, 255, 255, .3) !important;
    border-top: 1px solid rgba(255, 255, 255, .5) !important;
}

/* ── Área principal y tira de alertas: transparentes, dejan ver el vidrio ── */
#modal-historia-evolutiva .evo-main {
    background: transparent !important;
}

#modal-historia-evolutiva #evo-header-alerts {
    background: rgba(255, 255, 255, .28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
}

/* ── Botón cerrar flotante: vidrio circular ───────────────────────────────── */
#modal-historia-evolutiva .evo-container > button {
    background: rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12) !important;
    transition: transform var(--evo-med) var(--evo-spring), background var(--evo-med) ease, box-shadow var(--evo-med) var(--evo-spring) !important;
}

/* ── Tarjetas: un único estilo de vidrio uniforme para las 3 (.evo-card) ─── */
#modal-historia-evolutiva .evo-card {
    background: rgba(255, 255, 255, .4) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -16px rgba(15, 23, 42, .18) !important;
    transition: transform var(--evo-med) var(--evo-spring), box-shadow var(--evo-med) var(--evo-spring);
}

#modal-historia-evolutiva .evo-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 16px 34px -18px rgba(15, 23, 42, .24) !important;
}

/* Cabecera de la tabla dentro de su tarjeta de vidrio */
#modal-historia-evolutiva .evo-card > div:first-child {
    background: rgba(255, 255, 255, .35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .55) !important;
}

#modal-historia-evolutiva .evo-table thead {
    background: transparent !important;
}

#modal-historia-evolutiva .evo-table tbody tr {
    transition: background var(--evo-fast) ease;
}

#modal-historia-evolutiva .evo-table tbody tr:hover {
    background: color-mix(in srgb, var(--glass-primary) 8%, transparent) !important;
}

/* Select del filtro de gráfica: vidrio ligero */
#modal-historia-evolutiva select {
    background: rgba(255, 255, 255, .55) !important;
    transition: transform var(--evo-fast) var(--evo-spring), background var(--evo-med) ease, box-shadow var(--evo-med) var(--evo-spring);
}

/* Botones "Todas" / "Solo cambios": clase propia (NO .btn-mini) — esa clase
   es global y fuerza 36x36px pensada para botones de solo-ícono, lo que
   aplastaba y superponía estos dos botones de texto. */
#modal-historia-evolutiva .evo-filter-btn {
    background: rgba(255, 255, 255, .5);
    color: #64748b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform var(--evo-fast) var(--evo-spring), background var(--evo-med) ease, box-shadow var(--evo-med) var(--evo-spring), color var(--evo-med) ease;
}

#modal-historia-evolutiva .evo-filter-btn:hover {
    transform: translateY(-1px);
}

#modal-historia-evolutiva .evo-filter-btn.is-active {
    background: color-mix(in srgb, var(--glass-primary) 82%, transparent);
    color: #fff;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--glass-primary) 60%, transparent);
}

/* Timeline: los items no llevan blur propio (son varios) — solo vidrio ligero
   translúcido; el acento azul de "seleccionado" ya lo maneja el JS. */
#modal-historia-evolutiva #evo-timeline > div {
    border-radius: 12px;
    transition: background var(--evo-fast) ease, transform var(--evo-fast) var(--evo-spring);
}

#modal-historia-evolutiva #evo-timeline > div:hover {
    transform: translateX(2px);
}

/* Botón "Cerrar Vista" */
#modal-historia-evolutiva .btn-secondary {
    background: rgba(255, 255, 255, .5) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    transition: transform var(--evo-fast) var(--evo-spring), background var(--evo-med) ease;
}

#modal-historia-evolutiva .btn-secondary:hover {
    transform: translateY(-1px);
}

/* ── Modo oscuro ───────────────────────────────────────────────────────────── */
[data-theme="dark"] #modal-historia-evolutiva .evo-container {
    background: linear-gradient(155deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .58)) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .1),
        0 36px 70px -26px rgba(0, 0, 0, .7) !important;
}

[data-theme="dark"] #modal-historia-evolutiva .evo-sidebar {
    background: rgba(15, 23, 42, .45) !important;
    border-right-color: rgba(255, 255, 255, .12) !important;
}

[data-theme="dark"] #modal-historia-evolutiva .evo-sidebar > div:first-child,
[data-theme="dark"] #modal-historia-evolutiva .evo-sidebar > div:last-child {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(15, 23, 42, .3) !important;
}

[data-theme="dark"] #modal-historia-evolutiva #evo-header-alerts {
    background: rgba(15, 23, 42, .35) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}

[data-theme="dark"] #modal-historia-evolutiva .evo-card {
    background: rgba(15, 23, 42, .45) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

[data-theme="dark"] #modal-historia-evolutiva .evo-card > div:first-child {
    background: rgba(15, 23, 42, .35) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}

[data-theme="dark"] #modal-historia-evolutiva h3,
[data-theme="dark"] #modal-historia-evolutiva h4 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #modal-historia-evolutiva .evo-container > button {
    background: rgba(30, 41, 59, .6) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #cbd5e1 !important;
}

/* Equipos de bajos recursos / "reducir movimiento": el blur es lo más caro —
   se apaga entero de una vez, el degradado y los bordes ya dan sensación de
   vidrio sin ese costo. */
@media (prefers-reduced-motion: reduce) {

    #modal-historia-evolutiva,
    #modal-historia-evolutiva .evo-container,
    #modal-historia-evolutiva .evo-sidebar,
    #modal-historia-evolutiva .evo-container > button {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: none !important;
    }

    #modal-historia-evolutiva .evo-container::after {
        display: none !important;
    }
}