/* base.css · lo PÚBLICO del portal de vendedores (ventas.faenapp.com): tokens del mundo "Sala de control",
   reset, login, invitación y pantalla de espera. La app privada (privado/estilo.css) hereda estos tokens. */
:root {
  --fondo: #0C0F13;
  --fondo-2: #090B0E;
  --panel: #13181F;
  --panel-2: #192029;
  --linea: rgba(95, 179, 255, .14);
  --linea-suave: rgba(95, 179, 255, .07);
  --acento: #128BEC;
  --claro: #5FB3FF;
  --sobre: #0B1220;
  --texto: #EAF2FF;
  --apagado: #8A98AD;
  --tenue: #5C6778;
  --ok: #3DCB7F;
  --mal: #F0605D;
  --ambar: #F5B942;
  --wa: #25D366;
  --radio: 16px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .5);
  --fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --datos: 'Chakra Petch', 'Montserrat', monospace;
  --suave: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
/* Rejilla de la sala: dos gradientes de 1 px, nada que repinte a 60 fps. */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(95,179,255,.035) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(95,179,255,.035) 1px, transparent 1px) 0 0 / 28px 100%; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--claro); }
[hidden] { display: none !important; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.ms.lleno { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ── Botón de la casa: acento, texto oscuro, flecha en círculo, brillo que barre, latido al hover ── */
.boton { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px 0 22px; border-radius: 14px; background: var(--acento); color: var(--sobre); font-weight: 800; font-size: 15px; box-shadow: 0 10px 26px rgba(18, 139, 236, .35); transition: transform .25s var(--suave), box-shadow .25s var(--suave); animation: flotar 4.2s ease-in-out infinite; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18, 139, 236, .45); animation: late .9s ease-in-out infinite; }
.boton:disabled { opacity: .6; animation: none; transform: none; cursor: progress; }
.boton-brillo { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: barre 4.6s ease-in-out infinite; pointer-events: none; }
.boton-txt { position: relative; z-index: 1; }
.boton-flecha { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 18, 32, .18); }
.boton-flecha .ms { font-size: 18px; }
.boton-google { background: var(--panel-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); animation: none; }
.boton-google:hover { box-shadow: inset 0 0 0 1px var(--claro); animation: none; transform: translateY(-1px); }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes late { 0%, 100% { transform: translateY(-2px) scale(1); } 50% { transform: translateY(-2px) scale(1.02); } }
@keyframes barre { 0%, 55% { left: -40%; } 85%, 100% { left: 110%; } }
.enlace { color: var(--claro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Login e invitación ── */
.login { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: 20px; overflow: auto; }
.login-fondo { position: absolute; inset: 0; background: radial-gradient(900px 500px at 50% -10%, rgba(18, 139, 236, .22), transparent 60%); pointer-events: none; }
.login-carta { position: relative; width: 100%; max-width: 400px; padding: 28px 26px 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); display: grid; gap: 12px; animation: entra .6s var(--suave) both; }
@keyframes entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.login-logo { width: 56px; height: 56px; border-radius: 16px; }
.login-marca { font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--apagado); }
.login-marca span { color: var(--claro); }
.login-titulo { margin: 0; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.login-sub { margin: -4px 0 6px; color: var(--apagado); font-size: 14px; }
.campo { display: grid; gap: 6px; font-size: 12.5px; color: var(--apagado); font-weight: 700; }
.campo input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo-2); color: var(--texto); font-size: 15px; font-weight: 600; outline: none; transition: border-color .2s, box-shadow .2s; }
.campo input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(18, 139, 236, .22); }
.divisor { display: flex; align-items: center; gap: 10px; color: var(--tenue); font-size: 12px; }
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.login-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(240, 96, 93, .14); color: #FFC1BF; font-size: 13px; font-weight: 600; }
.login-error.bien { background: rgba(61, 203, 127, .14); color: #A6EBC4; }
.login-olvide { justify-self: end; margin-top: -4px; padding: 2px 0; background: none; border: 0; color: var(--claro); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.login-pie { margin: 4px 0 0; color: var(--tenue); font-size: 12.5px; text-align: center; }

/* ── Espera ── */
.espera { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--fondo); transition: opacity .35s ease; }
.espera.fuera { opacity: 0; pointer-events: none; }
.espera-cuadro { display: grid; justify-items: center; gap: 12px; }
.espera-cuadro img { border-radius: 14px; }
.espera-txt { font: 700 12px var(--datos); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.espera-barra { width: 140px; height: 3px; border-radius: 2px; background: rgba(95, 179, 255, .12); overflow: hidden; }
.espera-barra span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--acento); animation: carga 1.2s ease-in-out infinite; }
@keyframes carga { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .boton, .boton-brillo, .espera-barra span, .login-carta { animation: none; } }