/* =====================================================================
   driver-deca.css — Página y editor del documento electrónico de control
   ---------------------------------------------------------------------
   La página hace dos cosas seguidas: explica la obligación y la resuelve.
   Por eso el contenido va en columna estrecha y legible, y el editor se
   abre a todo el ancho: leer pide una medida de línea corta, rellenar un
   formulario de ocho campos pide sitio.
   ===================================================================== */

.ddeca-envoltorio {
  max-width: 1180px;
  margin: 0 auto;
  /* El encabezado del sitio es position:fixed y layout.js sustituye el div
     que lo contiene, así que la altura de la barra hay que reservarla aquí. */
  padding: 7.5rem 1.25rem 4.5rem;
}

/* ── Entrada ────────────────────────────────────────────────────── */

.ddeca-hero { margin-bottom: 3.5rem; }

.ddeca-aviso-fecha {
  display: inline-block;
  background: rgba(225, 29, 72, .1);
  color: var(--ds-danger, #e11d48);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border-radius: 999px;
  margin: 0 0 1.25rem;
}

.ddeca-hero h1 {
  font: 600 clamp(2rem, 4.2vw, 3rem)/1.12 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 1.1rem;
  max-width: 20ch;
}

.ddeca-entradilla {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ds-ink, #0b1628);
  margin: 0 0 1.1rem;
  max-width: 62ch;
}

.ddeca-entradilla--suave {
  color: var(--ds-muted, #64748b);
  font-size: 1rem;
}

/* ── Secciones de contenido ─────────────────────────────────────── */

.ddeca-seccion {
  margin-bottom: 3.25rem;
  scroll-margin-top: 6rem;          /* que el ancla no quede bajo la barra fija */
}

.ddeca-seccion h2 {
  font: 600 clamp(1.4rem, 2.4vw, 1.9rem)/1.25 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--ds-line, #dbe7f5);
}

.ddeca-seccion p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ds-ink, #0b1628);
  margin: 0 0 1rem;
  max-width: 72ch;
}

.ddeca-nota {
  background: #f4f8fd;
  border-left: 3px solid var(--ds-blue, #006cff);
  border-radius: .4rem;
  padding: .9rem 1.1rem;
  font-size: .95rem !important;
  color: var(--ds-muted, #64748b) !important;
}

.ddeca-lista {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  max-width: 78ch;
}

.ddeca-lista li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .85rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ds-ink, #0b1628);
}

.ddeca-lista li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .62rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--ds-blue, #006cff);
}

/* Referencias al articulado: discretas pero siempre visibles, que son
   la prueba de que esto no está escrito de oído. */
.ddeca-art {
  font-size: .78rem;
  font-weight: 400;
  color: var(--ds-muted, #64748b);
  letter-spacing: .01em;
}

.ddeca-lista--cumplimiento li { padding-left: 1.6rem; }

/* ── Bulos ──────────────────────────────────────────────────────── */

.ddeca-bulos { margin: 0; max-width: 78ch; }

.ddeca-bulos dt {
  position: relative;
  padding-left: 1.7rem;
  font-weight: 600;
  color: var(--ds-danger, #e11d48);
  margin-bottom: .3rem;
  font-size: 1rem;
  line-height: 1.5;
}

.ddeca-bulos dt::before {
  content: "✗";
  position: absolute;
  left: .15rem;
  top: 0;
}

.ddeca-bulos dd {
  margin: 0 0 1.35rem 1.7rem;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ds-ink, #0b1628);
}

/* ── Sanción ────────────────────────────────────────────────────── */

.ddeca-seccion--multa {
  background: #fff5f7;
  border: 1px solid #f0c9d2;
  border-radius: .85rem;
  padding: 1.75rem;
}

.ddeca-seccion--multa h2 { border-bottom-color: #f0c9d2; }

.ddeca-importe {
  font: 600 clamp(2rem, 4vw, 2.75rem)/1.1 "Montserrat", Arial, sans-serif !important;
  color: var(--ds-danger, #e11d48);
  margin: 1.25rem 0 !important;
}

/* ── Editor ─────────────────────────────────────────────────────── */

.ddeca-intro-editor {
  color: var(--ds-muted, #64748b) !important;
  margin-bottom: 1.75rem !important;
}

.ddeca-bloque {
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: .75rem;
  padding: 1.35rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem;
  background: #fff;
}

.ddeca-bloque legend {
  font: 600 1.05rem/1.3 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  padding: 0 .55rem;
  margin-left: -.55rem;
}

.ddeca-ayuda {
  font-size: .88rem !important;
  line-height: 1.55;
  color: var(--ds-muted, #64748b) !important;
  margin: 0 0 1.1rem !important;
  max-width: 70ch;
}

.ddeca-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .ddeca-campos { grid-template-columns: 1fr 1fr; }
  .ddeca-campo--ancho { grid-column: 1 / -1; }
}

.ddeca-campo { display: block; }

.ddeca-campo > span {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
  margin-bottom: .35rem;
}

.ddeca-campo > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ds-muted, #64748b);
}

.ddeca-campo input,
.ddeca-campo select,
.ddeca-campo textarea {
  width: 100%;
  padding: .72rem .85rem;
  font: 400 1rem/1.45 "Montserrat", Arial, sans-serif;
  color: var(--ds-ink, #0b1628);
  background: #fff;
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: .5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ddeca-campo textarea { resize: vertical; min-height: 4.5rem; }

.ddeca-campo input:focus,
.ddeca-campo select:focus,
.ddeca-campo textarea:focus {
  outline: none;
  border-color: var(--ds-blue, #006cff);
  box-shadow: 0 0 0 3px rgba(0, 108, 255, .16);
}

.ddeca-recordar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.1rem;
  font-size: .9rem;
  color: var(--ds-ink, #0b1628);
  cursor: pointer;
}

.ddeca-recordar input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ds-blue, #006cff);
  cursor: pointer;
}

.ddeca-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Envíos ─────────────────────────────────────────────────────── */

.ddeca-envio {
  border: 1px dashed var(--ds-line, #dbe7f5);
  border-radius: .6rem;
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
  background: #fbfdff;
}

.ddeca-envio-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .85rem;
}

.ddeca-envio-titulo {
  font: 600 .95rem/1.2 "Montserrat", Arial, sans-serif;
  color: var(--ds-blue, #006cff);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ddeca-quitar {
  background: none;
  border: 0;
  color: var(--ds-danger, #e11d48);
  font: 600 .85rem/1 "Montserrat", Arial, sans-serif;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: .35rem;
}

.ddeca-quitar:hover { background: rgba(225, 29, 72, .08); }

/* ── Botones y acciones ─────────────────────────────────────────── */

.ddeca-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.ddeca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.4rem;
  font: 600 .98rem/1.2 "Montserrat", Arial, sans-serif;
  color: #fff;
  background: var(--ds-blue, #006cff);
  border: 0;
  border-radius: .55rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}

.ddeca-btn:hover { background: #0057cc; color: #fff; }
.ddeca-btn:active { transform: translateY(1px); }
.ddeca-btn:disabled { background: #9dc2f5; cursor: progress; }

.ddeca-btn:focus-visible {
  outline: 3px solid rgba(0, 108, 255, .4);
  outline-offset: 2px;
}

.ddeca-btn--grande { padding: .95rem 1.9rem; font-size: 1.06rem; }

.ddeca-btn--suave {
  background: #fff;
  color: var(--ds-blue, #006cff);
  border: 1.5px solid var(--ds-line, #dbe7f5);
}

.ddeca-btn--suave:hover {
  background: #f4f8fd;
  color: var(--ds-blue, #006cff);
  border-color: var(--ds-blue, #006cff);
}

.ddeca-btn--suave:disabled { background: #f8fafc; color: #9dc2f5; }

.ddeca-estado {
  margin: .85rem 0 0;
  font-size: .9rem;
  color: var(--ds-muted, #64748b);
  min-height: 1.2em;
}

/* ── Errores ────────────────────────────────────────────────────── */

.ddeca-errores {
  background: #fff5f7;
  border: 1px solid #f0c9d2;
  border-left: 3px solid var(--ds-danger, #e11d48);
  border-radius: .5rem;
  padding: .95rem 1.1rem;
  margin-bottom: 1.35rem;
  font-size: .93rem;
  color: #8a2740;
}

.ddeca-errores p { margin: 0 0 .45rem; font-weight: 600; }
.ddeca-errores ul { margin: 0; padding-left: 1.2rem; }
.ddeca-errores li { margin-bottom: .25rem; }
.ddeca-errores:focus { outline: none; }

/* ── Resultado ──────────────────────────────────────────────────── */

.ddeca-resultado {
  border: 1px solid var(--ds-line, #dbe7f5);
  border-top: 4px solid var(--ds-success, #0f9f6e);
  border-radius: .85rem;
  padding: 1.75rem;
  margin-top: 2rem;
  background: #fff;
  box-shadow: 0 12px 34px rgba(6, 24, 51, .08);
}

.ddeca-resultado h3 {
  font: 600 1.3rem/1.25 "Montserrat", Arial, sans-serif;
  color: var(--ds-success, #0f9f6e);
  margin: 0 0 .35rem;
}

.ddeca-referencia {
  font: 600 1.45rem/1.2 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  letter-spacing: .06em;
  margin: 0 0 1.5rem;
}

.ddeca-resultado-cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 46rem) {
  .ddeca-resultado-cuerpo { grid-template-columns: auto 1fr; }
}

/* El QR se sirve como SVG y se escala sin perder nitidez: en el arcén lo
   van a escanear de una pantalla, a veces sucia y a contraluz. */
.ddeca-qr {
  width: 11rem;
  height: 11rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: .5rem;
}

.ddeca-qr svg { width: 100%; height: 100%; display: block; }

.ddeca-etiqueta {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-muted, #64748b);
  margin: 0 0 .3rem;
}

.ddeca-url {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  word-break: break-all;
}

.ddeca-url a { color: var(--ds-blue, #006cff); text-decoration: underline; }

/* ── Emitidos ───────────────────────────────────────────────────── */

.ddeca-emitidos {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ds-line, #dbe7f5);
}

.ddeca-emitidos h3 {
  font: 600 1.05rem/1.25 "Montserrat", Arial, sans-serif;
  color: var(--ds-navy, #061833);
  margin: 0 0 .4rem;
}

.ddeca-emitidos ul { margin: 1rem 0 0; padding: 0; list-style: none; }

.ddeca-emitidos li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--ds-line, #dbe7f5);
  font-size: .93rem;
}

.ddeca-emitidos li a {
  color: var(--ds-blue, #006cff);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}

.ddeca-emitidos li a:hover { text-decoration: underline; }
.ddeca-emitidos li span { color: var(--ds-muted, #64748b); }

/* ── Impresión ──────────────────────────────────────────────────── */

@media print {
  .ddeca-hero, .ddeca-seccion:not(#ddeca-editor), .ddeca-acciones { display: none; }
  .ddeca-envoltorio { padding: 0; }
}