/* TENANT — tokens de marca. Fuente: TENANT_Identidad_de_Marca.pdf v1.0 (2026-09-18).
   Una sola hoja para landing, flota, clientes y socios: los valores se cambian aqui.
   Proporcion de uso: ~70 % superficies claras, ~20 % marino, ~10 % turquesa. */

@font-face { font-family: "Inter"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/marca/fonts/Inter-variable-latin.woff2") format("woff2"); }

:root {
  /* Paleta */
  --tn-marino: #0B1426;
  --tn-turquesa: #00A9B7;
  --tn-blanco: #FFFFFF;
  --tn-nube: #F3F6F8;
  --tn-texto: #526171;

  /* Estados operativos: el color nunca es la unica senal, siempre con texto o icono */
  --tn-correcto: #237A57;
  --tn-atencion: #A86100;
  --tn-critico: #B42318;
  --tn-sin-conexion: #667585;

  /* Derivados */
  --tn-linea: #DDE4EA;
  --tn-turquesa-suave: #E0F5F7;
  --tn-marino-suave: #1A2740;

  /* Tipografia: Inter; Arial como alternativa del manual */
  --tn-fuente: "Inter", Arial, system-ui, sans-serif;
  --tn-titular: 700 clamp(32px, 5vw, 48px)/1.1 var(--tn-fuente);
  --tn-seccion: 600 clamp(24px, 3vw, 28px)/1.2 var(--tn-fuente);
  --tn-lectura: 400 16px/1.45 var(--tn-fuente);
  --tn-etiqueta: 500 15px/1.3 var(--tn-fuente);
  --tn-nota: 400 13px/1.4 var(--tn-fuente);

  /* Reticula de 8 px y esquinas moderadamente redondeadas */
  --tn-u: 8px;
  --tn-radio: 8px;
  --tn-radio-grande: 16px;
  --tn-sombra: 0 1px 2px rgba(11, 20, 38, .06), 0 8px 24px rgba(11, 20, 38, .06);
}

html { background: var(--tn-blanco); color: var(--tn-marino); font: var(--tn-lectura); -webkit-font-smoothing: antialiased; }
body { margin: 0; text-align: left; }
h1 { font: var(--tn-titular); letter-spacing: -.02em; margin: 0 0 calc(var(--tn-u) * 2); }
h2 { font: var(--tn-seccion); letter-spacing: -.01em; margin: 0 0 calc(var(--tn-u) * 2); }
p { margin: 0 0 calc(var(--tn-u) * 2); color: var(--tn-texto); max-width: 68ch; }
small, .tn-nota { font: var(--tn-nota); color: var(--tn-texto); }
a { color: var(--tn-marino); text-underline-offset: 3px; }

/* Firma: ancho visible minimo 150 px en pantalla; simbolo 32 px */
.tn-firma { display: inline-block; min-width: 150px; height: auto; }
.tn-simbolo { width: 32px; height: 32px; }

/* Boton de marca: turquesa con texto marino (regla de contraste del manual) */
.tn-boton {
  display: inline-flex; align-items: center; gap: var(--tn-u);
  padding: calc(var(--tn-u) * 1.5) calc(var(--tn-u) * 3);
  border: 0; border-radius: var(--tn-radio); cursor: pointer; text-decoration: none;
  background: var(--tn-turquesa); color: var(--tn-marino); font: var(--tn-etiqueta); font-weight: 600;
}
.tn-boton:hover { filter: brightness(1.06); }
.tn-boton:focus-visible { outline: 3px solid var(--tn-marino); outline-offset: 2px; }
.tn-boton--marino { background: var(--tn-marino); color: var(--tn-blanco); }
.tn-boton--linea { background: transparent; color: var(--tn-marino); box-shadow: inset 0 0 0 1.5px var(--tn-marino); }

.tn-tarjeta { background: var(--tn-blanco); border: 1px solid var(--tn-linea); border-radius: var(--tn-radio-grande); padding: calc(var(--tn-u) * 3); box-shadow: var(--tn-sombra); }
.tn-banda { background: var(--tn-nube); }
.tn-banda--marino { background: var(--tn-marino); color: var(--tn-blanco); }
.tn-banda--marino p { color: #C5CEDA; }

.tn-campo { width: 100%; box-sizing: border-box; padding: calc(var(--tn-u) * 1.5); border: 1px solid var(--tn-linea); border-radius: var(--tn-radio); font: var(--tn-lectura); color: var(--tn-marino); background: var(--tn-blanco); }
.tn-campo:focus { outline: 2px solid var(--tn-turquesa); outline-offset: 1px; border-color: var(--tn-turquesa); }

/* Estados: etiqueta + punto; el texto siempre acompana al color */
.tn-estado { display: inline-flex; align-items: center; gap: 6px; font: var(--tn-etiqueta); }
.tn-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tn-estado--correcto { color: var(--tn-correcto); }
.tn-estado--atencion { color: var(--tn-atencion); }
.tn-estado--critico { color: var(--tn-critico); }
.tn-estado--sin-conexion { color: var(--tn-sin-conexion); }