/* css/base.css — Sistema de diseño compartido de GlobalMed
   Variables, reset, tipografía, botones, campos, tarjetas, tablas, badges,
   avisos, estados vacíos y de carga, y modales (los crea js/comun.js).
   Sin dependencias externas: pila de fuentes del sistema y SVG propio. */

/* =====================================================================
   1. Variables
   ===================================================================== */
:root {
    color-scheme: light;

    /* ---------- Marca: verde azulado (#00857a = --p-600) ---------- */
    --p-50: #edf9f7;
    --p-100: #d1f1ec;
    --p-200: #a4e2da;
    --p-300: #6ccdc2;
    --p-400: #2fb0a3;
    --p-500: #0a9a8d;
    --p-600: #00857a;
    --p-700: #006b63;
    --p-800: #00544e;
    --p-900: #003d39;
    --p-950: #022a28;

    /* ---------- Acento cálido (llamados de turno, puntos de atención) ---------- */
    --a-50: #fff3ef;
    --a-100: #ffe2d8;
    --a-200: #ffc4b0;
    --a-400: #fb8b6b;
    --a-500: #f2653f;
    --a-600: #d94a26;
    --a-700: #b13a1d;

    /* ---------- Neutros con tinte verde azulado ---------- */
    --n-0: #fcfefe;
    --n-50: #f3f7f7;
    --n-100: #e9efef;
    --n-200: #d8e1e1;
    --n-300: #bccaca;
    --n-400: #93a5a5;
    --n-500: #5c6f6f;
    --n-600: #4f6060;
    --n-700: #3a4949;
    --n-800: #263333;
    --n-900: #162020;
    --n-950: #0d1616;

    /* ---------- Estados ---------- */
    --ok-bg: #e6f6ec;
    --ok-borde: #b5e2c5;
    --ok-texto: #14663a;
    --ok-solido: #1a7f45;
    --ok-solido-hover: #146a39;

    --alerta-bg: #fff5dc;
    --alerta-borde: #f2d58c;
    --alerta-texto: #7a4b00;
    --alerta-solido: #d98e04;

    --error-bg: #fdebea;
    --error-borde: #f3b8b5;
    --error-texto: #a12622;
    --error-solido: #c62f2a;
    --error-solido-hover: #a8241f;

    --info-bg: #e8f2fd;
    --info-borde: #b7d4f3;
    --info-texto: #174f8a;
    --info-solido: #2a6fbb;

    /* ---------- Roles semánticos ---------- */
    --fondo: var(--n-50);
    --superficie: #ffffff;
    --superficie-2: var(--n-50);
    --borde: var(--n-200);
    --borde-fuerte: var(--n-300);
    --texto: var(--n-900);
    --texto-suave: var(--n-600);
    --texto-tenue: var(--n-500);
    --marca: var(--p-600);
    --marca-hover: var(--p-700);
    --marca-activo: var(--p-800);
    --marca-suave: var(--p-50);
    --acento: var(--a-500);
    --foco: var(--p-600);

    /* Alias de compatibilidad con las hojas anteriores */
    --color-primario: var(--p-600);
    --color-primario-oscuro: var(--p-700);
    --color-texto: var(--n-900);

    /* ---------- Tipografía (fuentes del sistema, sin archivos externos) ---------- */
    --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --fuente-num: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;

    --t-xs: .75rem;
    --t-sm: .875rem;
    --t-base: 1rem;
    --t-md: 1.125rem;
    --t-lg: 1.25rem;
    --t-xl: 1.5rem;
    --t-2xl: 1.875rem;
    --t-3xl: 2.25rem;
    --t-4xl: 3rem;

    /* ---------- Espaciado (base 4 px) ---------- */
    --e-1: .25rem;
    --e-2: .5rem;
    --e-3: .75rem;
    --e-4: 1rem;
    --e-5: 1.25rem;
    --e-6: 1.5rem;
    --e-8: 2rem;
    --e-10: 2.5rem;
    --e-12: 3rem;
    --e-16: 4rem;

    /* ---------- Radios ---------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* ---------- Sombras (con desplazamiento y desenfoque suave) ---------- */
    --sombra-1: 0 1px 2px rgb(13 40 38 / .07), 0 1px 1px rgb(13 40 38 / .04);
    --sombra-2: 0 6px 16px -4px rgb(13 40 38 / .12), 0 2px 4px rgb(13 40 38 / .05);
    --sombra-3: 0 14px 32px -8px rgb(13 40 38 / .2), 0 4px 8px rgb(13 40 38 / .06);
    --sombra-4: 0 28px 60px -14px rgb(13 40 38 / .38), 0 8px 16px rgb(13 40 38 / .08);

    /* ---------- Movimiento ---------- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-suave: cubic-bezier(.4, 0, .2, 1);
    --d-rapida: 140ms;
    --d-media: 220ms;
    --d-lenta: 360ms;

    --z-modal: 1000;
}

/* =====================================================================
   2. Reset y elementos base (con :where para no pisar las hojas de cada página)
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente);
    font-size: var(--t-base);
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    line-height: 1.2;
    text-wrap: balance;
}

:where(p) {
    text-wrap: pretty;
}

:where(img, video, canvas) {
    max-width: 100%;
    height: auto;
}

:where(svg) {
    flex: none;
}

:where(button, input, select, textarea) {
    font: inherit;
    letter-spacing: inherit;
}

:where(button) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

:where(table) {
    font-variant-numeric: tabular-nums;
}

:where(a) {
    color: var(--p-700);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

:where(a:hover) {
    text-decoration-thickness: 2px;
}

[hidden] {
    display: none !important;
}

/* ---------- Superficies del navegador que también llevan diseño ---------- */
::selection {
    background: var(--p-200);
    color: var(--n-950);
}

input,
textarea,
select {
    caret-color: var(--p-600);
    accent-color: var(--p-600);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--n-300) transparent;
}

/* Foco visible en todo lo interactivo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}

:where([tabindex="-1"]):focus {
    outline: none;
}

/* Sobre fondos de marca el anillo de foco pasa a blanco */
.sobre-marca {
    --foco: #ffffff;
}

/* ---------- Utilidades ---------- */
.solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.num {
    font-variant-numeric: tabular-nums;
}

.texto-suave {
    color: var(--texto-suave);
}

.saltar {
    position: absolute;
    left: var(--e-4);
    top: -100px;
    z-index: calc(var(--z-modal) + 1);
    padding: var(--e-3) var(--e-4);
    background: var(--p-800);
    color: #fff;
    border-radius: var(--r-md);
    font-weight: 600;
    text-decoration: none;
}

.saltar:focus {
    top: var(--e-4);
}

/* Iconos: SVG propios, un solo trazo */
.icono {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =====================================================================
   3. Animaciones reutilizables
   ===================================================================== */
@keyframes aparecer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes entrar {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes subir-modal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes brillo {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.anim-entrar {
    animation: entrar var(--d-lenta) var(--ease-out) both;
}

/* =====================================================================
   4. Botones
   ===================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: 0 var(--e-5);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--superficie);
    color: var(--texto);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--d-rapida) var(--ease-suave),
        border-color var(--d-rapida) var(--ease-suave),
        color var(--d-rapida) var(--ease-suave),
        box-shadow var(--d-media) var(--ease-out),
        transform var(--d-rapida) var(--ease-out);
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(1px) scale(.985);
}

/* Variantes */
.btn-primario {
    background: var(--p-600);
    color: #fff;
    box-shadow: 0 1px 2px rgb(0 50 46 / .3), inset 0 1px 0 rgb(255 255 255 / .14);
}

.btn-primario:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--p-700);
    box-shadow: 0 6px 14px -4px rgb(0 70 64 / .45), inset 0 1px 0 rgb(255 255 255 / .14);
}

.btn-primario:active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--p-800);
    box-shadow: 0 1px 2px rgb(0 50 46 / .3);
}

.btn-secundario {
    background: var(--superficie);
    border-color: var(--borde-fuerte);
    color: var(--n-800);
    box-shadow: var(--sombra-1);
}

.btn-secundario:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--n-50);
    border-color: var(--n-400);
}

.btn-suave {
    background: var(--p-50);
    color: var(--p-800);
}

.btn-suave:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--p-100);
}

.btn-fantasma {
    background: transparent;
    color: var(--n-700);
}

.btn-fantasma:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--n-100);
    color: var(--n-900);
}

.btn-peligro {
    background: var(--error-solido);
    color: #fff;
    box-shadow: 0 1px 2px rgb(90 10 8 / .3);
}

.btn-peligro:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--error-solido-hover);
}

.btn-exito {
    background: var(--ok-solido);
    color: #fff;
    box-shadow: 0 1px 2px rgb(5 50 25 / .3);
}

.btn-exito:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--ok-solido-hover);
}

/* Tamaños */
.btn-grande {
    min-height: 52px;
    padding: 0 var(--e-6);
    font-size: var(--t-md);
    border-radius: var(--r-lg);
}

.btn-xl {
    min-height: 72px;
    padding: 0 var(--e-8);
    font-size: var(--t-lg);
    border-radius: var(--r-lg);
}

.btn-bloque {
    display: flex;
    width: 100%;
}

.btn-icono {
    width: 44px;
    padding: 0;
}

/* Deshabilitado: se ve apagado, no solo translúcido */
.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--n-100);
    border-color: var(--n-200);
    color: #7c8e8e;
    box-shadow: none;
    cursor: not-allowed;
}

/* Cargando: el texto se oculta y aparece el indicador */
.btn[aria-busy="true"] {
    color: transparent;
    pointer-events: none;
}

.btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    border: 2.5px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

.btn-secundario[aria-busy="true"]::after,
.btn-suave[aria-busy="true"]::after,
.btn-fantasma[aria-busy="true"]::after {
    border-color: var(--p-600);
    border-right-color: transparent;
}

/* =====================================================================
   5. Campos de formulario
   ===================================================================== */
.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-etiqueta {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--n-800);
}

.campo-ayuda {
    font-size: var(--t-sm);
    color: var(--texto-suave);
}

.campo-error {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--error-texto);
}

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--e-4);
    background: var(--superficie);
    color: var(--texto);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--r-md);
    font-size: var(--t-base);
    line-height: 1.4;
    transition:
        border-color var(--d-rapida) var(--ease-suave),
        box-shadow var(--d-media) var(--ease-out),
        background-color var(--d-rapida) var(--ease-suave);
}

.textarea {
    min-height: 96px;
    padding: var(--e-3) var(--e-4);
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--n-500);
    opacity: 1;
}

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) {
    border-color: var(--n-400);
}

.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--p-600);
    box-shadow: 0 0 0 4px rgb(0 133 122 / .2);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background: var(--n-100);
    color: var(--n-500);
    cursor: not-allowed;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.input-error {
    border-color: var(--error-solido);
}

.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus,
.input-error:focus {
    border-color: var(--error-solido);
    box-shadow: 0 0 0 4px rgb(198 47 42 / .18);
}

.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f6f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.25rem;
    cursor: pointer;
}

.select:disabled {
    cursor: not-allowed;
}

/* Casillas y opciones */
.check {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: 44px;
    cursor: pointer;
}

.check input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

/* =====================================================================
   6. Tarjetas
   ===================================================================== */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-1);
    padding: var(--e-5);
}

.tarjeta-elevada {
    box-shadow: var(--sombra-2);
}

.tarjeta-accion {
    cursor: pointer;
    transition:
        box-shadow var(--d-media) var(--ease-out),
        transform var(--d-media) var(--ease-out),
        border-color var(--d-rapida) var(--ease-suave);
}

.tarjeta-accion:hover {
    border-color: var(--p-300);
    box-shadow: var(--sombra-3);
    transform: translateY(-2px);
}

.tarjeta-accion:active {
    transform: translateY(0) scale(.99);
    box-shadow: var(--sombra-1);
}

.tarjeta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

.tarjeta-titulo {
    font-size: var(--t-md);
    font-weight: 700;
}

/* =====================================================================
   7. Tablas
   ===================================================================== */
.tabla-caja {
    overflow: auto;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
}

.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

.tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--e-3) var(--e-4);
    background: var(--n-50);
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borde);
    text-align: left;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

.tabla td {
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--n-100);
    color: var(--texto);
    vertical-align: middle;
}

.tabla tbody tr:last-child td {
    border-bottom: 0;
}

.tabla tbody tr {
    transition: background-color var(--d-rapida) var(--ease-suave);
}

.tabla tbody tr:hover td {
    background: var(--n-50);
}

/* Fila seleccionada (la clase la pone el JS de cada módulo) */
.tabla tbody tr.adm-sel td,
.tabla tbody tr[aria-selected="true"] td {
    background: var(--p-100);
    color: var(--p-950);
}

/* En pantallas chicas la tabla se convierte en lista de tarjetas.
   Cada <td> necesita data-label con el nombre de su columna. */
@media (max-width: 720px) {
    .tabla-responsiva thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tabla-responsiva,
    .tabla-responsiva tbody,
    .tabla-responsiva tr,
    .tabla-responsiva td {
        display: block;
        width: 100%;
    }

    .tabla-responsiva tbody tr {
        padding: var(--e-3) var(--e-4);
        border-bottom: 1px solid var(--borde);
    }

    .tabla-responsiva tbody tr:last-child {
        border-bottom: 0;
    }

    .tabla-responsiva td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--e-4);
        padding: var(--e-1) 0;
        border: 0;
        text-align: right;
        background: transparent !important;
    }

    .tabla-responsiva td::before {
        content: attr(data-label);
        flex: none;
        color: var(--texto-suave);
        font-size: var(--t-xs);
        font-weight: 700;
        text-align: left;
    }

    .tabla-responsiva td[colspan]::before {
        content: none;
    }
}

/* =====================================================================
   8. Badges de estado
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--n-700);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.badge::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.badge-ok {
    background: var(--ok-bg);
    border-color: var(--ok-borde);
    color: var(--ok-texto);
}

.badge-alerta {
    background: var(--alerta-bg);
    border-color: var(--alerta-borde);
    color: var(--alerta-texto);
}

.badge-error {
    background: var(--error-bg);
    border-color: var(--error-borde);
    color: var(--error-texto);
}

.badge-info {
    background: var(--info-bg);
    border-color: var(--info-borde);
    color: var(--info-texto);
}

.badge-marca {
    background: var(--p-50);
    border-color: var(--p-200);
    color: var(--p-800);
}

/* =====================================================================
   9. Avisos en línea
   ===================================================================== */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    background: var(--info-bg);
    border: 1px solid var(--info-borde);
    border-radius: var(--r-md);
    color: var(--info-texto);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.45;
}

.aviso-ok {
    background: var(--ok-bg);
    border-color: var(--ok-borde);
    color: var(--ok-texto);
}

.aviso-alerta {
    background: var(--alerta-bg);
    border-color: var(--alerta-borde);
    color: var(--alerta-texto);
}

.aviso-error {
    background: var(--error-bg);
    border-color: var(--error-borde);
    color: var(--error-texto);
}

/* =====================================================================
   10. Estados vacío y de carga
   ===================================================================== */
.estado-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-10) var(--e-6);
    text-align: center;
    color: var(--texto-suave);
}

.estado-vacio .icono {
    width: 52px;
    height: 52px;
    padding: 13px;
    margin-bottom: var(--e-2);
    background: var(--p-50);
    color: var(--p-700);
    border-radius: 50%;
}

.estado-vacio-titulo {
    color: var(--texto);
    font-size: var(--t-md);
    font-weight: 700;
}

.estado-vacio p {
    margin: 0;
    max-width: 38ch;
}

.spinner {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

.esqueleto {
    min-height: 1em;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 50%, var(--n-100) 75%);
    background-size: 200% 100%;
    animation: brillo 1.6s ease-in-out infinite;
    color: transparent;
    user-select: none;
}

/* =====================================================================
   11. Modales (los crea js/comun.js: crearModal y Admin.formulario)
   ===================================================================== */
body:has(.modal-fondo) {
    overflow: hidden;
}

.modal-fondo {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
    background: rgb(10 30 28 / .5);
    animation: aparecer var(--d-media) var(--ease-out) both;
}

.modal-caja {
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: var(--e-8) var(--e-8) var(--e-6);
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-4);
    animation: subir-modal var(--d-lenta) var(--ease-out) both;
}

/* Icono del mensaje: solo en los avisos y confirmaciones (role="alertdialog") */
.modal-caja[role="alertdialog"]::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin-bottom: var(--e-4);
    border-radius: 50%;
    background-color: var(--p-50);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006b63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.modal-caja.modal-error[role="alertdialog"]::before {
    background-color: var(--error-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a12622' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.modal-caja h2 {
    margin: 0 0 var(--e-2);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -.01em;
}

.modal-caja p {
    margin: 0 0 var(--e-6);
    color: var(--texto-suave);
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.modal-botones {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-3);
}

.modal-botones button {
    min-width: 104px;
    min-height: 44px;
    padding: 0 var(--e-5);
    background: var(--p-600);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 50 46 / .3), inset 0 1px 0 rgb(255 255 255 / .14);
    transition:
        background-color var(--d-rapida) var(--ease-suave),
        transform var(--d-rapida) var(--ease-out);
}

.modal-botones button:hover:not(:disabled) {
    background: var(--p-700);
}

.modal-botones button:active:not(:disabled) {
    background: var(--p-800);
    transform: translateY(1px) scale(.985);
}

.modal-botones button:disabled {
    background: var(--n-100);
    color: #7c8e8e;
    box-shadow: none;
    cursor: not-allowed;
}

.modal-botones button.modal-secundario {
    background: var(--n-100);
    color: var(--n-800);
    box-shadow: none;
}

.modal-botones button.modal-secundario:hover:not(:disabled) {
    background: var(--n-200);
}

.modal-botones button.modal-secundario:active:not(:disabled) {
    background: var(--n-300);
}

@media (max-width: 480px) {
    .modal-caja {
        padding: var(--e-6) var(--e-5) var(--e-5);
    }

    .modal-botones {
        flex-direction: column-reverse;
    }

    .modal-botones button {
        width: 100%;
    }
}

/* =====================================================================
   12. Accesibilidad: movimiento reducido y alto contraste
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Un indicador de carga sigue girando, pero despacio */
    .spinner,
    .btn[aria-busy="true"]::after {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }

    .esqueleto {
        animation: none !important;
    }
}

@media (forced-colors: active) {

    .btn,
    .input,
    .select,
    .textarea,
    .tarjeta,
    .badge,
    .modal-caja {
        border: 1px solid CanvasText;
    }
}