/* El sistema visual de Aura Platform, en un solo archivo.
   Tokens, tipografía, cabecera, tarjetas, botones, campos, avisos, diálogos y
   movimiento. Cada página añade en su <style> solo lo que es suyo.

   Es una app de trabajo: se abre decenas de veces al día para reportar y aprobar
   pagos. Manda la familiaridad, la densidad justa y la consistencia; la marca vive
   en los detalles, no en el espectáculo. */


/* ============================================================================
   1. Tokens
   ============================================================================ */

:root{

    /* Color. Un solo tinte frío (el azul marino de la marca) en todos los grises. */
    --fondo:            #f2f2f7;   /* el suelo de la app: el gris neutro de iOS */
    --superficie:       #ffffff;   /* tarjetas, campos */
    --superficie-2:     #e9edf3;   /* pestañas, botones secundarios, chips, campos deshabilitados */
    --campo:            #eef1f6;   /* el fondo de los campos: un "hueco" sutil, no un recuadro */
    --marca:            #111a2e;   /* la cabecera y los bloques de sección: el azul marino del logo */
    --marca-material:   rgba(17,26,46,0.95);   /* la cabecera como material translúcido: casi opaca para que se siga leyendo el marino */
    --tinta:            #121a2b;   /* texto principal */
    --tinta-2:          #3d4757;   /* texto secundario con peso */
    --apagado:          #626d7d;   /* texto secundario (4.5:1 sobre blanco) */
    --apagado-2:        #727d8d;   /* el más claro que todavía se lee (4.5:1) */
    --linea:            #dde3ea;   /* bordes de campos y separadores */
    --sobre-marca:      rgba(255,255,255,0.68);  /* texto secundario sobre la cabecera: tintado, no gris */

    --acento:           #2b57d3;   /* la acción principal y la selección, y nada más */
    --acento-fuerte:    #1f45b5;
    --acento-suave:     #e7edfb;

    --ok:               #1d7a4b;
    --ok-suave:         #e3f3ea;
    --ok-linea:         #a9dcc0;
    --aviso:            #9a5d08;
    --aviso-suave:      #fdf3e2;
    --aviso-linea:      #f2d59a;
    --peligro:          #b3261e;
    --peligro-suave:    #fdecea;
    --peligro-linea:    #f1b2ad;

    /* Profundidad: una sola elevación para tarjetas y otra para lo que flota.
       Sombras tintadas con el marino de la marca, nunca negro puro. La de las
       tarjetas es una sombra difusa y suave, como una hoja apoyada. */
    --sombra-1: 0 1px 2px rgba(17,26,46,0.04), 0 8px 20px -12px rgba(17,26,46,0.16);
    --sombra-2: 0 16px 40px -12px rgba(17,26,46,0.30);

    /* Radios: uno para controles, otro para contenedores, y las píldoras. */
    --r:        12px;
    --r-lg:     18px;
    --r-pill:   999px;

    /* Espaciado: el aire interno de una tarjeta/sección, y el aire entre un
       bloque y el siguiente (tarjeta → tarjeta, botón → tarjeta). Los mismos
       dos números en toda la app — una pantalla nueva que no los toque ya
       queda bien, sin que nadie tenga que acordarse de repetirlos. */
    --espacio-card:   20px;
    --espacio-bloque: 16px;

    /* Escala tipográfica corta (razón ≈ 1.15): una app tiene muchos tamaños a la
       vista a la vez y el contraste exagerado hace ruido. */
    --t-xs:   12px;
    --t-sm:   13px;
    --t-base: 15px;
    --t-md:   17px;
    --t-lg:   20px;
    --t-xl:   26px;

    /* Movimiento. Las curvas nativas son demasiado flojas para movimiento
       deliberado: esta ease-out arranca rápido y frena. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-toque: 120ms;      /* respuesta al pulsar */
    --dur-ui: 200ms;         /* entradas, salidas, avisos, diálogos, despliegues */
    --dur-destello: 1.2s;    /* decaimiento de un resaltado de color: no es movimiento */

    --fuente: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

}


/* ============================================================================
   2. Fuente. Servida desde aquí, no desde Google: 46 KB en total para la
      variable 400–700, y la app no depende de un tercero en cada carga.
   ============================================================================ */

@font-face{
    font-family:"Geist";
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url(/fuentes/geist-latin.woff2) format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family:"Geist";
    font-style:normal;
    font-weight:400 700;
    font-display:swap;
    src:url(/fuentes/geist-latin-ext.woff2) format("woff2");
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   3. Base
   ============================================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }

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

body{
    background:var(--fondo);
    color:var(--tinta);
    font-family:var(--fuente);
    font-size:var(--t-base);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    font-optical-sizing:auto;
    /* Los números de dinero se alinean en columna aunque cambien las cifras */
    font-variant-numeric:tabular-nums;
}

h1, h2, h3{ font-weight:600; line-height:1.2; text-wrap:balance; font-optical-sizing:auto; letter-spacing:-0.02em; }
h2{ font-size:var(--t-md); }
h3{ font-size:var(--t-base); letter-spacing:-0.01em; }
strong, b{ font-weight:600; }
a{ color:var(--acento); }

/* Lo que el navegador dibuja sin que nadie lo pida también lleva la paleta */
::selection{ background:var(--acento-suave); color:var(--tinta); }
:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
input, select, textarea{ caret-color:var(--acento); }
code, .mono{ font-family:var(--mono); font-size:0.92em; }

main{ padding:16px; max-width:480px; margin:0 auto; }

/* En pantallas anchas (Telegram Desktop) el contenido se ensancha */
@media (min-width:768px){
    body main{ max-width:700px; }
}


/* ============================================================================
   4. Cabecera
   ============================================================================ */

/* La cabecera es un material translúcido, no una franja opaca: se fija arriba y
   el contenido pasa por debajo, desenfocado y teñido del marino de la marca. */
header{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--marca-material);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    color:white;
    padding:18px 20px;
    padding-top:calc(max(env(safe-area-inset-top, 0px), var(--tg-top-inset, 0px)) + 18px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    /* Borde superior que "atrapa la luz", sin línea dura. El borde inferior lo
       dibuja el degradado de abajo, no una sombra. */
    box-shadow:0 1px 0 rgba(255,255,255,0.08);
}

/* El canto de abajo de la cabecera no es una línea: un degradado que desvanece el
   material hacia el contenido que se desliza por debajo. */
header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-10px;
    height:10px;
    background:linear-gradient(to bottom, rgba(17,26,46,0.15), rgba(17,26,46,0));
    pointer-events:none;
}
header h1{ font-size:var(--t-md); font-weight:600; letter-spacing:-0.01em; min-width:0; line-height:1.25; }
/* El subtítulo (la fecha, el rango de la semana) baja a una segunda línea en letra
   pequeña, en vez de alargar el título hasta que el enlace de vuelta se parte. */
header h1 small{ display:block; font-size:var(--t-xs); font-weight:400; color:var(--sobre-marca); margin-top:3px; letter-spacing:0; }
header a{ color:var(--sobre-marca); text-decoration:none; font-size:var(--t-sm); font-weight:500; }
header > a{ white-space:nowrap; flex-shrink:0; margin-left:12px; }
header a:hover{ color:white; }
header svg{ display:block; }
header a.inicio{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    margin:-11px 0 -11px -14px;
    border-radius:var(--r);
}
header a.inicio .ico{ width:22px; height:22px; color:var(--sobre-marca); vertical-align:0; }
header a.inicio:hover{ background:rgba(255,255,255,0.08); }
header a.inicio:hover .ico{ color:white; }


/* ============================================================================
   5. Superficies
   ============================================================================ */

/* Una tarjeta declara su elevación una sola vez: sombra, sin borde. Un borde de
   1 px debajo de una sombra es la "tarjeta fantasma". */
.card,
.emp,
.pago,
.opcion,
.card-menu,
.menu-item,
.cuenta-card,
.metodo-card,
.emp-card,
.regla,
.total-card{
    background:var(--superficie);
    border-radius:var(--r-lg);
    box-shadow:var(--sombra-1);
}

/* Aire por defecto de una tarjeta de contenido: una página que use .card sin
   redefinirlo ya queda bien espaciada. Si una página sí lo redefine en su
   propio <style>, esa regla gana por venir después en el documento — esto
   es solo el piso, no le quita libertad a nadie de ajustarlo. */
.card{
    padding:var(--espacio-card);
    margin-bottom:var(--espacio-bloque);
}

/* Etiquetas de sección: pequeñas, con peso, con aire arriba y menos abajo */
.seccion-etiqueta{
    font-size:var(--t-sm);
    font-weight:600;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--apagado);
    margin:22px 0 8px;
}


.vacio{ text-align:center; color:var(--apagado); padding:32px 16px; font-size:var(--t-sm); }


/* ============================================================================
   5b. Iconos. Dibujados (Phosphor, un solo peso), nunca emoji: cada plataforma
       pinta los emoji distinto y leen como chat, no como interfaz. Heredan el
       color del texto; en las tarjetas de menú llevan el acento.
   ============================================================================ */

.ico{
    width:1.2em;
    height:1.2em;
    fill:currentColor;
    flex-shrink:0;
    vertical-align:-0.22em;
    display:inline-block;
}
.ico-texto{ margin-right:1px; }
button .ico, .boton .ico{ vertical-align:-0.25em; }

/* Tarjetas de menú (inicio, pagos, nómina): el icono en el acento, con sitio */
.card .icon .ico,
.card-menu .icon .ico,
.opcion .icono .ico{
    width:28px;
    height:28px;
    color:var(--acento);
    vertical-align:0;
}


/* ============================================================================
   6. Controles
   ============================================================================ */

button,
.boton{
    width:100%;
    padding:14px 18px;
    background:var(--acento);
    color:white;
    border:none;
    border-radius:var(--r);
    font-family:inherit;
    font-size:var(--t-base);
    font-weight:600;
    letter-spacing:-0.005em;
    cursor:pointer;
    margin-top:12px;
    -webkit-tap-highlight-color:transparent;
}
/* El hover genérico solo toca los botones SIN clase (el botón primario). Los botones
   con clase (secundario, peligro, desactivar, aprobar...) tienen su propio color y
   no deben teñirse de azul al pasar el cursor. */
button:not([class]):hover, .boton:not([class]):hover{ background:var(--acento-fuerte); }
button:disabled{ opacity:0.5; cursor:default; }
button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* Secundario: sobre la superficie 2, con la tinta. Se pide con la clase. */
button.secundario, .boton.secundario{ background:var(--superficie-2); color:var(--tinta); }
button.secundario:hover{ background:var(--linea); }

button.peligro{ background:var(--peligro); }
button.peligro:hover{ background:#961f18; }

/* Tinted: la acción secundaria que sí importa, en azul suave de Apple. */
button.tinted, .boton.tinted{ background:var(--acento-suave); color:var(--acento-fuerte); }
button.tinted:hover, .boton.tinted:hover{ background:#dbe6f8; }

/* Interruptor iOS. Se arma envolviendo un checkbox así:
     <label class="switch"><input type="checkbox"><span class="switch-pista"></span></label> */
.switch{ position:relative; display:inline-flex; cursor:pointer; vertical-align:middle; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch-pista{
    display:inline-block;
    width:51px; height:31px;
    border-radius:999px;
    background:var(--linea);
    transition:background var(--dur-ui) var(--ease-out);
    position:relative;
    flex-shrink:0;
}
.switch-pista::before{
    content:"";
    position:absolute;
    top:2px; left:2px;
    width:27px; height:27px;
    border-radius:50%;
    background:white;
    box-shadow:0 2px 4px rgba(17,26,46,0.25);
    transition:transform var(--dur-ui) var(--ease-out);
}
.switch input:checked + .switch-pista{ background:#34c759; }
.switch input:checked + .switch-pista::before{ transform:translateX(20px); }

/* Botones de acción de una tarjeta: cuadrados, solo icono, con el color de lo que
   hacen. Editar es neutro; revertir avisa; eliminar es peligro. 44x44: el mínimo de
   objetivo táctil de iOS/Android, no los 24px que basta en la web — esto se usa como
   una app, con el pulgar, no con el cursor. */
.accion{
    width:44px; height:44px;
    margin:0; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--r);
    background:var(--superficie-2);
    color:var(--tinta-2);
    text-decoration:none;
}
.accion:hover{ background:var(--linea); }
.accion.aviso{   background:var(--aviso-suave);   color:var(--aviso); }
.accion.aviso:hover{ background:var(--aviso-linea); }
.accion.peligro{ background:var(--peligro-suave); color:var(--peligro); }
.accion.peligro:hover{ background:var(--peligro-linea); }
.accion .ico{ width:20px; height:20px; vertical-align:0; }

/* Un <span onclick> no recibe foco de teclado ni tiene rol de control: falla el
   acceso por teclado sin más razón que la pereza. Se pasa a <button> y esta clase
   deshace el estilo de botón por defecto para que se siga viendo como antes. */
.control-invisible{
    all:unset;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
}

label{
    display:block;
    font-size:var(--t-sm);
    font-weight:500;
    color:var(--tinta-2);
    margin:14px 0 6px;
}

input, select, textarea{
    width:100%;
    padding:12px 13px;
    font-family:inherit;
    font-size:var(--t-base);
    color:var(--tinta);
    -webkit-text-fill-color:var(--tinta);
    background-color:var(--campo);
    border:1px solid var(--linea);
    border-radius:var(--r);
    caret-color:var(--acento);
    appearance:none;
    -webkit-appearance:none;
    transition:background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626d7d' stroke-width='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 12px center;
    padding-right:36px;
}
input[type="checkbox"], input[type="radio"]{ width:auto; appearance:auto; -webkit-appearance:auto; accent-color:var(--acento); background-color:transparent; border:none; }
input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--acento);
    background-color:var(--superficie);
    box-shadow:0 0 0 4px var(--acento-suave);
}
input::placeholder, textarea::placeholder{ color:var(--apagado-2); -webkit-text-fill-color:var(--apagado-2); opacity:1; }
input:disabled, select:disabled, textarea:disabled{
    color:var(--apagado);
    -webkit-text-fill-color:var(--apagado);
    background-color:var(--superficie-2);
}


/* ============================================================================
   7. Avisos y estados
   ============================================================================ */

.mensaje, .ok{
    background:var(--ok-suave);
    color:var(--ok);
    border-radius:var(--r);
    padding:12px 14px;
    margin-bottom:14px;
    font-size:var(--t-sm);
    font-weight:500;
}
.error{
    background:var(--peligro-suave);
    color:var(--peligro);
    border-radius:var(--r);
    padding:12px 14px;
    margin-bottom:14px;
    font-size:var(--t-sm);
    font-weight:500;
}
.cerrada, .advertencia{
    background:var(--aviso-suave);
    color:var(--aviso);
    border-radius:var(--r);
    padding:12px 14px;
    margin-bottom:14px;
    font-size:var(--t-sm);
}

/* Estado de un pago, de una semana, de lo que sea: una píldora pequeña con peso */
.estado{
    display:inline-block;
    font-size:var(--t-xs);
    font-weight:600;
    letter-spacing:0.01em;
    padding:4px 10px;
    border-radius:var(--r-pill);
    white-space:nowrap;
}
.estado.aprobado{  background:var(--ok-suave);      color:var(--ok); }
.estado.pendiente{ background:var(--aviso-suave);   color:var(--aviso); }
.estado.rechazado{ background:var(--peligro-suave); color:var(--peligro); }


/* ============================================================================
   8. Movimiento
   ============================================================================ */

/* Cascada de entrada. Corre en cada carga de página, decenas de veces al día, así que
   tiene que ser casi imperceptible: 6 px y 200 ms. Solo los cinco primeros elementos
   se escalonan; del sexto en adelante llegan todos con el sexto. */
@keyframes entrada{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

main > *,
.grid > *{
    animation:entrada var(--dur-ui) var(--ease-out) both;
}

main > *:nth-child(2),   .grid > *:nth-child(2){   animation-delay:30ms; }
main > *:nth-child(3),   .grid > *:nth-child(3){   animation-delay:60ms; }
main > *:nth-child(4),   .grid > *:nth-child(4){   animation-delay:90ms; }
main > *:nth-child(5),   .grid > *:nth-child(5){   animation-delay:120ms; }
main > *:nth-child(n+6), .grid > *:nth-child(n+6){ animation-delay:150ms; }

/* Al redibujar el contenido sin recargar, las tarjetas no vuelven a entrar en cascada */
main.sin-entrada > *{ animation:none !important; }

/* Fundido entre páginas. Cada pantalla es un archivo distinto; sin esto, la pantalla
   parpadea en blanco entre una y otra. Lo entienden los WebView de Telegram actuales
   (Safari 18+, Chrome 126+); donde no, la regla se ignora. */
@view-transition{ navigation:auto; }

::view-transition-old(root),
::view-transition-new(root){
    animation-duration:var(--dur-ui);
    animation-timing-function:var(--ease-out);
}

/* Respuesta al tacto. Solo transform: filter y box-shadow obligan a repintar. */
button,
.card,
.card-menu,
.menu-item,
.cuenta-card,
.metodo-card,
.opcion,
.emp-card,
.regla,
.fotos a{
    transition:transform var(--dur-toque) var(--ease-out), background 150ms ease, box-shadow var(--dur-ui) var(--ease-out);
}

/* iOS ignora :active, así que app.js pone esta clase a mano al tocar */
.presionado{ transform:scale(0.965); }

button:active,
.card:active,
.card-menu:active,
.menu-item:active,
.cuenta-card:active,
.metodo-card:active,
.opcion:active,
.fotos a:active{
    transform:scale(0.965);
}

/* En escritorio (Telegram Desktop) las tarjetas interactivas se elevan un poco
   al pasar el cursor: el equivalente del press del táctil. */
@media (hover:hover){
    a.card:hover, .card-menu:hover, .menu-item:hover, .opcion:hover,
    .emp-card:hover, .cuenta-card:hover, .metodo-card:hover{
        transform:translateY(-3px);
        box-shadow:var(--sombra-2);
    }
}

/* Un resaltado de color que se apaga: confirma que algo se guardó, se aprobó o se
   rechazó. Cada variante solo cambia el color; el gesto es el mismo. */
@keyframes destello{ from{ background:var(--destello); } to{ background:var(--superficie); } }
.flash-ok{        --destello:var(--ok-suave);    animation:destello var(--dur-destello) var(--ease-out); }
.flash-aprobado{  --destello:var(--ok-suave);    animation:destello var(--dur-destello) var(--ease-out); }
.flash-pendiente{ --destello:var(--aviso-suave); animation:destello var(--dur-destello) var(--ease-out); }

/* Rechazar además sacude: es un "no" que tiene que leerse. */
@keyframes sacudida{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-5px); } 60%{ transform:translateX(5px); } 80%{ transform:translateX(-2px); } }
.flash-rechazado{ --destello:var(--peligro-suave); animation:destello var(--dur-destello) var(--ease-out), sacudida 400ms var(--ease-in-out); }

/* Una tarjeta que se va (un pago eliminado): se encoge un poco y se desvanece. */
.desvaneciendo{ opacity:0; transform:scale(0.97); transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }

/* Un bloque que se despliega bajo su botón. Lo abre y lo cierra desplegar() en app.js. */
.desplegable{ opacity:0; transform:translateY(-4px); transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.desplegable.abierto{ opacity:1; transform:none; }

/* Aviso flotante */
.toast-app{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%, 20px);
    background:var(--marca);
    color:white;
    padding:11px 20px;
    border-radius:var(--r-pill);
    font-size:var(--t-sm);
    font-weight:500;
    box-shadow:var(--sombra-2);
    opacity:0;
    transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
    z-index:10000;
    pointer-events:none;
}
.toast-app.visible{ opacity:1; transform:translate(-50%, 0); }

/* Diálogo de confirmación propio (fuera de Telegram, donde no hay uno nativo) */
.confirm-fondo{
    position:fixed; inset:0; z-index:9000;
    background:rgba(17,26,46,0.5);
    -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; transition:opacity var(--dur-ui) var(--ease-out);
}
.confirm-fondo.visible{ opacity:1; }

.confirm-caja{
    background:var(--superficie); color:var(--tinta);
    border-radius:var(--r-lg); padding:22px 22px 18px;
    width:100%; max-width:340px;
    box-shadow:var(--sombra-2);
    opacity:0;
    transform:scale(.94) translateY(8px);
    transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.confirm-fondo.visible .confirm-caja{ opacity:1; transform:scale(1) translateY(0); }

.confirm-caja p{ font-size:var(--t-base); line-height:1.5; margin:0 0 18px; text-align:center; color:var(--tinta); }
.confirm-botones{ display:flex; gap:10px; }
.confirm-botones button{ flex:1; margin:0; padding:13px 12px; }
.confirm-no{ background:var(--superficie-2); color:var(--tinta-2); }
.confirm-no:hover{ background:var(--linea); }
.confirm-si{ background:var(--acento); color:white; }

/* Reducir movimiento significa menos y más suave, no cero: se quita lo que se desplaza
   o se escala y se conservan los fundidos, que ayudan a entender qué pasó. */
@media (prefers-reduced-motion: reduce){
    main > *, .grid > *{ animation:none; }
    .toast-app, .toast-app.visible{ transform:translate(-50%, 0); }
    .confirm-caja, .confirm-fondo.visible .confirm-caja{ transform:none; }
    .desvaneciendo, .desplegable{ transform:none; }
    .presionado, button:active, .card:active, .card-menu:active, .menu-item:active, .cuenta-card:active,
    .metodo-card:active, .opcion:active, .fotos a:active{ transform:none; }
    .flash-rechazado{ animation:destello var(--dur-destello) var(--ease-out); }
    *{ transition-duration:120ms !important; }
}

/* Reducir transparencia: los materiales translúcidos se vuelven opacos, para
   que no haya texto flotando sobre un fondo cambiante. */
@media (prefers-reduced-transparency: reduce){
    header{
        background:var(--marca);
        -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .confirm-fondo{
        background:rgba(17,26,46,0.7);
        -webkit-backdrop-filter:none; backdrop-filter:none;
    }
}

/* Más contraste: las superficies flotantes ganan un borde definido. */
@media (prefers-contrast: more){
    .card, .emp, .pago, .opcion, .card-menu, .menu-item,
    .cuenta-card, .metodo-card, .emp-card, .regla, .total-card{
        border:1px solid var(--linea);
    }
}