/**
 * Los cuatro estados tienen que verse DISTINTOS entre sí (criterio 13).
 *
 * 🔴 El semáforo **no se personaliza**, y eso está en el contrato. `marca.color`
 * manda en la cabecera, el botón y los enlaces; estos cuatro colores se quedan
 * fijos. Un centro de marca verde que pudiera pintar de verde el «no
 * encontramos ese folio» haría que un documento falso pasara por bueno de un
 * vistazo — que es justo lo único que esta pantalla existe para evitar.
 */

.vc { --vc-acento: #611232; max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.55; }
.vc * { box-sizing: border-box; }

.vc-titulo { font-size: 1.5rem; margin: 0 0 .4em; color: var(--vc-acento); }
.vc-ayuda  { margin: 0 0 1.1em; opacity: .8; }

.vc-forma { display: flex; gap: .6em; flex-wrap: wrap; }
.vc-forma input {
  flex: 1 1 220px; padding: .7em .9em; font-size: 1.05rem;
  border: 1px solid #bbb; border-radius: 4px; letter-spacing: .09em;
  text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vc-forma button {
  padding: .7em 1.4em; font-size: 1rem; cursor: pointer; border: 0; border-radius: 4px;
  background: var(--vc-acento); color: #fff;
}
.vc-forma button:disabled { opacity: .55; cursor: progress; }

/* ── El resultado ──────────────────────────────────────────────────────────*/
.vc-caja { margin-top: 1.4em; border: 1px solid #ddd; border-left-width: 6px; border-radius: 4px; padding: 1.1em 1.3em; }
.vc-estado { display: flex; align-items: center; gap: .55em; font-weight: 700; font-size: 1.12rem; margin: 0 0 .15em; }
.vc-estado::before { font-size: 1.25em; line-height: 1; }
.vc-detalle { margin: .35em 0 0; opacity: .85; font-size: .95rem; }

.vc-caja[data-estado="vigente"]           { border-color: #1a7f37; background: #f2fbf4; }
.vc-caja[data-estado="vigente"] .vc-estado { color: #14612b; }
.vc-caja[data-estado="vigente"] .vc-estado::before { content: "✔"; }

.vc-caja[data-estado="no_encontrada"]           { border-color: #b32d2e; background: #fdf4f4; }
.vc-caja[data-estado="no_encontrada"] .vc-estado { color: #8f2222; }
.vc-caja[data-estado="no_encontrada"] .vc-estado::before { content: "✖"; }

.vc-caja[data-estado="revocada"]           { border-color: #b32d2e; background: #fdf4f4; }
.vc-caja[data-estado="revocada"] .vc-estado { color: #8f2222; }
.vc-caja[data-estado="revocada"] .vc-estado::before { content: "⦸"; }

/* Ámbar: es un error de quien teclea, no del documento ni del sistema. */
.vc-caja[data-estado="folio_mal_escrito"]           { border-color: #bf8700; background: #fffaf0; }
.vc-caja[data-estado="folio_mal_escrito"] .vc-estado { color: #8a6100; }
.vc-caja[data-estado="folio_mal_escrito"] .vc-estado::before { content: "✎"; }

/* Gris: NO es un veredicto sobre el documento. Que no se parezca a ninguno
   de los rojos es la mitad del ADR-016. */
.vc-caja[data-estado="no_disponible"]           { border-color: #7a7a7a; background: #f6f6f6; }
.vc-caja[data-estado="no_disponible"] .vc-estado { color: #4a4a4a; }
.vc-caja[data-estado="no_disponible"] .vc-estado::before { content: "⏱"; }

.vc-datos { margin: .9em 0 0; border-collapse: collapse; width: 100%; font-size: .95rem; }
.vc-datos th { text-align: left; padding: .3em .9em .3em 0; white-space: nowrap; font-weight: 600; opacity: .7; vertical-align: top; }
.vc-datos td { padding: .3em 0; }
.vc-sello { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-all; opacity: .75; }
.vc-pie { margin-top: 1.1em; font-size: .85rem; opacity: .7; }
.vc-cargando { margin-top: 1.4em; opacity: .7; }