/* ==========================================================================
   FIC - Filtro Inteligente de Compras
   Municipalidad de la Ciudad de Salta

   Sistema de diseño institucional. Objetivos:
   - Jerarquia visual clara: el usuario debe entender el estado del
     expediente en 3 segundos, sin leer todo.
   - Densidad controlada: la version anterior amontonaba la informacion;
     aca cada bloque respira y tiene un unico proposito.
   - Accesible: contraste AA, foco visible, targets tactiles >= 44px.
   ========================================================================== */

:root {
  /* Paleta institucional: azul profundo (confianza/administracion publica)
     con acentos calidos para los estados. */
  --azul-900: #0b2545;
  --azul-800: #13315c;
  --azul-700: #1d4e89;
  --azul-500: #2f6fb2;
  --azul-100: #e8f0f9;
  --azul-50: #f4f8fc;

  /* Estados del semaforo */
  --rojo: #b3261e;
  --rojo-bg: #fdecea;
  --rojo-borde: #f2b8b5;
  --ambar: #9a6700;
  --ambar-bg: #fff8e5;
  --ambar-borde: #f0d999;
  --verde: #1b5e35;
  --verde-bg: #e8f5ed;
  --verde-borde: #a8d5ba;

  /* Neutrales */
  --gris-900: #16191d;
  --gris-700: #3c4450;
  --gris-500: #6b7280;
  --gris-300: #d3d8e0;
  --gris-200: #e6e9ef;
  --gris-100: #f2f4f8;
  --blanco: #ffffff;

  --radio: 12px;
  --radio-sm: 8px;
  --sombra-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 1px 3px rgba(11, 37, 69, 0.08);
  --sombra-md: 0 4px 12px rgba(11, 37, 69, 0.08);
  --sombra-lg: 0 12px 32px rgba(11, 37, 69, 0.12);

  --ancho-max: 1080px;
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris-900);
  background: var(--azul-50);
  /* Textura sutil de fondo para que no se vea plano */
  background-image: radial-gradient(circle at 15% -10%, rgba(47, 111, 178, 0.08), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(19, 49, 92, 0.06), transparent 40%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Encabezado institucional
   -------------------------------------------------------------------------- */

.site-header {
  background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 100%);
  color: var(--blanco);
  padding: 28px 24px 32px;
}

.site-header__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* El logo institucional es apaisado (516x222). Forzarlo a una caja
   cuadrada lo comprimia y lo dejaba ilegible: ahora se fija solo la
   ALTURA y el ancho se calcula solo, conservando la proporcion. */
.brand-mark {
  height: 46px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Variante de respaldo: si el PNG no carga, el script lo reemplaza por un
   div con las siglas "FIC", que si necesita caja cuadrada. */
div.brand-mark {
  width: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.brand-text h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Layout general
   -------------------------------------------------------------------------- */

main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 28px 24px 72px;
}

.card {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  padding: 28px;
  margin-bottom: 22px;
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card__header {
  margin-bottom: 22px;
}

.card__header h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 650;
  color: var(--azul-900);
  letter-spacing: -0.2px;
}

.card__header p {
  margin: 0;
  color: var(--gris-500);
  font-size: 14.5px;
}

.hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Indicador de pasos
   -------------------------------------------------------------------------- */

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--gris-500);
  font-weight: 500;
}

.step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gris-200);
  color: var(--gris-500);
  font-size: 13px;
  font-weight: 650;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.step--activo {
  color: var(--azul-800);
  font-weight: 600;
}

.step--activo .step__num {
  background: var(--azul-700);
  color: var(--blanco);
}

.step--hecho .step__num {
  background: var(--verde);
  color: var(--blanco);
}

.step--hecho {
  color: var(--verde);
}

.step__linea {
  width: 26px;
  height: 2px;
  background: var(--gris-200);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.field {
  margin-bottom: 22px;
}

.field__label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--gris-900);
  margin-bottom: 6px;
}

.field__hint {
  display: block;
  font-size: 13.5px;
  color: var(--gris-500);
  margin-bottom: 10px;
  line-height: 1.5;
}

.field__hint strong {
  color: var(--gris-700);
  font-weight: 600;
}

input[type="file"] {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--gris-100);
  font-family: inherit;
  font-size: 14px;
  color: var(--gris-700);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

input[type="file"]:hover {
  border-color: var(--azul-500);
  background: var(--azul-50);
}

/* Se estilan TODOS los tipos de campo de texto, no solo [type="text"].
   Antes los inputs email, number, password y search quedaban con el estilo
   nativo del navegador (borde fino gris, fuente distinta), lo que se veia
   como un bug en el panel de administracion. */
input[type="file"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="url"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="date"]:focus-visible {
  outline: 3px solid rgba(47, 111, 178, 0.35);
  outline-offset: 1px;
  border-color: var(--azul-700);
}

select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"] {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--gris-900);
  background: var(--blanco);
  transition: border-color 0.2s, box-shadow 0.2s;
  /* Sin esto, Safari/iOS ignora el padding y el radio en los inputs. */
  -webkit-appearance: none;
  appearance: none;
}

select:hover,
textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover {
  border-color: var(--gris-500);
}

input::placeholder,
textarea::placeholder {
  color: var(--gris-500);
  opacity: 1; /* Firefox aclara los placeholders por defecto. */
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--gris-100);
  color: var(--gris-500);
  cursor: not-allowed;
}

/* El select necesita su propia flecha porque appearance:none la elimina. */
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Los campos numericos cortos (limites operativos) no deben ocupar el
   ancho completo: se ven desproporcionados junto a su etiqueta. */
input[type="number"] {
  max-width: 160px;
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}

/* Grupo de opciones tipo "pill" para Bien/Servicio/Obra */
.choice-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--gris-300);
  border-radius: 999px;
  background: var(--blanco);
  font-size: 14.5px;
  font-weight: 550;
  color: var(--gris-700);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.choice__label:hover {
  border-color: var(--azul-500);
  background: var(--azul-50);
}

.choice input:checked + .choice__label {
  border-color: var(--azul-700);
  background: var(--azul-700);
  color: var(--blanco);
  box-shadow: 0 2px 8px rgba(29, 78, 137, 0.28);
}

.choice input:focus-visible + .choice__label {
  outline: 3px solid rgba(47, 111, 178, 0.35);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--radio-sm);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid rgba(47, 111, 178, 0.4);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--azul-700);
  color: var(--blanco);
  box-shadow: 0 2px 8px rgba(29, 78, 137, 0.25);
}

.btn-primary:hover:not(:disabled) {
  background: var(--azul-800);
  box-shadow: 0 4px 14px rgba(29, 78, 137, 0.32);
}

.btn-secondary {
  background: var(--blanco);
  color: var(--azul-800);
  border-color: var(--gris-300);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--azul-500);
  background: var(--azul-50);
}

/* Acciones destructivas e irreversibles (eliminar analisis). Se usa el
   contorno rojo en vez de relleno pleno: senala peligro sin invitar al
   clic como lo haria un boton primario. */
.btn-peligro {
  background: var(--blanco);
  color: var(--rojo);
  border-color: var(--rojo-borde);
}

.btn-peligro:hover:not(:disabled) {
  background: var(--rojo);
  color: var(--blanco);
  border-color: var(--rojo);
}

.btn-ghost {
  background: transparent;
  color: var(--gris-700);
  border-color: transparent;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gris-100);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.loader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: var(--radio-sm);
  margin-top: 18px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--azul-100);
  border-top-color: var(--azul-700);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.loader__texto {
  font-size: 14.5px;
  color: var(--azul-800);
  font-weight: 550;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.5s;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Mensajes de error
   -------------------------------------------------------------------------- */

.alert {
  padding: 15px 18px;
  border-radius: var(--radio-sm);
  font-size: 14.5px;
  margin-bottom: 18px;
  border: 1px solid;
  line-height: 1.55;
}

.alert--error {
  background: var(--rojo-bg);
  border-color: var(--rojo-borde);
  color: var(--rojo);
}

/* --------------------------------------------------------------------------
   Banner de resultado (semaforo)
   -------------------------------------------------------------------------- */

.veredicto {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  border-radius: var(--radio);
  border: 1px solid;
  margin-bottom: 22px;
  align-items: flex-start;
}

.veredicto--rojo {
  background: var(--rojo-bg);
  border-color: var(--rojo-borde);
}

.veredicto--amarillo {
  background: var(--ambar-bg);
  border-color: var(--ambar-borde);
}

.veredicto--verde {
  background: var(--verde-bg);
  border-color: var(--verde-borde);
}

.veredicto__icono {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--blanco);
}

.veredicto--rojo .veredicto__icono {
  background: var(--rojo);
}
.veredicto--amarillo .veredicto__icono {
  background: var(--ambar);
}
.veredicto--verde .veredicto__icono {
  background: var(--verde);
}

.veredicto__titulo {
  margin: 0 0 5px;
  font-size: 17.5px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.veredicto--rojo .veredicto__titulo {
  color: var(--rojo);
}
.veredicto--amarillo .veredicto__titulo {
  color: var(--ambar);
}
.veredicto--verde .veredicto__titulo {
  color: var(--verde);
}

.veredicto__texto {
  margin: 0;
  font-size: 15px;
  color: var(--gris-700);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Tarjetas de metricas
   -------------------------------------------------------------------------- */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.metrica {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  padding: 18px;
  text-align: center;
  border-top: 3px solid var(--gris-300);
}

.metrica--critica {
  border-top-color: var(--rojo);
}
.metrica--importante {
  border-top-color: var(--ambar);
}
.metrica--menor {
  border-top-color: var(--azul-500);
}
.metrica--total {
  border-top-color: var(--azul-900);
}

.metrica__numero {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul-900);
  font-variant-numeric: tabular-nums;
}

.metrica--critica .metrica__numero {
  color: var(--rojo);
}
.metrica--importante .metrica__numero {
  color: var(--ambar);
}

.metrica__etiqueta {
  font-size: 12.5px;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Chips de temas
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--azul-800);
  font-weight: 550;
}

.chip__contador {
  background: var(--azul-700);
  color: var(--blanco);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 6px;
}

/* --------------------------------------------------------------------------
   Chat de aclaracion
   -------------------------------------------------------------------------- */

.pregunta {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--blanco);
  border-left: 3px solid var(--azul-500);
}

.pregunta__numero {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--azul-700);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 7px;
}

.pregunta__texto {
  font-size: 16px;
  font-weight: 600;
  color: var(--gris-900);
  margin: 0 0 7px;
  line-height: 1.5;
}

.pregunta__motivo {
  font-size: 13.5px;
  color: var(--gris-500);
  margin: 0 0 15px;
  line-height: 1.5;
}

.opciones {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14.5px;
  line-height: 1.5;
}

.opcion:hover {
  border-color: var(--azul-500);
  background: var(--azul-50);
}

.opcion input {
  margin: 3px 0 0;
  accent-color: var(--azul-700);
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.opcion:has(input:checked) {
  border-color: var(--azul-700);
  background: var(--azul-50);
  font-weight: 550;
}

/* --------------------------------------------------------------------------
   Hallazgos
   -------------------------------------------------------------------------- */

.filtros {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.filtros input[type="text"] {
  flex: 1 1 240px;
  min-width: 0;
}

.filtros select {
  width: auto;
  min-width: 190px;
}

.hallazgo {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--blanco);
}

.hallazgo__cabecera {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
}

.hallazgo__cabecera:hover {
  background: var(--gris-100);
}

.hallazgo__cabecera:focus-visible {
  outline: 3px solid rgba(47, 111, 178, 0.35);
  outline-offset: -3px;
}

.severidad-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

.severidad-punto--critica {
  background: var(--rojo);
}
.severidad-punto--importante {
  background: var(--ambar);
}
.severidad-punto--menor {
  background: var(--azul-500);
}
.severidad-punto--mejora {
  background: var(--gris-500);
}

.hallazgo__info {
  flex: 1;
  min-width: 0;
}

.hallazgo__titulo {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--gris-900);
  margin: 0 0 4px;
  line-height: 1.45;
}

.hallazgo__meta {
  font-size: 13px;
  color: var(--gris-500);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge--critica {
  background: var(--rojo-bg);
  color: var(--rojo);
}
.badge--importante {
  background: var(--ambar-bg);
  color: var(--ambar);
}
.badge--menor {
  background: var(--azul-100);
  color: var(--azul-800);
}
.badge--mejora {
  background: var(--gris-200);
  color: var(--gris-700);
}

.hallazgo__flecha {
  color: var(--gris-500);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.2s;
}

.hallazgo--abierto .hallazgo__flecha {
  transform: rotate(180deg);
}

.hallazgo__cuerpo {
  padding: 0 18px 18px 41px;
  border-top: 1px solid var(--gris-200);
  padding-top: 16px;
}

.hallazgo__seccion {
  margin-bottom: 14px;
}

.hallazgo__seccion:last-child {
  margin-bottom: 0;
}

.hallazgo__etiqueta {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}

.hallazgo__texto {
  font-size: 14.5px;
  color: var(--gris-700);
  line-height: 1.65;
  margin: 0;
}

.cita {
  background: var(--gris-100);
  border-left: 3px solid var(--gris-300);
  padding: 11px 14px;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 14px;
  color: var(--gris-700);
  font-style: italic;
  line-height: 1.55;
}

.sugerencia {
  background: var(--verde-bg);
  border-left: 3px solid var(--verde);
  padding: 11px 14px;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 14.5px;
  color: var(--gris-900);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Documentos generados
   -------------------------------------------------------------------------- */

/* Una fila por documento, apiladas a lo largo.
   Antes era una grilla de 3 columnas que dejaba la ultima tarjeta sola en
   una segunda fila, con un hueco grande al costado. Como la cantidad de
   documentos varia segun lo que haya que corregir (de 1 a 4), cualquier
   numero fijo de columnas produce filas incompletas. */
.documentos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.documento {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  padding: 18px 20px;
  background: var(--blanco);
  /* Fila: icono | texto | botones */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.documento:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--azul-100);
}

.documento__icono {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-sm);
  background: var(--azul-50);
  color: var(--azul-700);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}

/* Titulo y descripcion comparten la columna central: se agrupan en un
   contenedor implicito via grid-column para que queden uno debajo del otro
   sin necesidad de tocar el HTML que genera el JS. */
.documento__titulo {
  font-size: 15.5px;
  font-weight: 640;
  color: var(--gris-900);
  margin: 0;
  line-height: 1.4;
  grid-column: 2;
  align-self: end;
}

.documento__desc {
  font-size: 13.5px;
  color: var(--gris-500);
  margin: 2px 0 0;
  line-height: 1.5;
  grid-column: 2;
  align-self: start;
}

/* El icono ocupa las dos filas del texto, centrado verticalmente. */
.documento__icono {
  grid-row: 1 / span 2;
  align-self: center;
}

.documento__acciones {
  display: flex;
  gap: 9px;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}

.documento__acciones .btn {
  /* Ancho fijo: en fila no deben estirarse, y asi PDF y DOCX quedan
     alineados entre todas las filas. */
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 42px;
  padding: 9px 14px;
  font-size: 14px;
}

/* En pantallas angostas la fila se vuelve tarjeta apilada: el titulo y los
   botones no caben uno al lado del otro. */
@media (max-width: 700px) {
  .documento {
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
  }

  .documento__acciones {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 10px;
  }

  .documento__acciones .btn {
    flex: 1 1 0;
  }
}

/* --------------------------------------------------------------------------
   Aviso de documentos de referencia
   -------------------------------------------------------------------------- */

.aviso {
  display: flex;
  gap: 12px;
  padding: 15px 18px;
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: var(--radio-sm);
  font-size: 14px;
  color: var(--azul-800);
  line-height: 1.6;
  margin-bottom: 20px;
}

.aviso__icono {
  flex-shrink: 0;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Estado vacio
   -------------------------------------------------------------------------- */

.vacio {
  text-align: center;
  padding: 44px 20px;
  color: var(--gris-500);
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 28px 24px 40px;
  color: var(--gris-500);
  font-size: 13px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  main {
    padding: 20px 16px 56px;
  }

  .card {
    padding: 20px;
    border-radius: var(--radio-sm);
  }

  .site-header {
    padding: 22px 16px 26px;
  }

  .brand-text h1 {
    font-size: 18px;
  }

  .metrica__numero {
    font-size: 26px;
  }

  .veredicto {
    padding: 20px;
    gap: 14px;
  }

  .hallazgo__cuerpo {
    padding-left: 18px;
  }

  .step__linea {
    width: 14px;
  }

  .step span:not(.step__num) {
    display: none;
  }
}

/* =========================================================================
   SEMAFORO POR DOCUMENTO
   Estado de cada documento del expediente: que paso el control y que no.
   ========================================================================= */

.semaforo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.semaforo__item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-200);
  background: var(--gris-100);
}

.semaforo__item--ok {
  border-color: #b9e2cd;
  background: #f0faf5;
}

.semaforo__item--observado {
  border-color: #f5d9a8;
  background: #fffaf0;
}

.semaforo__item--critico {
  border-color: #f3c0bb;
  background: #fdf3f2;
}

.semaforo__icono {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--blanco);
}

.semaforo__item--ok .semaforo__icono {
  background: var(--verde);
}

.semaforo__item--observado .semaforo__icono {
  background: var(--ambar);
}

.semaforo__item--critico .semaforo__icono {
  background: var(--rojo);
}

.semaforo__nombre {
  font-weight: 650;
  color: var(--azul-900);
  font-size: 15px;
}

.semaforo__estado {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.semaforo__item--ok .semaforo__estado {
  color: var(--verde);
}

.semaforo__item--observado .semaforo__estado {
  color: #9a6700;
}

.semaforo__item--critico .semaforo__estado {
  color: var(--rojo);
}

.semaforo__detalle {
  font-size: 13px;
  color: var(--gris-500);
  margin-top: 5px;
  line-height: 1.5;
}

/* =========================================================================
   CONCILIACION ECONOMICA
   Comparacion del monto de la Nota de Pedido contra el del presupuesto.
   ========================================================================= */

.conciliacion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.monto {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 18px;
  text-align: center;
}

.monto__etiqueta {
  font-size: 12px;
  font-weight: 650;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.monto__valor {
  font-size: 24px;
  font-weight: 700;
  color: var(--azul-900);
  margin-top: 6px;
}

.delta {
  text-align: center;
  padding: 0 6px;
}

.delta__etiqueta {
  font-size: 12px;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 650;
}

.delta__valor {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}

.delta--ok .delta__valor {
  color: var(--verde);
}

.delta--error .delta__valor {
  color: var(--rojo);
}

.conciliacion__aviso {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--rojo);
  font-weight: 600;
  text-align: center;
}

/* =========================================================================
   PROPUESTA (preguntas tipo "confirmar")
   El sistema redacta y el usuario solo confirma, para no tener que escribir.
   ========================================================================= */

.propuesta {
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-left: 4px solid var(--azul-500);
  border-radius: var(--radio-sm);
  padding: 15px 17px;
  margin-bottom: 14px;
}

.propuesta__etiqueta {
  font-size: 12px;
  font-weight: 650;
  color: var(--azul-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

.propuesta__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--azul-900);
}

/* Titulo de bloque interno (ej. "Temas detectados") */
.bloque__titulo {
  font-size: 13px;
  font-weight: 650;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.filtros__contador {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 12px;
}

.aviso--ok {
  background: #f0faf5;
  border-color: #b9e2cd;
  margin-top: 16px;
}

.aviso--ok .aviso__icono {
  background: var(--verde);
}

@media (max-width: 640px) {
  .conciliacion {
    grid-template-columns: 1fr;
  }

  .delta {
    padding: 6px 0;
  }
}

/* =========================================================================
   PANTALLA DE ACCESO
   ========================================================================= */

.pagina-acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.acceso {
  width: 100%;
  max-width: 460px;
}

.acceso__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  justify-content: center;
  text-align: left;
}

.acceso__marca h1 {
  font-size: 19px;
  margin: 0;
  color: var(--azul-900);
}

.acceso__marca p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--gris-500);
}

.acceso__card {
  margin: 0;
}

.acceso__acciones {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.acceso__pie {
  text-align: center;
  font-size: 13px;
  color: var(--gris-500);
  margin-top: 20px;
  line-height: 1.6;
}

.input-codigo {
  font-size: 30px !important;
  letter-spacing: 12px;
  text-align: center;
  font-weight: 700;
  padding: 14px !important;
}

/* =========================================================================
   NAVEGACION DEL ENCABEZADO
   ========================================================================= */

.header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.header-usuario {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.btn-enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-700);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.btn-enlace:hover {
  border-bottom-color: currentColor;
}

.btn-enlace--claro {
  color: var(--blanco);
  opacity: 0.9;
}

.btn-enlace--claro:hover {
  opacity: 1;
}

/* =========================================================================
   PESTAÑAS (panel de administracion)
   ========================================================================= */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gris-200);
  overflow-x: auto;
}

.tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-500);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover {
  color: var(--azul-700);
}

.tab--activo {
  color: var(--azul-700);
  border-bottom-color: var(--azul-700);
}

/* =========================================================================
   TABLAS
   ========================================================================= */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla th {
  text-align: left;
  padding: 10px 12px;
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.tabla td {
  padding: 12px;
  border-top: 1px solid var(--gris-200);
  vertical-align: top;
}

.tabla--clicable tbody tr {
  cursor: pointer;
}

.tabla--clicable tbody tr:hover {
  background: var(--azul-50);
}

.tabla__sub {
  font-size: 12px;
  color: var(--gris-500);
  margin-top: 2px;
}

.tabla__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tabla__detalle {
  font-size: 12px;
  color: var(--gris-500);
  word-break: break-word;
}

.tabla code {
  background: var(--gris-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--gris-500);
}

/* =========================================================================
   EDITOR DE PROMPTS
   ========================================================================= */

.editor {
  width: 100%;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--gris-100);
  resize: vertical;
}

.editor:focus {
  outline: 2px solid var(--azul-500);
  outline-offset: 1px;
  background: var(--blanco);
}

.editor__acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.form-linea {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.form-linea input,
.form-linea select {
  flex: 1 1 180px;
  min-width: 0;
}

/* El boton no debe estirarse como los campos: mantiene su ancho propio. */
.form-linea .btn {
  flex: 0 0 auto;
}

/* Los campos numericos limitados a 160px (ver regla general) romperian
   el reparto en una fila horizontal, asi que aca recuperan la flexibilidad. */
.form-linea input[type="number"] {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Paneles del administrador
   -------------------------------------------------------------------------- */

/* Cada pestana es un .panel. Separa sus tarjetas de forma uniforme, en vez
   de depender del margin propio de cada .card. */
.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .hidden usa !important, asi que sigue ganando sobre este display:flex. */

/* --------------------------------------------------------------------------
   Documentos modelo de referencia (pestana "Documentos ejemplo")
   -------------------------------------------------------------------------- */

.modelo-estado {
  font-size: 13px;
  color: var(--gris-500);
  margin: 4px 0 0;
}

.modelo-texto {
  font-family: inherit; /* es prosa, no codigo: se lee mejor sin monoespaciada */
  font-size: 14px;
  line-height: 1.6;
}

.modelo-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
}

/* El boton de subida es un <label> que envuelve un input file oculto:
   necesita centrar su contenido como si fuera un boton real. */
.modelo-subir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

/* "Quitar modelo" es destructivo: se distingue en rojo sobrio, pero sin
   competir visualmente con la accion principal (Guardar). */
.modelo-borrar {
  color: var(--rojo);
  border-color: var(--rojo-borde);
}

.modelo-borrar:hover:not(:disabled) {
  background: var(--rojo-bg);
  border-color: var(--rojo);
}

/* En pantallas chicas los botones se apilan a ancho completo. */
@media (max-width: 560px) {
  .modelo-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .form-linea input,
  .form-linea select,
  .form-linea .btn {
    flex: 1 1 100%;
  }
}

.aviso--alerta {
  background: var(--ambar-bg);
  border-color: var(--ambar-borde);
}

/* Aviso de reporte parcial: la IA sigue trabajando */
.aviso--progreso {
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-left: 4px solid var(--azul-500);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radio-sm);
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--azul-900);
}

.spinner--mini {
  width: 18px;
  height: 18px;
  border-width: 2px;
  flex: 0 0 auto;
}

.aviso--alerta .aviso__icono {
  background: var(--ambar);
}

.alert--ok {
  background: var(--verde-bg);
  border: 1px solid var(--verde-borde);
  color: var(--verde);
}

.metrica__sub {
  font-size: 12px;
  color: var(--gris-500);
  margin-top: 4px;
}

.lista-simple {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}

/* =========================================================================
   CALIFICACION
   ========================================================================= */

.escala {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.escala__punto {
  flex: 1 1 auto;
  min-width: 42px;
  padding: 12px 0;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--gris-700);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.escala__punto:hover {
  border-color: var(--azul-500);
  color: var(--azul-700);
}

.escala__punto--activo {
  background: var(--azul-700);
  border-color: var(--azul-700);
  color: var(--blanco);
}

.votos {
  display: grid;
  gap: 8px;
}

.voto {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: var(--gris-100);
  cursor: pointer;
}

.voto:hover {
  border-color: var(--azul-500);
}

.voto input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--rojo);
}

.voto__titulo {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--azul-900);
}

.voto__doc {
  display: block;
  font-size: 12px;
  color: var(--gris-500);
  margin-top: 2px;
}

/* Voto de tres opciones por observacion (sin valor por defecto). */
.voto--triple {
  flex-direction: column;
  gap: 8px;
  cursor: default;
}

.escala--voto .escala__punto {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
}

#faltanteDocumento {
  margin-bottom: 8px;
}

/* =========================================================================
   HISTORIAL
   ========================================================================= */

/* --------------------------------------------------------------------------
   Barra de seleccion del historial
   -------------------------------------------------------------------------- */

.historial__barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
}

.historial__todos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-700);
  cursor: pointer;
  margin: 0;
}

.historial__contador {
  font-size: 13px;
  color: var(--gris-500);
  margin-right: auto; /* empuja el boton de eliminar al extremo derecho */
}

.historial__sel {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.historial__check,
#historialTodos {
  width: 17px;
  height: 17px;
  accent-color: var(--azul-700);
  cursor: pointer;
  margin: 0;
}

/* El boton "Eliminar" de cada fila es discreto: la accion principal de la
   fila es "Ver documentos", no borrar. Ancho fijo para que quede en la
   misma columna en todas las filas. */
.historial__borrar {
  color: var(--rojo);
  font-size: 13px;
  flex: 0 0 auto;
  text-align: right;
}

.historial__borrar:hover {
  text-decoration: underline;
}

/* Fila del historial: casilla | texto | acciones.
   Se usa grid en vez de flex con wrap porque con wrap el titulo largo
   empujaba las acciones a una linea nueva y la casilla quedaba suelta,
   desalineada respecto del texto. Con grid las tres columnas se mantienen
   siempre en su lugar y solo el texto se ajusta. */
.historial__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 14px;
  align-items: start;
  /* El padding lateral iguala el de la barra de seleccion (14px), para que
     las casillas de las filas queden en la misma columna vertical que la de
     "Seleccionar todos". */
  padding: 14px;
  border-bottom: 1px solid var(--gris-200);
  transition: background 0.15s;
}

.historial__cuerpo {
  grid-column: 2;
  min-width: 0; /* permite que el titulo largo se ajuste en vez de desbordar */
}

.historial__acciones {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  /* Ancho minimo comun: "Ver documentos" y "Archivos vencidos" tienen
     anchos distintos, y sin esto el enlace "Eliminar" caia en una columna
     diferente en cada fila. */
  min-width: 230px;
}

/* La casilla se alinea con la primera linea del titulo, no con el centro
   del bloque completo (que incluye la linea de metadatos). */
.historial__sel {
  grid-column: 1;
  padding-top: 1px;
}

/* Fila seleccionada: se resalta para que la seleccion sea inequivoca antes
   de una accion irreversible. */
/* No se cambia el padding al seleccionar: eso desplazaba el contenido
   lateralmente y la fila "saltaba" al marcarla. El indicador es el fondo
   mas la barra azul interior. */
.historial__item--sel {
  background: var(--azul-50);
  box-shadow: inset 3px 0 0 var(--azul-500);
  border-radius: var(--radio-sm);
}

.historial__item:last-child {
  border-bottom: 0;
}

.historial__titulo {
  font-weight: 600;
  color: var(--azul-900);
  font-size: 15px;
}

.historial__meta {
  font-size: 13px;
  color: var(--gris-500);
  margin-top: 4px;
  line-height: 1.5;
}

.historial__vencido {
  font-size: 13px;
  color: var(--gris-500);
  font-style: italic;
}

@media (max-width: 640px) {
  .header-nav {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    gap: 12px;
  }

  .header-usuario {
    display: none;
  }

  .escala__punto {
    min-width: 36px;
    padding: 10px 0;
    font-size: 14px;
  }

  .tabla {
    font-size: 13px;
  }

  .tabla th,
  .tabla td {
    padding: 8px;
  }

  /* En movil las acciones bajan a una linea propia, debajo del texto, para
     que el titulo no quede reducido a una columna de dos palabras. */
  .historial__item {
    grid-template-columns: auto 1fr;
  }

  .historial__acciones {
    grid-column: 2;
    margin-top: 8px;
    justify-content: flex-start;
    /* Se anula el ancho minimo de escritorio: en pantallas angostas
       forzaria un desborde horizontal de toda la pagina. */
    min-width: 0;
  }

  .historial__barra {
    gap: 10px;
  }

  .historial__barra .btn {
    width: 100%;
  }
}


/* ============================================================
   DESPLEGABLE (<details>)
   Se usa para secciones opcionales que no deben competir con el
   contenido principal, como la calificacion del sistema.
   ============================================================ */

.desplegable {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: var(--azul-50);
}

.desplegable__resumen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  /* Oculta el triangulo nativo del navegador: se usa una flecha propia
     para que se vea igual en Chrome, Firefox y Safari. */
  list-style: none;
  border-radius: var(--radio-sm);
}

.desplegable__resumen::-webkit-details-marker {
  display: none;
}

.desplegable__resumen:hover {
  background: var(--azul-100);
}

.desplegable__resumen:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 2px;
}

.desplegable__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.desplegable__texto strong {
  color: var(--azul-900);
  font-size: 1rem;
}

.desplegable__ayuda {
  color: var(--gris-500);
  font-size: 0.875rem;
}

.desplegable__flecha {
  color: var(--azul-700);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.desplegable[open] .desplegable__flecha {
  transform: rotate(180deg);
}

.desplegable__cuerpo {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--gris-200);
}

.desplegable__cuerpo .field:first-child {
  margin-top: 16px;
}

@media (max-width: 640px) {
  .desplegable__resumen,
  .desplegable__cuerpo {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* Acciones al pie del reporte (volver al historial / nuevo analisis). */
.acciones-finales {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .acciones-finales {
    flex-direction: column;
  }

  .acciones-finales .btn {
    width: 100%;
  }
}


/* =========================================================================
   HEADER: acciones y menu de cuenta
   Antes eran 5 enlaces sueltos con el mismo peso visual. Ahora hay
   jerarquia: accion principal, secundaria y menu agrupado.
   ========================================================================= */

/* Texto solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-header:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
}

/* La accion principal se distingue con fondo solido. */
.btn-header--principal {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--azul-800);
}

.btn-header--principal:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}

.btn-header__icono {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

/* --- Menu de la cuenta --- */

.menu-usuario {
  position: relative;
}

.menu-usuario__boton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.menu-usuario__boton::-webkit-details-marker {
  display: none;
}

.menu-usuario__boton:hover {
  background: rgba(255, 255, 255, 0.18);
}

.menu-usuario__boton:focus-visible {
  outline: 2px solid var(--blanco);
  outline-offset: 2px;
}

/* Inicial del usuario en un circulo, en vez del email completo. */
.menu-usuario__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--azul-800);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.menu-usuario__flecha {
  color: var(--blanco);
  font-size: 10px;
  transition: transform 0.15s ease;
}

.menu-usuario[open] .menu-usuario__flecha {
  transform: rotate(180deg);
}

.menu-usuario__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-lg);
  padding: 6px;
  z-index: 50;
}

.menu-usuario__email {
  padding: 8px 10px 10px;
  font-size: 12.5px;
  color: var(--gris-500);
  border-bottom: 1px solid var(--gris-200);
  margin-bottom: 6px;
  word-break: break-all;
}

.menu-usuario__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--azul-900);
  text-decoration: none;
  cursor: pointer;
}

.menu-usuario__item:hover {
  background: var(--azul-50);
}

.menu-usuario__item--salir {
  color: var(--rojo);
}

.menu-usuario__item--salir:hover {
  background: var(--rojo-bg);
}

@media (max-width: 640px) {
  .header-nav {
    gap: 8px;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .btn-header {
    padding: 7px 12px;
    font-size: 13px;
  }

  /* El menu se ancla a la derecha para no salirse de la pantalla. */
  .menu-usuario {
    margin-left: auto;
  }
}


/* Pie de la pantalla de acceso: enlace a la solicitud de registro. */
.acceso__acciones--centro {
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.acceso__nota {
  color: var(--gris-500);
  font-size: 13.5px;
}

/* Estados de la solicitud de acceso en el panel de administracion. */
.chip-estado {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid;
}

.chip-estado--pendiente {
  background: var(--ambar-bg);
  border-color: var(--ambar-borde);
  color: var(--ambar);
}

.chip-estado--aprobado {
  background: var(--verde-bg);
  border-color: var(--verde-borde);
  color: var(--verde);
}

.chip-estado--rechazado {
  background: var(--rojo-bg);
  border-color: var(--rojo-borde);
  color: var(--rojo);
}

.chip-estado--inactivo {
  background: var(--gris-100);
  border-color: var(--gris-300);
  color: var(--gris-500);
}

.chip-rol {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--azul-100);
  border: 1px solid #cfe0f2;
  color: var(--azul-700);
}

/* Ficha de usuario en el panel. */
.usuario-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  margin-bottom: 10px;
  background: var(--blanco);
}

.usuario-fila--pendiente {
  border-color: var(--ambar-borde);
  background: #fffdf6;
}

.usuario-fila__nombre {
  font-weight: 600;
  color: var(--azul-900);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.usuario-fila__datos {
  margin-top: 5px;
  font-size: 13px;
  color: var(--gris-700);
  line-height: 1.6;
}

.usuario-fila__datos span + span::before {
  content: "·";
  margin: 0 7px;
  color: var(--gris-300);
}

.usuario-fila__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gris-500);
}

.usuario-fila__acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.usuario-fila__acciones .btn {
  padding: 7px 12px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .usuario-fila {
    grid-template-columns: 1fr;
  }

  .usuario-fila__acciones {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Formulario en grilla (alta y edicion de usuarios)

   Reemplaza a .form-linea cuando hay varios campos: con placeholders sueltos
   en una fila flexible no se sabe que es cada casilla y los anchos quedan
   desparejos segun el largo del texto. Acá cada campo tiene etiqueta propia
   y ocupa una celda de ancho uniforme.
   -------------------------------------------------------------------------- */

/* Tres columnas fijas en vez de auto-fit: con seis campos quedan dos filas
   parejas de tres. Con auto-fit, en pantallas anchas entraban cinco y el
   ultimo campo quedaba colgado solo en la fila siguiente. */
.form-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 18px;
}

@media (max-width: 900px) {
  .form-grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

.campo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.campo__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gris-700);
  margin-bottom: 5px;
}

.campo__req {
  color: var(--rojo);
  font-weight: 700;
}

/* Los campos de la grilla ya estan contenidos por su celda: se anulan los
   maximos generales para que todos midan lo mismo. */
.campo input,
.campo select {
  width: 100%;
  max-width: none;
  margin: 0;
}

.campo__nota {
  font-size: 13px;
  color: var(--gris-500);
}

.form-grilla__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-200);
}

@media (max-width: 560px) {
  .form-grilla {
    grid-template-columns: 1fr;
  }

  .form-grilla__pie {
    flex-direction: column;
    align-items: stretch;
  }

  .form-grilla__pie .btn {
    width: 100%;
  }
}

/* Edicion de un usuario dentro de su ficha: se despliega en el lugar, sin
   sacar al administrador de la lista ni abrir otra pantalla. */
.usuario-fila__editor {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--gris-300);
}

/* Dentro de la ficha el espacio es mas angosto: dos columnas leen mejor. */
.usuario-fila__editor .form-grilla {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}

@media (max-width: 700px) {
  .usuario-fila__editor .form-grilla {
    grid-template-columns: 1fr;
  }
}

.usuario-fila__editor .campo input,
.usuario-fila__editor .campo select {
  padding: 9px 11px;
  font-size: 14px;
}

.editor-usuario__pie {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Dato ausente: se marca en gris claro e italica para que se note que falta
   completar, en vez de simplemente no mostrar nada. */
.dato-vacio {
  color: var(--gris-400, #9aa5b1);
  font-style: italic;
}

@media print {
  .site-header,
  .site-footer,
  .filtros,
  .btn,
  .stepper {
    display: none !important;
  }

  body {
    background: var(--blanco);
  }

  .card {
    box-shadow: none;
    border-color: var(--gris-300);
    break-inside: avoid;
  }

  .hallazgo__cuerpo {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Archivos elegidos antes de analizar
   Cada archivo se lista con su boton "Quitar": antes, para corregir un
   archivo elegido por error habia que volver a elegir todos los del campo.
   -------------------------------------------------------------------------- */

.archivos {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.archivos__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
}

.archivos__nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--gris-900);
}

.archivos__peso {
  font-size: 13px;
  color: var(--gris-500);
  white-space: nowrap;
}

.archivos__quitar {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--rojo-borde);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  color: var(--rojo);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.archivos__quitar:hover {
  background: var(--rojo-bg);
}

.archivos__quitar:focus-visible {
  outline: 3px solid rgba(179, 38, 30, 0.3);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Analisis en curso: salida para cancelar y empezar de nuevo
   -------------------------------------------------------------------------- */

.barra-en-curso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid var(--ambar-borde);
  border-radius: var(--radio-sm);
  background: var(--ambar-bg);
  color: var(--gris-900);
  font-size: 14.5px;
  line-height: 1.5;
}

.barra-en-curso .btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .barra-en-curso {
    flex-direction: column;
    align-items: stretch;
  }

  .barra-en-curso .btn {
    white-space: normal;
  }

  .archivos__peso {
    display: none;
  }
}