:root {
  --verde-900: #2f6a2b;
  --verde-700: #3e8a37;
  --verde-500: #52a044;
  --lima: #8dc63f;
  --lima-claro: #eef6e2;
  --tinta: #2a2a2a;
  --gris-fondo: #f1f1f1;
  --gris-texto: #5f6360;
  --borde: #e2e5df;
  --error: #b3261e;
  --error-fondo: #fdecea;
  --ok-fondo: #eaf5df;
  --sombra-card: 0 2px 18px rgba(30, 60, 20, .10);
  --sombra-campo: 0 3px 12px rgba(0, 0, 0, .07);
  --ancho: 1250px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Dosis', 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--gris-fondo);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
img, svg { display: block; }
a { color: var(--verde-700); }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Encabezado ---------- */
.topbar {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(100deg, #3a8434 0%, #4f9a40 40%, #6aad4c 75%, #7bb855 100%);
  color: #fff;
}
.topbar__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marca { display: flex; flex-shrink: 0; }
.marca__logo { height: clamp(44px, 6vw, 62px); width: auto; }

.nav { display: flex; }
.nav__enlace {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 8px 20px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  color: #fff;
  font-size: 18px; font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav__enlace:hover { background: #fff; color: var(--verde-700); }
.nav__enlace svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Franja principal ---------- */
.franja {
  background: linear-gradient(to bottom,
    var(--gris-fondo) 0, var(--gris-fondo) 180px,
    var(--lima) 180px, var(--lima) 62%,
    var(--verde-500) 100%);
  padding: 0 20px 56px;
}
.franja__titulo {
  max-width: 1500px;
  margin: 56px auto 0;
  padding: 0 26px;
  color: #fff;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 500;
  letter-spacing: -.5px;
  line-height: 1.1;
}

.tarjeta {
  max-width: var(--ancho);
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--sombra-card);
  padding: 44px 64px 48px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.tarjeta__icono { width: 160px; margin-top: 4px; }
.tarjeta__titulo {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.4vw, 28px);
  font-weight: 500;
  color: var(--verde-500);
}
.tarjeta__lead { margin: 0 0 28px; color: var(--gris-texto); max-width: 60ch; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 22px; max-width: 640px; }
.campo { display: grid; gap: 8px; }
.campo__label { font-weight: 600; font-size: 17px; }
.campo__ayuda { font-size: 15px; color: var(--gris-texto); }

.input {
  width: 100%;
  height: 58px;
  padding: 0 22px;
  font: 500 20px 'Dosis', sans-serif;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: var(--sombra-campo);
  transition: border-color .15s;
}
.input::placeholder { color: var(--lima); opacity: 1; font-weight: 400; }
.input:focus { outline: none; border-color: var(--verde-500); box-shadow: 0 0 0 3px rgba(141,198,63,.35); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input--codigo { letter-spacing: 12px; font-size: 28px; font-weight: 600; text-align: center; max-width: 280px; }

.captcha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha__img {
  flex: 0 1 260px;
  width: 260px; height: auto;
  max-width: calc(100% - 56px);
  aspect-ratio: 260 / 84;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--lima-claro);
}
.captcha .input { flex: 1 1 180px; width: auto; min-width: 0; }
.captcha .input:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 10px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--verde-700);
  color: #fff;
  font: 600 18px 'Dosis', sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.btn:hover { background: var(--verde-900); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn--grande { min-height: 52px; padding: 12px 34px; font-size: 19px; justify-self: start; }
.btn--borde { background: #fff; color: var(--verde-700); box-shadow: inset 0 0 0 2px var(--verde-700); }
.btn--borde:hover { background: var(--lima-claro); }
.btn--texto { background: none; color: var(--verde-700); padding-inline: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.btn--texto:hover { background: none; text-decoration: underline; }

.btn-icono {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--lima-claro); color: var(--verde-700);
  display: grid; place-items: center; cursor: pointer;
}
.btn-icono:hover { background: #e0efcb; }
.btn-icono svg { width: 22px; height: 22px; }
.girando svg { animation: girar .6s ease; }
@keyframes girar { to { transform: rotate(360deg); } }

.mensaje {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 17px;
  border-left: 5px solid;
}
.mensaje--error { background: var(--error-fondo); color: var(--error); border-color: var(--error); }
.mensaje--ok { background: var(--ok-fondo); color: var(--verde-900); border-color: var(--lima); }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: girar .8s linear infinite;
}

/* ---------- Resultado / visor ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 48px 20px 64px; }
.seccion__titulo { margin: 0; color: var(--verde-500); font-size: clamp(26px, 4.2vw, 38px); font-weight: 500; line-height: 1.1; }
.resultado__cabecera {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px;
  margin-bottom: 22px;
}
.resultado__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.visor {
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--sombra-card);
  border-top: 6px solid var(--lima);
  overflow: hidden;
}
.visor iframe { display: block; width: 100%; height: min(82vh, 1100px); border: 0; background: #525659; }
.visor__nota { margin: 14px 0 0; font-size: 15px; color: var(--gris-texto); }

/* ---------- Panel de carga ---------- */
.panel-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 22px;
  color: var(--gris-texto);
}
.panel-barra strong { color: var(--tinta); }

.zona {
  position: relative;
  border: 2px dashed #b9d891;
  border-radius: 10px;
  background: var(--lima-claro);
  padding: 34px 24px;
  text-align: center;
  transition: background-color .15s, border-color .15s;
}
.zona.activa { background: #dcefc2; border-color: var(--verde-500); }
.zona__titulo { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--verde-700); }
.zona__texto { margin: 0 0 18px; color: var(--gris-texto); }
.zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.opciones {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin: 20px 0 6px;
}
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: var(--verde-700); }
.resumen { color: var(--gris-texto); font-size: 16px; }

.cola { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cola__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.cola__estado-icono { width: 24px; height: 24px; color: var(--lima); }
.cola__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cola__detalle { grid-column: 2 / 4; font-size: 15px; color: var(--gris-texto); }
.cola__tamano { font-size: 15px; color: var(--gris-texto); }
.cola__barra { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: #eceee9; overflow: hidden; }
.cola__barra span { display: block; height: 100%; width: 0; background: var(--lima); transition: width .2s; }
.cola__quitar { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--gris-texto); cursor: pointer; font-size: 22px; line-height: 1; }
.cola__quitar:hover { background: var(--gris-fondo); }
.cola__item[data-estado="ok"] { border-color: #c8e2a6; }
.cola__item[data-estado="ok"] .cola__estado-icono { color: var(--verde-700); }
.cola__item[data-estado="ok"] .cola__barra span { background: var(--verde-700); }
.cola__item[data-estado="error"] { border-color: #f1c0bb; background: #fffafa; }
.cola__item[data-estado="error"] .cola__estado-icono, .cola__item[data-estado="error"] .cola__detalle { color: var(--error); }
.cola__item[data-estado="error"] .cola__barra span { background: var(--error); }

.acciones-carga { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.tabla-wrap { overflow-x: auto; background: #fff; border-radius: 6px; box-shadow: var(--sombra-card); }
.tabla { width: 100%; border-collapse: collapse; font-size: 17px; }
.tabla th { text-align: left; font-weight: 600; color: #fff; background: var(--verde-700); padding: 12px 18px; }
.tabla td { padding: 11px 18px; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla__vacia { color: var(--gris-texto); text-align: center; padding: 28px !important; }

/* ---------- Pie ---------- */
.pie {
  background: var(--verde-900);
  color: rgba(255,255,255,.9);
  font-size: 16px;
}
.pie__inner { max-width: 1500px; margin: 0 auto; padding: 22px 46px; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }
.pie a { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tarjeta { padding: 40px 44px 44px; gap: 40px; }
}
@media (max-width: 860px) {
  .franja {
    background: linear-gradient(to bottom, var(--gris-fondo) 0, var(--gris-fondo) 80px,
      var(--lima) 80px, var(--lima) 70%, var(--verde-500) 100%);
    padding: 0 12px 36px;
  }
  .tarjeta { grid-template-columns: 1fr; gap: 16px; padding: 28px 24px 32px; }
  .tarjeta__icono { width: 84px; }
  .franja__titulo { margin-top: 32px; padding: 0 8px; }
  .form { max-width: none; }
  .btn--grande { justify-self: stretch; }
  .seccion { padding: 36px 12px 48px; }
  .resultado__cabecera { align-items: stretch; flex-direction: column; }
  .visor iframe { height: 72vh; }
  .pie__inner { padding: 20px 16px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .topbar__inner { padding: 10px 14px; gap: 10px; }
  .nav__enlace { padding: 6px 14px; font-size: 16px; }
  .tarjeta { padding: 24px 18px 28px; }
  .tarjeta__icono { display: none; }
  .tarjeta__lead { margin-bottom: 22px; }
  .input { height: 54px; padding: 0 16px; font-size: 18px; }
  .input--codigo { max-width: none; font-size: 26px; letter-spacing: 10px; }
  .captcha { gap: 10px; }
  .captcha .input { flex-basis: 100%; }

  .resultado__acciones { flex-direction: column; }
  .resultado__acciones .btn { width: 100%; }
  .visor iframe { height: 64vh; }

  .panel-barra { font-size: 16px; }
  .panel-barra span { overflow-wrap: anywhere; }
  .zona { padding: 26px 16px; }
  .zona__titulo { font-size: 20px; }
  .opciones { flex-direction: column; align-items: flex-start; }
  .cola__item { grid-template-columns: 22px minmax(0, 1fr) 32px; gap: 4px 10px; padding: 10px 10px 10px 12px; }
  .cola__estado-icono { width: 22px; height: 22px; }
  .cola__tamano { display: none; }
  .cola__barra, .cola__detalle { grid-column: 2 / 4; }
  .acciones-carga { flex-direction: column; align-items: stretch; }
  .acciones-carga .btn { width: 100%; }

  .tabla { font-size: 15px; }
  .tabla th, .tabla td { padding: 10px 12px; }
  .tabla th:nth-child(2), .tabla td:nth-child(2) { display: none; }
}
@media (max-width: 400px) {
  .btn { font-size: 16px; letter-spacing: .3px; padding-inline: 16px; }
  .panel-barra .btn--texto { padding-left: 0; }
}
@media (max-width: 370px) {
  .nav__enlace span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav__enlace { width: 44px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}