/* Portal AT: ajustes nuestros sobre el diseño de Gabriel (pedidos de Mariano, 07/10).
   Va en un archivo aparte, cargado después de los de Gabriel en todas las páginas, para
   poder reaplicarlo si manda otra versión sin tocar sus hojas. */

/* --- Modales: entran con una animación corta ---------------------------------------- */
@media (prefers-reduced-motion:no-preference){
 dialog[open]{animation:pa-dialog-in .26s cubic-bezier(.2,.8,.2,1)}
 dialog[open]::backdrop{animation:pa-fade .26s ease}
}
@keyframes pa-dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes pa-fade{from{opacity:0}}

/* --- Desplegables: la lista la dibuja portalat.js ---------------------------------- */
.pa-select-pop{position:fixed;z-index:1000;box-sizing:border-box;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff;border:1px solid #d5e1f0;border-radius:14px;box-shadow:0 18px 44px rgba(33,57,96,.18),0 2px 6px rgba(33,57,96,.08);color:#213960;font:inherit;font-size:.9375rem;transform-origin:top center;animation:pa-pop-in .17s cubic-bezier(.2,.8,.2,1)}
.pa-select-pop.is-above{transform-origin:bottom center;animation-name:pa-pop-in-above}
.pa-select-pop li{position:relative;padding:9px 34px 9px 12px;border-radius:9px;line-height:1.35;cursor:pointer;user-select:none;transition:background .12s}
.pa-select-pop li.is-active{background:#edf3ff}
.pa-select-pop li[aria-selected=true]{color:#164de8;font-weight:600}
.pa-select-pop li[aria-selected=true]::after{content:'';position:absolute;right:13px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pa-select-pop li[aria-disabled=true]{opacity:.45;cursor:default}
@keyframes pa-pop-in{from{opacity:0;transform:translateY(-6px) scale(.96)}}
@keyframes pa-pop-in-above{from{opacity:0;transform:translateY(6px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.pa-select-pop{animation:none}}

/* --- Panel interno: aire entre "Validar cuentas" y la sección de cada pestaña -------- */
#workspace .panel-nav+p{margin:0 0 26px}

/* --- Botón "Acceso familias" del encabezado ----------------------------------------
   Tenía un borde blanco semitransparente, un brillo interno arriba y un anillo de 3px
   afuera, y juntos parecían un segundo botón asomando por encima. */
.header .access-family{border-color:transparent;box-shadow:0 6px 18px rgba(22,77,232,.18)}
.header .access-family:hover{box-shadow:0 9px 24px rgba(22,77,232,.25)}

/* --- Demo de la portada: todas las pantallas ocupan la misma celda -----------------
   Así el cuadro mide lo que la pantalla más alta y cambiar entre Zona, Perfil y Contacto
   no mueve la columna de la izquierda. Las ocultas no se ven ni se pueden enfocar. */
.demo-body{display:grid}
.demo-body>.demo-screen{grid-area:1/1;min-width:0}
.demo-body>.demo-screen[hidden]{display:block!important;visibility:hidden;animation:none}

/* La barrita de cada paso sigue el avance real y se frena con la pausa. */
.demo-steps button[aria-pressed=true]::after{animation:none!important;transform:scaleX(var(--demo-progress,0));transition:transform .1s linear}
@media (prefers-reduced-motion:no-preference){.demo-steps button[aria-pressed=true]{animation:pa-step-in .35s ease}}
@keyframes pa-step-in{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}

/* Recorrido animado mientras la demo se reproduce (lo maneja portalat.js). */
.pa-spot{box-shadow:0 0 0 3px rgba(22,77,232,.22),0 10px 26px rgba(22,77,232,.16)!important;transition:box-shadow .35s ease,transform .35s ease}
.result-card.pa-spot,.profile-facts>div.pa-spot,.message-preview.pa-spot,.contact-note.pa-spot,.verification-example.pa-spot,.profile-heading.pa-spot{transform:translateY(-2px);border-radius:12px}
.profile-facts>div,.profile-heading,.contact-note{transition:box-shadow .35s ease,transform .35s ease,background .35s ease}
.profile-facts>div.pa-spot,.profile-heading.pa-spot,.contact-note.pa-spot{background:#f6f9ff}
.pa-press{animation:pa-press .45s ease}
@keyframes pa-press{0%{transform:none}35%{transform:scale(.95)}100%{transform:none}}
.pa-changed{animation:pa-changed .5s ease}
@keyframes pa-changed{0%{color:inherit}40%{color:#164de8;transform:translateY(-1px)}100%{transform:none}}
.verification-example li{transition:opacity .35s ease,transform .35s ease}
.verification-example li.pa-pending{opacity:.3;transform:translateX(-4px)}
.pa-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:pa-caret .8s steps(1) infinite}
@keyframes pa-caret{50%{opacity:0}}
.pa-cursor{position:absolute;left:0;top:0;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(22,77,232,.18);border:2px solid rgba(22,77,232,.55);pointer-events:none;opacity:0;transition:transform .7s cubic-bezier(.45,.05,.25,1),opacity .3s ease}
.pa-cursor.is-on{opacity:1}
.pa-cursor.is-tap{animation:pa-tap .45s ease}
@keyframes pa-tap{40%{background:rgba(22,77,232,.38);box-shadow:0 0 0 8px rgba(22,77,232,.12)}}

/* --- "Explorá el buscador": que se note que los pasos se pueden tocar -------------- */
.step-selector{cursor:pointer;border-radius:999px;padding:4px 16px 4px 4px;margin-left:-4px;transition:background .2s ease,color .2s ease}
.step-selector:hover{background:#eef3ff;color:#164de8}
.step-selector:hover .step-number{border-color:#164de8;color:#164de8}
.process-step:not(.is-active) .step-number{border-color:#b9cdf5;color:#3d63c9;background:#f5f8ff}
.process-step:not(.is-active) .step-selector:hover .step-number{background:#fff}
@media (prefers-reduced-motion:no-preference){
 .process-step:not(.is-active) .step-number{animation:pa-nudge 2.8s ease-in-out infinite}
 .process-step[data-process-step="2"] .step-number{animation-delay:.5s}
}
@keyframes pa-nudge{0%,55%,100%{box-shadow:0 0 0 0 rgba(22,77,232,0)}25%{box-shadow:0 0 0 6px rgba(22,77,232,.13)}}
/* El aviso de "Probar el contacto" ya ocupa su lugar aunque no se vea. */
.demo-body .demo-feedback[hidden]{display:block!important;visibility:hidden}
/* Mi perfil: el cambio de contraseña separado del formulario del nombre. */
#password-form{border-top:1px solid #dce6f2;padding-top:28px;margin-top:36px}
#password-form h3{margin:0;font-size:1.15rem}