/* ============================================================
   Identidad visual Interactuar sobre Bootstrap 5.1
   Paleta y tokens tomados de adri_design/index.html.

   Se retematiza, NO se rediseña: la estructura Bootstrap de las vistas
   queda intacta. Solo cambian color, tipografía, radios y bordes.

   Nota sobre Bootstrap 5.1: las clases compiladas (.btn-primary, .table-dark…)
   llevan el color quemado y NO leen --bs-primary. Redefinir esa variable no
   retematiza nada; hay que sobrescribir cada componente. Las utilidades de
   color (.text-muted, .text-danger) usan !important, así que aquí también.
   ============================================================ */

:root {
  /* Marca */
  --ia-navy: #0d2240;
  /* Navy exacto del archivo del logo. El logo es un JPG con fondo opaco:
     si la barra no usa este mismo color, se ve el rectángulo de la imagen
     recortado sobre ella. Difiere del #0d2240 que traía el prototipo
     adri_design; manda el archivo oficial. */
  --ia-navy-marca: #151b3f;
  --ia-navy-soft: #1a3a63;

  /* Naranja de marca: #fb5001 exacto, sin modificar. Con texto blanco encima
     da solo 3.07:1 (fallaba) — la corrección no es tocar el color, es usar
     texto NAVY sobre él (4.73:1). A partir de ahí, oscurecer para hover/active
     (la convención habitual) BAJA el contraste con navy en vez de subirlo,
     porque acerca el naranja al mismo rango de luminosidad que el navy.
     Por eso hover/active aquí ACLARAN el naranja, no lo oscurecen. */
  --ia-orange: #fb5001;
  --ia-orange-hover: #fb621a;   /* aclarado ~10%, navy encima: 5.20:1 */
  --ia-orange-active: #fc7334;  /* aclarado ~20%, navy encima: 5.79:1 */
  --ia-orange-soft: #fff6f4;

  /* Variante oscurecida del mismo naranja para TEXTO sobre fondo claro
     (enlaces, botones outline en reposo): el naranja de marca como texto
     sobre blanco da 3.36:1 y también falla. Esta variante da 5.01:1. */
  --ia-orange-text: #c93f01;
  --ia-orange-text-hover: #a83201; /* 6.73:1, para hover de enlaces */

  /* Cian de marca: #00b3e5 exacto. Como texto o relleno con blanco falla
     (2.45:1); sobre navy funciona de sobra (6.81:1); como fondo muy claro
     con texto navy encima llega a 14.38:1. Se usa así, no como texto plano. */
  --ia-cyan: #00b3e5;
  --ia-cyan-bg: #e3f7fc;

  /* Texto */
  --ia-ink: #1a2b3c;
  --ia-slate: #3a4a5c;
  /* #6b7a8d daba 4.38:1 y 4.08:1 sobre blanco/superficie — por debajo del
     4.5:1 mínimo de WCAG AA. Este tono da 5.46:1, mismo matiz, más oscuro. */
  --ia-muted: #5a6b80;
  --ia-muted-2: #9aacbc;

  /* Superficies y bordes */
  --ia-surface: #f5f7fb;
  --ia-surface-2: #f0f3f8;
  --ia-surface-3: #f9fafb;
  --ia-border: #d1d9e6;
  --ia-border-soft: #e8ecf3;

  /* Semánticos */
  --ia-green: #1a7a40;
  --ia-green-dark: #1a6b3c;
  --ia-green-bg: #eaf7f0;
  --ia-green-line: #28a864;
  --ia-red: #e53935;
  --ia-red-dark: #b71c1c;
  --ia-red-bg: #fdecea;
  --ia-warn: #d4550a;
  --ia-warn-bg: #ffe0b2;

  /* Geometría */
  --ia-radius-control: 7px;
  --ia-radius-card: 12px;
  --ia-radius-pill: 20px;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: var(--ia-surface);
  color: var(--ia-ink);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ia-navy);
}

/* ───── Ancho de página ─────
   Bootstrap topa .container en 1320px por breakpoint; aquí se usa un 78% del
   viewport con tope, para que en pantallas grandes el contenido respire pero
   no se estire indefinidamente. El tope existe porque una línea de texto de
   1800px es ilegible: el ojo pierde el renglón al volver.
   La barra superior usa el mismo .container, así la marca queda alineada
   con el contenido en vez de pegada al borde. */
.container {
  width: 78%;
  max-width: 1400px;
}
@media (max-width: 1199.98px) {
  .container {
    width: 88%;
  }
}
@media (max-width: 767.98px) {
  .container {
    width: 94%;
  }
}

/* Para formularios de pocos campos: centrados dentro del contenedor,
   no estirados a lo ancho. Un input de texto de 1000px no se lee mejor. */
.bloque-angosto {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: var(--ia-orange-text);
  text-decoration: none;
}
a:hover {
  color: var(--ia-orange-text-hover);
  text-decoration: underline;
}

/* ───── Barra de navegación ───── */
.app-navbar {
  background-color: var(--ia-navy-marca);
  border-bottom: none !important;
  box-shadow: 0 2px 10px rgba(13, 34, 64, 0.18);
}
.app-navbar .navbar-brand {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin-right: 1.5rem;
}
/* Altura fija y ancho automático: la proporción del logo no se deforma. */
.logo-marca {
  display: block;
  height: 30px;
  width: auto;
}
.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
  border-radius: var(--ia-radius-control);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  transition: background-color 0.2s, color 0.2s;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}
.app-navbar .navbar-text {
  color: rgba(255, 255, 255, 0.65);
}
/* "Salir" sobre fondo navy: el gris de btn-outline-secondary no contrasta. */
.app-navbar .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.35);
}
.app-navbar .btn-outline-secondary:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ───── Botones ───── */
.btn {
  border-radius: var(--ia-radius-control);
  font-weight: 600;
}

/* Texto navy, no blanco: es la corrección de contraste, ver comentario
   junto a --ia-orange arriba. */
.btn-primary {
  background-color: var(--ia-orange);
  border-color: var(--ia-orange);
  color: var(--ia-navy);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ia-orange-hover);
  border-color: var(--ia-orange-hover);
  color: var(--ia-navy);
}
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ia-orange-active);
  border-color: var(--ia-orange-active);
  color: var(--ia-navy);
}

/* Secundario como en el prototipo: contorno neutro, texto navy. */
.btn-secondary {
  background-color: transparent;
  border-color: var(--ia-border);
  color: var(--ia-navy);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: transparent;
  border-color: var(--ia-navy);
  color: var(--ia-navy);
}
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--ia-surface-2);
  border-color: var(--ia-navy);
  color: var(--ia-navy);
}

/* Usa --ia-orange-text (oscurecido), no --ia-orange: aquí el color es texto
   sobre fondo claro, no relleno, y la variante clara no pasa contraste ahí. */
.btn-outline-primary {
  color: var(--ia-orange-text);
  border-color: var(--ia-orange-text);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--ia-orange-text);
  border-color: var(--ia-orange-text);
  color: #fff;
}

/* Acción destructiva: rojo de la paleta, no el #dc3545 por defecto de Bootstrap. */
.btn-outline-danger {
  color: var(--ia-red-dark);
  border-color: var(--ia-red);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--ia-red);
  border-color: var(--ia-red);
  color: #fff;
}

/* ───── Formularios ───── */
.form-label {
  font-weight: 600;
  color: var(--ia-slate);
  font-size: 0.875rem;
}
.form-control,
.form-select {
  border: 1.5px solid var(--ia-border);
  border-radius: var(--ia-radius-control);
  color: var(--ia-ink);
}
.form-control:hover,
.form-select:hover {
  border-color: var(--ia-muted-2);
}
.form-text {
  color: var(--ia-muted);
}
.input-group-text {
  background-color: var(--ia-surface);
  border: 1.5px solid var(--ia-border);
  border-radius: var(--ia-radius-control);
  color: var(--ia-muted);
}
.form-check-input:checked {
  background-color: var(--ia-orange);
  border-color: var(--ia-orange);
}

/* Foco naranja de marca. Reemplaza el halo azul por defecto de Bootstrap,
   conservando un anillo visible y con contraste para navegación por teclado. */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ia-orange);
  box-shadow: 0 0 0 0.2rem rgba(251, 80, 1, 0.28);
  outline: none;
}

/* ───── Tablas ───── */
.table {
  color: var(--ia-ink);
  border-color: var(--ia-border-soft);
}
.table > :not(caption) > * > * {
  border-color: var(--ia-border-soft);
}
.table-dark {
  --bs-table-bg: var(--ia-navy);
  --bs-table-color: #fff;
  --bs-table-border-color: #1c3357;
  color: #fff;
  border-color: #1c3357;
}
.table-dark th {
  font-weight: 600;
}
/* En 5.1 el rayado se pinta con --bs-table-accent-bg, no con background. */
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--ia-surface);
  color: var(--ia-ink);
}
.table-secondary {
  --bs-table-bg: var(--ia-surface-2);
  --bs-table-color: var(--ia-navy);
  color: var(--ia-navy);
}
/* Con pocas columnas y valores cortos, el reparto automático deja huecos
   absurdos (390px para mostrar "5,00 %"). Se fijan proporciones. */
.tabla-alianzas th:nth-child(1) { width: 24%; }
.tabla-alianzas th:nth-child(2) { width: 18%; }
.tabla-alianzas th:nth-child(3) { width: 12%; }
.tabla-alianzas th:nth-child(4) { width: 28%; }
.tabla-alianzas th:nth-child(5) { width: 18%; }

.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--ia-orange-soft);
  color: var(--ia-ink);
}

/* Editar/Eliminar medían 27px de alto y, en móvil, se apilaban casi sin
   separación — bajo el mínimo táctil de 44px y con "Eliminar" (destructivo)
   demasiado cerca de "Editar". Se agranda el objetivo y se fuerza espacio
   entre ambos sin importar si quedan en la misma línea o apilados. */
.acciones-tabla {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.acciones-tabla .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* ───── Alertas ───── */
.alert {
  border: none;
  border-left: 4px solid transparent;
  border-radius: 8px;
}
.alert-success {
  background-color: var(--ia-green-bg);
  border-left-color: var(--ia-green-line);
  color: var(--ia-green-dark);
}
.alert-danger {
  background-color: var(--ia-red-bg);
  border-left-color: var(--ia-red);
  color: var(--ia-red-dark);
}
.alert-warning {
  background-color: var(--ia-warn-bg);
  border-left-color: var(--ia-warn);
  color: #8a3a06;
}
/* Segundo color de marca (#00b3e5). Como texto o relleno con blanco no pasa
   contraste (2.45:1); como tinte de fondo con texto navy da 14.38:1. */
.alert-info {
  background-color: var(--ia-cyan-bg);
  border-left-color: var(--ia-cyan);
  color: var(--ia-navy);
}

/* ───── Insignias ───── */
.badge {
  border-radius: var(--ia-radius-pill);
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.35em 0.75em;
}
.badge.bg-success {
  background-color: var(--ia-green-bg) !important;
  color: var(--ia-green-dark);
}
.badge.bg-secondary {
  background-color: var(--ia-surface-2) !important;
  color: var(--ia-muted);
}

/* ───── Listas de definición del resumen ───── */
dt {
  color: var(--ia-slate);
  font-weight: 600;
}
dd {
  color: var(--ia-navy);
}

/* ───── Utilidades de color ─────
   Bootstrap las declara con !important; para ganarles hace falta lo mismo. */
.text-muted {
  color: var(--ia-muted) !important;
}
.text-danger {
  color: var(--ia-red-dark) !important;
}

/* El resumen de validación de ASP.NET llega como .text-danger:
   se le da forma de alerta para que no sea una lista suelta. */
.validation-summary-errors {
  background-color: var(--ia-red-bg);
  border-left: 4px solid var(--ia-red);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
}
.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}
.validation-summary-valid {
  display: none;
}
.field-validation-error {
  display: block;
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}
.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: var(--ia-red);
}