/* ============================================================
   COMAL · the account pages on a phone (registro, codigo, olvido,
   login, entrar, clave). Loaded after comal.css + comal-pos.css by
   templates/_head_cuenta.html. Flat CSS (cheap-phone law): no
   cascade layers, no relational selectors, no computed colors.
   Why each rule exists: research/2026-10-08-comal-phone-pages/index.html.
   ============================================================ */

/* Phone: the page IS the screen. No grey frame, no card margins: the
   width goes to the fields, and the one action docks at the bottom. */
.pag-cuenta body{background:var(--bg)}
/* the focused field stops above the docked button, not under it, and
   keeps its label in view when the person goes back up */
html.pag-cuenta{scroll-padding-top:2.75rem;scroll-padding-bottom:6.5rem}

main.cuenta{
  max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:var(--sp-5) var(--sp-4) 0;
}
.cuenta .marca{display:block;font-size:2rem;margin:0 0 var(--sp-3);color:var(--ink)}
.cuenta h2{margin:0 0 var(--sp-3);font-size:1.5rem}
/* the one instruction: ink, not grey; it is read in the sun */
.cuenta .oferta{color:var(--ink);margin:0 0 var(--sp-4);line-height:1.4}
.cuenta .flash-err,.cuenta .flash-ok{margin:0 0 var(--sp-4);font-size:1rem;font-weight:600;line-height:1.35}

/* the form fills the rest of the screen, so its last child can sit low */
.cuenta-form{display:flex;flex-direction:column;flex:1 0 auto;margin:0}

/* ---------- a field: label, hint, error, input (in that order) ----------
   The hint and the error sit ABOVE the input: when the keyboard opens,
   the browser lifts the input to just over the keyboard, so what is
   above it stays on screen and what is below it is covered. */
.cuenta .campo{margin:0 0 var(--sp-5);border:0;padding:0;min-width:0}
.cuenta label,.cuenta legend{margin:0 0 .4rem;padding:0;color:var(--ink-2)}
.cuenta legend{font-family:var(--ui);font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.04em}
.cuenta .pista{margin:0 0 .5rem;font-size:.95rem;line-height:1.35;color:var(--ink-2)}
.cuenta .pista.cumple{color:var(--grn-text);font-weight:700}
.cuenta .pista.cumple::before{content:"\2713\00a0";font-weight:800}
.cuenta .campo-err{margin:0 0 .5rem;font-size:1rem;font-weight:700;line-height:1.35;color:var(--warn)}
/* a notice, not a mistake: ink, not red */
.cuenta .campo-aviso{margin:0 0 .5rem;font-size:1rem;font-weight:700;line-height:1.35;color:var(--ink)}
.cuenta input[type=text],.cuenta input[type=email],.cuenta input[type=password]{
  min-height:56px;font-size:1.125rem;border-width:2px;border-color:var(--edge);
}
.cuenta input:focus,.cuenta input.enfocado{outline:2px solid var(--grn);outline-offset:1px;border-color:var(--grn)}
/* the field at fault: red edge, red ring when focused (never green over red) */
.cuenta .campo.mal input{border-color:var(--warn);background:#FFF8F7}
.cuenta .campo.mal input:focus,.cuenta .campo.mal input.enfocado{outline-color:var(--warn);border-color:var(--warn)}

/* the code: one wide field, big tabular digits; paste, autofill and
   backspace stay the browser's own */
.cuenta input.codigo{
  min-height:76px;padding:0 0 0 .3em;
  font-size:2.25rem;font-weight:800;letter-spacing:.3em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.cuenta input.codigo::placeholder{color:var(--edge);opacity:1}

/* the password and its Mostrar / Ocultar word */
.clave-caja{position:relative}
.cuenta .clave-caja input{padding-right:7rem}
.clave-caja .ver{
  position:absolute;top:4px;right:4px;bottom:4px;min-width:48px;
  display:flex;align-items:center;justify-content:center;padding:0 .9rem;
  font-family:var(--ui);font-weight:700;font-size:1rem;color:var(--grn-text);
  background:var(--grn-soft);border-radius:5px;
}
.clave-caja .ver[hidden]{display:none}

/* the email the code went to: big enough to spot a typo, with its fix */
.cuenta .destino{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--sp-3);
  margin:0 0 var(--sp-4);padding:var(--sp-2) var(--sp-2) var(--sp-3) var(--sp-4);
  background:var(--panel);border-radius:7px;
}
.cuenta .destino-etq{display:block;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.cuenta .destino-val{grid-column:1 / -1;display:block;font-size:1.125rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere;line-height:1.3}
.cuenta .destino-cambiar{
  flex:0 0 auto;min-height:48px;min-width:48px;padding:0 var(--sp-3);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--grn-text);text-decoration:none;
  background:var(--bg);border:1.5px solid var(--line-2);border-radius:7px;
}

/* two answers side by side (país): whole tiles, never a 22 px dot */
.cuenta .opciones-fila{display:flex;gap:var(--sp-2);position:relative}
.cuenta .opcion-radio{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0}
.cuenta label.opcion{
  flex:1 1 0;margin:0;min-height:56px;padding:0 var(--sp-3);
  display:flex;align-items:center;justify-content:center;text-align:center;
  text-transform:none;letter-spacing:0;font-size:1.05rem;font-weight:700;color:var(--ink);
  background:var(--bg);border:2px solid var(--edge);border-radius:7px;cursor:pointer;
}
.cuenta .opcion-radio:checked+label.opcion{background:var(--grn-soft);border-color:var(--grn);color:var(--grn-text)}
.cuenta .opcion-radio:checked+label.opcion::before{content:"\2713\00a0";font-weight:800}
.cuenta .opcion-radio:focus-visible+label.opcion{outline:2px solid var(--grn);outline-offset:2px}

/* links are rows a thumb can hit: 48 px tall, never a bare word */
.cuenta .enlaces{display:flex;flex-direction:column;align-items:flex-end;margin:var(--sp-1) 0 0}
.cuenta .enlaces.otro{align-items:stretch;margin:0 0 var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-2)}
.cuenta .enlace{
  display:flex;align-items:center;min-height:48px;padding:0 var(--sp-1);
  font-weight:700;font-size:1rem;color:var(--grn-text);
  text-decoration:underline;text-underline-offset:3px;
}
.cuenta .enlaces.otro .enlace{justify-content:center;text-align:center}

/* secondary actions above the docked one */
.cuenta .otra-vez{margin:0 0 var(--sp-5)}
.cuenta .otra-vez .btn,.cuenta .abrir-correo{width:100%}
.cuenta .abrir-correo{margin:0 0 var(--sp-4)}
.cuenta .abrir-correo[hidden]{display:none}
.cuenta .reenviar{font-variant-numeric:tabular-nums}
.cuenta .estado{margin:0 0 var(--sp-2);color:var(--grn-text);font-size:.95rem;font-weight:600;line-height:1.35}
.cuenta .sugiere{
  display:block;width:100%;min-height:48px;margin:.5rem 0 0;padding:.55rem .9rem;
  text-align:left;font-weight:700;font-size:1rem;line-height:1.3;
  color:var(--grn-text);background:var(--grn-soft);border-radius:7px;
}

/* the honeypot: off screen, out of reach */
.cuenta .sitio{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the email a password manager pairs with the new password: present, unseen */
.cuenta .usuario{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- the docked action ----------
   Keyboard closed: the bottom of the screen, where the thumb rests.
   Keyboard open: rides on top of it (Android: interactive-widget=
   resizes-content in the viewport meta; iPhone: --teclado, set by
   comal-cuenta.js from visualViewport). Never hidden behind it. */
.cuenta .barra-accion{
  position:-webkit-sticky;position:sticky;bottom:0;bottom:var(--teclado,0px);z-index:3;
  margin:auto calc(-1 * var(--sp-4)) 0;
  padding:var(--sp-3) var(--sp-4) var(--sp-3);
  padding-bottom:max(var(--sp-3),env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);
}
.cuenta .barra-accion .btn-cobrar{width:100%;margin:0}
.cuenta button[aria-busy=true]{opacity:.8;cursor:progress}

/* ≥600: the same page as a centred card; the button stops docking */
@media (min-width:600px){
  .pag-cuenta body{background:#EDF0EF}
  main.cuenta{
    max-width:440px;min-height:0;margin:var(--sp-7) auto;
    padding:var(--sp-6) var(--sp-6) var(--sp-6);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:0 1px 2px rgba(15,20,23,.04),0 14px 34px -22px rgba(15,20,23,.22);
  }
  .cuenta .barra-accion{position:static;margin:var(--sp-2) 0 0;padding:0;border-top:0}
}

/* ============================================================
   The public site's look on the four doors in: sign-up (registro),
   its code page (codigo), log-in (entrar) and lost password (olvido).
   Each page's <html> carries pag-sitio + pag-<page>. The site's paper
   ground and logo; its art: templates/_arte_cuenta.html, made by
   directions/2026-10-07/site/src/art_cuenta.py. The form itself keeps
   the app's look (white fields, one green), as on the site's demo.
   Phone: a band of art above the form; the first field stays above
   the docked button at 360x640. From 960 px: the art beside the form.
   ============================================================ */
.pag-sitio body{background:#F7F0E3}
.pag-sitio .barra-accion{background:#F7F0E3;border-top-color:#E2D3B8}
.pag-sitio .cuenta h2{border-bottom-color:#E2D3B8}
.pag-sitio .cuenta .destino{background:#FCF8F0;box-shadow:inset 0 0 0 1px #E2D3B8}

/* the band: papel picado across the top, the logo under it, the stall at the right */
.arte{position:relative;height:132px;overflow:hidden;border-bottom:2px solid #2D1A0F;background:#F7F0E3}
.arte .marca{position:absolute;left:var(--sp-4);top:58px;z-index:2;margin:0;font-size:1.65rem;letter-spacing:-.04em}
.arte .logo{display:flex;align-items:center;gap:8px;min-height:48px;color:#2A211B;text-decoration:none}
.arte .logo svg{width:30px;height:30px;flex:0 0 auto}
.arte .logo:focus-visible{outline:3px solid var(--grn);outline-offset:3px;border-radius:4px}
.escena-caja{position:absolute;top:0;right:-24px;width:272px}
.escena{display:block;width:100%;height:auto;overflow:visible}
.pag-sitio main.cuenta{min-height:calc(100vh - 134px);min-height:calc(100dvh - 134px);padding-top:var(--sp-4);background:none}

/* one detail for each page */
.escena .v{display:none}
.pag-registro .v-registro,.pag-codigo .v-codigo,.pag-entrar .v-entrar,.pag-olvido .v-olvido{display:inline}

/* the site's motion, quiet: flags sway, steam rises, the hand waves */
@media (prefers-reduced-motion:no-preference){
  .escena .pp{transform-box:fill-box;transform-origin:50% 0;animation:cx-pp 3.4s ease-in-out infinite alternate}
  .escena .pp:nth-child(2n){animation-delay:-1.2s}
  .escena .pp:nth-child(3n){animation-delay:-2.3s}
  .escena .vapor path{animation:cx-vapor 3s ease-out infinite}
  .escena .vapor path+path{animation-delay:-1.5s}
  .escena .mano{transform-box:fill-box;transform-origin:50% 100%;animation:cx-ola 1.4s ease-in-out infinite alternate}
  .escena .ola,.escena .zumbido,.escena .brillo{animation:cx-late 1.8s ease-in-out infinite}
  .escena .cortina{animation:cx-sube 1.4s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes cx-pp{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes cx-vapor{0%{opacity:0;transform:translateY(4px)}35%{opacity:1}100%{opacity:0;transform:translateY(-9px)}}
@keyframes cx-ola{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes cx-late{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes cx-sube{from{transform:translateY(12px)}to{transform:none}}

/* a tablet: a taller band, the card below it */
@media (min-width:600px){
  .pag-sitio body{background:#F7F0E3}
  .arte{height:176px}
  .arte .marca{left:var(--sp-6);top:80px;font-size:2rem}
  .arte .logo svg{width:36px;height:36px}
  .escena-caja{right:max(0px,calc(50% - 300px));width:360px}
  .pag-sitio main.cuenta{min-height:0;background:var(--bg);border-color:#E2D3B8;box-shadow:0 1px 2px rgba(45,26,15,.05),0 18px 40px -24px rgba(45,26,15,.28)}
  .pag-sitio .barra-accion{background:none}
}

/* a computer: the art beside the form */
@media (min-width:960px){
  .pag-sitio .acceso{
    display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:64px;align-items:center;
    max-width:1120px;min-height:100vh;margin:0 auto;padding:var(--sp-6);
  }
  .arte{position:-webkit-sticky;position:sticky;top:var(--sp-6);height:auto;overflow:visible;border:0;background:none}
  .arte .marca{position:static;font-size:2rem}
  .escena-caja{position:static;width:auto;margin:var(--sp-6) 0 0;overflow:hidden}
  .escena{overflow:hidden}
  .pag-sitio main.cuenta{margin:0;max-width:none}
}