/* Identidad Air Hostess. Los valores NO se eligen aqui: son los tokens `ah-`
   del master (app/tailwind.config.js), copiados tal cual para que las dos
   aplicaciones hablen el mismo idioma visual. Manual Grafico 2021 V.2.

   Esta hoja es la de la WEB. La version de Apps Script lleva su propia copia
   dentro de `apps-script/index.html` porque alli no se pueden servir ficheros
   sueltos. Mientras convivan las dos, cualquier retoque va en las dos. */
:root {
  --azul: #005490;        /* Pantone 7462 · Azul Capri — ACENTO, nunca relleno */
  --azul-suave: #E0ECF5;
  --azul-tinte: #F2F7FB;
  --alerta: #d02e30;      /* Pantone 711 · Flame Scarlet — SOLO alertas */
  --alerta-suave: #FBE4E5;
  --verde: #0f7a4f;       /* el unico de los verdes legible a 10px (5.4:1) */
  --verde-suave: #D6F5E9;
  --ambar: #F59E0B;
  --ambar-suave: #FEF3CF;
  /* El master NUNCA pinta el ambar pleno en una superficie grande: lo usa al
     50% sobre blanco con el borde al 40%. Estos son esos dos valores ya
     resueltos sobre fondo blanco. */
  --ambar-fondo: #FFF9E7;
  --ambar-borde: #F9CB79;
  --papel: #F5F6F8;
  --borde: #E5E7EB;
  --borde-suave: #EEF0F3;
  --texto: #111827;
  --suave: #6B7280;
  --tenue: #9AA3B2;
}
* { box-sizing: border-box; }
body {
  font-family: 'Inria Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--texto);
  margin: 0; padding: 24px;
  background: var(--papel);
  line-height: 1.5;
}
.caja {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--borde);
  border-top: 3px solid var(--azul);   /* el azul entra como acento, no como relleno */
  border-radius: 8px; padding: 24px;
}
.marca {
  display: flex; align-items: center;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--borde-suave);
}
.marca img { height: 48px; width: auto; display: block; }
h1 { font-size: 20px; margin: 0 0 4px; }
p.sub { margin: 0 0 24px; color: var(--suave); font-size: 14px; }
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; }
input[type=text], textarea {
  width: 100%; padding: 10px; font-size: 14px;
  border: 1px solid var(--borde); border-radius: 6px;
  font-family: inherit;
}
textarea { min-height: 220px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.botones { margin-top: 20px; display: flex; gap: 12px; align-items: center; }
button {
  background: var(--azul); color: #fff; border: 0;
  padding: 10px 18px; border-radius: 6px; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
button:disabled { background: var(--borde); color: var(--suave); cursor: not-allowed; }
.fila { display: flex; gap: 8px; padding: 6px 0; font-size: 14px; }
.fila .etiqueta { color: var(--suave); min-width: 200px; }
.aviso { background: var(--ambar-fondo); border-left: 3px solid var(--ambar-borde); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.error { background: var(--alerta-suave); border-left: 3px solid var(--alerta); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.bien  { background: var(--verde-suave); border-left: 3px solid var(--verde); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
a { color: var(--azul); }
.cargando { color: var(--suave); font-size: 14px; }
/* La banda de estado: discreta cuando esta todo puesto, imposible de pasar por
   alto cuando falta algo. */
.ajustes {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px;
}
.ajustes.pendiente { background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.ajustes .linea { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ajustes .etiqueta { color: var(--suave); }
.ajustes button { padding: 6px 12px; font-size: 13px; }
.apagado { opacity: .5; pointer-events: none; }
/* Pie global, el mismo del master (AppShell.tsx). */
.pie {
  max-width: 760px; margin: 20px auto 0;
  border-top: 1px solid var(--borde-suave); padding-top: 16px;
  text-align: center; font-size: 11.5px; color: var(--tenue);
}
.pie a { color: var(--suave); font-weight: 500; text-decoration: none; }
.pie a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }