/* Páginas públicas de StayAccounts (app.stayaccounts.com): mínimo, de celular hacia arriba, sin scripts ni fuentes externas. */
:root {
  --bg: #F2F6F5; --surface: #FFFFFF; --fg: #10292A; --fg-suave: #4B6665; --borde: #9DB6B3;
  --primario: #0F3D3E; --sobre-primario: #FFFFFF; --acento: #E39B2D; --foco: #C47A0C;
  --bien: #1B7A47; --bien-fondo: #DAF0E3; --mal: #B3321F; --mal-fondo: #F8DCD6;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--primario); color: var(--sobre-primario); padding: .6rem 1rem; z-index: 10; }
.saltar:focus { left: 0; }
.cab { padding: 1rem; background: var(--surface); border-bottom: 1px solid #CCDDDA; }
.logo { display: inline-block; line-height: 0; }
.logo img { max-width: 100%; height: auto; }
.caja { flex: 1; width: 100%; max-width: 34rem; margin: 0 auto; padding: 1rem; }
.tarjeta { background: var(--surface); border: 1px solid #CCDDDA; border-radius: 12px; padding: 1.25rem; margin: 1rem 0; box-shadow: 0 1px 2px rgba(15,61,62,.10); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; color: var(--primario); }
p { margin: 0 0 1rem; }
a { color: var(--primario); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.formulario { display: grid; gap: 1rem; margin-bottom: 1rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 600; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario input[type="number"], .formulario select, .formulario textarea {
  width: 100%; min-height: 2.9rem; padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--fg); font: inherit; font-weight: 400;
}
.formulario .casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.formulario .casilla input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; flex: none; }
.con-sufijo { display: flex; align-items: stretch; }
.con-sufijo input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; min-width: 0; }
.sufijo { display: flex; align-items: center; padding: 0 .7rem; border: 1px solid var(--borde); border-left: 0; border-radius: 0 8px 8px 0; background: #E8F1EF; color: var(--fg-suave); font-size: .95rem; white-space: nowrap; }
.boton { display: inline-block; min-height: 2.9rem; padding: .7rem 1.2rem; border: 0; border-radius: 8px; background: var(--primario); color: var(--sobre-primario); font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.boton:hover { background: #175050; }
.suave { color: var(--fg-suave); font-size: .9rem; }
.aviso-error, .aviso-ok { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.aviso-error { background: var(--mal-fondo); color: #6B1A0E; border-color: var(--mal); }
.aviso-ok { background: var(--bien-fondo); color: #0E4527; border-color: var(--bien); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pie { padding: 1rem; text-align: center; color: var(--fg-suave); font-size: .85rem; }
.pie p { margin: 0; }
@media (min-width: 640px) { .caja { padding: 1.5rem; } .tarjeta { padding: 2rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }