/* Cotejo — paleta y tipografía del sistema Crisalab. */

:root {
  --jade: #1E3A30;
  --jade-deep: #14271F;
  --jade-soft: #3D5A4D;
  --amber: #B47B3F;
  --amber-light: #D9B789;
  --bone: #F2EDE3;
  --bone-warm: #E8E0D0;
  --ink: #1C1916;
  --ink-soft: #4A4642;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3.5rem 1.5rem 4rem;
  background: var(--bone);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

header, main, footer { max-width: 860px; margin: 0 auto; }

.eyebrow {
  margin: 0 0 .75rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}

h1 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -.03em;
  color: var(--jade);
}

.bajada {
  margin: .75rem 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
}

.paso {
  margin: 1.5rem 0 2.5rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jade-soft);
}

/* --- Zona de carga --- */

.zona {
  border: 1.5px dashed var(--jade-soft);
  border-radius: 4px;
  background: var(--bone-warm);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.zona:hover, .zona:focus-visible, .zona.activa {
  background: var(--amber-light);
  border-color: var(--amber);
  outline: none;
}

.zona-titulo {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--jade);
}

.zona-detalle { margin: .4rem 0 0; color: var(--ink-soft); }

.zona-nota {
  margin: 1.25rem 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--jade-soft);
}

/* --- Estado --- */

.estado {
  margin: 1.5rem 0 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--jade-soft);
  background: var(--bone-warm);
  font-size: 14px;
}

.estado.trabajando { border-color: var(--amber); }

.estado.error {
  border-color: #9B3B24;
  background: #F6E3DC;
  color: #7A2E1C;
}


/* --- Resultados --- */

header { margin-bottom: 2.5rem; }

#panel { margin-top: 2.5rem; }

.resumen {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
}

.resumen strong { color: var(--jade); font-weight: 600; }

.marcador {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.tanteo {
  padding: 1rem 1.1rem;
  border-radius: 3px;
  border-left: 3px solid var(--jade-soft);
  background: var(--bone-warm);
}

.tanteo.NO_ENCONTRADA { border-left-color: #9B3B24; background: #F6E3DC; }
.tanteo.SOSPECHOSA { border-left-color: var(--amber); background: var(--amber-light); }

.tanteo .valor {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--jade);
}

.tanteo .etiqueta {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Avance --- */

.avance {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.riel {
  flex: 1 1 200px;
  height: 4px;
  background: var(--bone-warm);
  border-radius: 2px;
  overflow: hidden;
}

.barra {
  height: 100%;
  width: 0;
  background: var(--amber);
  transition: width .2s ease;
}

.progreso {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}

button {
  padding: .55rem 1.1rem;
  border: 1px solid var(--jade);
  border-radius: 3px;
  background: var(--jade);
  color: var(--bone);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}

button:hover:not(:disabled) { background: var(--jade-deep); }
button:disabled { opacity: .4; cursor: default; }

/* --- Tabla --- */

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

.tabla th {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--jade-soft);
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tabla td {
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--bone-warm);
  vertical-align: top;
}

.col-id { width: 2.5rem; color: var(--ink-soft); }
.col-estado { width: 7.5rem; }
.col-motivo { width: 34%; }

.fila.NO_ENCONTRADA { background: #FBF1ED; }
.fila.SOSPECHOSA { background: #F7EFE3; }

.chip {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--bone-warm);
  color: var(--jade);
}

.fila.NO_ENCONTRADA .chip { background: #9B3B24; color: var(--bone); }
.fila.SOSPECHOSA .chip { background: var(--amber); color: var(--bone); }
.fila.VERIFICADA .chip { background: var(--jade-soft); color: var(--bone); }

.sim {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.detalle {
  display: block;
  margin-top: .25rem;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.detalle a { color: var(--amber); }

.col-cita {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bone-warm);
  font-size: 13px;
  color: var(--ink-soft);
}

footer p { margin: 0; max-width: 62ch; }
footer strong { color: var(--amber); font-weight: 600; }

@media (max-width: 720px) {
  .marcador { grid-template-columns: 1fr; }
  .tabla, .tabla thead, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla thead { display: none; }
  .tabla tr { margin-bottom: 1rem; border: 1px solid var(--bone-warm); }
}