/* ================================================================
   Iris UI — site.css
   Módulo de Consultas · Iris CF Compañía de Financiamiento S.A.
   ================================================================ */

/* ── 1. Tipografía: Galano Grotesque (local, sin CDN) ─────────── */
@font-face {
  font-family: 'Galano';
  src: url('../fonts/GalanoGrotesqueRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano';
  src: url('../fonts/GalanoGrotesqueMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Galano';
  src: url('../fonts/GalanoGrotesqueBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Tokens Iris UI ────────────────────────────────────────── */
:root {
  --iris-primary:        #19b2a3;
  --iris-primary-active: #00d2c4;
  --iris-primary-dark:   #148f82;
  --iris-secondary:      #004646;
  --iris-label:          #336b6b;
  --iris-hover-bg:       #8afff3;

  /* --shadow-card (SDD-DS-REFERENCE.md §2.5): sombra en capas para que
     una tarjeta blanca "flote" sobre fondo blanco sin depender de un borde. */
  /* El primer valor es un anillo parejo (sigue el border-radius en las 4
     esquinas); sin él, una sombra solo-hacia-abajo se ve "cortada" en las
     esquinas superiores. */
  --iris-shadow:    0 0 0 1px rgba(0, 0, 0, 0.045), 0px 6px 16px rgba(0, 0, 0, 0.09), 0px 1px 4px rgba(0, 0, 0, 0.08);
  --iris-shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.05),  0px 14px 32px rgba(0, 0, 0, 0.14), 0px 3px 8px rgba(0, 0, 0, 0.10);
  --iris-radius:    10px;
  --iris-btn-radius: 24px; /* --cmp-button-radius: var(--r-pill) (SDD-DS-REFERENCE.md §2.4/2.5) */
  --iris-border:    #f0f0f0;
  --iris-border-cool: #cbd5e1; /* --border-cool (SDD-DS-REFERENCE.md): "Bordes de tabla" */

  /* Colores de estado pale-fill (SDD-DS-REFERENCE.md §2.2) */
  --iris-success:      #47f274;
  --iris-success-bg:   #cdfccd;
  --iris-danger:       #f15a24;
  --iris-danger-bg:    #fde6de;
  --iris-danger-dark:  #d24e1f; /* --iris-danger ~12% más oscuro, mismo criterio que --iris-primary-dark — para hover/active de botones */
  --iris-proceso-bg:   #fffedf;
  --iris-field-bg:     #fbfbfb;

  /* Bootstrap 5: reemplaza el azul primario con el teal de Iris.
     Esto propaga automáticamente a .bg-primary, .text-primary,
     .border-primary y los focus rings de formularios. */
  --bs-primary-rgb:          25, 178, 163;
  --bs-link-color-rgb:       25, 178, 163;
  --bs-link-hover-color-rgb: 20, 143, 130;

  /* Mismo reemplazo para el rojo: Bootstrap trae su propio rojo (#dc3545)
     para .text-danger/.border-danger/.bg-danger/.btn-outline-danger, y un
     sistema aparte de tonos "subtle/emphasis" para .alert-danger — ninguno
     coincidía con el rojo de marca (--iris-danger) que ya usan los badges
     de estado ("Rechazado"/"En Mora") y .iris-alert-danger. Se alinean los
     dos sistemas a los mismos tokens, así .alert-danger, .text-danger,
     .border-danger, .bg-danger y los mensajes de validación quedan con el
     mismo rojo en toda la app sin tocar cada vista una por una. */
  --bs-danger-rgb:           241, 90, 36; /* = --iris-danger (#f15a24) */
  --bs-danger-bg-subtle:     var(--iris-danger-bg);
  --bs-danger-border-subtle: var(--iris-danger-bg);
  --bs-danger-text-emphasis: var(--iris-danger);

  /* Mismo caso para el verde: Bootstrap trae su propio #198754 para
     .text-success/.border-success/.bg-success/.text-bg-success y sus tonos
     "subtle/emphasis" para .alert-success — no coincidía con el patrón ya
     usado en .badge-pale-success/.iris-alert-success, que en esta app NO
     usan --iris-success (un verde muy claro, pensado solo como relleno de
     ícono, ej. .iris-kpi-icon.is-success) como color de texto, sino
     --iris-secondary (el teal oscuro de marca) sobre fondo
     --iris-success-bg — así se mantiene el mismo criterio ya establecido
     en vez de introducir un verde de texto nuevo que no se usa en
     ningún otro lado. */
  --bs-success-rgb:           0, 70, 70; /* = --iris-secondary (#004646) */
  --bs-success-bg-subtle:     var(--iris-success-bg);
  --bs-success-border-subtle: var(--iris-success-bg);
  --bs-success-text-emphasis: var(--iris-secondary);
}

/* ── 3. Reset base ────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: 'Galano', sans-serif;
}

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

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

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
  overflow-x: hidden;
}

body.loading-active {
  cursor: progress;
}

/* ── 4. Tipografía ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--iris-secondary);
  font-weight: 600;
}

/* Labels de formulario: patrón Iris (uppercase teal) */
.form-label {
  font-size: 11.2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--iris-label);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

/* ── 5. Bootstrap 5 — botones sin !important ──────────────────── */
/* Sobreescribimos las variables internas del componente, que
   es el mecanismo previsto por Bootstrap 5 para customización.   */

.btn-primary {
  --bs-btn-bg:                  #19b2a3;
  --bs-btn-border-color:        #19b2a3;
  --bs-btn-hover-bg:            #148f82;
  --bs-btn-hover-border-color:  #148f82;
  --bs-btn-focus-shadow-rgb:    25, 178, 163;
  --bs-btn-active-bg:           #148f82;
  --bs-btn-active-border-color: #148f82;
  --bs-btn-disabled-bg:         #ccc;
  --bs-btn-disabled-border-color: #ccc;
}

.btn-outline-primary {
  --bs-btn-color:               #19b2a3;
  --bs-btn-border-color:        #19b2a3;
  --bs-btn-hover-bg:            #19b2a3;
  --bs-btn-hover-border-color:  #19b2a3;
  --bs-btn-active-bg:           #148f82;
  --bs-btn-active-border-color: #148f82;
}

/* .btn-outline-secondary nunca se personalizó a la marca (quedaba en el gris
   por defecto de Bootstrap) — usado en "Cancelar"/"Volver" en varias vistas
   (Cambiar Contraseña, Certificados, Admin...). Mismo tratamiento que
   .btn-outline-primary para que todas las acciones secundarias/cancelar se
   vean consistentes. */
.btn-outline-secondary {
  --bs-btn-color:               #19b2a3;
  --bs-btn-border-color:        #19b2a3;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #19b2a3;
  --bs-btn-hover-border-color:  #19b2a3;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #148f82;
  --bs-btn-active-border-color: #148f82;
}

/* .btn-danger/.btn-outline-danger tampoco se personalizaron nunca — usan
   su propio color fijo (Bootstrap no lo deriva de --bs-danger-rgb), así que
   quedaban en el rojo genérico (#dc3545) en vez del rojo de marca. Usados en
   "Eliminar usuario"/"Sí, eliminar" (Admin, SuperAdmin). Mismo mecanismo que
   .btn-primary. */
.btn-danger {
  --bs-btn-bg:                  #f15a24;
  --bs-btn-border-color:        #f15a24;
  --bs-btn-hover-bg:            #d24e1f;
  --bs-btn-hover-border-color:  #d24e1f;
  --bs-btn-focus-shadow-rgb:    241, 90, 36;
  --bs-btn-active-bg:           #d24e1f;
  --bs-btn-active-border-color: #d24e1f;
}

.btn-outline-danger {
  --bs-btn-color:               #f15a24;
  --bs-btn-border-color:        #f15a24;
  --bs-btn-hover-bg:            #f15a24;
  --bs-btn-hover-border-color:  #f15a24;
  --bs-btn-active-bg:           #d24e1f;
  --bs-btn-active-border-color: #d24e1f;
}

/* .btn-outline-success — mismo caso, color fijo de Bootstrap (#198754) sin
   personalizar. Usado en "Activar" (Admin/Créditos, al lado de "Inactivar"
   ya alineado arriba). Usa --iris-secondary, mismo criterio que el resto
   de elementos "success" de la app (ver comentario junto a --bs-success-rgb). */
.btn-outline-success {
  --bs-btn-color:               #004646;
  --bs-btn-border-color:        #004646;
  --bs-btn-hover-bg:            #004646;
  --bs-btn-hover-border-color:  #004646;
  --bs-btn-active-bg:           #002e2e;
  --bs-btn-active-border-color: #002e2e;
}

.btn {
  border-radius: var(--iris-btn-radius);
  font-weight: 500;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  /* Bootstrap deja el botón como inline-block sin centrado vertical de su
     contenido: si queda estirado más alto que su texto (ej. junto a un
     botón vecino en una fila flex que hace wrap a 2 líneas), el texto se
     ve pegado arriba en vez de centrado. inline-flex lo centra siempre,
     estirado o no. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Focus ring teal global */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.15rem rgba(25, 178, 163, 0.30);
}

/* ── 6. Formularios ───────────────────────────────────────────── */
.form-control,
.form-select {
  height: 45px;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  border-color: #dee2e6;
  transition: border-color 0.3s;
}

textarea.form-control { height: auto; }

.form-control:focus,
.form-select:focus {
  border-color: var(--iris-primary);
}

/* Campo readonly (ej. Número Documento al editar un administrador en
   SuperAdmin): Bootstrap solo le da fondo gris a :disabled, no a
   [readonly] — un campo readonly sigue viéndose blanco/editable aunque no
   se pueda modificar. Mismo gris que Bootstrap usa para :disabled
   (--bs-secondary-bg), para que se lea igual de "no editable". */
.form-control[readonly] {
  background-color: #e9ecef;
}

/* ── 7. App Header: franja teal + nav píldora ───────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* Bloque simple (no flex): el renglón de bienvenida y el de logo/controles
   se apilan en flujo normal, cada uno con su propio alto — así el alto
   total de la franja verde crece con el contenido en vez de quedar fijo
   y dejar que la píldora blanca (que sube -40px) tape el segundo renglón. */
.app-header-top {
  background: var(--iris-primary-active);
  padding: 10px 0 44px;
}

.app-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}

.app-header-brand {
  display: inline-flex;
  align-items: center;
}

.app-header-toggler {
  border-color: rgba(255, 255, 255, 0.6);
  filter: brightness(0) invert(1);
}

/* Renglón superior: "Te damos la bienvenida, {nombre}". Solo en el header
   autenticado — d-none d-md-flex en el wrapper: oculto en móvil. */
.app-header-info-row {
  padding: 8px 24px 0;
  color: #fff;
  font-size: 0.8125rem;
}

.app-header-welcome {
  font-weight: 600;
}

/* Fechas de acceso: viven junto al botón "Salir" (misma fila que el logo),
   ya no dentro de .app-header-info-row, así que necesitan su propio color/
   tamaño en vez de heredarlo de ese contenedor — de lo contrario caen al
   negro/16px por defecto del body y quedan casi invisibles sobre el teal. */
.app-header-access-dates {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* "Salir": botón independiente, ya no escondido dentro de un dropdown.
   Antes usaba un overlay blanco translúcido sobre el header (--iris-primary-active,
   ya bastante claro) y terminaba viéndose apagado/oscuro en vez de resaltar —
   se reemplaza por un color de marca sólido y deliberado (mismo patrón que
   .btn-login: primary de base, secondary en hover). */
.app-header-logout-btn {
  background: var(--iris-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 7px 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.app-header-logout-btn:hover,
.app-header-logout-btn:focus {
  background: var(--iris-secondary);
  color: #fff;
}

@media (max-width: 991.98px) {
  .app-header-info-row {
    padding-top: 6px;
    font-size: 0.75rem;
  }
}

/* Nav píldora blanca flotante, superpuesta sobre el borde de la franja teal.
   pointer-events:none evita que el área transparente del wrap (ancho completo)
   tape los clics del dropdown de usuario en la franja teal; se reactiva
   sólo sobre la píldora blanca visible. */
.app-header-nav-wrap {
  position: relative;
  z-index: 2;
  background: transparent;
  margin-top: -40px;
  padding: 0 24px;
  pointer-events: none;
}

.app-header-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0 auto;
  padding: 6px 10px;
  max-width: 100%;
  width: fit-content;
  background: #fff;
  border-radius: var(--iris-pill-radius, 999px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}

.app-header-nav > li > a,
.app-header-nav .dropdown-toggle,
.app-header-nav-logout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 18px;
  border-radius: var(--iris-pill-radius, 999px);
  color: var(--iris-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.app-header-nav-logout {
  background: none;
  border: none;
}

/* Ícono verde fuerte, sin círculo de fondo permanente — el fondo clarito
   solo debe verse en hover/focus (ya lo hace .app-header-nav > li > a:hover
   sobre toda la píldora), no como estado por defecto del ícono. */
.nav-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.nav-icon-badge i {
  font-size: 1.05rem;
  color: var(--iris-secondary); /* Verde IRIS #004646 */
}

.app-header-nav > li > a:hover,
.app-header-nav > li > a:focus,
.app-header-nav .dropdown-toggle:hover,
.app-header-nav .dropdown-toggle:focus,
.app-header-nav-logout:hover,
.app-header-nav-logout:focus {
  background-color: var(--iris-hover-bg, #8afff3);
  color: var(--iris-secondary);
}

/* Ítem activo: fondo suave + indicador teal inferior */
.app-header-nav > li > a.active {
  background-color: #ecfffd;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 var(--iris-primary-active);
}

/* Dropdown (Cotizadores, usuario) */
.app-header .dropdown-menu {
  border-radius: var(--iris-radius);
  border: 1px solid #eee;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding: 0;
  min-width: 220px;
}

.app-header .dropdown-item {
  font-size: 0.875rem;
  min-height: 45px;
  padding: 10px 17px;
  color: #333;
  transition: background-color 0.2s;
}

.app-header .dropdown-item:hover {
  background-color: var(--iris-hover-bg);
  color: #333;
}

/* .app-header-nav-wrap usa las clases Bootstrap .collapse/.navbar-collapse
   (oculto por defecto, .show lo despliega) — en desktop debe estar
   siempre visible, igual que .navbar-expand-lg .navbar-collapse. */
@media (min-width: 992px) {
  .app-header-nav-wrap {
    display: block !important;
  }

  /* Franja a los lados de la píldora, bajo la banda teal (los 40px de abajo del
     wrap quedan fuera de la franja): al hacer scroll el contenido pasaba por ahí
     a la vista. Con scroll (.is-scrolled, ver site.js) se vuelve un velo blanco
     translúcido, sin difuminar, para que el contenido se siga viendo por detrás
     como en el header de iris.com.co. Va detrás de la píldora (z-index -1 dentro
     del contexto del wrap) y no captura clics. */
  .app-header-nav-wrap::before {
    content: "";
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(0, 70, 70, 0.08);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .app-header.is-scrolled .app-header-nav-wrap::before {
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  .app-header-top {
    min-height: 64px;
  }
  /* El menú flota sobre el contenido (estándar de menú móvil) en vez de
     empujarlo hacia abajo — no afecta el layout de la página detrás. */
  .app-header-nav-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0;
    padding: 0;
  }
  .app-header-nav {
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .app-header-nav > li > a,
  .app-header-nav .dropdown-toggle,
  .app-header-nav-logout {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    border-radius: var(--iris-radius, 10px);
    font-size: 0.875rem;
  }
  .nav-icon-badge {
    width: 28px;
    height: 28px;
  }
  .nav-icon-badge i {
    font-size: 0.9rem;
  }
}

/* ── 7b. Banner de bienvenida (--teal-bright, SDD-DS-REFERENCE.md) ── */
.welcome-banner {
  background: var(--iris-primary-active);
  border-radius: var(--iris-radius);
  padding: 24px 28px;
  color: #fff;
}

.welcome-banner h2 {
  font-size: 1.625rem; /* escala "h1" del SDD-DS-REFERENCE.md (26px) */
  color: #fff;
}

.welcome-banner p {
  color: rgba(255, 255, 255, 0.85);
}

/* ── 8. Cards ─────────────────────────────────────────────────── */
.card {
  border-radius: var(--iris-radius);
  border: 1px solid transparent; /* el borde real vive en --iris-shadow (anillo), sigue el radio sin desalinearse en las esquinas */
  box-shadow: var(--iris-shadow);
  transition: box-shadow 0.3s;
  /* Recorta cualquier hijo (ej. una tabla en card-body.p-0) a las esquinas
     redondeadas del card — si no, las esquinas cuadradas de la tabla
     sobresalen del borde curvo del card y se ve inconsistente. */
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--iris-shadow-md);
}

/* Títulos/Créditos (Inicio): sombra fija, sin efecto hover */
.card.producto-card:hover {
  box-shadow: var(--iris-shadow);
}

.card-header {
  border-radius: calc(var(--iris-radius) - 1px) calc(var(--iris-radius) - 1px) 0 0;
  background-color: #fff;
  border-bottom: 1px solid var(--iris-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--iris-secondary);
}

.card-footer {
  border-top: 1px solid var(--iris-border);
  background: #fff;
  border-radius: 0 0 calc(var(--iris-radius) - 1px) calc(var(--iris-radius) - 1px);
}

/* ── 8b. Tarjetas de producto (Inicio) — ícono + badges pale-fill ── */
.producto-card .card-header {
  background: #fafffe;
}

/* Los mini-cuadros (Producto/Tasa, Cuota/Próx. Pago) deben verse de la
   misma altura aunque uno de los dos tenga texto más largo (2 líneas). */
.producto-card .row.g-2 {
  align-items: stretch;
}

.producto-card .row.g-2 > [class*="col-"] {
  display: flex;
}

.producto-card .row.g-2 .iris-stat {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mismo ícono/color que el encabezado de sección (Créditos, Títulos
   Vigentes: <i class="bi ..." style="color:var(--iris-primary)">),
   solo que aquí más pequeño — sin círculo de fondo. */
.card-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--iris-primary);
  font-size: 1rem;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* El ícono de tipo (título/crédito) se mantiene siempre neutro — el color
   de estado vive únicamente en el badge, para no duplicar la señal. */

/* El estado ya lo comunican el ícono circular y el badge — sin barra lateral
   (no aparece en ningún patrón de card de producción revisado). */
.producto-card.card-credito-ok,
.producto-card.card-credito-moroso {
  border-left: none;
}

/* Badges de estado — pale-fill + texto oscuro (SDD-DS-REFERENCE.md §2.2) */
.badge-pale-success { background: var(--iris-success-bg); color: var(--iris-secondary); font-weight: 700; }
.badge-pale-danger   { background: var(--iris-danger-bg);  color: var(--iris-danger);    font-weight: 700; }
.badge-pale-neutral  { background: #f1f5f9;                color: #475569;              font-weight: 700; }
.badge-pale-warning  { background: var(--iris-proceso-bg); color: var(--iris-secondary); font-weight: 700; }

/* Alertas — mismos tokens pale-fill que los badges de estado (no los
   alert-* genéricos de Bootstrap). */
.iris-alert-danger {
  color: var(--iris-danger);
  background-color: var(--iris-danger-bg);
  border-color: var(--iris-danger-bg);
}

.iris-alert-success {
  color: var(--iris-secondary);
  background-color: var(--iris-success-bg);
  border-color: var(--iris-success-bg);
}

.iris-alert-warning {
  color: var(--iris-secondary);
  background-color: var(--iris-proceso-bg);
  border-color: var(--iris-proceso-bg);
}

/* Ficha de datos (llave/valor) — mismo lenguaje visual que .iris-stat. */
.iris-field {
  padding: 10px 0;
  border-bottom: 1px solid var(--iris-border);
}

.iris-field:last-child {
  border-bottom: none;
}

.iris-field .field-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #999;
  font-weight: 600;
  margin-bottom: 2px;
}

.iris-field .field-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--iris-secondary);
}

/* Constructor de dirección: algunas etiquetas ocupan dos renglones
   ("Número vía generadora") y otras uno ("Complemento"), lo que desalineaba
   las cajas de texto entre columnas de una misma fila. Reservamos la misma
   altura para todas las etiquetas del formulario para que los inputs
   arranquen siempre a la misma altura sin importar cuánto texto tenga cada una. */
#address-builder .form-label {
  display: flex;
  align-items: flex-end;
  min-height: 2.2rem;
}

/* Switches de Autorizaciones: color de marca en vez del azul por defecto de Bootstrap. */
.form-switch .form-check-input {
  width: 2.5em;
  height: 1.4em;
  cursor: pointer;
}
.form-switch .form-check-input:checked {
  background-color: var(--iris-primary);
  border-color: var(--iris-primary);
}
.form-switch .form-check-input:focus {
  border-color: var(--iris-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 178, 163, 0.25);
}
/* Perilla del switch enfocado sin marcar: color de marca en vez del azul claro de Bootstrap. */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2319b2a3'/%3e%3c/svg%3e");
}
/* "Seleccionar todos" con solo algunos marcados (estado intermedio): color de marca. */
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--iris-primary);
  border-color: var(--iris-primary);
}

/* Radios/checkboxes en general: color de marca en vez del azul por defecto
   de Bootstrap (#0d6efd), para que combinen con el resto del formulario. */
.form-check-input:checked {
  background-color: var(--iris-primary);
  border-color: var(--iris-primary);
}
.form-check-input:hover {
  border-color: var(--iris-primary);
  cursor: pointer;
}
.form-check-label {
  cursor: pointer;
}

/* Data table: header teal-bright + texto blanco (mismo color que el header
   y los íconos KPI de la app — más acorde a la marca que el teal-dark del
   token de Figma), borde --border-cool, hover --field-bg, 4 esquinas
   redondeadas — vive dentro del padding normal del card-body (igual que
   "Certificados Disponibles"), no pegada a los bordes. Selectores
   "table.iris-table" para ganarle en especificidad a la regla global
   ".table thead th" (mismo peso, pero esta va antes en el archivo). */
.iris-table-wrap {
  border: 1px solid var(--iris-border-cool);
  border-radius: 6px; /* radio de tarjeta/input — los botones ahora son píldora (--iris-btn-radius), pero eso no aplica a una caja rectangular grande como esta */
  overflow-x: auto;
  overflow-y: hidden;
}

table.iris-table {
  border: none;
  margin-bottom: 0;
}

table.iris-table thead th {
  background: var(--iris-primary-active);
  color: #fff;
  font-weight: 500;
  border-bottom: none;
  white-space: nowrap;
}

.iris-table tbody tr:hover td {
  background-color: var(--iris-field-bg);
}

table.iris-table td,
table.iris-table th {
  border-color: var(--iris-border-cool);
  vertical-align: middle;
}

.iris-table tbody tr:last-child td {
  border-bottom: none;
}

.certificado-credito-resumen {
  min-width: 220px;
}

/* ── Pestañas (ej. Admin/Créditos: Individual / Masivo) — subrayado teal
   en la pestaña activa, texto gris en las inactivas, sin las cajas/bordes
   del estilo Bootstrap por defecto. Primer uso de pestañas en la app. */
.iris-tabs {
  border-bottom: 1px solid var(--iris-border-cool);
  gap: 28px;
}

.iris-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 2px;
  margin-bottom: -1px;
  font-weight: 600;
  color: #6c757d;
  background: transparent;
}

.iris-tabs .nav-link:hover {
  color: var(--iris-primary);
  border-color: transparent;
  isolation: isolate;
}

.iris-tabs .nav-link.active {
  color: var(--iris-primary);
  border-bottom-color: var(--iris-primary);
  background: transparent;
}

.certificado-acciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
}

.certificado-accion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid #d8dee3;
  background: #fff;
  color: #5f6975;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.certificado-accion:hover,
.certificado-accion:focus {
  color: var(--iris-secondary);
  border-color: var(--iris-primary);
  background: var(--iris-field-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

.certificado-accion:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(25, 178, 163, 0.30);
}

/* Acción principal de cada crédito (Deuda): color de marca; en gris parecía deshabilitada o ya seleccionada. */
.certificado-accion-activa {
  background: var(--iris-primary);
  border-color: var(--iris-primary);
  color: #fff;
}

.certificado-accion-activa:hover,
.certificado-accion-activa:focus {
  background: var(--iris-primary-dark);
  border-color: var(--iris-primary-dark);
  color: #fff;
}

.certificado-accion-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.certificado-accion-detalle {
  margin-top: 6px;
  font-size: 0.76rem;
  color: inherit;
  opacity: 0.82;
}

.certificado-card-general {
  transition: box-shadow 0.2s, transform 0.2s;
  border: 1px solid transparent;
}

.certificado-card-general:hover,
.certificado-card-general:focus {
  box-shadow: var(--iris-shadow-md);
  transform: translateY(-1px);
}

.pagination-iris {
  padding: 0.5rem 0;
}

/* Paginador plano (SDD-DS-REFERENCE.md §2.4 --cmp-pagination-active-radius):
   sin cajas ni bordes por número, solo texto — activo en negrita/teal,
   inactivos en gris, flechas simples en vez de "Primera/Última". */
.pagination-iris-list {
  gap: 4px;
}

.pagination-iris-list .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%; /* ancho = alto abajo, así el redondeo en hover/focus es un círculo real */
  margin: 0 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  text-align: center;
  color: #6b7280;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s;
}

.pagination-iris-list .page-link:hover,
.pagination-iris-list .page-link:focus {
  background: var(--iris-hover-bg, #8afff3);
  color: var(--iris-secondary);
}

.pagination-iris-list .page-item.active .page-link {
  background: transparent;
  color: var(--iris-secondary);
  font-weight: 700;
}

.pagination-iris-list .page-item.disabled .page-link {
  background: transparent;
  color: #cbd5e1;
}

.pagination-iris-list .page-link-arrow {
  font-size: 1.1rem;
  color: var(--iris-secondary);
}

.pagination-iris-list .page-item.disabled .page-link-arrow {
  color: #cbd5e1;
}

@media (max-width: 767.98px) {
  .certificado-acciones-grid {
    grid-template-columns: 1fr;
  }

  .certificado-accion {
    min-height: 76px;
  }
}

/* Estados de crédito */
.card-credito-ok     { border-left: 4px solid var(--iris-primary); }
.card-credito-moroso { border-left: 4px solid #dc3545; }

/* ── Overlay de carga global — igual al legacy (Img/Iris/iris-loading.gif):
   solo el gif de la marca centrado sobre un velo blanco, sin tarjeta ni texto. */
.global-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
}

.global-loading-gif {
  width: 80px;
  height: 80px;
}

/* Versión pequeña del mismo gif, para usar inline (ej. dentro de un botón). */
.iris-spinner-gif-sm {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* ── 9. Tablas ────────────────────────────────────────────────── */
.table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  font-weight: 600;
  border-color: var(--iris-border);
  white-space: nowrap;
}

.table td {
  border-color: var(--iris-border);
  vertical-align: middle;
  font-size: 0.875rem;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(25, 178, 163, 0.04);
}

/* ── 10. Badges ───────────────────────────────────────────────── */
.badge {
  border-radius: 6px;
  font-weight: 500;
  padding: 4px 9px;
  font-size: 0.72em;
  letter-spacing: 0.2px;
}

/* Ancho fijo para que los estados (Activo/No aprobado/Bloqueado) queden alineados en columna */
.badge-estado {
  display: inline-block;
  width: 90px;
  text-align: center;
}

/* ── 11. Alerts ───────────────────────────────────────────────── */
.alert {
  border-radius: 8px;
  border: none;
}

/* ── 12. Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { background: transparent; font-size: 0.85rem; }

.breadcrumb-item a {
  color: var(--iris-primary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--iris-primary-dark);
  text-decoration: underline;
}

/* ── 13. Footer dos secciones ─────────────────────────────────── */
/* Sección superior: fondo corporativo + logo SFC */
.footer-dark {
  background: var(--iris-secondary);
  padding: 32px 0;
  color: #fff;
}

/* Sección inferior: copyright + redes sociales */
.footer-light {
  border-top: 1px solid #eee;
}

.footer-custom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  font-size: 13px;
  color: #666;
}

.footer-custom a {
  color: #333;
  text-decoration: none;
}

.footer-custom a:hover {
  color: var(--iris-primary);
}

.footer-icons-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.footer-icons-social img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Footer blanco en mobile: centrado y apilado (la franja verde de arriba
   no cambia). En desktop .footer-custom sigue siendo una sola fila. */
@media (max-width: 767.98px) {
  .footer-custom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
  }
}

/* ── 14. Stat boxes (componente Iris) ─────────────────────────── */
.iris-stat {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  border: 1px solid var(--iris-border);
}

.iris-stat .stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #999;
  font-weight: 600;
  margin-bottom: 3px;
}

.iris-stat .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--iris-secondary);
  line-height: 1.2;
}

/* ── 14b. Tarjetas KPI (banner de bienvenida) — ícono + valor + label ── */
.iris-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  background: #fff;
  border-radius: var(--iris-radius);
  padding: 16px 18px;
  border: 1px solid transparent;
  box-shadow: var(--iris-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.iris-kpi:hover {
  box-shadow: var(--iris-shadow-md);
  transform: translateY(-2px);
}

.iris-kpi-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: var(--iris-primary-active);
}

.iris-kpi-icon.is-success { background: var(--iris-success); color: var(--iris-secondary); }
.iris-kpi-icon.is-danger  { background: var(--iris-danger); }

.iris-kpi-body { min-width: 0; }

.iris-kpi .stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #999;
  font-weight: 600;
  margin-bottom: 3px;
}

.iris-kpi .stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--iris-secondary);
  line-height: 1.2;
}

/* ── 14c. Tarjetas KPI en bloque de color (solo Resumen general / Inicio) ──
   Bloques de color sólido/pastel con el ícono adentro (sin círculo), como
   "Global operaciones"/"Transferencias"/"Pagos" del mockup — variantes
   mapeadas a los mismos tokens de estado pale-fill del resto del sistema
   (SDD-DS-REFERENCE.md §2.2: neutral/success/process/error), así que el
   significado semántico (verde=éxito, rojo=mora) se mantiene igual. */
.iris-stat-block {
  border-radius: var(--iris-radius);
  padding: 18px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iris-stat-block i {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.iris-stat-block .stat-block-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  opacity: 0.85;
}

.iris-stat-block .stat-block-value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.iris-stat-block-solid   { background: var(--iris-primary-active); color: #fff; }
.iris-stat-block-neutral { background: #dbfffc; color: var(--iris-secondary); }
.iris-stat-block-alt     { background: #b3fbed; color: var(--iris-secondary); }
.iris-stat-block-success { background: var(--iris-success-bg); color: var(--iris-secondary); }
.iris-stat-block-danger  { background: var(--iris-danger-bg); color: var(--iris-danger); }
.iris-stat-block-warning { background: var(--iris-proceso-bg); color: var(--iris-secondary); }

/* ── 14d. Zona de carga de archivos (drag & drop) ────────────────
   El <input type="file"> real queda accesible pero visualmente oculto
   (patrón "visually hidden", no display:none, para no romper foco/lectores
   de pantalla); el <label for="..."> que lo sigue es la caja punteada que
   el usuario ve y con la que interactúa (un <label> ya abre el selector de
   archivos al hacer clic, sin necesidad de JS para eso). */
.iris-dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.iris-dropzone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 24px;
  border: 2px dashed var(--iris-border-cool);
  border-radius: var(--iris-radius);
  background: var(--iris-field-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.iris-dropzone-input:focus-visible ~ .iris-dropzone-label,
.iris-dropzone-label:hover,
.iris-dropzone.is-dragover .iris-dropzone-label {
  border-color: var(--iris-primary);
  background: #fff;
}

.iris-dropzone-icon {
  font-size: 2rem;
  color: #adb5bd;
}

.iris-dropzone-text {
  color: #495057;
  font-size: 0.95rem;
}

.iris-dropzone-text.has-file {
  font-weight: 600;
  color: var(--iris-secondary);
}

.iris-dropzone-hint {
  font-size: 0.78rem;
  color: #adb5bd;
}

/* ── 15. Scrollbar (webkit) ───────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: #f1f1f1; }
::-webkit-scrollbar-thumb   { background: #c7c7c7; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ── 16. Contáctenos (canales de atención) ────────────────────── */
.iris-contacto {
  border-radius: var(--iris-radius);
}

.iris-contacto-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 1.75rem;
  background: var(--iris-secondary);
  color: #fff;
}

.iris-contacto-panel-titulo {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.iris-contacto-panel-texto {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.iris-contacto-btn-etica,
.iris-contacto-btn-whatsapp,
.iris-contacto-btn-sitio {
  border-radius: var(--iris-btn-radius);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: left;
}

.iris-contacto-btn-etica {
  background: var(--iris-primary);
  border-color: var(--iris-primary);
  color: #fff;
}

.iris-contacto-btn-etica:hover,
.iris-contacto-btn-etica:focus-visible {
  background: var(--iris-primary-active);
  border-color: var(--iris-primary-active);
  color: var(--iris-secondary);
}

.iris-contacto-btn-whatsapp,
.iris-contacto-btn-sitio {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

.iris-contacto-btn-whatsapp:hover,
.iris-contacto-btn-whatsapp:focus-visible,
.iris-contacto-btn-sitio:hover,
.iris-contacto-btn-sitio:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--iris-secondary);
}

.iris-contacto-direccion {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
}

.iris-contacto-direccion .bi {
  color: var(--iris-primary-active);
  font-size: 1.1rem;
}

.iris-contacto-direccion-label {
  font-weight: 600;
}

.iris-contacto-cuerpo {
  padding: 2rem 1.75rem;
}

.iris-contacto-seccion {
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iris-label);
}

.iris-contacto-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--iris-border-cool);
  border-radius: var(--iris-radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.iris-contacto-item:hover,
.iris-contacto-item:focus-visible {
  border-color: var(--iris-primary);
  box-shadow: var(--iris-shadow);
  transform: translateY(-1px);
}

.iris-contacto-icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(25, 178, 163, 0.12);
  color: var(--iris-primary-dark);
  font-size: 1.1rem;
}

.iris-contacto-label {
  display: block;
  font-size: 0.78rem;
  color: #6c757d;
}

.iris-contacto-valor {
  display: block;
  font-weight: 600;
  color: var(--iris-secondary);
  overflow-wrap: anywhere;
}