/* ==========================================================================
   Historia Clínica de Optometría · Liquid Glass (paso 1: solo apariencia)
   Mismo lenguaje que cierre-caja / citas / evolucion-liquid-glass.css:
   vidrio real solo en el panel, ambiente de color del tema detrás,
   tarjetas uniformes sin blur, curva de resorte.

   - No mueve ni quita ningún campo: solo pinta.
   - Los campos donde se escribe quedan casi blancos y con buen contraste:
     en el consultorio se lee con luz fuerte y en monitores modestos.
   - Se carga DESPUÉS de css/inline/index-inline-07/08.css (ver index.html),
     y como la plantilla usa estilos en línea, varias reglas llevan !important.
   - Para volver al diseño anterior basta quitar el <link> de index.html.
   ========================================================================== */

#modal-historia {
    --hcg-spring: cubic-bezier(.22, 1, .36, 1);
    --hcg-acento: var(--glass-primary, #2563eb);
    --hcg-texto: #0f172a;
    --hcg-suave: #475569;
    --hcg-borde: rgba(148, 163, 184, .28);
    --hcg-tarjeta: rgba(255, 255, 255, .62);
    --hcg-campo: rgba(255, 255, 255, .86);
    background: rgba(15, 23, 42, .5) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Panel: el único vidrio grande ───────────────────────────────────────── */
#modal-historia #hc-window {
    position: relative;
    isolation: isolate;               /* los ::before/::after quedan detrás del contenido */
    background: linear-gradient(155deg, rgba(255, 255, 255, .72), rgba(241, 245, 249, .55)) !important;
    backdrop-filter: blur(28px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 40px 80px -30px rgba(15, 23, 42, .55),
                0 12px 28px -14px rgba(15, 23, 42, .25) !important;
}
/* Ambiente de color (sin blur): lo que el vidrio "deja ver". */
#modal-historia #hc-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(48% 38% at 6% 0%, color-mix(in srgb, var(--hcg-acento) 26%, transparent), transparent 70%),
        radial-gradient(42% 36% at 100% 4%, rgba(56, 189, 248, .22), transparent 70%),
        radial-gradient(50% 40% at 92% 100%, rgba(129, 140, 248, .18), transparent 72%);
}
/* Reflejo diagonal: lo que hace que se lea como vidrio y no como tarjeta. */
#modal-historia #hc-window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 46%, transparent 62%);
    mix-blend-mode: screen;
}

/* ── Barra de título ─────────────────────────────────────────────────────── */
#modal-historia #hc-window > div:first-child {
    background: rgba(255, 255, 255, .42) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow: 0 1px 0 var(--hcg-borde) !important;
}
#modal-historia #hc-window > div:first-child h2 {
    color: var(--hcg-texto) !important;
}
#modal-historia #hc-window > div:first-child > div:first-child > .material-symbols-outlined {
    color: var(--hcg-acento) !important;
}
#modal-historia #hc-window > div:first-child .hc-window-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .6) !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    color: var(--hcg-suave) !important;
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .25) !important;
    transition: transform .25s var(--hcg-spring), background .2s, color .2s !important;
}
#modal-historia #hc-window > div:first-child .hc-window-btn:hover {
    background: #fff !important;
    color: var(--hcg-texto) !important;
    transform: translateY(-1px);
}
/* Vista: botón con texto ("Una página" / "Pestañas") para que no se confunda
   con el de agrandar la ventana. */
#modal-historia #hc-window > div:first-child .hc-window-btn.hc-vista-btn {
    width: auto !important;
    gap: 6px;
    padding: 0 13px 0 10px !important;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
#modal-historia #hc-window > div:first-child .hc-window-btn.hc-vista-btn b { font-weight: 800; }
#modal-historia #hc-window > div:first-child .hc-window-btn.activo {
    background: color-mix(in srgb, var(--hcg-acento) 14%, #fff) !important;
    color: var(--hcg-acento) !important;
    border-color: color-mix(in srgb, var(--hcg-acento) 35%, transparent) !important;
}
/* En "una página": botón visible para volver a las pestañas. */
#modal-historia #hc-fullscreen-nav .hc-fs-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#modal-historia #hc-fullscreen-nav .hc-fs-volver {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px;
    background: var(--hcg-acento); color: #fff; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; white-space: nowrap;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--hcg-acento) 80%, transparent);
    transition: transform .25s var(--hcg-spring);
}
#modal-historia #hc-fullscreen-nav .hc-fs-volver:hover { transform: translateY(-1px); }
#modal-historia #hc-fullscreen-nav .hc-fs-volver .material-symbols-outlined { font-size: 18px; }
#modal-historia #hc-window > div:first-child .hc-close-btn:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

/* ── Paciente ────────────────────────────────────────────────────────────── */
#modal-historia #hc-patient-banner {
    background: transparent !important;
    border-bottom: 0 !important;
}
#modal-historia #hc-patient-avatar {
    background: rgba(255, 255, 255, .75) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 16px -8px rgba(15, 23, 42, .35) !important;
}

/* ── Pestañas estilo Liquid Glass de Apple ──────────────────────────────────
   La barra es una cápsula de vidrio con borde de luz; la pestaña activa es una
   "lente" (.hc-tab-lente, la pone js/modules/hc-pestanas-vidrio.mjs) que se
   desliza con resorte y se encoge un poco al presionar. Sin ese script, la
   pestaña activa igual se marca (regla de respaldo más abajo). */
#modal-historia .hc-tabs-bar {
    position: relative !important;
    align-items: center !important;
    margin: 4px 16px 8px !important;
    padding: 5px !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3)) !important;
    backdrop-filter: blur(18px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.8) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .8),       /* borde de luz */
        inset 0 1px 1px rgba(255, 255, 255, .95),      /* brillo arriba */
        inset 0 -1px 2px rgba(15, 23, 42, .07),        /* sombra abajo, da volumen */
        0 0 0 .5px rgba(15, 23, 42, .1),               /* contorno fino: bien definida */
        0 10px 28px -14px rgba(15, 23, 42, .4) !important;
    scrollbar-width: none;
}
#modal-historia .hc-tabs-bar .hc-tab-btn {
    position: relative !important;
    z-index: 1 !important;
    padding: 9px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #334155 !important;
    transition: color .25s, transform .35s var(--hcg-spring) !important;
}
#modal-historia .hc-tabs-bar .hc-tab-btn::after,
#modal-historia .hc-tabs-bar .hc-tab-btn::before {
    display: none !important;         /* la raya de abajo de la pestaña activa */
}
#modal-historia .hc-tabs-bar .hc-tab-btn .htb-bubble {
    background: transparent !important;
    box-shadow: none !important;
}
#modal-historia .hc-tabs-bar .hc-tab-btn .htb-icon {
    color: #475569 !important;
    transition: color .25s, transform .35s var(--hcg-spring) !important;
}
#modal-historia .hc-tabs-bar .hc-tab-btn:hover:not(.active) {
    color: var(--hcg-texto) !important;
}
#modal-historia .hc-tabs-bar .hc-tab-btn:hover:not(.active) .htb-icon {
    transform: translateY(-1px);
}
#modal-historia .hc-tabs-bar .hc-tab-btn:active {
    transform: scale(.96);
}
#modal-historia .hc-tabs-bar .hc-tab-btn.active .htb-icon,
#modal-historia .hc-tabs-bar .hc-tab-btn.active .htb-label {
    color: var(--hcg-acento) !important;
    font-weight: 800 !important;
}

/* La lente: vidrio blanco con un toque del color del tema, brillo arriba,
   sombra interna abajo y sombra de color afuera. */
#modal-historia .hc-tab-lente {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .95), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--hcg-acento) 7%, rgba(255, 255, 255, .78)));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .95),
        inset 0 1px 1px #fff,
        inset 0 -3px 6px -2px color-mix(in srgb, var(--hcg-acento) 18%, transparent),
        0 0 0 .5px rgba(15, 23, 42, .1),
        0 8px 18px -8px color-mix(in srgb, var(--hcg-acento) 45%, transparent),
        0 2px 5px rgba(15, 23, 42, .1);
    transition:
        transform .55s var(--hcg-spring),
        width .55s var(--hcg-spring),
        height .3s var(--hcg-spring),
        opacity .2s;
}
/* Reflejo de la lente. */
#modal-historia .hc-tab-lente::after {
    content: "";
    position: absolute;
    inset: 1px 10% auto;
    height: 45%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
    opacity: .7;
}
#modal-historia .hc-tab-lente.sin-animar {
    transition: none;
}
/* Al presionar la pestaña activa, la lente se aprieta como en iOS. */
#modal-historia .hc-tabs-bar:has(.hc-tab-btn.active:active) .hc-tab-lente {
    filter: brightness(.97);
}
/* Flechas ‹ › cuando no caben todas las pestañas. Van pegadas a los bordes
   (sticky) con un desvanecido hacia adentro, que insinúa que hay más. */
#modal-historia .hc-tabs-bar .hc-tab-flecha {
    position: sticky;
    z-index: 2;
    display: none;
    flex: 0 0 auto;
    align-self: stretch;
    width: 40px;
    margin: -5px 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--hcg-acento);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#modal-historia .hc-tabs-bar.desborda .hc-tab-flecha { display: flex; align-items: center; }
#modal-historia .hc-tabs-bar .hc-tab-flecha.visible { opacity: 1; pointer-events: auto; }
#modal-historia .hc-tabs-bar .hc-tab-flecha.izq {
    order: -100 !important;
    left: -5px;
    justify-content: flex-start;
    padding-left: 6px;
    margin-left: -5px;
    margin-right: -40px;            /* no empuja las pestañas: flota encima */
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, rgba(248, 250, 252, .98) 45%, rgba(248, 250, 252, 0));
}
#modal-historia .hc-tabs-bar .hc-tab-flecha.der {
    order: 100 !important;
    right: -5px;
    justify-content: flex-end;
    padding-right: 6px;
    margin-right: -5px;
    margin-left: -40px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(270deg, rgba(248, 250, 252, .98) 45%, rgba(248, 250, 252, 0));
}
#modal-historia .hc-tabs-bar .hc-tab-flecha .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 20px;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .12), 0 4px 10px -4px rgba(15, 23, 42, .35);
    transition: transform .3s var(--hcg-spring);
}
#modal-historia .hc-tabs-bar .hc-tab-flecha:hover .material-symbols-outlined { transform: scale(1.1); }
#modal-historia .hc-tabs-bar .hc-tab-flecha:active .material-symbols-outlined { transform: scale(.92); }

/* Respaldo: si el script de la lente no corrió, la activa igual se ve como píldora. */
#modal-historia .hc-tabs-bar:not(.hc-tabs-vidrio) .hc-tab-btn.active {
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -8px rgba(15, 23, 42, .3) !important;
}

/* ── Vista "una página": mismos accesos que las pestañas ─────────────────── */
#modal-historia #hc-fullscreen-nav {
    top: -16px !important;
    margin: -16px -18px 4px !important;
    padding: 16px 18px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Fondo que se desvanece: al bajar, el contenido no se asoma detrás. */
    background: linear-gradient(180deg, rgba(244, 247, 252, .97) 0 72%, rgba(244, 247, 252, 0)) !important;
}
#modal-historia #hc-fullscreen-nav .hc-fs-top { align-items: center !important; flex-wrap: nowrap !important; }
#modal-historia #hc-fullscreen-nav .hc-fs-volver,
#modal-historia #hc-fullscreen-nav .hc-fs-meta { flex: 0 0 auto; }
#modal-historia #hc-fullscreen-nav .hc-fs-links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px !important;
    padding: 5px !important;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
    backdrop-filter: blur(18px) saturate(1.8);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 1px rgba(255, 255, 255, .95),
                inset 0 -1px 2px rgba(15, 23, 42, .07), 0 0 0 .5px rgba(15, 23, 42, .1),
                0 10px 28px -14px rgba(15, 23, 42, .4);
}
#modal-historia #hc-fullscreen-nav .hc-fs-links::-webkit-scrollbar { display: none; }
/* Si no caben todos, el borde derecho se desvanece: se nota que la barra sigue. */
#modal-historia #hc-fullscreen-nav .hc-fs-links {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
#modal-historia #hc-fullscreen-nav .hc-fs-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    /* Cada acceso con su propio fondo suave: se lee como una pestaña, no como texto suelto. */
    background: rgba(255, 255, 255, .6) !important;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    color: #334155 !important;
    font-size: .8rem !important;
    transition: background .3s var(--hcg-spring), box-shadow .3s var(--hcg-spring), color .2s, transform .3s var(--hcg-spring) !important;
}
#modal-historia #hc-fullscreen-nav .hc-fs-link .material-symbols-outlined { font-size: 18px; color: #475569; }
#modal-historia #hc-fullscreen-nav .hc-fs-link:hover { background: rgba(255, 255, 255, .95) !important; color: var(--hcg-texto) !important; }
#modal-historia #hc-fullscreen-nav .hc-fs-link:active { transform: scale(.96); }
#modal-historia #hc-fullscreen-nav .hc-fs-link.activo {
    color: var(--hcg-acento) !important;
    font-weight: 800 !important;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .95), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--hcg-acento) 7%, rgba(255, 255, 255, .78))) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 1px #fff,
                inset 0 -3px 6px -2px color-mix(in srgb, var(--hcg-acento) 18%, transparent),
                0 0 0 .5px rgba(15, 23, 42, .1),
                0 8px 18px -8px color-mix(in srgb, var(--hcg-acento) 45%, transparent),
                0 2px 5px rgba(15, 23, 42, .1) !important;
}
#modal-historia #hc-fullscreen-nav .hc-fs-link.activo .material-symbols-outlined { color: var(--hcg-acento); }
/* Completitud: compacta, en la misma línea. */
#modal-historia #hc-fullscreen-nav .hc-fs-meta { min-width: 0 !important; align-items: stretch !important; gap: 4px !important; padding: 0 4px; }
#modal-historia #hc-fullscreen-nav .hc-fs-progress-bar { width: 130px !important; height: 6px !important; background: rgba(148, 163, 184, .25) !important; }
#modal-historia #hc-fullscreen-nav .hc-fs-progress-bar > div { background: var(--hcg-acento) !important; }
#modal-historia #hc-fullscreen-nav .hc-fs-progress-text { font-size: .72rem !important; color: var(--hcg-suave) !important; }
/* Títulos de cada sección. */
#modal-historia #hc-window .hc-tab-content > .hc-section-heading {
    margin: 18px 0 10px !important;
    padding: 4px 6px !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 1.05rem;
    font-weight: 800 !important;
    color: var(--hcg-texto) !important;
    scroll-margin-top: 80px;
}

/* ── Zona de trabajo y tarjetas (sin blur: solo translúcidas) ────────────── */
#modal-historia #hc-scroll-area {
    background: transparent !important;
}
#modal-historia .hc-v3-pane,
#modal-historia .draggable-section,
#modal-historia #hc-nota-paciente > *,
#modal-historia .hc-tab-content > div:not([id^="hc-nota"]):not(.hc-v3-basicos-grid):not(.hc-rx-ayuda):not(.hc-section-heading) {
    background: var(--hcg-tarjeta) !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset,
                0 10px 24px -18px rgba(15, 23, 42, .35) !important;
}
/* Dentro de una tarjeta, las subtarjetas no repiten borde ni sombra. */
#modal-historia .hc-v3-pane .hc-v3-pane,
#modal-historia .hc-tab-content > div .draggable-section {
    box-shadow: none !important;
}
/* La rejilla de Básicos solo ordena las dos tarjetas: sin tarjeta propia
   (la regla vieja "#modal-historia .hc-tab-content>div" le ponía una). */
#modal-historia #hc-window .hc-tab-content > .hc-v3-basicos-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#modal-historia .hc-v3-pane > header .material-symbols-outlined {
    background: rgba(255, 255, 255, .8) !important;
    color: var(--hcg-acento) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .3) !important;
}

/* ── Campos: casi blancos, para que se lea bien ─────────────────────────── */
#modal-historia #hc-window input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#modal-historia #hc-window select,
#modal-historia #hc-window textarea {
    background-color: var(--hcg-campo) !important;
    border: 1px solid var(--hcg-borde) !important;
    border-radius: 12px !important;
    color: var(--hcg-texto) !important;
    transition: border-color .2s, box-shadow .25s var(--hcg-spring), background-color .2s !important;
}
#modal-historia #hc-window input::placeholder,
#modal-historia #hc-window textarea::placeholder {
    color: #8a96a8 !important;        /* gris legible, no gris sobre gris */
}
#modal-historia #hc-window input:not([type="checkbox"]):not([type="radio"]):focus,
#modal-historia #hc-window select:focus,
#modal-historia #hc-window textarea:focus {
    background-color: #fff !important;
    border-color: color-mix(in srgb, var(--hcg-acento) 55%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hcg-acento) 16%, transparent) !important;
    outline: none !important;
}
#modal-historia #hc-window input[disabled],
#modal-historia #hc-window select[disabled],
#modal-historia #hc-window textarea[disabled] {
    background-color: rgba(241, 245, 249, .7) !important;
    color: #64748b !important;
}

/* ── Barra de abajo ──────────────────────────────────────────────────────── */
#modal-historia #hc-window > div:last-of-type {
    background: rgba(255, 255, 255, .45) !important;
    border-top: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: 0 -1px 0 var(--hcg-borde) !important;
}
#modal-historia #hc-window > div:last-of-type button {
    border-radius: 999px !important;
    padding: 10px 22px !important;
    transition: transform .25s var(--hcg-spring), box-shadow .25s var(--hcg-spring), filter .2s !important;
}
#modal-historia #hc-window > div:last-of-type button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
/* Cancelar: vidrio. */
#modal-historia #hc-window > div:last-of-type button[onclick*="cerrarModalHistoria"] {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    color: var(--hcg-suave) !important;
    box-shadow: 0 4px 12px -8px rgba(15, 23, 42, .35) !important;
}
/* Guardar en proceso y Cerrar historia conservan su color: son acciones
   distintas y cerrar tiene valor legal, no deben confundirse. */
#modal-historia #hc-window > div:last-of-type button[onclick*="en_proceso"] {
    background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 8px 18px -10px rgba(245, 158, 11, .8) !important;
}
#modal-historia #hc-window > div:last-of-type button[onclick*="confirmarCierreHistoria"] {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 8px 18px -10px rgba(29, 78, 216, .8) !important;
}

/* ── Sugerencias de la IA: debajo de su campo, sin tapar nada ──────────── */
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px !important;
    margin: 8px 0 2px;
    padding: 0;
    animation: hcgSube .3s var(--hcg-spring);
}
@keyframes hcgSube { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Las estrellitas decorativas solo tenían sentido en el panel flotante. */
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea > span:not(.hc-ai-badge),
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea::before,
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea::after { display: none !important; }
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea .hc-ai-badge {
    display: inline-flex !important;
    align-items: center;
    height: 26px;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    color: #fff !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px -5px rgba(99, 102, 241, .7) !important;
}
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea .hc-ai-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 28px;
    padding: 0 12px !important;
    border: 1px solid rgba(124, 58, 237, .22) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 243, 255, .85)) !important;
    color: #5b21b6 !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px -3px rgba(91, 33, 182, .3) !important;
    transition: transform .25s var(--hcg-spring), box-shadow .2s !important;
}
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea .hc-ai-pill:hover,
#modal-historia #hc-ai-pills.hc-ai-pills--enlinea .hc-ai-pill--h {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 #fff, 0 6px 12px -6px rgba(91, 33, 182, .45) !important;
}

/* ── Motivos frecuentes: fichas de vidrio que se marcan con un clic ─────── */
#modal-historia .hc-motivos {
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
#modal-historia .hc-motivos-head strong { color: var(--hcg-texto) !important; font-size: .84rem !important; }
#modal-historia .hc-motivos-head > button {
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .75) !important;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .1), 0 3px 8px -5px rgba(15, 23, 42, .3) !important;
    color: var(--hcg-acento) !important;
}
#modal-historia .hc-motivos-head > button b {
    background: color-mix(in srgb, var(--hcg-acento) 12%, #fff) !important;
    padding: 0 6px;
}
#modal-historia .hc-motivos-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 8px !important;
}
#modal-historia .hc-motivo-chip {
    min-height: 44px !important;
    padding: 6px 12px 6px 6px !important;
    gap: 10px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)) !important;
    color: var(--hcg-texto) !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px -4px rgba(15, 23, 42, .3) !important;
    transition: transform .3s var(--hcg-spring), box-shadow .25s var(--hcg-spring), border-color .2s, background .2s !important;
}
#modal-historia .hc-motivo-chip:hover {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--hcg-acento) 35%, transparent) !important;
    box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(15, 23, 42, .4) !important;
}
#modal-historia .hc-motivo-chip:active { transform: scale(.97) !important; }
#modal-historia .hc-motivo-chip i {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--hcg-acento) 10%, #fff) !important;
    color: var(--hcg-acento) !important;
    font-size: 19px !important;
    font-weight: 400 !important;
}
#modal-historia .hc-motivo-chip b { font-size: .78rem !important; font-weight: 700 !important; }
#modal-historia .hc-motivo-chip em {
    position: static !important;
    margin-left: auto;
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
    background: var(--hcg-acento) !important;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s, transform .35s var(--hcg-spring);
}
#modal-historia .hc-motivo-chip.selected {
    border-color: color-mix(in srgb, var(--hcg-acento) 55%, transparent) !important;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--hcg-acento) 9%, #fff)) !important;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px color-mix(in srgb, var(--hcg-acento) 12%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--hcg-acento) 60%, transparent) !important;
}
#modal-historia .hc-motivo-chip.selected i { background: var(--hcg-acento) !important; color: #fff !important; }
#modal-historia .hc-motivo-chip.selected em { opacity: 1; transform: scale(1); }
#modal-historia .hc-motivo-chip.priority i { background: #fff1ee !important; color: #dc2626 !important; }
#modal-historia .hc-motivo-chip.priority.selected i { background: #dc2626 !important; color: #fff !important; }
#modal-historia .hc-motivos-note { color: var(--hcg-suave) !important; }

/* ── Antecedentes ────────────────────────────────────────────────────────── */
/* Barra principal (Personales, Familiares…): cápsula de vidrio como las pestañas. */
#modal-historia .hc-ant-view-nav {
    padding: 5px !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 1px rgba(255, 255, 255, .95),
                inset 0 -1px 2px rgba(15, 23, 42, .07), 0 0 0 .5px rgba(15, 23, 42, .1),
                0 8px 22px -14px rgba(15, 23, 42, .4) !important;
}
#modal-historia .hc-ant-view-nav button {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #334155 !important;
    transition: background .3s var(--hcg-spring), box-shadow .3s var(--hcg-spring), color .2s, transform .3s var(--hcg-spring) !important;
}
#modal-historia .hc-ant-view-nav button:active { transform: scale(.97); }
#modal-historia .hc-ant-view-nav button .hc-ant-tab-icon { color: #475569; }
#modal-historia .hc-ant-view-nav button.active {
    color: var(--hcg-acento) !important;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .95), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--hcg-acento) 7%, rgba(255, 255, 255, .78))) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 1px 1px #fff,
                inset 0 -3px 6px -2px color-mix(in srgb, var(--hcg-acento) 18%, transparent),
                0 0 0 .5px rgba(15, 23, 42, .1),
                0 8px 18px -8px color-mix(in srgb, var(--hcg-acento) 45%, transparent),
                0 2px 5px rgba(15, 23, 42, .1) !important;
}
/* Íconos simples, sin la cajita ni el cuadro de color de antes. */
#modal-historia .hc-ant-view-nav button .hc-ant-tab-icon {
    display: inline-grid !important;
    place-items: center;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 20px !important;
}
#modal-historia .hc-ant-view-nav button.active .hc-ant-tab-icon { color: var(--hcg-acento) !important; }
#modal-historia .hc-ant-view-nav button.active b { background: var(--hcg-acento) !important; }

/* Segundo nivel (Sistémicos, Medicamentos…): más liviano, texto con raya. */
#modal-historia .hc-ant-focus-nav {
    gap: 4px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--hcg-borde);
}
#modal-historia .hc-ant-focus-nav button {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hcg-suave) !important;
    transition: color .2s, background .2s !important;
}
#modal-historia .hc-ant-focus-nav button:hover { background: rgba(255, 255, 255, .5) !important; color: var(--hcg-texto) !important; }
#modal-historia .hc-ant-focus-nav button i {
    flex-basis: 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .8) !important;
    color: var(--hcg-suave) !important;
    font-size: 17px !important;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .1);
}
#modal-historia .hc-ant-focus-nav button b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hcg-acento) 14%, #fff);
    color: var(--hcg-acento) !important;
    font-size: .68rem;
}
#modal-historia .hc-ant-focus-nav button.active {
    color: var(--hcg-acento) !important;
    box-shadow: inset 0 -2.5px 0 var(--hcg-acento) !important;
}
#modal-historia .hc-ant-focus-nav button.active i { background: var(--hcg-acento) !important; color: #fff !important; }

/* Tarjetas e íconos de título. */
#modal-historia .hc-ant-card {
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -20px rgba(15, 23, 42, .4) !important;
}
#modal-historia .hc-ant-card h5 { color: var(--hcg-texto) !important; font-size: .9rem !important; }
#modal-historia .hc-ant-card h5 i {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
    font-size: 19px !important;
    box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .35);
}
#modal-historia .hc-ant-card.focus-card { min-height: 0 !important; }

/* Opciones: ficha con la casilla al lado del nombre (una regla vieja,
   "#modal-historia label { display:block }", ponía la casilla encima). */
#modal-historia .hc-ant-checks {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 8px !important;
}
#modal-historia .hc-ant-card.focus-card > .hc-ant-checks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
#modal-historia .hc-ant-checks label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)) !important;
    color: var(--hcg-texto) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 6px -4px rgba(15, 23, 42, .3) !important;
    transition: transform .3s var(--hcg-spring), box-shadow .25s var(--hcg-spring), border-color .2s, background .2s !important;
}
#modal-historia .hc-ant-checks label:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--hcg-acento) 35%, transparent) !important;
}
#modal-historia .hc-ant-checks label:active { transform: scale(.98); }
#modal-historia .hc-ant-checks label:has(input:checked) {
    border-color: color-mix(in srgb, var(--hcg-acento) 55%, transparent) !important;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--hcg-acento) 9%, #fff)) !important;
    color: color-mix(in srgb, var(--hcg-acento) 80%, #0f172a) !important;
    font-weight: 750 !important;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px color-mix(in srgb, var(--hcg-acento) 12%, transparent) !important;
}
/* Casilla redonda con ✓, al estilo iOS. */
#modal-historia .hc-ant-checks input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 20px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid rgba(100, 116, 139, .55) !important;
    border-radius: 999px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s, transform .3s var(--hcg-spring) !important;
}
/* El ✓ es un dibujo centrado (no bordes rotados, que siempre quedaban corridos). */
#modal-historia .hc-ant-checks input[type="checkbox"]:checked {
    border-color: var(--hcg-acento) !important;
    background-color: var(--hcg-acento) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
}
#modal-historia .hc-ant-checks input[type="checkbox"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hcg-acento) 30%, transparent) !important;
    outline-offset: 2px !important;
}

/* Botón "niega antecedentes" y pie. */
#modal-historia .hc-ant-quickbar button {
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px -8px rgba(5, 150, 105, .6) !important;
}

/* ── Plan sugerido (js/modules/hc-plan-sugerido.js) ─────────────────────── */
#modal-historia .hc-plan-sugerido {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--hcg-acento) 5%, rgba(255, 255, 255, .8)));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 .5px color-mix(in srgb, var(--hcg-acento) 22%, transparent), 0 14px 30px -22px color-mix(in srgb, var(--hcg-acento) 70%, transparent);
}
#modal-historia .hps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#modal-historia .hps-ico {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: #fff;
    background: linear-gradient(135deg, var(--hcg-acento), #7c3aed); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .7);
}
#modal-historia .hps-tit { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; }
#modal-historia .hps-tit b { font-size: .92rem; color: var(--hcg-texto); }
#modal-historia .hps-tit small { font-size: .74rem; color: var(--hcg-suave); }
#modal-historia .hps-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
    background: #fff; color: #334155; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 0 0 .5px rgba(15, 23, 42, .14), 0 3px 8px -5px rgba(15, 23, 42, .35);
    transition: transform .25s var(--hcg-spring);
}
#modal-historia .hps-btn:hover { transform: translateY(-1px); }
#modal-historia .hps-btn .material-symbols-outlined { font-size: 18px; }
#modal-historia .hps-btn.primario { background: linear-gradient(180deg, color-mix(in srgb, var(--hcg-acento) 85%, #fff), var(--hcg-acento)); color: #fff; box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--hcg-acento) 80%, transparent); }
#modal-historia .hps-nota { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(241, 245, 249, .8); color: #64748b; font-size: .76rem; }
#modal-historia .hps-nota .material-symbols-outlined { font-size: 17px; }
#modal-historia .hps-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
#modal-historia .hps-grupo { display: flex; flex-direction: column; gap: 6px; }
#modal-historia .hps-gtit { display: flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; color: var(--hcg-suave); text-transform: uppercase; letter-spacing: .04em; }
#modal-historia .hps-gtit .material-symbols-outlined { font-size: 16px; color: var(--hcg-acento); }
#modal-historia .hps-item {
    display: flex !important; align-items: flex-start; gap: 9px; margin: 0 !important; padding: 9px 11px; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, .75); border: 1px solid rgba(148, 163, 184, .25);
    transition: border-color .2s, background .2s, opacity .2s;
    opacity: .62;
}
#modal-historia .hps-item.on { opacity: 1; border-color: color-mix(in srgb, var(--hcg-acento) 40%, transparent); background: #fff; }
#modal-historia .hps-item.remision.on { border-color: rgba(220, 38, 38, .4); background: #fff7f7; }
#modal-historia .hps-item input { margin-top: 2px; accent-color: var(--hcg-acento); width: 16px; height: 16px; flex: 0 0 16px; }
#modal-historia .hps-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#modal-historia .hps-item b { font-size: .8rem; color: var(--hcg-texto); }
#modal-historia .hps-item small { font-size: .76rem; line-height: 1.4; color: #475569; }
#modal-historia .hps-flash { animation: hpsFlash 1.2s ease; }
@keyframes hpsFlash { 0%, 40% { background-color: color-mix(in srgb, var(--hcg-acento) 14%, #fff) !important; } 100% { background-color: inherit; } }

/* ── Modo oscuro ─────────────────────────────────────────────────────────
   La historia se queda clara también en modo oscuro, como antes del vidrio:
   sus textos (etiquetas, títulos, nombres) están pensados para fondo claro y
   sobre un panel oscuro quedaban ilegibles. Solo se oscurece un poco el fondo. */
[data-theme="dark"] #modal-historia {
    background: rgba(2, 6, 23, .65) !important;
}

/* ── Menos movimiento: sin blur ni transiciones (el vidrio se sigue leyendo
   por los degradados y bordes) ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #modal-historia,
    #modal-historia #hc-window,
    #modal-historia .hc-tabs-bar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #modal-historia #hc-window *,
    #modal-historia .hc-tab-lente {
        transition: none !important;
    }
}