/**
 * Documentos — captura y compuerta de verificación.
 * Todo el color sale de css/tokens.css. Aquí no hay un solo hex.
 */

/* ─── Captura ─────────────────────────────────────────────────────────────── */

.doc-acciones {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.doc-boton {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-4);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  text-align: left;
  cursor: pointer;
}

.doc-boton:active { background: var(--superficie-elevada); }
.doc-boton[disabled] { color: var(--texto-tenue); cursor: not-allowed; }
.doc-boton svg { flex-shrink: 0; }

/* ─── Aviso de privacidad ─────────────────────────────────────────────────── */

.doc-aviso {
  border: var(--regla) solid var(--borde-fuerte);
  border-left-width: var(--e-2);
  border-left-color: var(--acento);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

.doc-aviso p { margin: 0 0 var(--e-2); }
.doc-aviso p:last-child { margin-bottom: 0; }
.doc-aviso strong { font-weight: var(--peso-fuerte); }

.doc-aviso-lista {
  margin: var(--e-2) 0 0;
  padding-left: var(--e-5);
  color: var(--texto-suave);
  font-size: var(--txt-2);
}
.doc-aviso-lista li { margin-bottom: var(--e-1); }

/* ─── Progreso ────────────────────────────────────────────────────────────── */

.doc-progreso {
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e-4);
  background: var(--superficie);
  text-align: center;
}

.doc-progreso-etapa {
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e-2);
}

.doc-progreso-texto { margin: 0; font-size: var(--txt-3); font-weight: var(--peso-fuerte); }

/* ─── Verificación ────────────────────────────────────────────────────────── */

.doc-miniatura-caja {
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie-hundida);
  margin-bottom: var(--e-4);
  overflow: hidden;
}

.doc-miniatura {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}

.doc-miniatura-pie {
  padding: var(--e-2) var(--e-3);
  border-top: var(--regla-fina) solid var(--borde);
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

/* Notas del modelo: lo que quiso advertir */
.doc-notas {
  border: var(--regla) dashed var(--urgencia-media);
  border-radius: var(--radio);
  background: var(--dato-dudoso-fondo);
  color: var(--texto);
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--txt-2);
}

/* ─── Campos ──────────────────────────────────────────────────────────────── */

.doc-campos { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }

.doc-campo {
  border: var(--regla) solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-3);
  background: var(--superficie);
}

/* Pide atención: nulo requerido, o confianza baja sin revisar */
.doc-campo[data-atencion='si'] {
  border-color: var(--urgencia-media);
  border-left-width: var(--e-2);
  background: var(--dato-dudoso-fondo);
}

.doc-campo-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
  flex-wrap: wrap;
}

.doc-campo label {
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.doc-campo input,
.doc-campo select {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
}

.doc-campo input.cifra { font-variant-numeric: tabular-nums; }

/* Procedencia del dato. Glifo + texto: no depende del color. */
.doc-origen {
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-origen[data-origen='ocr'] { color: var(--dato-ocr); }
.doc-origen[data-origen='manual'] { color: var(--dato-manual); }
.doc-origen[data-origen='ocr_corregido'] { color: var(--dato-corregido); }

.doc-campo-nota {
  margin: var(--e-2) 0 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.doc-revisar {
  min-height: var(--toque-min);
  padding: var(--e-1) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-1);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.doc-revisar:active { background: var(--superficie-elevada); }

/* ─── Compuerta ───────────────────────────────────────────────────────────── */

.doc-pendientes {
  border: var(--regla) solid var(--interes);
  border-radius: var(--radio);
  background: var(--interes-fondo);
  color: var(--texto);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  font-size: var(--txt-2);
}
.doc-pendientes ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); }

.doc-confirmar {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-4);
  background: var(--meta-fondo);
  color: var(--meta-texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-top: var(--regla-activa) solid var(--meta-regla);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

.doc-confirmar[disabled] {
  background: var(--superficie-elevada);
  color: var(--texto-tenue);
  border-top-color: var(--borde);
  cursor: not-allowed;
}

.doc-secundario {
  width: 100%;
  min-height: var(--toque-min);
  margin-top: var(--e-2);
  padding: var(--e-3);
  background: none;
  color: var(--texto-suave);
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-2);
  cursor: pointer;
}

/* ─── Duplicado ───────────────────────────────────────────────────────────── */

.doc-duplicado {
  border: var(--regla) solid var(--acento);
  border-radius: var(--radio);
  background: var(--acento-fondo);
  color: var(--texto);
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--txt-2);
}

/* ─── Error ───────────────────────────────────────────────────────────────── */

.doc-error {
  border: var(--regla) solid var(--interes);
  border-left-width: var(--e-2);
  border-radius: var(--radio);
  background: var(--interes-fondo);
  color: var(--texto);
  padding: var(--e-4);
}
.doc-error p { margin: 0 0 var(--e-2); }
.doc-error p:last-child { margin-bottom: 0; }

@media (max-width: 400px) {
  .doc-campo-cabeza { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
}