/* ═══════════════════════════════════════════════════════
   MediRecord — Portal: animaciones y detalles visuales
   (Se apaga solo si la persona activó «reducir movimiento».)
═══════════════════════════════════════════════════════ */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
::selection { background: var(--primary); color: #fff; }
body { background: linear-gradient(180deg, #f1f6ff 0, var(--paper) 340px) no-repeat, var(--paper); }

/* ── Botones ── */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-120%); }
.btn:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-prim { background: linear-gradient(135deg, #3b82f6, var(--primary) 55%, var(--primary-dark)); box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.btn-prim:hover:not(:disabled) { background: linear-gradient(135deg, #2563eb, var(--primary-dark)); box-shadow: 0 10px 24px rgba(37,99,235,.4); }
.btn-carta { background: linear-gradient(135deg, #6366f1, var(--carta, #4f46e5)); box-shadow: 0 6px 16px rgba(79,70,229,.28); }
.btn-carta:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(79,70,229,.4); }
.btn-sec:hover:not(:disabled) { box-shadow: 0 6px 14px rgba(15,23,42,.08); }
.btn.btn-ghost::after, .btn.sin-configurar::after { display: none; }

/* ── Campos ── */
input, select, textarea { transition: border-color .2s, box-shadow .25s, background .2s; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(37,99,235,.14); outline: none; }
.chk input, .re-chk input { transition: transform .15s; }
.chk input:active { transform: scale(.85); }

/* ── Inicio de sesión y registro ── */
.login { position: relative; overflow: hidden; background: linear-gradient(160deg, #e8f0ff, #f8fafc 60%); }
.login::before, .login::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; will-change: transform; }
.login::before { width: 420px; height: 420px; left: -120px; top: -100px; background: #93c5fd; opacity: .55; animation: deriva 16s ease-in-out infinite; }
.login::after { width: 380px; height: 380px; right: -100px; bottom: -120px; background: #c7d2fe; opacity: .6; animation: deriva 20s ease-in-out -7s infinite reverse; }
@keyframes deriva { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(50px, 30px) scale(1.08); } 66% { transform: translate(-30px, 50px) scale(.95); } }
.login-card { position: relative; z-index: 1; backdrop-filter: blur(6px); background: rgba(255,255,255,.92); border-radius: 20px; box-shadow: 0 24px 60px rgba(37,99,235,.14), 0 2px 6px rgba(15,23,42,.05); animation: tarjeta-entra .7s var(--ease) both; }
@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
.login-card > * { animation: sube .6s var(--ease) both; }
.login-card > :nth-child(1) { animation-delay: .1s; } .login-card > :nth-child(2) { animation-delay: .17s; }
.login-card > :nth-child(3) { animation-delay: .24s; } .login-card > :nth-child(4) { animation-delay: .3s; }
.login-card > :nth-child(5) { animation-delay: .36s; } .login-card > :nth-child(n+6) { animation-delay: .42s; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.login-marca img { animation: logo-entra .9s cubic-bezier(.2,1.4,.4,1) .15s both; }
@keyframes logo-entra { from { opacity: 0; transform: rotate(-30deg) scale(.4); } to { opacity: 1; transform: none; } }
.login-volver { transition: color .2s, transform .2s var(--ease); }
.login-volver:hover { transform: translateX(-4px); }
.login-alt a { position: relative; text-decoration: none; }
.login-alt a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.login-alt a:hover::after { transform: scaleX(1); }
.error, .form-err { animation: sacude .45s ease; }
@keyframes sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.reglas li { transition: color .25s, transform .25s var(--ease); }
.reglas li.ok { transform: translateX(4px); }
.fuerza-barra { transition: width .35s var(--ease), background .3s; }

/* ── Barra superior y pestañas ── */
.p-top { background: rgba(255,255,255,.85); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(15,23,42,.04); animation: baja .5s var(--ease) both; }
@keyframes baja { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.p-logo img { transition: transform .5s var(--ease); }
.p-logo:hover img { transform: rotate(-12deg) scale(1.1); }
.tab { position: relative; border-bottom: 0; border-radius: 10px 10px 0 0; transition: color .2s, background .2s; }
.tab::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--primary), #6366f1); transform: scaleX(0); transition: transform .35s var(--ease); }
.tab:hover { background: var(--primary-light); }
.tab[aria-current="true"] { border-bottom: 0; }
.tab[aria-current="true"]::after { transform: scaleX(1); }
.tab { animation: sube .5s var(--ease) both; }
.p-tabs .tab:nth-child(2) { animation-delay: .05s; } .p-tabs .tab:nth-child(3) { animation-delay: .1s; } .p-tabs .tab:nth-child(4) { animation-delay: .15s; }

/* ── Secciones que cambian ── */
.p-main > section:not([hidden]) { animation: seccion-entra .5s var(--ease) both; }
@keyframes seccion-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.barra { animation: sube .5s var(--ease) both; }
.vacio { animation: aparece .4s ease both; }

/* ── Listas ── */
.pc-fila { transition: transform .22s var(--ease), border-color .2s, background .2s, box-shadow .25s; animation: entra-fila .45s var(--ease) both; }
.pc-fila:nth-child(2) { animation-delay: .03s; } .pc-fila:nth-child(3) { animation-delay: .06s; } .pc-fila:nth-child(4) { animation-delay: .09s; }
.pc-fila:nth-child(5) { animation-delay: .12s; } .pc-fila:nth-child(6) { animation-delay: .15s; } .pc-fila:nth-child(7) { animation-delay: .18s; }
.pc-fila:nth-child(8) { animation-delay: .21s; } .pc-fila:nth-child(9) { animation-delay: .24s; } .pc-fila:nth-child(n+10) { animation-delay: .27s; }
.pc-fila:hover { transform: translateX(6px); box-shadow: 0 8px 20px rgba(37,99,235,.12); }
.us-card, ul.lista-simple li { transition: transform .22s var(--ease), box-shadow .25s, border-color .2s; animation: entra-fila .45s var(--ease) both; }
.us-card:hover, ul.lista-simple li:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--primary-200); }
@keyframes entra-fila { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pill { transition: transform .2s; }
.pill.alerta { animation: latido-pill 2.4s ease-in-out infinite; }
@keyframes latido-pill { 50% { box-shadow: 0 0 0 5px rgba(185,28,28,.12); } }

/* ── Ventanas ── */
dialog.ventana[open] { animation: ventana-abre .35s var(--ease); }
dialog.ventana[open]::backdrop { animation: fondo-abre .3s ease; backdrop-filter: blur(3px); }
@keyframes ventana-abre { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fondo-abre { from { opacity: 0; } to { opacity: 1; } }
.v-x { transition: background .2s, color .2s, transform .25s var(--ease); }
.v-x:hover { transform: rotate(90deg); }
.exp-tabs button { position: relative; border-bottom: 0; transition: color .2s, background .2s; }
.exp-tabs button::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .3s var(--ease); }
.exp-tabs button:hover { background: var(--primary-light); }
.exp-tabs button[aria-selected="true"] { border-bottom: 0; }
.exp-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.exp-cuerpo > * { animation: aparece .35s ease both; }
.exp-sec { animation: sube .45s var(--ease) both; }
.exp-sec:nth-of-type(2) { animation-delay: .05s; } .exp-sec:nth-of-type(3) { animation-delay: .1s; } .exp-sec:nth-of-type(4) { animation-delay: .15s; }

/* ── Avisos ── */
.aviso { animation: aviso-entra .45s cubic-bezier(.2,1.3,.4,1) both; border-left: 4px solid rgba(255,255,255,.55); }
@keyframes aviso-entra { from { opacity: 0; transform: translateX(40px) scale(.95); } to { opacity: 1; transform: none; } }
.inact { animation: inact-entra .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes inact-entra { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Carga ── */
.sem-vacio:not([hidden]), .pf-cargando, .resumen:empty { position: relative; }
.pf-cargando::after, #sem-cargando::after { content: ""; display: block; width: 28px; height: 28px; margin: .9rem auto 0; border: 3px solid var(--primary-100); border-top-color: var(--primary); border-radius: 50%; animation: gira-carga .8s linear infinite; }
@keyframes gira-carga { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pf-cargando::after, #sem-cargando::after { animation: gira-carga 1.6s linear infinite !important; }
}