/* SANEAS · css/base.css · Variables, splash y pantalla de acceso */
  :root{--teal:#3890a4;--teal-d:#256b7c;--teal-ink:#124b59;--dark:#22313a;--light:#e8f4f7;--muted:#5c6b72;--bg:#eff4f6;
    --white:#fff;--green:#2e9e5b;--red:#d05a4a;--orange:#F5862E;--soft:#f3f7f8;--line:#e2eaec;--shadow:0 10px 28px rgba(34,49,58,.07)}
  *{box-sizing:border-box;margin:0;padding:0}
  /* El body va en TEAL a proposito: en el iPhone, con la app instalada, iOS pinta
     la franja de la barra de estado con el color de fondo del body. El gris de
     siempre se lo pone #main, que es quien contiene las pantallas. */
  body{font-family:'Quicksand',sans-serif;background:var(--teal);color:var(--dark)}
  #main{background:var(--bg)}
  /* 100dvh y no 100vh: en el movil, 100vh NO descuenta la barra del navegador, asi
     que la altura de la app saltaba al hacer scroll. Se deja 100vh delante como
     respaldo para los navegadores que aun no entienden dvh. */
  .app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative}
  .hidden{display:none!important}
  #splash{position:fixed;inset:0;z-index:80;background:linear-gradient(160deg,#3890a4,#1a2e35);color:#fff;
    display:flex;flex-flow:row wrap;align-items:center;justify-content:center;align-content:center;gap:6px 8px;opacity:0;transition:opacity .45s}
  #splash.show{opacity:1}
  /* Saneas y el nombre van en cajas de la MISMA altura: así el saludo queda en el centro exacto y las 3 líneas equidistantes */
  #splash .sp-logo{font-weight:700;font-size:58px;letter-spacing:1px;line-height:1;display:flex;align-items:center;justify-content:center;flex-basis:100%}
  #splash #splashTxt{font-size:26px;font-weight:300;text-align:center;line-height:1.3}
  #splash #splashTxt b{font-weight:700}
  #splash #splashNom{font-size:26px;font-weight:700;text-align:center;line-height:1.3;display:flex;align-items:center}
  #splash #splashFrase{flex-basis:100%;text-align:center;font-size:clamp(17px,5.2vw,24px);font-weight:700;font-style:italic;
    color:rgba(255,255,255,.9);line-height:1.35;margin-top:16px;padding:0 14px}
  /* Entrada escalonada del splash: logo, saludo y frase */
  @keyframes spEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  #splash .sp-logo{animation:spEntra .55s cubic-bezier(.22,.61,.36,1) both}
  #splash #splashTxt,#splash #splashNom{animation:spEntra .55s .22s cubic-bezier(.22,.61,.36,1) both}
  #splash #splashFrase{animation:spEntra .75s .55s cubic-bezier(.22,.61,.36,1) both}
  @media (prefers-reduced-motion:reduce){#splash .sp-logo,#splash #splashTxt,#splash #splashNom,#splash #splashFrase{animation:none}}
  /* ---------- AUTH ---------- */
  #auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 24px;
    background:linear-gradient(160deg,#3890a4,#1a2e35);color:#fff;min-height:100vh;min-height:100dvh;overflow-y:auto}
  #auth .auth-card{margin-top:20px}
  .logo{font-weight:700;font-size:40px;text-align:center;letter-spacing:1px}
  .logo small{display:block;font-weight:300;font-size:14px;letter-spacing:3px;opacity:.85;margin-top:2px}
  .auth-card{background:#fff;color:var(--dark);border-radius:22px;padding:22px;margin-top:26px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
  .auth-card h2{font-size:18px;margin-bottom:14px;text-align:center}
  .field{margin-bottom:12px}
  .field label{font-size:14px;font-weight:700;color:var(--muted);display:block;margin-bottom:4px}
  .field input{width:100%;border:2px solid var(--light);border-radius:12px;padding:12px;font-family:inherit;font-size:16px;color:var(--dark);background:var(--soft)}
  .field input:focus{outline:none;border-color:var(--teal)}
  .btn{background:var(--teal);color:#fff;border:none;border-radius:14px;padding:14px;width:100%;
    font-family:inherit;font-weight:700;font-size:16px;cursor:pointer}
  .btn:disabled{opacity:.6}
  .btn.ghost{background:none;color:var(--teal);box-shadow:none}
  .switch{text-align:center;margin-top:12px;font-size:14px;color:var(--muted)}
  .switch a{color:var(--teal);font-weight:700;cursor:pointer}
  .msg{font-size:14px;text-align:center;margin-top:10px;padding:8px;border-radius:10px}
  .msg.err{background:#fdecea;color:var(--red)}
  .msg.ok{background:#e7f5ec;color:var(--green)}

  /* ---------- CHASIS TÁCTIL ----------
     La app va dentro de una carcasa (Capacitor) y como PWA en el móvil, pero
     respondía al dedo como una página web: flash azul al tocar, rebote al llegar
     al final del scroll, menú de copiar al mantener pulsado y medio segundo de
     espera al tocar dos veces. Nada de esto cambia lo que hace la app: cambia
     cómo se siente al tocarla. */
  html,body{
    -webkit-tap-highlight-color:transparent;   /* sin el flash azul de Android al tocar */
    overscroll-behavior:none;                  /* sin rebote de página ni pull-to-refresh */
    -webkit-touch-callout:none;                /* sin menú de copiar/compartir al mantener pulsado */
    -webkit-user-select:none;-moz-user-select:none;user-select:none}
  /* PERO el texto que la clienta puede querer copiar SÍ se selecciona: los campos
     de los formularios, la dieta, la lista de la compra, el diario, el chat con
     Óscar y las fichas de detalle (recetas y productos). Ante la duda, se permite. */
  input,textarea,select,[contenteditable],
  .screen,.card,.dbody,.detail,#chatMsgs,
  .plato,.meal,.dtext,.chip,.diaCard,.diaItem,.faqBody,.amTxt,.f1Cita{
    -webkit-user-select:text;-moz-user-select:text;user-select:text}
  /* En los campos vuelve el menú largo de iOS: sin él no se puede PEGAR el código
     que llega por correo, que es como se entra en la app. */
  input,textarea,[contenteditable]{-webkit-touch-callout:default}
  /* Los controles no son texto: no se seleccionan aunque vivan dentro de una tarjeta. */
  button,.nav,.tabs,.appbar,.daysel,.choices,.chip.link,.msnIt,.erow,
  .faqRow,.faHead,.diaRes,.lc-chk,.avatar,.artmas{
    -webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}
  /* Quita el retardo de ~300 ms que el navegador espera por si es un doble toque. */
  button,a,.chip,.tabs button,.nav button,.avatar,.choice,.lrow,.exitem,
  .cathead,.artmas,.msnIt,.erow{touch-action:manipulation}