/* Tokens de marca (docs/implementations/plan-implementacion.md §1). Sin estilos en línea: la CSP solo permite 'self'. */
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  --primario: #2871BE;
  --acento: #2196F3;
  --texto: rgba(0, 0, 0, .87);
  --texto-2: rgba(0, 0, 0, .6);
  --neutro-fuerte: #333333;
  --borde: #E0E0E0;
  --neutro: #EEEEEE;
  --fondo: #F5F5F5;
  --blanco: #FFFFFF;
  --error: #B00020;      /* añadido: el sitio de origen no define color de error */
  --exito: #2E7D32;      /* añadido: ídem */
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Roboto", system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--fondo); }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Encabezado ---------- */
.encabezado { background: var(--blanco); border-bottom: 1px solid var(--borde); padding: 16px; }
.encabezado__fila { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.encabezado__logo--contpaqi { height: 40px; width: auto; }
.encabezado__logo--df { height: 28px; width: auto; }
.encabezado__titulo { text-align: center; }
.encabezado__titulo h1 { margin: 0; font-size: 20px; font-weight: 500; }
.encabezado__titulo p { margin: 0; font-size: 14px; color: var(--texto-2); }

/* ---------- Contenido ---------- */
.contenido { max-width: 1120px; margin: 0 auto; padding: 24px 16px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.tarjeta h2 { margin: 0 0 12px; font-size: 18px; font-weight: 500; }
.paso + .paso { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--neutro); }
.paso[aria-disabled="true"] { opacity: .55; }
.ayuda { margin: 8px 0 0; font-size: 14px; color: var(--texto-2); }

/* Zona de arrastre (también es un botón accesible: el input real está sobre ella, enfocable) */
.zona { position: relative; border: 2px dashed var(--primario); border-radius: var(--radio); background: #F7FAFD; padding: 24px 16px; text-align: center; cursor: pointer; transition: background .15s; }
.zona:hover, .zona.zona--arrastrando { background: #E8F1FA; }
.zona:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }
.zona input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona__icono { display: block; font-size: 28px; line-height: 1; color: var(--primario); }
.zona__titulo { display: block; margin-top: 4px; font-weight: 500; color: var(--primario); }
.zona__sub { display: block; font-size: 14px; color: var(--texto-2); }
.zona--con-archivo { border-style: solid; }
.zona--bloqueada { cursor: default; opacity: .7; }
.zona--bloqueada input[type="file"] { cursor: default; }

/* Campos y botones */
.campo { margin-top: 12px; }
.campo label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--neutro-fuerte); }
.campo input[type="password"], .campo input[type="text"] { width: 100%; padding: 10px 12px; font: inherit; color: inherit; background: var(--blanco); border: 1px solid #9E9E9E; border-radius: var(--radio); }
.campo input[type="file"] { width: 100%; font: inherit; }
.campo__fila { display: flex; gap: 8px; }
.campo__fila input { flex: 1 1 auto; min-width: 0; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font: 500 14px/1 "Roboto", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--blanco); background: var(--primario); border: 1px solid var(--primario); border-radius: var(--radio); cursor: pointer; }
.boton:hover:not(:disabled) { background: #1F5C99; border-color: #1F5C99; }
.boton:disabled { cursor: not-allowed; color: rgba(0, 0, 0, .38); background: rgba(0, 0, 0, .12); border-color: transparent; }
.boton--secundario { color: var(--primario); background: var(--blanco); }
.boton--secundario:hover:not(:disabled) { background: #E8F1FA; border-color: var(--primario); }
.boton--ancho { width: 100%; margin-top: 16px; }
.boton--icono { min-width: 44px; padding: 0 12px; }
.boton[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boton[aria-busy="true"]::before { animation-duration: 3s; } }

/* Avisos */
.aviso { margin-top: 16px; padding: 12px 16px; border-radius: var(--radio); border: 1px solid; font-size: 15px; }
.aviso--error { color: var(--error); background: #FDECEE; border-color: var(--error); }
.banner-pruebas { padding: 8px 16px; text-align: center; font-size: 14px; font-weight: 500; color: #4A3200; background: #FFE9A8; border-bottom: 1px solid #C79100; }
.banner-pruebas[hidden] { display: none; }
.aviso--info { color: var(--neutro-fuerte); background: #EAF4FD; border-color: var(--acento); }
.aviso .boton { margin-top: 8px; }
.confianza { margin: 16px 0 0; font-size: 14px; color: var(--neutro-fuerte); background: var(--neutro); border-radius: var(--radio); padding: 12px 16px; }

.como-funciona { margin-top: 24px; padding: 16px; background: var(--fondo); border-radius: var(--radio); font-size: 14px; }
.como-funciona h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.como-funciona ol { margin: 0; padding-left: 20px; }

/* ---------- Manifiesto ---------- */
.vacio { display: grid; gap: 8px; }
.esqueleto { height: 14px; border-radius: 2px; background: var(--neutro); }
.esqueleto:nth-child(1) { width: 60%; height: 18px; }
.esqueleto:nth-child(3) { width: 90%; }
.esqueleto:nth-child(5) { width: 75%; }
.resumen { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; font-size: 14px; }
.resumen dt { color: var(--texto-2); }
.resumen dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.texto-manifiesto { max-height: 360px; overflow: auto; padding: 12px; font: 14px/1.5 "Roboto", system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); }
.vence { margin: 12px 0 0; font-size: 14px; color: var(--texto-2); }
.vence strong { font-variant-numeric: tabular-nums; color: var(--neutro-fuerte); }
.vence--poco strong { color: var(--error); }

/* ---------- Resultado ---------- */
.resultado h2 { color: var(--exito); }
.resultado .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* ---------- Pie ---------- */
.pie { max-width: 1120px; margin: 0 auto; padding: 8px 16px 32px; font-size: 14px; color: var(--texto-2); text-align: center; }

/* ---------- Móvil: una columna; el manifiesto queda debajo del paso 1 ---------- */
@media (max-width: 800px) {
  .contenido { grid-template-columns: minmax(0, 1fr); }
  .encabezado__fila { flex-wrap: wrap; justify-content: center; }
  .encabezado__titulo { order: 3; flex-basis: 100%; }
  .tarjeta { padding: 16px; }
}

.solo-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }