/* Identidad de Overseas Trade (ver skill marca-overseas) + complementos a Tailwind.
   Marino #0F1019 = fondo de marca. Naranja #FF7F00 = acento (nunca como texto sobre blanco:
   para eso está #B85C00). Los colores de estado (rojo, verde, ámbar) no cambian por marca. */
:root {
  --marino: #0F1019;
  --marino-claro: #24273A;
  --naranja: #FF7F00;
  --naranja-oscuro: #B85C00;
  --naranja-claro: #FFF4E6;
}

.bg-marino { background-color: var(--marino); }
.bg-marino-claro { background-color: var(--marino-claro); }
.hover\:bg-marino-claro:hover { background-color: var(--marino-claro); }
.text-marino, .hover\:text-marino:hover { color: var(--marino); }
.bg-naranja, .hover\:bg-naranja:hover { background-color: var(--naranja); }
.bg-naranja-claro { background-color: var(--naranja-claro); }
.text-naranja-oscuro { color: var(--naranja-oscuro); }
.border-naranja { border-color: var(--naranja); }
.ring-naranja, .hover\:ring-naranja:hover { --tw-ring-color: var(--naranja); }
.filo-naranja { border-bottom: 3px solid var(--naranja); }

/* Botón principal: naranja con texto marino (contraste 7.48). */
.btn-primario {
  background-color: var(--naranja);
  color: var(--marino);
  font-weight: 600;
}
.btn-primario:hover { background-color: #E67300; }
/* Botón secundario: marino con texto blanco. */
.btn-secundario { background-color: var(--marino); color: #fff; }
.btn-secundario:hover { background-color: var(--marino-claro); }

/* Enlaces de texto: naranja oscurecido (4.6 AA sobre blanco). */
.enlace { color: var(--naranja-oscuro); }
.enlace:hover { text-decoration: underline; }

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--naranja-oscuro);
  box-shadow: 0 0 0 1px var(--naranja-oscuro);
  outline: none;
}