/* ==========================================================================
   Medicina General · Configuración — Liquid Glass
   Mismo lenguaje visual que cierre-caja-liquid-glass.css y
   citas-liquid-glass.css: vidrio real solo en el panel, ambiente de color por
   gradientes detrás, barrido especular, tarjetas uniformes translúcidas y
   curva de resorte. Siempre activo (no depende de ?boceto=glass).
   Ámbito: #mg-config-modal — el modal se inyecta en runtime desde
   js/modules/medicina-general-config.js, igual que la ventana clínica.
   ========================================================================== */

#mg-config-modal {
    --mgc-spring: cubic-bezier(.22, 1, .36, 1);
    --mgc-fast: .18s;
    --mgc-med: .28s;
    --mgc-ink: #12283d;
    --mgc-muted: #5d7285;
    --mgc-line: rgba(18, 40, 61, .12);
}

/* `display:grid` / `inline-flex` de las reglas de abajo ganaban al atributo
   `hidden`: la vista previa de la firma se mostraba siempre (con la imagen
   rota, sin src) y el botón de cancelar edición no se ocultaba nunca. */
#mg-config-modal [hidden] {
    display: none !important;
}

#mg-config-modal.mgc-overlay {
    position: fixed;
    inset: 0;
    /* Por encima de la ventana clínica (2147482000) y por debajo de las
       alertas de SweetAlert (2147483600). */
    z-index: 2147482300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 15, 30, .66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--mgc-ink);
    animation: mgcFade var(--mgc-med) var(--mgc-spring);
}

/* ── El panel: bien translúcido para que el ambiente y el blur se noten ──── */
#mg-config-modal .mgc-panel {
    position: relative;
    width: min(880px, 100%);
    max-height: min(880px, calc(100dvh - 40px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 26px;
    /* Es un formulario que se lee y se rellena, no una tarjeta decorativa:
       el vidrio se mantiene, pero con cuerpo suficiente para que el texto
       no compita con lo que hay detrás. */
    background: linear-gradient(155deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .86));
    backdrop-filter: blur(26px) saturate(1.7);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, .85);
    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);
    animation: mgcRise var(--mgc-med) var(--mgc-spring);
}

/* Ambiente de color detrás del vidrio. Verde azulado/menta para emparentarlo
   con el módulo clínico, sin repetir el navy del cierre de caja. */
#mg-config-modal .mgc-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 40% at 4% -6%, rgba(34, 167, 138, .26), transparent 68%),
        radial-gradient(42% 36% at 104% 0%, rgba(56, 189, 248, .22), transparent 68%),
        radial-gradient(46% 42% at 100% 106%, rgba(99, 102, 241, .16), transparent 70%),
        radial-gradient(38% 34% at -4% 102%, rgba(20, 139, 122, .13), transparent 70%);
}

/* Barrido especular: lo que hace que se lea como vidrio y no como tarjeta. */
#mg-config-modal .mgc-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 62%);
    opacity: .28;
    mix-blend-mode: screen;
}

#mg-config-modal .mgc-panel > * {
    position: relative;
    z-index: 1;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
#mg-config-modal .mgc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18));
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

#mg-config-modal .mgc-kicker {
    display: block;
    color: #14806d;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#mg-config-modal .mgc-head h2 {
    margin: 4px 0 5px;
    font-size: clamp(21px, 2.6vw, 27px);
    letter-spacing: -.03em;
}

#mg-config-modal .mgc-head p {
    margin: 0;
    max-width: 58ch;
    color: var(--mgc-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
#mg-config-modal .mgc-body {
    overflow: auto;
    padding: 20px 24px 24px;
    display: grid;
    gap: 22px;
}

#mg-config-modal .mgc-section h3 {
    margin: 0 0 12px;
    font-size: 15px;
    letter-spacing: -.01em;
}

#mg-config-modal .mgc-help {
    display: block;
    margin-top: 7px;
    color: var(--mgc-muted);
    font-size: 12px;
    line-height: 1.45;
}

#mg-config-modal .mgc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#mg-config-modal .mgc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

#mg-config-modal .mgc-field > span {
    color: #4e6374;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Superficies internas con cuerpo: el vidrio vive en el panel, no en cada
   campo. Un relleno casi opaco aquí es lo que hace legible el formulario. */
#mg-config-modal input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    color: var(--mgc-ink);
    font: inherit;
    transition: background var(--mgc-fast) var(--mgc-spring),
                border-color var(--mgc-fast) var(--mgc-spring),
                box-shadow var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal input[type="text"]:focus {
    outline: none;
    background: #fff;
    border-color: rgba(34, 167, 138, .65);
    box-shadow: 0 0 0 3px rgba(34, 167, 138, .18);
}

/* ── Lista de profesionales: una sola tarjeta uniforme, sin arcoíris ─────── */
#mg-config-modal .mgc-list {
    display: grid;
    gap: 10px;
}

#mg-config-modal .mgc-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform var(--mgc-fast) var(--mgc-spring),
                box-shadow var(--mgc-fast) var(--mgc-spring),
                background var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal .mgc-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 10px 22px -14px rgba(10, 15, 40, .4);
}

#mg-config-modal .mgc-card-sign {
    display: grid;
    place-items: center;
    height: 46px;
    padding: 4px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .62);
}

#mg-config-modal .mgc-card-sign img {
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
}

#mg-config-modal .mgc-card-nosign {
    color: #93a4b1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#mg-config-modal .mgc-card-data {
    min-width: 0;
}

#mg-config-modal .mgc-card-data b,
#mg-config-modal .mgc-card-data small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mg-config-modal .mgc-card-data small {
    margin-top: 3px;
    color: var(--mgc-muted);
    font-size: 12px;
}

#mg-config-modal .mgc-card-actions {
    display: flex;
    gap: 6px;
}

#mg-config-modal .mgc-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 26px 18px;
    border: 1px dashed rgba(18, 40, 61, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .3);
    text-align: center;
}

#mg-config-modal .mgc-empty .material-symbols-outlined {
    font-size: 30px;
    color: #22a78a;
}

#mg-config-modal .mgc-empty p {
    margin: 0;
    max-width: 46ch;
    color: var(--mgc-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ── Formulario y firma ──────────────────────────────────────────────────── */
#mg-config-modal .mgc-form {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

#mg-config-modal .mgc-sign {
    margin-top: 14px;
}

#mg-config-modal .mgc-sign-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 11px;
}

#mg-config-modal .mgc-sign-tabs button {
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .4);
    color: #5c7183;
    font: inherit;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
    transition: background var(--mgc-fast) var(--mgc-spring),
                color var(--mgc-fast) var(--mgc-spring),
                transform var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal .mgc-sign-tabs button:hover {
    transform: translateY(-1px);
}

#mg-config-modal .mgc-sign-tabs button.active {
    background: #13283d;
    border-color: #13283d;
    color: #fff;
}

/* Lienzo y vista previa en paralelo: así la firma cargada se ve sin tener
   que deslizar por encima del lienzo (que no deja, para poder dibujar). */
#mg-config-modal .mgc-sign-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 210px);
    gap: 12px;
    align-items: start;
}

#mg-config-modal .mgc-sign-input {
    min-width: 0;
}

#mg-config-modal .mgc-pad {
    display: block;
    width: 100%;
    height: 150px;
    border: 1px dashed rgba(18, 40, 61, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
    cursor: crosshair;
    touch-action: none;
}

#mg-config-modal .mgc-drop {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 26px 18px;
    border: 1px dashed rgba(18, 40, 61, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    cursor: pointer;
    transition: background var(--mgc-fast) var(--mgc-spring),
                border-color var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal .mgc-drop:hover {
    background: rgba(255, 255, 255, .7);
    border-color: rgba(34, 167, 138, .6);
}

#mg-config-modal .mgc-drop .material-symbols-outlined {
    font-size: 28px;
    color: #22a78a;
}

#mg-config-modal .mgc-drop small {
    color: var(--mgc-muted);
    font-size: 11.5px;
}

#mg-config-modal .mgc-sign-preview {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    margin: 0;
    min-height: 130px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
}

#mg-config-modal .mgc-sign-preview img {
    max-width: 100%;
    max-height: 84px;
    object-fit: contain;
}

#mg-config-modal .mgc-sign-preview figcaption {
    color: var(--mgc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

#mg-config-modal .mgc-form-actions,
#mg-config-modal .mgc-foot {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

#mg-config-modal .mgc-form-actions {
    margin-top: 14px;
}

#mg-config-modal .mgc-foot {
    padding: 15px 24px;
    border-top: 1px solid rgba(255, 255, 255, .55);
    background: linear-gradient(0deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18));
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
#mg-config-modal .mgc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 13px;
    background: rgba(255, 255, 255, .55);
    color: var(--mgc-ink);
    font: inherit;
    font-weight: 780;
    cursor: pointer;
    transition: transform var(--mgc-fast) var(--mgc-spring),
                box-shadow var(--mgc-fast) var(--mgc-spring),
                background var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal .mgc-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 10px 22px -14px rgba(10, 15, 40, .5);
}

#mg-config-modal .mgc-btn.ghost {
    background: transparent;
    border-color: rgba(18, 40, 61, .18);
    color: var(--mgc-muted);
}

#mg-config-modal .mgc-btn.primary {
    border-color: #13283d;
    background: linear-gradient(135deg, #17364f, #14806d);
    color: #fff;
}

#mg-config-modal .mgc-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

#mg-config-modal .mgc-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 11px;
    background: rgba(255, 255, 255, .5);
    color: #44596b;
    cursor: pointer;
    transition: transform var(--mgc-fast) var(--mgc-spring),
                background var(--mgc-fast) var(--mgc-spring),
                color var(--mgc-fast) var(--mgc-spring);
}

#mg-config-modal .mgc-icon:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .78);
}

#mg-config-modal .mgc-icon.danger:hover {
    background: #fde8ea;
    color: #a82435;
}

#mg-config-modal .mgc-btn:focus-visible,
#mg-config-modal .mgc-icon:focus-visible,
#mg-config-modal .mgc-sign-tabs button:focus-visible {
    outline: 3px solid rgba(34, 167, 138, .34);
    outline-offset: 2px;
}

@keyframes mgcFade { from { opacity: 0 } }
@keyframes mgcRise { from { opacity: 0; transform: translateY(14px) scale(.985) } }

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
[data-theme="dark"] #mg-config-modal {
    --mgc-ink: #e6eef6;
    --mgc-muted: #9db0c1;
    --mgc-line: rgba(255, 255, 255, .12);
}

[data-theme="dark"] #mg-config-modal .mgc-panel {
    background: linear-gradient(155deg, rgba(23, 37, 54, .74), rgba(12, 22, 34, .6));
    border-color: rgba(255, 255, 255, .14);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .14),
        0 36px 70px -26px rgba(0, 0, 0, .7);
}

[data-theme="dark"] #mg-config-modal .mgc-panel::before {
    background:
        radial-gradient(46% 40% at 4% -6%, rgba(34, 167, 138, .58), transparent 68%),
        radial-gradient(42% 36% at 104% 0%, rgba(56, 189, 248, .5), transparent 68%),
        radial-gradient(46% 42% at 100% 106%, rgba(99, 102, 241, .4), transparent 70%);
}

[data-theme="dark"] #mg-config-modal .mgc-panel::after { opacity: .18 }

[data-theme="dark"] #mg-config-modal .mgc-head,
[data-theme="dark"] #mg-config-modal .mgc-foot {
    border-color: rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
}

[data-theme="dark"] #mg-config-modal .mgc-kicker { color: #4ddbb8 }

[data-theme="dark"] #mg-config-modal input[type="text"],
[data-theme="dark"] #mg-config-modal .mgc-card,
[data-theme="dark"] #mg-config-modal .mgc-form,
[data-theme="dark"] #mg-config-modal .mgc-btn,
[data-theme="dark"] #mg-config-modal .mgc-icon,
[data-theme="dark"] #mg-config-modal .mgc-sign-tabs button,
[data-theme="dark"] #mg-config-modal .mgc-drop,
[data-theme="dark"] #mg-config-modal .mgc-pad,
[data-theme="dark"] #mg-config-modal .mgc-sign-preview,
[data-theme="dark"] #mg-config-modal .mgc-card-sign {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: var(--mgc-ink);
}

[data-theme="dark"] #mg-config-modal .mgc-btn.primary {
    background: linear-gradient(135deg, #1d4a68, #17967f);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

[data-theme="dark"] #mg-config-modal .mgc-empty {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    #mg-config-modal.mgc-overlay { padding: 0 }
    #mg-config-modal .mgc-panel {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    #mg-config-modal .mgc-head,
    #mg-config-modal .mgc-body,
    #mg-config-modal .mgc-foot { padding-inline: 16px }
    #mg-config-modal .mgc-grid { grid-template-columns: 1fr }
    #mg-config-modal .mgc-sign-work { grid-template-columns: 1fr }
    /* Apilada, la previa va ARRIBA del lienzo: debajo quedaría
       detrás de una zona que no deja deslizar. */
    #mg-config-modal .mgc-sign-preview { order: -1; min-height: 0 }
    #mg-config-modal .mgc-card { grid-template-columns: 68px minmax(0, 1fr) auto }
    #mg-config-modal .mgc-foot .mgc-btn { flex: 1 }
}

/* ── Accesibilidad ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #mg-config-modal.mgc-overlay,
    #mg-config-modal .mgc-panel,
    #mg-config-modal .mgc-panel::before,
    #mg-config-modal .mgc-panel::after,
    #mg-config-modal .mgc-head {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transition: none !important;
    }
    #mg-config-modal * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Comparar consultas · mismo lenguaje de vidrio que el panel de configuración.
   Ámbito: #mg-compare-modal (se inyecta en runtime desde
   js/modules/medicina-general-compare.js).
   ========================================================================== */
#mg-compare-modal{--mgc-spring:cubic-bezier(.22,1,.36,1);--mgc-ink:#12283d;--mgc-muted:#5d7285;--mgc-line:rgba(18,40,61,.14)}
#mg-compare-modal [hidden]{display:none!important}
#mg-compare-modal.mgcmp-overlay{
    position:fixed;inset:0;z-index:2147482400;display:grid;place-items:center;padding:20px;
    background:rgba(10,15,30,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    font-family:"Inter","Segoe UI",sans-serif;color:var(--mgc-ink);animation:mgcFade .28s var(--mgc-spring)}
#mg-compare-modal .mgcmp-panel{
    position:relative;width:min(1000px,100%);max-height:min(900px,calc(100dvh - 40px));
    display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;border-radius:26px;
    background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(255,255,255,.88));
    backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),0 36px 70px -26px rgba(10,15,40,.5);
    animation:mgcRise .28s var(--mgc-spring)}
#mg-compare-modal .mgcmp-panel::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(46% 40% at 4% -6%,rgba(34,167,138,.22),transparent 68%),
               radial-gradient(42% 36% at 104% 0%,rgba(56,189,248,.2),transparent 68%)}
#mg-compare-modal .mgcmp-panel>*{position:relative;z-index:1}
#mg-compare-modal .mgcmp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.6)}
#mg-compare-modal .mgcmp-kicker{display:block;color:#14806d;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
#mg-compare-modal .mgcmp-head h2{margin:4px 0 4px;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.03em}
#mg-compare-modal .mgcmp-head p{margin:0;color:var(--mgc-muted);font-size:13px}
#mg-compare-modal .mgcmp-pickers{display:flex;align-items:flex-end;gap:12px;padding:14px 24px;background:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.6)}
#mg-compare-modal .mgcmp-pickers label{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;
    color:#4e6374;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#mg-compare-modal .mgcmp-pickers select{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid rgba(255,255,255,.9);
    border-radius:11px;background:rgba(255,255,255,.9);color:var(--mgc-ink);font:inherit;font-size:13px;text-transform:none;letter-spacing:0}
#mg-compare-modal .mgcmp-flecha{color:#22a78a;padding-bottom:9px}
#mg-compare-modal .mgcmp-body{overflow:auto;padding:16px 24px 20px}
#mg-compare-modal .mgcmp-resumen{margin:0 0 12px;color:var(--mgc-muted);font-size:13px}
#mg-compare-modal .mgcmp-vacio{margin:0;padding:26px;text-align:center;color:var(--mgc-muted)}
#mg-compare-modal .mgcmp-scroll{overflow-x:auto}
#mg-compare-modal .mgcmp-tabla{width:100%;border-collapse:collapse;font-size:13px}
#mg-compare-modal .mgcmp-tabla thead th{position:sticky;top:0;background:rgba(255,255,255,.96);padding:9px 10px;
    text-align:left;font-size:12px;border-bottom:2px solid var(--mgc-line)}
#mg-compare-modal .mgcmp-tabla thead th small{display:block;margin-top:2px;color:var(--mgc-muted);font-size:10px;font-weight:600}
#mg-compare-modal .mgcmp-grupo th{padding:11px 10px 5px;color:#14806d;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;background:transparent}
#mg-compare-modal .mgcmp-tabla tbody th{width:150px;padding:8px 10px;text-align:left;vertical-align:top;
    color:var(--mgc-muted);font-size:12px;font-weight:700;border-bottom:1px solid var(--mgc-line)}
#mg-compare-modal .mgcmp-tabla td{padding:8px 10px;vertical-align:top;border-bottom:1px solid var(--mgc-line);
    border-left:1px solid var(--mgc-line);line-height:1.45}
#mg-compare-modal .mgcmp-tabla td i{color:#9aabb8}
/* Lo que cambió es lo único que el médico necesita encontrar de un vistazo. */
#mg-compare-modal .mgcmp-cambio td:last-child{background:rgba(250,204,21,.16);font-weight:600}
#mg-compare-modal .mgcmp-cambio th{color:var(--mgc-ink)}
/* El delta indica MAGNITUD Y SENTIDO, no si el cambio es bueno o malo: subir
   es deseable en SpO2 y no en tensión. Un color neutro evita insinuar un
   juicio clínico que le corresponde al médico. */
#mg-compare-modal .mgcmp-delta{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
    font-size:11px;font-weight:800;background:rgba(18,40,61,.09);color:#2d4457}
[data-theme="dark"] #mg-compare-modal .mgcmp-delta{background:rgba(255,255,255,.14);color:#dce9f2}
#mg-compare-modal .mgcmp-foot{display:flex;justify-content:flex-end;padding:14px 24px;border-top:1px solid rgba(255,255,255,.6)}
#mg-compare-modal .mgcmp-btn{min-height:42px;padding:10px 18px;border:1px solid rgba(18,40,61,.18);border-radius:13px;
    background:rgba(255,255,255,.7);color:var(--mgc-ink);font:inherit;font-weight:780;cursor:pointer}
#mg-compare-modal .mgcmp-btn:hover{background:#fff}
#mg-compare-modal .mgcmp-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.7);
    border-radius:11px;background:rgba(255,255,255,.6);color:#44596b;cursor:pointer}
#mg-compare-modal .mgcmp-icon:hover{background:#fff}
[data-theme="dark"] #mg-compare-modal{--mgc-ink:#e6eef6;--mgc-muted:#9db0c1;--mgc-line:rgba(255,255,255,.14)}
[data-theme="dark"] #mg-compare-modal .mgcmp-panel{background:linear-gradient(155deg,rgba(23,37,54,.95),rgba(12,22,34,.9));border-color:rgba(255,255,255,.14)}
[data-theme="dark"] #mg-compare-modal .mgcmp-tabla thead th{background:#16283a}
[data-theme="dark"] #mg-compare-modal .mgcmp-pickers select,
[data-theme="dark"] #mg-compare-modal .mgcmp-btn,
[data-theme="dark"] #mg-compare-modal .mgcmp-icon{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--mgc-ink)}
[data-theme="dark"] #mg-compare-modal .mgcmp-cambio td:last-child{background:rgba(250,204,21,.2)}
@media(max-width:720px){
  #mg-compare-modal.mgcmp-overlay{padding:0}
  #mg-compare-modal .mgcmp-panel{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  #mg-compare-modal .mgcmp-head,#mg-compare-modal .mgcmp-pickers,
  #mg-compare-modal .mgcmp-body,#mg-compare-modal .mgcmp-foot{padding-inline:16px}
  #mg-compare-modal .mgcmp-pickers{flex-direction:column;align-items:stretch}
  #mg-compare-modal .mgcmp-flecha{display:none}
  #mg-compare-modal .mgcmp-tabla tbody th{width:96px;font-size:11px}
  #mg-compare-modal .mgcmp-tabla{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  #mg-compare-modal *,#mg-compare-modal .mgcmp-panel{animation:none!important;transition:none!important}
  #mg-compare-modal.mgcmp-overlay,#mg-compare-modal .mgcmp-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}