/* Base compartida de todas las pantallas: colores y reglas de la guía MLXP26.
   Todo color, radio y tipografía sale de estas variables: no se ponen hex sueltos en las pantallas. */

@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: block; src: url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: block; src: url('fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: block; src: url('fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: block; src: url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: block; src: url('fonts/montserrat-800.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: normal; font-display: block; src: url('fonts/montserrat-900.woff2') format('woff2'); }

:root {
  /* Guía MLXP26, pág. 3 "Cores gerais" (detalle y usos en docs/marca.md) */
  --amarillo: #FFE600;          /* base, cerca del 70% de la superficie. Pantone 102 C */
  --azul: #0567EE;              /* Pantone 285 C */
  --negro: #000000;
  --blanco: #FFFFFF;
  --celeste: #D6F4FA;           /* solo dentro del degradé azul, nunca como color liso */

  /* Los dos únicos degradés permitidos, con las paradas medidas en la pág. 3 de la guía.
     Las "-paradas" sirven para cambiar el ángulo sin tocar los colores:
       background: linear-gradient(90deg, var(--degrade-azul-paradas));
     Amarillo a blanco: el amarillo se mantiene pleno hasta ~40% y después aclara hasta blanco.
     Azul a celeste (70/30): azul pleno al principio, aclara hacia un azul vivo hasta el 70%
     (#0092F7, tono de paso medido en la muestra; no es un color para usar liso) y en el último
     30% llega al celeste. El texto blanco va sobre el tramo azul (el primer 70%), nunca sobre el
     celeste. El degradé azul nunca es el fondo principal de una pieza (guía, pág. 10). */
  --degrade-amarillo-paradas: var(--amarillo) 0%, var(--amarillo) 40%, var(--blanco) 100%;
  --degrade-azul-paradas: var(--azul) 0%, var(--azul) 20%, #0092F7 70%, var(--celeste) 100%;
  --degrade-amarillo: linear-gradient(180deg, var(--degrade-amarillo-paradas));
  --degrade-azul: linear-gradient(180deg, var(--degrade-azul-paradas));

  /* Grafismo: paneles grandes con curvas amplias, contorno fino como complemento. Sin sombras. */
  --radio-panel: 48px;
  --radio-caja: 28px;
  --radio-boton: 999px;
  --contorno: 2px solid var(--azul);
  --contorno-grueso: 4px solid var(--azul);

  /* Logo de Mercado Libre (guía del logo): área segura = alto de la "d" del logo.
     En el logo horizontal (media/marca/ml-logo-horizontal.svg) eso es 0,433 × su alto;
     uso: padding: calc(var(--logo-ml-resguardo) * <alto del logo>). Mínimo digital: 25 px de alto. */
  --logo-ml-resguardo: 0.433;
  --logo-ml-alto-min: 25px;

  /* Tipografía: Proxima Nova cuando estén los archivos (comun/proxima.css), si no Montserrat.
     Montserrat es ~13-15% más ancha que Proxima Nova al mismo tamaño: un texto medido con una
     puede no entrar con la otra. Pesos de la guía: Light 300 a Black 900. */
  --fuente: 'Proxima Nova', 'Montserrat', system-ui, sans-serif;

  /* Herramientas internas (cabina, promotora, estado): colores de estado. El estado nunca
     se comunica solo con color: siempre va con su etiqueta. */
  --gris-fondo: #F2F2F2;
  --gris-borde: #D0D0D0;
  --gris-texto: #555555;
  --ok: #1E7F3C;
  --ok-fondo: #E3F4E8;
  --alerta: #8A5A00;
  --alerta-fondo: #FFF4CC;
  --error: #C62828;
  --error-fondo: #FDE7E7;

  /* Zona táctil mínima (tótem) */
  --tactil-min: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente);
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

/* Nada de sombras ni brillos (regla de la guía) */
* { box-shadow: none !important; text-shadow: none !important; }

.oculto { display: none !important; }

/* Indicador de conexión compartido (cabina, promotora, estado) */
.conexion {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px;
  padding: 6px 12px; border-radius: var(--radio-boton);
  background: var(--ok-fondo); color: var(--ok);
}
.conexion::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.conexion.caida { background: var(--error-fondo); color: var(--error); }
.conexion.esperando { background: var(--gris-fondo); color: var(--gris-texto); }