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

   Reemplaza los estilos en línea (atributo style="...") de las vistas
   para cumplir la Content-Security-Policy sin 'unsafe-inline' en
   style-src. Cada clase csp-* equivale EXACTAMENTE al style que tenía
   el elemento, incluida la cascada:

   - Un style en línea sin !important le gana a cualquier regla de hoja
     no-!important; por eso estas clases declaran !important (salvo
     csp-oculto, ver nota). Un style en línea con !important se replica
     con !important y selector duplicado (.csp-x.csp-x) para ganarle en
     especificidad a las utilidades de Bootstrap.
   - Cargar DESPUÉS de bootstrap.min.css y site.css (ver _Layout y
     _LayoutPublico).
   ================================================================ */

/* ── Colores de marca (íconos de título y valores destacados) ──── */
.csp-icono-primario   { color: var(--iris-primary) !important; }
.csp-color-secundario { color: var(--iris-secondary) !important; }

/* ── Tamaños de fuente puntuales ──────────────────────────────── */
.csp-fs-065 { font-size: 0.65rem !important; }
.csp-fs-085 { font-size: 0.85rem !important; }
.csp-fs-090 { font-size: 0.9rem !important; }

/* Etiqueta "Saldo Capital" del detalle (small text-muted text-uppercase) */
.csp-etiqueta-saldo {
  font-size: 0.68rem !important;
  letter-spacing: 0.5px !important;
}

/* ── Etiquetas de stat-label (tarjetas de créditos / títulos / pago) ── */
.csp-stat-label-destacado {
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  color: #999 !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

.csp-stat-label-compacto {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  color: #999 !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

/* ── Dimensiones y posición ───────────────────────────────────── */
.csp-w-100 { width: 100% !important; }
.csp-sticky-top-80 {
  position: sticky !important;
  top: 80px !important;
}

/* ── Borde con color Iris (el style original era !important) ───── */
.csp-borde-iris.csp-borde-iris { border-color: var(--iris-border) !important; }

/* ── Autenticación (Login, RecuperarClave, RestablecerClave) ───── */
.csp-subtitulo-auth {
  font-size: 12.8px !important;
  color: #333 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Íconos de redes sociales. Ruta relativa a este archivo (equivale a
   Url.Content("~/img/iris/...") y respeta el PathBase, igual que las
   fuentes de site.css). */
.csp-social-instagram { background-image: url('../img/iris/instagram-green.png') !important; }
.csp-social-facebook  { background-image: url('../img/iris/facebook-green.png') !important; }
.csp-social-whatsapp  { background-image: url('../img/iris/wp-green.png') !important; }
.csp-social-youtube   { background-image: url('../img/iris/youtube-green.png') !important; }
.csp-social-linkedin  { background-image: url('../img/iris/linkedin-green.png') !important; }

/* ── Ocultos iniciales ────────────────────────────────────────── */
/* SIN !important a propósito: SolicitarClave.cshtml lo muestra con
   el.style.display = 'block' (CSSOM no-!important no le ganaría a un
   !important de hoja). */
.csp-oculto { display: none; }

/* Imagen del modal de mensajes (Login): ningún script la muestra hoy. */
.csp-imagen-modal-oculta {
  max-height: 80px !important;
  display: none !important;
}

/* ── Vista previa del constructor de dirección (InformacionPersonal) ── */
.csp-vista-previa-direccion {
  background-color: #e9ecef !important;
  min-height: 45px !important;
}

/* ── Página de error amigable (Pages/Error.cshtml) ── */
.error-pagina {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 55vh;
  padding: 48px 16px;
}
.error-tarjeta {
  max-width: 560px;
  width: 100%;
  text-align: center;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 70, 70, 0.08);
  padding: 40px 32px;
}
.error-codigo {
  color: #19B2A3;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.error-titulo {
  color: #004646;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px 0;
}
.error-descripcion {
  color: #336B6B;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 28px 0;
}
.error-acciones {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.error-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 40px;
  border-radius: 24px;
  background-color: #19B2A3;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.error-boton:hover {
  background-color: #004646;
  color: #ffffff;
}
.error-referencia {
  color: #6B7F7F;
  font-size: 12px;
  margin: 24px 0 0 0;
}
.error-referencia span {
  font-family: Consolas, "Courier New", monospace;
}