/* Glassmorfismo (vista previa, rama diseno-glassmorfismo).
   Se carga al final de cada pagina: solo cambia fondos, bordes y sombras.
   No toca tamanos, tipografia ni estructura. Quitar el <link> revierte todo. */

:root {
    --glass-bg: rgba(255, 255, 255, .46);
    --glass-bg-soft: rgba(255, 255, 255, .36);
    --glass-bg-strong: rgba(255, 255, 255, .70);
    --glass-field: rgba(255, 255, 255, .82);
    --glass-border: rgba(255, 255, 255, .62);
    --glass-blur: saturate(165%) blur(18px);
    --glass-shadow: 0 10px 30px rgba(14, 48, 84, .14);
}

/* Fondo de pantalla: capa fija detras de todo, tambien en Safari de iPhone
   (que ignora background-attachment: fixed). */
html { background: #c9dcf0; }
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 38% at 90% 4%, rgba(17, 197, 176, .85), transparent 70%),
        radial-gradient(62% 40% at -5% 28%, rgba(25, 116, 206, .80), transparent 70%),
        radial-gradient(50% 34% at 105% 52%, rgba(123, 92, 255, .62), transparent 70%),
        radial-gradient(45% 30% at 35% 62%, rgba(25, 116, 206, .45), transparent 70%),
        radial-gradient(62% 42% at 5% 100%, rgba(17, 197, 176, .70), transparent 70%),
        radial-gradient(40% 28% at 80% 88%, rgba(255, 138, 92, .35), transparent 70%),
        linear-gradient(165deg, #b7d3f0 0%, #bfe6e6 50%, #cbc6f2 100%);
}
body { background-color: transparent !important; }

/* OJO: backdrop-filter convierte al elemento en el contenedor de sus hijos
   position: fixed. Nunca va en contenedores de pagina (.app), o la barra
   lateral de escritorio y la barra inferior se mueven con el. */

/* Superficies de vidrio */
.v2-expresiva :is(
    .v2-surface, .card, .tier-card, .tramo-card, .v2-quote, .v2-active-request,
    .v2-message-example, .feature-carousel, .v2-people-card, .recent-transfers-section,
    .v2-reference-card, .v2-send-rate-band, .recipient-card, .v2-person-detail,
    .v2-interior-shell:not(.app), .form-footer, .ac-flow-card, .ac-support-channel,
    .v2-tracking-view, .dest-search, .tabs, .v2-activity-tabs, .v2-registration-form
) {
    background-color: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}

/* Dentro de un panel de vidrio no se apila otro desenfoque (se ve sucio y
   cuesta rendimiento): las tarjetas internas quedan mas tenues. */
.v2-expresiva :is(.v2-surface, .card, .v2-interior-shell, .ac-flow-card, .recent-transfers-section, .v2-people-card)
    :is(.recipient-card, .v2-reference-card, .ac-support-channel, .dest-search, .tabs, .v2-activity-tabs, .v2-person-detail, .form-footer) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--glass-bg-soft) !important;
    box-shadow: none;
}

/* Paneles dentro de paneles: sin segundo desenfoque ni sombra (el recuadro
   azulado aparecia por el desenfoque apilado). */
.v2-expresiva :is(.v2-interior-shell, .v2-surface, .card, .ac-flow-card) :is(.v2-surface, .card) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.v2-expresiva .v2-recipient-window .form-section { background-color: transparent !important; border-color: transparent !important; }

/* Ventana del formulario de destinatario: va sobre un fondo oscurecido,
   necesita vidrio firme para no verse turbia. */
.v2-expresiva .v2-recipient-window {
    background-color: rgba(255, 255, 255, .84) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
}

/* Elementos seleccionados o destacados: vidrio mas firme */
.v2-expresiva :is(.tramo-card.active, .tramo-card.best-rate, .recipient-card.selected,
    .v2-send-rate-band.current, .v2-send-rate-band.best, .metodo-active, button.selected) {
    background-color: var(--glass-bg-strong) !important;
}

/* Controles sueltos sobre el fondo: vidrio con desenfoque */
.v2-expresiva :is(.v2-quick-links a, .v2-draft-notice, .ac-secondary, .button-pair .secondary, .form-footer .btn-secondary) {
    background-color: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border) !important;
}
/* Controles dentro de paneles: vidrio firme, sin segundo desenfoque */
.v2-expresiva :is(.card .field, .v2-presets button, .tabs .tab.active, .v2-activity-tabs button.active, .radio-option label, .metodo-option label) {
    background-color: var(--glass-bg-strong) !important;
    border-color: var(--glass-border) !important;
}

/* Campos de formulario: casi opacos para que se lean bien */
.v2-expresiva :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.simulator-result-value), select, textarea, .ac-readonly-field) {
    background-color: var(--glass-field) !important;
    border-color: rgba(255, 255, 255, .75) !important;
}

/* Ventanas (modales): vidrio mas opaco, son lectura larga */
.v2-expresiva :is(.modal-container, .login-modal-dialog, .d2-page-modal [class*="modal-dialog"]) {
    background-color: rgba(255, 255, 255, .80) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
.v2-expresiva :is(.modal-header, .modal-footer) { background-color: transparent !important; }
/* La tarjeta de inicio de sesion es corta: se nota mas el vidrio */
.v2-expresiva .login-modal-dialog { background-color: rgba(255, 255, 255, .62) !important; }

/* Barra inferior: el mismo vidrio que las tarjetas */
.v2-expresiva .glass-nav {
    background-color: rgba(255, 255, 255, .50) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border) !important;
}

/* Piezas de la app instalable (pwa.js las dibuja con estilos en linea,
   por eso van con !important). */
#pwa-instalar {
    background: rgba(255, 255, 255, .74) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
}
#pwa-actualizar {
    background: rgba(25, 116, 206, .80) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
}
#pwa-guia-ios > div {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Sin soporte de desenfoque: vidrio mas opaco para no perder lectura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass-bg: rgba(255, 255, 255, .86); --glass-bg-soft: rgba(255, 255, 255, .7); }
}
/* Quien pide menos transparencia en el sistema la recibe */
@media (prefers-reduced-transparency: reduce) {
    :root { --glass-bg: rgba(255, 255, 255, .92); --glass-bg-soft: rgba(255, 255, 255, .85); --glass-bg-strong: #fff; }
}