/* driver-cmr.css — Estilos exclusivos de Driver CMR.
 *
 * Todos los selectores llevan el prefijo .dcmr- y ninguno es global: esta hoja
 * no puede afectar a ninguna otra página del sitio aunque se cargue por error.
 * No hay reset ni redefinición de elementos sueltos.
 *
 * Los colores salen de los tokens de design-system.css, que NO se toca. La
 * única excepción es el borde de los controles: --ds-line (#dbe7f5) da 1,25:1
 * contra blanco y WCAG 2.2 pide 3:1 para el borde de un control (1.4.11), así
 * que aquí se usa un tono propio de la misma gama que llega a 3,15:1. El token
 * original se sigue usando para separadores decorativos, donde ese mínimo no
 * aplica.
 */

.dcmr-app {
  --dcmr-borde-control: #7d93b0;   /* 3,15:1 sobre blanco */
  --dcmr-foco: var(--ds-blue, #006cff);
  --dcmr-destacado: #fff8e6;
  --dcmr-destacado-borde: var(--ds-warning, #f59e0b);
  width: min(100% - 2rem, 1100px);
  margin: 0 auto;
  padding-block: var(--ds-space-8, 2rem);
  color: var(--ds-ink, #0b1628);
}

/* ── Aviso permanente de tratamiento local ─────────────────────────────── */

.dcmr-privacidad {
  display: flex;
  gap: var(--ds-space-3, .75rem);
  align-items: flex-start;
  margin: 0 0 var(--ds-space-6, 1.5rem);
  padding: var(--ds-space-4, 1rem);
  background: var(--ds-surface-2, #f5f9ff);
  border: 1px solid var(--dcmr-borde-control);
  border-radius: var(--ds-radius-sm, 12px);
  font-size: .95rem;
  line-height: 1.5;
}

.dcmr-privacidad strong { color: var(--ds-blue-600, #0b4f9f); }

/* ── Cabecera del editor ───────────────────────────────────────────────── */

.dcmr-cabecera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-space-4, 1rem);
  margin-bottom: var(--ds-space-6, 1.5rem);
}

/* ── Navegación por pasos ──────────────────────────────────────────────── */

.dcmr-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, .5rem);
  margin-bottom: var(--ds-space-5, 1.25rem);
  padding: 0;
  list-style: none;
}

.dcmr-pasos__item {
  padding: .6rem 1rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ds-blue-600, #0b4f9f);
  background: var(--ds-surface, #fff);
  border: 1px solid var(--dcmr-borde-control);
  border-radius: 999px;
  cursor: pointer;
}

.dcmr-pasos__item:hover { background: var(--ds-surface-3, #eaf3ff); }

.dcmr-pasos__item.es-actual {
  color: #fff;
  background: var(--ds-blue-600, #0b4f9f);   /* 7,97:1 con el blanco */
  border-color: var(--ds-blue-600, #0b4f9f);
}

.dcmr-indicador {
  margin: 0 0 var(--ds-space-4, 1rem);
  color: var(--ds-muted, #64748b);
  font-size: .9rem;
}

/* ── Casillas ──────────────────────────────────────────────────────────── */

.dcmr-paso {
  margin: 0;
  padding: var(--ds-space-5, 1.25rem);
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: var(--ds-radius-md, 18px);
  background: var(--ds-surface, #fff);
}

.dcmr-paso > legend {
  padding-inline: var(--ds-space-3, .75rem);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
}

.dcmr-paso > legend:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 2px;
}

.dcmr-casilla {
  margin-block: var(--ds-space-5, 1.25rem);
  padding: var(--ds-space-4, 1rem);
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: var(--ds-radius-sm, 12px);
  background: var(--ds-surface-2, #f5f9ff);
}

.dcmr-casilla__cab {
  display: flex;
  gap: var(--ds-space-3, .75rem);
  align-items: baseline;
  margin-bottom: var(--ds-space-3, .75rem);
}

.dcmr-casilla__num {
  flex: none;
  min-width: 1.9rem;
  padding: .15rem .45rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--ds-blue-600, #0b4f9f);
  border-radius: var(--ds-radius-xs, 8px);
}

.dcmr-casilla__tit h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ds-navy, #061833);
}

.dcmr-casilla__oficial {
  margin: .15rem 0 0;
  font-size: .8rem;
  font-style: italic;
  color: var(--ds-muted, #64748b);   /* 4,50:1 sobre la superficie 2 */
}

/* La casilla 8 —las reservas del transportista— se distingue del resto. */
.dcmr-casilla--destacada {
  background: var(--dcmr-destacado);
  border-color: var(--dcmr-destacado-borde);
  border-left-width: 5px;
}

.dcmr-aviso-reservas {
  margin: 0 0 var(--ds-space-3, .75rem);
  font-size: .92rem;
  color: var(--ds-ink, #0b1628);
}

.dcmr-plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, .5rem);
  align-items: center;
  margin-bottom: var(--ds-space-3, .75rem);
}

.dcmr-plantillas__tit {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
}

.dcmr-contador {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: var(--ds-muted, #64748b);
}

/* ── Campos ────────────────────────────────────────────────────────────── */

.dcmr-campo {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-block: var(--ds-space-3, .75rem);
}

.dcmr-campo > label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ds-ink, #0b1628);
}

.dcmr-campo > input,
.dcmr-campo > textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ds-ink, #0b1628);
  background: var(--ds-surface, #fff);
  border: 1px solid var(--dcmr-borde-control);
  border-radius: var(--ds-radius-xs, 8px);
}

.dcmr-campo > textarea { resize: vertical; min-height: 4rem; }

.dcmr-campo > input:focus-visible,
.dcmr-campo > textarea:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 1px;
  border-color: var(--dcmr-foco);
}

.dcmr-campo > input[aria-invalid="true"],
.dcmr-campo > textarea[aria-invalid="true"] {
  border-color: var(--ds-danger, #e11d48);
  border-width: 2px;
}

/* ── Desplegables ──────────────────────────────────────────────────────
   Los <select> nativos rompían la coherencia visual: en móvil abren el
   selector del sistema operativo y en escritorio pintan la flecha del
   navegador. La página carga ds-select.css/ds-select.js, el mismo
   componente que ya usan contacto, Lex, Docs, Ticket, Avisos y RRHH.
   Aquí solo se adapta a este formulario: su altura (44 px, la de los
   demás campos) y su borde accesible — el #d4dfec del componente da
   1,3:1 sobre blanco y WCAG 2.2 (1.4.11) pide 3:1 en el borde de un
   control, que es el motivo de --dcmr-borde-control. */
.dcmr-app .ds-select__trigger {
  min-height: 44px;
  padding: .55rem .7rem;
  font-size: .95rem;
  font-weight: 400;
  border-color: var(--dcmr-borde-control);
  border-radius: var(--ds-radius-xs, 8px);
  box-shadow: none;
}

.dcmr-app .ds-select__trigger:hover { border-color: var(--dcmr-foco); }

.dcmr-app .ds-select.is-open .ds-select__trigger,
.dcmr-app .ds-select__trigger:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 1px;
  border-color: var(--dcmr-foco);
  box-shadow: none;
}

.dcmr-app .ds-select__panel {
  border-color: var(--dcmr-borde-control);
  border-radius: var(--ds-radius-sm, 12px);
}

.dcmr-ayuda {
  margin: 0;
  font-size: .83rem;
  color: var(--ds-muted, #64748b);
}

.dcmr-error {
  margin: 0;
  min-height: 1em;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ds-danger, #e11d48);   /* 4,70:1 sobre blanco */
}

.dcmr-error:empty { min-height: 0; }

.dcmr-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 var(--ds-space-4, 1rem);
}

.dcmr-rejilla--mercancia {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ── Mercancía ─────────────────────────────────────────────────────────── */

.dcmr-linea {
  margin: 0 0 var(--ds-space-4, 1rem);
  padding: var(--ds-space-4, 1rem);
  border: 1px solid var(--dcmr-borde-control);
  border-radius: var(--ds-radius-sm, 12px);
  background: var(--ds-surface, #fff);
}

.dcmr-linea > legend {
  padding-inline: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ds-blue-600, #0b4f9f);
}

.dcmr-linea__acciones,
.dcmr-fila-sucesivo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, .5rem);
  align-items: flex-end;
}

.dcmr-fila-sucesivo {
  padding: var(--ds-space-3, .75rem);
  margin-bottom: var(--ds-space-3, .75rem);
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: var(--ds-radius-xs, 8px);
}

.dcmr-fila-sucesivo .dcmr-campo { flex: 1 1 150px; }

.dcmr-totales {
  margin: var(--ds-space-4, 1rem) 0 0;
  padding: var(--ds-space-3, .75rem);
  font-weight: 600;
  background: var(--ds-surface-3, #eaf3ff);
  border-radius: var(--ds-radius-xs, 8px);
}

.dcmr-adr {
  margin: var(--ds-space-5, 1.25rem) 0 0;
  padding: var(--ds-space-4, 1rem);
  border: 1px dashed var(--dcmr-borde-control);
  border-radius: var(--ds-radius-sm, 12px);
}

.dcmr-adr > legend {
  padding-inline: .5rem;
  font-weight: 600;
  color: var(--ds-navy, #061833);
}

/* ── Casilla 17: rejilla de pagos ──────────────────────────────────────── */

.dcmr-pagos__fila {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(2, minmax(120px, 1fr));
  gap: var(--ds-space-3, .75rem);
  align-items: end;
  padding-block: .35rem;
  border-bottom: 1px solid var(--ds-line, #dbe7f5);
}

.dcmr-pagos__concepto {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ds-ink, #0b1628);
}

/* Las etiquetas de la rejilla existen para el lector de pantalla; en pantalla
   la columna ya se entiende por su posición y repetirlas sería ruido. */
.dcmr-pagos__fila .dcmr-campo > label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Botones ───────────────────────────────────────────────────────────── */

.dcmr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                  /* objetivo tactil comodo */
  padding: 0 1.1rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: var(--ds-blue-600, #0b4f9f);
  border: 1px solid var(--ds-blue-600, #0b4f9f);
  border-radius: 999px;
  cursor: pointer;
}

.dcmr-btn:hover { background: var(--ds-navy, #061833); border-color: var(--ds-navy, #061833); }

/* El sistema declara `body.ds-app a { color: inherit }`, que con dos elementos
   y una clase gana en especificidad a .dcmr-btn: el CTA del hero, que es un
   <a>, salia con el color del texto (casi negro) sobre el azul del boton.
   Estos selectores llevan dos clases y ganan sin recurrir a !important. */
.dcmr-app a.dcmr-btn { color: #fff; }
.dcmr-app a.dcmr-btn:hover,
.dcmr-app a.dcmr-btn:focus { color: #fff; }
.dcmr-app a.dcmr-btn--suave { color: var(--ds-blue-600, #0b4f9f); }
.dcmr-app a.dcmr-btn--suave:hover { color: #fff; }

.dcmr-btn:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 2px;
}

.dcmr-btn:disabled {
  color: var(--ds-muted, #64748b);
  background: var(--ds-surface-3, #eaf3ff);
  border-color: var(--dcmr-borde-control);
  cursor: not-allowed;
}

.dcmr-btn--suave {
  color: var(--ds-blue-600, #0b4f9f);
  background: var(--ds-surface, #fff);
  border-color: var(--dcmr-borde-control);
}

.dcmr-btn--suave:hover {
  color: #fff;
  background: var(--ds-blue-600, #0b4f9f);
}

.dcmr-btn--peligro {
  color: #fff;
  background: var(--ds-danger, #e11d48);
  border-color: var(--ds-danger, #e11d48);
}

.dcmr-btn--peligro:hover { background: #a5102f; border-color: #a5102f; }

.dcmr-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3, .75rem);
  margin-top: var(--ds-space-6, 1.5rem);
}

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

.dcmr-errores {
  margin: var(--ds-space-5, 1.25rem) 0;
  padding: var(--ds-space-4, 1rem);
  background: #fff1f4;
  border: 2px solid var(--ds-danger, #e11d48);
  border-radius: var(--ds-radius-sm, 12px);
}

.dcmr-errores:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 2px;
}

.dcmr-errores h2 {
  margin: 0 0 var(--ds-space-2, .5rem);
  font-size: 1rem;
  color: #a5102f;                     /* 6,4:1 sobre el fondo claro */
}

.dcmr-errores ul { margin: 0; padding-left: 1.1rem; }

.dcmr-enlace-error {
  padding: 0;
  font: inherit;
  font-size: .9rem;
  color: #a5102f;
  text-align: left;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.dcmr-enlace-error:focus-visible {
  outline: 3px solid var(--dcmr-foco);
  outline-offset: 2px;
}

/* ── Vista previa del PDF ──────────────────────────────────────────────── */

.dcmr-vista {
  margin-top: var(--ds-space-6, 1.5rem);
  padding: var(--ds-space-4, 1rem);
  border: 1px solid var(--dcmr-borde-control);
  border-radius: var(--ds-radius-md, 18px);
  background: var(--ds-surface, #fff);
}

.dcmr-vista h2 {
  margin: 0 0 var(--ds-space-3, .75rem);
  font-size: 1.05rem;
  color: var(--ds-navy, #061833);
}

.dcmr-visor {
  width: 100%;
  height: min(80vh, 900px);
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: var(--ds-radius-xs, 8px);
}

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

/* ── Landing ───────────────────────────────────────────────────────────── */

.dcmr-hero {
  padding-block: var(--ds-space-10, 2.5rem);
}

.dcmr-hero h1 {
  margin: 0 0 var(--ds-space-3, .75rem);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--ds-navy, #061833);
}

.dcmr-hero p {
  max-width: 62ch;
  margin: 0 0 var(--ds-space-5, 1.25rem);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ds-ink, #0b1628);
}

.dcmr-seccion {
  padding-block: var(--ds-space-8, 2rem);
  border-top: 1px solid var(--ds-line, #dbe7f5);
}

.dcmr-seccion h2 {
  margin: 0 0 var(--ds-space-4, 1rem);
  font-size: 1.4rem;
  color: var(--ds-navy, #061833);
}

.dcmr-seccion p,
.dcmr-seccion li {
  max-width: 70ch;
  line-height: 1.6;
}

.dcmr-funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-4, 1rem);
  padding: 0;
  list-style: none;
}

.dcmr-funciones li {
  padding: var(--ds-space-4, 1rem);
  background: var(--ds-surface-2, #f5f9ff);
  border: 1px solid var(--ds-line, #dbe7f5);
  border-radius: var(--ds-radius-sm, 12px);
}

.dcmr-funciones h3 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  color: var(--ds-blue-600, #0b4f9f);
}

.dcmr-funciones p { margin: 0; font-size: .93rem; }

.dcmr-faq h3 {
  margin: var(--ds-space-4, 1rem) 0 .3rem;
  font-size: 1.02rem;
  color: var(--ds-navy, #061833);
}

.dcmr-faq p { margin: 0; }

@media (max-width: 640px) {
  .dcmr-pagos__fila { grid-template-columns: 1fr; }
  .dcmr-pagos__fila .dcmr-campo > label {
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcmr-app * { transition: none !important; }
}