/* ==========================================================================
   visor.css — Visor de Estatus RPP
   Overrides sobre Bootstrap 5.3. No requiere JS propio ni fuentes externas.
   Estilo alineado al sitio institucional IRCNL (naranja institucional +
   grafito + neutros claros).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA
   -------------------------------------------------------------------------- */
:root {
  /* Marca institucional IRC·NL (tomada de los logotipos oficiales) */
  --visor-primario: #d77e2f;          /* naranja IRC·NL */
  --visor-primario-oscuro: #a85f1b;   /* naranja accesible para texto / hover */
  --visor-primario-claro: #fdf4ec;    /* fondos tenues */
  --visor-primario-borde: #f0d9bf;

  /* Verde petróleo institucional (encabezados, botones, pills activas) */
  --visor-grafito: #1d474f;           /* teal IRC·NL */
  --visor-grafito-medio: #35595f;
  --visor-grafito-oscuro: #143338;

  /* Neutros */
  --visor-texto: #1f2a30;
  --visor-texto-suave: #5c6b74;
  --visor-texto-tenue: #7c8a92;
  --visor-borde: #dfe4e8;
  --visor-borde-fuerte: #c9d1d7;
  --visor-fondo: #ffffff;
  --visor-fondo-alt: #f5f7f8;

  /* Semánticos de estatus (todos AA sobre su fondo tenue) */
  --visor-ambar: #8a5300;
  --visor-ambar-bg: #fdf4e3;
  --visor-ambar-borde: #efd8a8;

  --visor-verde: #146c43;
  --visor-verde-bg: #e9f5ee;
  --visor-verde-borde: #b7dfc7;

  --visor-azul: #14606e;
  --visor-azul-bg: #e7f1f3;
  --visor-azul-borde: #b3d3d8;

  --visor-rojo: #a52834;
  --visor-rojo-bg: #fbebed;
  --visor-rojo-borde: #eec2c7;

  --visor-neutro: #4b5860;
  --visor-neutro-bg: #f1f3f5;
  --visor-neutro-borde: #d7dde1;

  /* Forma */
  --visor-radio: 10px;
  --visor-radio-sm: 6px;
  --visor-sombra: 0 1px 2px rgba(35, 48, 58, .06), 0 6px 18px rgba(35, 48, 58, .06);

  /* Tipografía del sistema (sin dependencias externas) */
  --visor-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
.visor {
  font-family: var(--visor-fuente);
  color: var(--visor-texto);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Contenedor del visor: apto para iframe (sin 100vh, sin position fixed) */
.visor-shell {
  background: var(--visor-fondo);
  border: 1px solid var(--visor-borde);
  border-radius: var(--visor-radio);
  box-shadow: var(--visor-sombra);
  overflow: hidden;
}
.visor-shell::before {           /* filete de marca */
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--visor-primario) 0 55%, var(--visor-grafito) 55% 100%);
}

/* --------------------------------------------------------------------------
   3. ENCABEZADO
   -------------------------------------------------------------------------- */
.visor-encabezado {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--visor-borde);
  background: linear-gradient(180deg, #fff 0%, var(--visor-fondo-alt) 100%);
}
.visor-logo {                    /* logotipo institucional IRC·NL */
  height: 46px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
@media (max-width: 575.98px) {
  .visor-logo { height: 38px; }
}

/* Pie institucional con logotipos oficiales */
.visor-pie {
  padding: 1rem 1.25rem 1.125rem;
  border-top: 1px solid var(--visor-borde);
  background: var(--visor-fondo-alt);
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.visor-pie-logos {
  max-width: 100%;
  height: auto;
  width: 420px;
  align-self: flex-start;
}
.visor-pie p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--visor-texto-tenue);
}
@media (min-width: 768px) {
  .visor-pie { padding: 1.125rem 1.75rem 1.25rem; }
  .visor-pie-logos { width: 480px; }
}
.visor-titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--visor-grafito);
}
.visor-subtitulo {
  margin: .125rem 0 0;
  font-size: .875rem;
  color: var(--visor-texto-suave);
}

.visor-cuerpo { padding: 1.25rem; }

@media (min-width: 768px) {
  .visor-encabezado { padding: 1.25rem 1.75rem; }
  .visor-cuerpo { padding: 1.75rem; }
}

/* --------------------------------------------------------------------------
   4. PESTAÑAS (nav-tabs) — subrayado de marca
   -------------------------------------------------------------------------- */
.visor .nav-tabs {
  border-bottom: 1px solid var(--visor-borde);
  gap: .25rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.visor .nav-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .75rem 1rem;
  margin-bottom: -1px;
  color: var(--visor-texto-suave);
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  background: none;
}
.visor .nav-tabs .nav-link:hover {
  color: var(--visor-grafito);
  border-bottom-color: var(--visor-borde-fuerte);
  isolation: auto;
}
.visor .nav-tabs .nav-link.active {
  color: var(--visor-primario-oscuro);
  border-bottom-color: var(--visor-primario);
  background: none;
}

/* Sub-pestañas (nav-pills) sobre riel gris */
.visor .nav-pills {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--visor-fondo-alt);
  border: 1px solid var(--visor-borde);
  border-radius: 999px;
  max-width: 100%;
}
.visor .nav-pills .nav-link {
  border-radius: 999px;
  padding: .4375rem 1rem;
  color: var(--visor-grafito-medio);
  font-weight: 600;
  font-size: .875rem;
}
.visor .nav-pills .nav-link:hover { color: var(--visor-grafito); background: #fff; }
.visor .nav-pills .nav-link.active {
  background: var(--visor-grafito);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS
   -------------------------------------------------------------------------- */
.visor .form-label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--visor-grafito-medio);
  margin-bottom: .3125rem;
}
.visor .form-control {
  border-color: var(--visor-borde-fuerte);
  border-radius: var(--visor-radio-sm);
  padding: .5625rem .75rem;
  font-size: .9375rem;
  color: var(--visor-texto);
  background: #fff;
}
.visor .form-control::placeholder { color: var(--visor-texto-tenue); }
.visor .form-control:hover { border-color: #adb8c0; }
.visor .form-control:focus {
  border-color: var(--visor-primario);
  box-shadow: 0 0 0 .2rem rgba(215, 126, 47, .28);
}
.visor .form-control.is-invalid {
  border-color: var(--visor-rojo);
  background-image: none;
  padding-right: .75rem;
}
.visor .form-control.is-invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(165, 40, 52, .2);
}
.visor .invalid-feedback,
.visor .visor-error-campo {
  display: block;
  color: var(--visor-rojo);
  font-size: .8125rem;
  font-weight: 500;
  margin-top: .25rem;
}
.visor .form-text { font-size: .8125rem; color: var(--visor-texto-tenue); }

.visor-obligatorio { color: var(--visor-rojo); margin-left: .125rem; }

/* Bloque de campos con leyenda */
.visor-fieldset { border: 0; margin: 0; padding: 0; }
.visor-leyenda {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--visor-texto-tenue);
  margin-bottom: .75rem;
  padding: 0;
  float: none;
  width: auto;
}

/* Botones */
.visor .btn {
  border-radius: var(--visor-radio-sm);
  font-weight: 600;
  font-size: .9375rem;
  padding: .5625rem 1.375rem;
}
.visor .btn-visor {
  background: var(--visor-grafito);
  border: 1px solid var(--visor-grafito);
  color: #fff;
}
.visor .btn-visor:hover,
.visor .btn-visor:focus-visible {
  background: var(--visor-grafito-oscuro);
  border-color: var(--visor-grafito-oscuro);
  color: #fff;
}
.visor .btn-visor:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(215, 126, 47, .4);
  outline: none;
}
.visor .btn-visor-secundario {
  background: #fff;
  border: 1px solid var(--visor-borde-fuerte);
  color: var(--visor-grafito);
}
.visor .btn-visor-secundario:hover { background: var(--visor-fondo-alt); }

/* Foco visible global y accesible */
.visor a:focus-visible,
.visor button:focus-visible,
.visor .nav-link:focus-visible {
  outline: 2px solid var(--visor-primario);
  outline-offset: 2px;
  border-radius: var(--visor-radio-sm);
}

/* Enlaces */
.visor a { color: var(--visor-primario-oscuro); text-decoration: underline; text-underline-offset: 2px; }
.visor a:hover { color: var(--visor-grafito); }

/* --------------------------------------------------------------------------
   6. TARJETA DE RESULTADO
   -------------------------------------------------------------------------- */
.visor-resultado {
  border: 1px solid var(--visor-borde);
  border-radius: var(--visor-radio);
  background: #fff;
  overflow: hidden;
}
.visor-resultado-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--visor-fondo-alt);
  border-bottom: 1px solid var(--visor-borde);
}
.visor-resultado-etiqueta {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--visor-texto-tenue);
  margin: 0 0 .1875rem;
}
.visor-resultado-clave {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--visor-grafito);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.visor-resultado-cuerpo { padding: 1.25rem; }

/* Lista etiqueta–valor */
.visor-datos { margin: 0; }
.visor-datos dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--visor-texto-tenue);
  padding-top: .75rem;
}
.visor-datos dd {
  margin-bottom: 0;
  padding-top: .75rem;
  color: var(--visor-texto);
  font-size: .9375rem;
}
.visor-datos > dt:first-of-type,
.visor-datos > dt:first-of-type + dd { padding-top: 0; }
@media (min-width: 576px) {
  .visor-datos dt, .visor-datos dd {
    border-top: 1px solid #eef1f3;
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
  .visor-datos > dt:first-of-type,
  .visor-datos > dt:first-of-type + dd { border-top: 0; padding-top: 0; }
}
.visor-dato-fuerte { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. BADGES / CHIPS DE ESTATUS
   Mapa semántico:  .visor-estatus--tramite | --concluido | --activa
                    | --rechazado | --neutro (genérico, no mapeado)
   -------------------------------------------------------------------------- */
.visor-estatus {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border-radius: 999px;
  border: 1px solid var(--visor-neutro-borde);
  background: var(--visor-neutro-bg);
  color: var(--visor-neutro);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.visor-estatus::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.visor-estatus--lg { font-size: 1.0625rem; padding: .5625rem 1.0625rem; }
.visor-estatus--sm { font-size: .8125rem; padding: .25rem .625rem; }

.visor-estatus--tramite {                 /* En trámite / Pendiente */
  color: var(--visor-ambar);
  background: var(--visor-ambar-bg);
  border-color: var(--visor-ambar-borde);
}
.visor-estatus--concluido {               /* Concluido / Atendida */
  color: var(--visor-verde);
  background: var(--visor-verde-bg);
  border-color: var(--visor-verde-borde);
}
.visor-estatus--activa {                  /* Activa (informativo) */
  color: var(--visor-azul);
  background: var(--visor-azul-bg);
  border-color: var(--visor-azul-borde);
}
.visor-estatus--rechazado {               /* Rechazado / Cancelado */
  color: var(--visor-rojo);
  background: var(--visor-rojo-bg);
  border-color: var(--visor-rojo-borde);
}
.visor-estatus--neutro { }                /* genérico, ya definido en la base */

/* --------------------------------------------------------------------------
   8. AVISOS (alerts)
   -------------------------------------------------------------------------- */
.visor-aviso {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--visor-neutro-borde);
  border-left: 4px solid var(--visor-neutro);
  border-radius: var(--visor-radio-sm);
  background: var(--visor-neutro-bg);
  color: var(--visor-texto);
  font-size: .9375rem;
}
.visor-aviso svg { flex: 0 0 auto; margin-top: .0625rem; }
.visor-aviso-titulo {
  display: block;
  font-weight: 700;
  margin-bottom: .125rem;
  color: var(--visor-grafito);
}
.visor-aviso--info {
  background: var(--visor-azul-bg);
  border-color: var(--visor-azul-borde);
  border-left-color: var(--visor-azul);
  color: #123c56;
}
.visor-aviso--info svg { color: var(--visor-azul); }
.visor-aviso--advertencia {
  background: var(--visor-ambar-bg);
  border-color: var(--visor-ambar-borde);
  border-left-color: var(--visor-ambar);
  color: #5c3900;
}
.visor-aviso--advertencia svg { color: var(--visor-ambar); }
.visor-aviso--error {
  background: var(--visor-rojo-bg);
  border-color: var(--visor-rojo-borde);
  border-left-color: var(--visor-rojo);
  color: #71121c;
}
.visor-aviso--error svg { color: var(--visor-rojo); }

/* Estado inicial / vacío */
.visor-vacio {
  text-align: center;
  padding: 1.75rem 1.25rem;
  border: 1px dashed var(--visor-borde-fuerte);
  border-radius: var(--visor-radio);
  background: var(--visor-fondo-alt);
  color: var(--visor-texto-suave);
  font-size: .9375rem;
}
.visor-vacio svg { color: var(--visor-texto-tenue); margin-bottom: .5rem; }
.visor-vacio p { margin: 0; }

/* Separador de sección dentro del panel */
.visor-separador {
  height: 1px;
  background: var(--visor-borde);
  border: 0;
  margin: 1.5rem 0;
  opacity: 1;
}

/* Pie de nota (marca de tiempo, ayuda) */
.visor-nota {
  font-size: .8125rem;
  color: var(--visor-texto-tenue);
  margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   8.b INTEGRACIÓN ASP.NET — mapea las clases de validación de Razor
   (input-validation-error / field-validation-error) al mismo estilo que
   is-invalid / invalid-feedback usados por el diseño.
   -------------------------------------------------------------------------- */
.visor .form-control.input-validation-error {
  border-color: var(--visor-rojo);
  background-image: none;
  padding-right: .75rem;
}
.visor .form-control.input-validation-error:focus {
  box-shadow: 0 0 0 .2rem rgba(165, 40, 52, .2);
}
.visor .field-validation-error {
  display: block;
  color: var(--visor-rojo);
  font-size: .8125rem;
  font-weight: 500;
  margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   9. PÁGINA DE MUESTRA (solo demo — no portar a la app)
   -------------------------------------------------------------------------- */
.demo-body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: #eceff1;
  font-family: var(--visor-fuente);
  color: var(--visor-texto);
}
.demo-wrap { max-width: 1180px; margin: 0 auto; }
.demo-intro {
  background: #fff;
  border: 1px solid var(--visor-borde);
  border-radius: var(--visor-radio);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.demo-intro h1 { font-size: 1.5rem; font-weight: 700; color: var(--visor-grafito); margin: 0 0 .5rem; }
.demo-intro p { color: var(--visor-texto-suave); margin: 0 0 .5rem; font-size: .9375rem; }
.demo-intro code { color: var(--visor-primario-oscuro); background: var(--visor-primario-claro); padding: .0625rem .3125rem; border-radius: 4px; font-size: .875rem; }
.demo-titulo {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 .875rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--visor-borde-fuerte);
}
.demo-titulo span:first-child {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--visor-grafito);
  padding: .1875rem .5rem;
  border-radius: 4px;
}
.demo-titulo h2 { font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--visor-grafito); }
.demo-titulo small { color: var(--visor-texto-tenue); font-size: .8125rem; }
.demo-paleta { display: flex; flex-wrap: wrap; gap: .75rem; }
.demo-swatch {
  border: 1px solid var(--visor-borde);
  border-radius: var(--visor-radio-sm);
  overflow: hidden;
  width: 148px;
  background: #fff;
}
.demo-swatch i { display: block; height: 52px; }
.demo-swatch b { display: block; font-size: .75rem; padding: .375rem .5rem 0; color: var(--visor-grafito); }
.demo-swatch code { display: block; font-size: .6875rem; padding: 0 .5rem .5rem; color: var(--visor-texto-tenue); }