/* ============================================================
   PLENO GARAGE — Base y sistema de marca
   Lo cargan TODAS las paginas: panel, comprar, mis-numeros, login.

   Los colores salen del Manual de Marca. Cambiar un valor de este
   bloque :root repinta el sitio entero. Por eso no debe quedar
   ningun color escrito a mano en los otros archivos CSS.
   ============================================================ */

:root {
  /* --- Paleta oficial (Manual de Marca) --- */
  --azul-oscuro: #192327;   /* Dark blue   */
  --azul:        #324878;   /* Blue        */
  --crema:       #F8F7F2;   /* Light yellow*/
  --celeste:     #D7E0F3;   /* Light Blue  */
  --blanco:      #FFFFFF;

  /* --- Tonos intermedios ---
     Mezclados a partir de la paleta con color-mix, para no meter
     colores que el manual no contempla. */
  --texto-tenue: color-mix(in srgb, var(--azul-oscuro) 62%, var(--crema));
  --borde:       color-mix(in srgb, var(--celeste) 60%, var(--crema));
  --borde-fuerte:color-mix(in srgb, var(--celeste) 85%, var(--azul));
  --hover:       color-mix(in srgb, var(--celeste) 28%, var(--crema));

  /* --- Roles. El resto del CSS usa estos, no los de arriba. ---
     Contrastes verificados:
       azul-oscuro sobre crema ... 14.93
       azul-oscuro sobre celeste . 12.09
       blanco sobre azul .........  9.00
       azul sobre crema ..........  8.39
       azul sobre celeste ........  6.79
     Minimo para texto normal: 4.5
     NUNCA azul-oscuro sobre azul (1.78) ni crema sobre celeste (1.24) */

  --fondo:         var(--crema);
  --superficie:    var(--blanco);
  --superficie-alt:var(--celeste);
  --texto:         var(--azul-oscuro);
  --texto-inverso: var(--crema);
  --accion:        var(--azul);
  --accion-texto:  var(--blanco);

  /* --- Señales de interfaz ---
     Estos dos NO son colores de marca y es a proposito. En el panel
     hace falta distinguir de un vistazo "confirmada" de "anulada":
     si el boton de anular fuera azul como todo lo demas, se toca por
     error. Estan desaturados para convivir con el azul de la marca.
     No se usan en la landing ni en nada que vea el comprador. */
  --ok:      #1f6d3f;
  --peligro: #9c3328;

  /* --- Desvio ---
     Para lo que NO sigue el camino principal: salirse, volver
     atras, cambiar lo ya elegido. No es un paso del flujo ni un
     error, asi que no puede ir ni en el azul de "seguir" ni en
     el rojo de "algo se rompio". Es el unico color calido de la
     pagina: en algo que es todo azul y crema, se despega solo.
     Contrastes medidos sobre crema 6,1:1 y sobre blanco 6,6:1,
     los dos arriba del 4,5:1 que hace falta para leerlo.
     Este SI lo ve el comprador. */
  --desvio:  #8C4E07;

  /* --- Tipografia (Manual de Marca) --- */
  --tipo-titulo: 'Poppins', system-ui, -apple-system, sans-serif;
  --tipo-texto:  'Inter', system-ui, -apple-system, sans-serif;

  /* --- Medidas --- */
  --radio: 10px;
  --radio-chico: 6px;

  color-scheme: light;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--tipo-texto);
  font-size: 16px;
  line-height: 1.6;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Centrado vertical, para las paginas de una sola tarjeta como el
   login. Se PIDE con class="centrado" en el <body>.

   Antes esto era body:not(.panel), o sea que centraba todo salvo
   el panel. Con la landing se vio por que esta mal: una pagina
   nueva nacia centrada sin pedirlo y habia que acordarse de
   desactivarlo, y la regla para desactivarlo pesaba menos que
   la que lo activaba. Pedirlo es mas seguro que esquivarlo. */
body.centrado {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

main {
  max-width: 420px;
  width: 100%;
}

h1, h2, h3 {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 { font-size: 30px; margin-bottom: 16px; }

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------
   Utilidades compartidas
   ------------------------------------------------------------ */

.oculto { display: none !important; }

.etiqueta {
  font-family: var(--tipo-titulo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accion);
}

.bajada {
  color: var(--texto-tenue);
  margin-bottom: 28px;
}

/* La marca en el encabezado del panel y del login */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.marca img { height: 30px; width: auto; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */

.boton {
  display: inline-block;
  width: 100%;
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 16px;
  background: var(--accion);
  color: var(--accion-texto);
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.boton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--azul-oscuro) 20%, transparent);
}

.boton:active { transform: translateY(0); }

.boton:focus-visible {
  outline: 3px solid var(--azul-oscuro);
  outline-offset: 2px;
}

button:disabled,
.boton:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input, select, textarea {
  font-family: var(--tipo-texto);
  font-size: 16px;          /* 16px evita que el celular haga zoom al tocar */
  padding: 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
}

input::placeholder, textarea::placeholder { color: var(--texto-tenue); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 1px;
  border-color: var(--accion);
}