/* ═══════════════════════════════════════════════════════════════
   Suave — base compartida (tokens + fuentes + componentes)
   Usado por: cupones (admin), acceso (login), panel (cliente).
   Todo scoped a .suave para no chocar con otros sistemas.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/assets/fonts/quicksand.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 900;
  font-display:swap;src:url('/assets/fonts/nunitosans.woff2') format('woff2')}

.suave{
  --fondo:#f6f3fb; --superficie:#fff; --tinte:#ede8f9; --acento-tinte:#eae5f7;
  --borde:#e7e2f4; --separador:#f1edfa;
  --acento:#7a5af8; --acento-fuerte:#5b45c7; --saldo:#0e7a6a;
  --texto:#2b2740; --texto-titulo:#4a4467; --texto-apoyo:#6e6788; --texto-tenue:#746d92;
  --aviso-fondo:#fdeee9; --aviso-texto:#8e3c23;
  --s1:6px; --s2:12px; --s3:14px; --s4:22px; --s5:30px; --s6:40px;
  --r-campo:18px; --r-tarjeta:24px; --r-destacado:28px; --r-pildora:999px;
  --sombra-base:0 6px 20px rgba(90,64,200,.08);
  --sombra-activa:0 10px 26px rgba(90,64,200,.15);
  --sombra-boton:0 8px 20px rgba(122,90,248,.38);
  --sombra-barra:0 2px 14px rgba(90,64,200,.07);
  --tit:'Quicksand','Trebuchet MS',system-ui,sans-serif;
  --txt:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  font-family:var(--txt);color:var(--texto);
}
.suave.es-saldo{--acento:var(--saldo);--acento-fuerte:#0b5f52}

/* Tipografía */
.suave .titulo-pagina{font-family:var(--tit);font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--texto);margin:0}
.suave .titulo-seccion{font-family:var(--tit);font-size:17px;line-height:1.4;font-weight:700;color:var(--texto-titulo);margin:0}
.suave .cifra-grande{font-family:var(--tit);font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--acento-fuerte)}
.suave .cuerpo{font-size:16px;line-height:1.6;font-weight:400}
.suave .apoyo{font-size:14px;line-height:1.5;font-weight:400;color:var(--texto-apoyo)}

/* Botón */
.suave .boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border:0;border-radius:var(--r-pildora);font-family:var(--tit);font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .1s}
.suave .boton:active{transform:scale(.98)}
.suave .boton-principal{background:var(--acento);color:#fff;box-shadow:var(--sombra-boton);padding:0 28px}
.suave .boton-secundaria{background:var(--acento-tinte);color:var(--acento-fuerte);padding:0 22px}
.suave .boton-fantasma{background:none;color:var(--texto-apoyo);padding:0 18px}
.suave .boton:disabled{opacity:.45;cursor:not-allowed}

/* Campo */
.suave .campo{display:block;margin-bottom:var(--s4)}
.suave .campo > label{display:block;font-family:var(--txt);font-size:14px;color:var(--texto-apoyo);margin-bottom:var(--s1);font-weight:600}
.suave .campo input,.suave .campo select{height:54px;border:2px solid var(--borde);border-radius:var(--r-campo);background:var(--superficie);padding:0 18px;font-family:var(--txt);font-size:16px;color:var(--texto);width:100%;transition:border-color .15s}
.suave .campo input:focus,.suave .campo select:focus{outline:none;border-color:var(--acento)}
.suave .campo input::placeholder{color:var(--texto-tenue)}
.suave .campo input:disabled,.suave .campo select:disabled{opacity:.45;cursor:not-allowed}

/* Aviso ámbar */
.suave .aviso{display:flex;gap:var(--s2);align-items:flex-start;background:var(--aviso-fondo);border-radius:20px;padding:var(--s3) var(--s4);color:var(--aviso-texto);font-size:14px}

/* ── Login (acceso) ── */
.acc-suave{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--fondo);padding:var(--s4)}
.acc-s-caja{width:100%;max-width:400px;background:var(--superficie);
  border-radius:var(--r-destacado);box-shadow:var(--sombra-activa);padding:var(--s6)}
.acc-s-cab{text-align:center;margin-bottom:var(--s5)}
.acc-s-logo{height:44px;width:auto;margin-bottom:var(--s4)}
.acc-s-cab .titulo-pagina{font-size:28px;margin-bottom:var(--s1)}
.acc-s-clave{position:relative}
.acc-s-ojo{position:absolute;right:14px;bottom:14px;background:none;border:0;
  color:var(--texto-tenue);cursor:pointer;font-size:18px;padding:4px;line-height:1}
.acc-s-link{display:block;text-align:center;margin-top:var(--s4);
  color:var(--acento-fuerte);font-weight:600;font-size:14px;text-decoration:none}
.acc-s-link:hover{text-decoration:underline}