/* ============================================================
   Panel Trámites — LAS PANTALLAS DENTRO DE LA CÁSCARA (zip #5 · tanda 2), 1-oct-2026
   Las 7 del #4 (01 Hoy · 02 Buscar · 04 Ficha + Salir del parque · 05 Ministerio · 06 Cerrar el alta · 07 Capacitación)
   cambian de armazón: cabecera en la línea de la búsqueda, bloques de B4 y su versión de teléfono (filas apiladas con la
   acción al ancho, barra verde propia en los detalles, botón principal abajo). El COMPORTAMIENTO no cambia.
   Referencia: `design/handoff/2026-10-01_cascara_tramites_v2/Tramites v2.dc.html` (web 1280 y móvil 375).
   Va después de admin-cascara.css. Como los estilos de cada pantalla viven en index.html (que carga después), las
   reglas de aquí llevan `.cs-main` delante para ganarles sin `!important`.
   OJO Sin modo oscuro (zip #6). OJO Nada de datos ni de marca aquí: solo la forma.
   ============================================================ */

/* ---------- 01 · HOY ---------- */
.cs-main .hoy-top { align-items: flex-start; flex-wrap: nowrap; margin: 0 0 16px; }
.cs-main .hoy-top__t { flex: 1; min-width: 0; }
.cs-main .hoy-top .bk-disparador { margin-top: 2px; }
.cs-main .hoy-barra { align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.cs-main .hoy-barra .hoy-tira { flex: 0 1 auto; }
.cs-main .hoy-barra .a-chips { flex: 1 1 auto; justify-content: flex-end; }
/* filtros con su cifra como el dibujo: «Vencido · 2» */
.cs-main .hoy .a-chip .n, .cs-main .min .a-chip .n { background: none; padding: 0; min-width: 0; color: inherit; font-weight: 700; }
.cs-main .hoy .a-chip .n::before, .cs-main .min .a-chip .n::before { content: '· '; font-weight: 400; }
.cs-main .hoy-pie { justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .cs-main .hoy-saludo__hola { display: none; }
  .cs-main .hoy-top .bk-disparador { display: none; }
  .cs-main .hoy-top h1 { font-size: 23px; }
  /* el teléfono no lleva la tira (01 móvil): sus cifras están en sus pantallas; los filtros, en una sola línea que se desliza */
  .cs-main .hoy-barra .hoy-tira { display: none; }
  .cs-main .hoy-barra { margin: 0 -16px 12px; }
  .cs-main .hoy-barra .a-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; }
  .cs-main .hoy-barra .a-chips::-webkit-scrollbar { display: none; }
  .cs-main .hoy-barra .a-chip { flex: none; min-height: 40px; }
  /* cada fila es una tarjeta: placa · estado · tipo arriba, el qué en medio, la acción al ancho abajo */
  .cs-main .hoy-lista { background: transparent; border: 0; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
  .cs-main .hoy-fila { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'placa pill tipo' 't t t' 'acc acc acc' 'rad rad rad';
    gap: 10px 8px; padding: 14px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; }
  .cs-main .hoy-fila.rojo { background: #FBEEEC; border-color: #E3B4AC; }
  .cs-main .hoy-fila > .placa { grid-area: placa; justify-self: start; }
  .cs-main .hoy-fila > .apill { grid-area: pill; justify-self: start; }
  .cs-main .hoy-fila__tipo { grid-area: tipo; display: block; justify-self: end; text-align: right; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-main .hoy-fila__t { grid-area: t; }
  .cs-main .hoy-fila__acc { grid-area: acc; justify-self: stretch; }
  .cs-main .hoy-fila__acc .a-btn { width: 100%; min-height: 44px; justify-content: center; }
  .cs-main .hoy-fila__acc:empty { display: none; }
  .cs-main .hoy-vigilar { padding: 0; }
  .cs-main .hoy-fila__rad { grid-area: rad; }
  .cs-main .hoy-falla { border: 1px solid #EFC9C4; border-radius: 14px; }
  .cs-main .hoy-pie { flex-direction: column; align-items: flex-start; }
}

/* ---------- 04 · FICHA DEL CARRO (+ Salir del parque, que es un bloque de la ficha) ---------- */
.cs-main .fc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cs-main .fc-miga { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cs-gris); cursor: default; }
.cs-main .fc-miga:hover { text-decoration: none; }
.cs-main .fc-miga button { border: 0; background: transparent; padding: 2px 0; font: inherit; font-family: var(--font-display); font-weight: 700; color: var(--btn); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cs-main .fc-miga button:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-main .fc-miga span::before { content: '›'; margin-right: 6px; color: var(--cs-gris); }
.cs-main .fc-miga span { font-weight: 600; color: var(--cs-tinta); }
/* la cabecera: el bloque «Cabecera de ficha» de B4 a todo el ancho, encima de las dos columnas */
.cs-main .fc-cab { display: block; padding: 0; margin-bottom: 18px; }
.cs-main .fc-cab .bq-ficha { background: transparent; border: 0; padding: 16px 20px; gap: 16px; flex-wrap: nowrap; }
.cs-main .fc-cab .bq-ficha__placa { font-size: 17px; padding: 8px 14px; }
.cs-main .fc-cab .bq-ficha__t b { font-size: 16px; }
.cs-main .fc-cab .bq-ficha__t > span { margin-top: 2px; font-size: 13px; }
.bq-ficha__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bq-ficha__per { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; padding-left: 16px; border-left: 1px solid var(--cs-borde); }
.bq-ficha__per-t { min-width: 0; }
.cs-main .fc-cab .bq-ficha__per .fc-cab__linea { margin: 0; line-height: 1.35; }
.cs-main .fc-cab .bq-ficha__per .fc-cab__linea + .fc-cab__linea { margin-top: 6px; }
.cs-main .fc-cab .bq-ficha__per .fc-cab__linea b { display: block; font-size: 14px; color: var(--cs-tinta); }
.cs-main .fc-cab .bq-ficha__per .fc-cab__linea span { font-size: 12px; color: var(--cs-gris); }
.cs-main .fc-cab .bq-ficha__av { width: 40px; height: 40px; font-size: 13px; }
.cs-main .fc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cs-main .fc-col > .a-card + .a-card, .cs-main .fc-col > * + * { margin-top: 18px; }
.cs-main .fc-tram { background: var(--cs-lienzo); border-color: transparent; }
.cs-main .fc-falla .a-btn { margin-left: auto; flex: none; }
.cs-main .fc-bitas { display: flex; flex-direction: column; gap: 8px; }
/* 04 · bitácora (tanda 3): el aviso de fuera de orden, la línea en ámbar; la anulación, la palabra en rojo; al pie, el
   tiempo del grupo («Cuánto tarda cada paso…», la mediana solo con 5 altas cerradas o más) */
.cs-main .bq-bita.orden { background: #FBF3E0; }
.cs-main .bq-bita.orden p b { color: #9A6B0F; font-weight: 600; }
.cs-main .bq-bita.anula p b { color: #A43F33; font-weight: 600; }
.cs-main .fc-tarda { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; margin-top: 12px;
  padding: 12px 10px 0; border-top: 1px solid var(--cs-borde); font-size: 12.5px; color: var(--cs-gris); line-height: 1.45; }
.cs-main .fc-tarda em { font-style: italic; }
@media (max-width: 1100px) {
  .cs-main .fc-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-main .fc-cab .bq-ficha { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  /* el teléfono: la barra verde propia (volver · placa · «Iniciar trámite») reemplaza la miga y el botón de la tarjeta;
     la tarjeta queda con la persona y los estados, y los bloques siguen el orden del dibujo (04 móvil) */
  .cs-main .fc-top { display: none; }
  .cs-main .fc-cab .bq-ficha { padding: 14px; gap: 10px; }
  .cs-main .fc-cab .bq-ficha__placa, .cs-main .fc-cab .bq-ficha__t > b, .cs-main .fc-cab .bq-ficha__t > span, .cs-main .fc-cab .fc-iniciar { display: none; }
  .cs-main .fc-cab .bq-ficha__t { order: 2; flex-basis: 100%; }
  .cs-main .fc-cab .bq-ficha__chips { margin-top: 0; }
  .cs-main .fc-cab .bq-ficha__per { order: 1; flex: 1 1 100%; padding-left: 0; border-left: 0; }
  .cs-main .fc-grid { display: flex; flex-direction: column; gap: 0; }
  .cs-main .fc-col { display: contents; }
  .cs-main .fc-col > .a-card + .a-card, .cs-main .fc-col > * + * { margin-top: 0; }
  .cs-main .fc-b-vivos { order: 1; } .cs-main .fc-b-docs { order: 2; } .cs-main .fc-grid #pq-bloque { order: 3; }
  .cs-main .fc-b-contrato { order: 4; } .cs-main .fc-b-bita { order: 5; } .cs-main .fc-b-datos { order: 6; } .cs-main .fc-b-rads { order: 7; }
  .cs-main .fc-iniciar.en-barra .fc-menu { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 160px); overflow-y: auto; }
}

/* ---------- 02 · BUSCAR (la paleta vive fuera de .cs-main: se le gana con dos clases) ---------- */
.bk-cerrar { display: none; }
.bk-grupo .fc-falla { align-items: center; }
.bk-grupo .fc-falla .a-btn { margin-left: auto; flex: none; }
@media (max-width: 860px) {
  /* el teléfono: hoja a pantalla completa, «Cerrar» en texto en vez de esc, sin la fila de atajos (02 móvil) */
  body .bk-velo { padding: 0; }
  .bk-velo .bk-caja { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; }
  .bk-velo .bk-entrada { padding: 8px 12px 8px 16px; min-height: 58px; box-sizing: border-box; }
  .bk-velo .bk-entrada > .bk-kbd { display: none; }
  .bk-cerrar { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 6px; border: 0; background: transparent;
    font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--btn); cursor: pointer; }
  .bk-velo .bk-cuerpo { flex: 1; background: var(--cs-lienzo); padding: 6px 12px 16px; }
  .bk-velo .bk-it { background: #fff; border: 1px solid var(--cs-borde); border-radius: 12px; padding: 12px; margin-bottom: 8px; min-height: 56px; }
  .bk-velo .bk-it.on { background: #fff; }
  .bk-velo .bk-it .bk-kbd { display: none; }
  .bk-velo .bk-pie { display: none; }
}

/* ---------- 05 · MINISTERIO ---------- */
@media (max-width: 860px) {
  /* pestañas en una línea que se desliza (como Hoy); «Pegar correo del RUNT» y actualizar se quedan en la franja, debajo */
  .cs-main .min-cab { flex-direction: column; align-items: stretch; gap: 10px; }
  .cs-main .min-cab .a-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; max-width: calc(100% + 32px); padding: 2px 16px 4px; scrollbar-width: none; }
  .cs-main .min-cab .a-chips::-webkit-scrollbar { display: none; }
  .cs-main .min-cab .a-chip { flex: none; min-height: 40px; }
  .cs-main .min-acc { margin-left: 0; }
  .cs-main .min-pegar { flex: 1; justify-content: center; min-height: 44px; }
  .cs-main .min-acc .a-btn { min-height: 44px; min-width: 44px; justify-content: center; }
  /* la tabla pasa a tarjetas (05 móvil): radicado + estado arriba · trámite y carro · radicado el · N° de pago y ficha */
  .cs-main .min-tabla { background: transparent; border: 0; box-shadow: none; overflow: visible; padding: 0; }
  .cs-main .min-tabla .a-table, .cs-main .min-tabla tbody { display: block; }
  .cs-main .min-tabla thead { display: none; }
  .cs-main .min-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'rad runt' 'tram carro' 'cuando cuando' 'pago ficha';
    gap: 8px 10px; align-items: center; padding: 14px; margin-bottom: 10px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; }
  .cs-main .min-tabla tbody td { display: block; padding: 0; border: 0; background: transparent; min-width: 0; }
  .cs-main .min-tabla tbody tr:has(> td.min-vacio) { display: block; }
  .cs-main .min-tabla .min-td-rad { grid-area: rad; }
  .cs-main .min-tabla .min-td-runt { grid-area: runt; justify-self: end; }
  .cs-main .min-tabla .min-tram { grid-area: tram; }
  .cs-main .min-tabla .min-td-carro { grid-area: carro; justify-self: end; align-self: start; }
  .cs-main .min-tabla .min-cuando { grid-area: cuando; white-space: normal; }
  .cs-main .min-tabla .min-dias { display: inline; }
  .cs-main .min-tabla .min-dias::before { content: ' · '; color: var(--ink-500); font-weight: 400; }
  .cs-main .min-tabla .min-td-pago { grid-area: pago; }
  .cs-main .min-tabla .min-td-ficha { grid-area: ficha; justify-self: end; display: flex; align-items: center; gap: 6px; }
  .cs-main .min-tabla td[data-t]::before { content: attr(data-t) ' '; font-size: 12.5px; color: var(--ink-500); }
  .cs-main .min-tabla .min-td-pago, .cs-main .min-tabla .min-cuando { font-size: 13px; color: var(--ink-500); }
  /* vencido: la tarjeta entera en rojo, como en Hoy */
  .cs-main .min-tabla tr.min-rojo { background: #FBEEEC; border-color: #E3B4AC; }
  .cs-main .min-tabla tr.min-rojo td { background: transparent; }
  .cs-main .min-tabla tr.min-rojo .min-td-rad b { color: var(--red); }
  /* falta el radicado: carro y estado arriba, el trámite, y la acción al ancho; el campo del radicado se abre pegado debajo */
  .cs-main .min-tabla tr.min-falta { grid-template-areas: 'carro runt' 'tram tram' 'acc acc'; background: #FCF7EC; border-color: #EBDDB8; }
  .cs-main .min-tabla tr.min-falta td { background: transparent; }
  .cs-main .min-tabla tr.min-falta .min-td-carro { justify-self: start; align-self: center; }
  .cs-main .min-tabla .min-td-vacia { display: none; }
  .cs-main .min-tabla .min-td-accion { grid-area: acc; }
  .cs-main .min-tabla .min-td-accion .a-btn { width: 100%; min-height: 44px; justify-content: center; }
  .cs-main .min-tabla tr.min-falta:has(+ tr.min-falta__rad) { margin-bottom: 0; border-bottom: 0; border-radius: 14px 14px 0 0; }
  .cs-main .min-tabla tr.min-falta__rad { display: block; padding: 0 14px 14px; border-top: 0; border-radius: 0 0 14px 14px; background: #FCF7EC; border-color: #EBDDB8; }
  /* el campo del radicado (y el del pago) al ancho: TORadicado los limita con estilo en línea, por eso el !important, solo aquí */
  .cs-main .min-tabla tr.min-falta__rad .fd-input { max-width: none !important; flex: 1 1 100% !important; }
  .cs-main .min-tabla tr.min-falta__rad .a-btn { width: 100%; min-height: 44px; justify-content: center; }
}

/* ---------- 06 · CERRAR EL ALTA ---------- */
.alta-resumen, .cs-pie-hueco { display: none; }
.cs-main .alta-pasos > .alta-resumen + .alta-paso { border-top: 0; }   /* la línea de resumen solo existe en el teléfono */
/* la web: maestro-detalle (lista compacta a la izquierda, el alta elegida a la derecha); sin elegida, la lista sola */
.cs-main .alta-md { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.cs-main .alta-md.agenda { grid-template-columns: minmax(0, 1fr); }
.cs-main .alta-md.agenda .alta-md__lista { display: none; }
.cs-main .alta-md .alta-grid { grid-template-columns: minmax(0, 1fr); }
.cs-main .alta-md .alta > .alta-cab > .a-btn { display: none; }      /* «Todas las altas»: la lista ya está al lado */
.cs-main .alta-lista.compacta { background: transparent; border: 0; box-shadow: none; padding: 0; }
.cs-main .alta-lista.compacta .a-card__head { padding: 0 2px 10px; }
.cs-main .alta-lista.compacta .alta-filas { gap: 10px; }
.cs-main .alta-lista.compacta .alta-fila { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'placa pill' 't t'; gap: 8px 10px;
  padding: 14px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; }
.cs-main .alta-lista.compacta .alta-fila:hover { background: #FAF8F3; }
.cs-main .alta-lista.compacta .alta-fila.on { border: 2px solid var(--cs-verde); padding: 13px; background: #fff; }
.cs-main .alta-lista.compacta .alta-fila > .placa { grid-area: placa; justify-self: start; }
.cs-main .alta-lista.compacta .alta-fila > .apill { grid-area: pill; justify-self: end; }
.cs-main .alta-lista.compacta .alta-fila__t { grid-area: t; }
.cs-main .alta-lista.compacta .alta-fila__t strong { white-space: normal; }
.cs-main .alta-lista.compacta .alta-fila__abrir { display: none; }
/* cerrar: lo que falta a la izquierda, el botón a la derecha (06) */
.cs-main .alta-cerrar__falta { flex: 1 1 240px; }
.cs-main .alta-cerrar .a-btn { margin-left: auto; }
@media (max-width: 1100px) {
  .cs-main .alta-md { display: block; }
  .cs-main .alta-md__lista { display: none; }
  .cs-main .alta-md .alta > .alta-cab > .a-btn { display: inline-flex; }
}
@media (max-width: 860px) {
  /* el teléfono: barra verde propia (Cerrar el alta · placa · N de 8), los pasos hechos en una línea, y «Cerrar el alta»
     con lo que falta fijos abajo (06 móvil). Mientras está el pie fijo, la barra de pestañas de abajo se esconde. */
  .cs-main .alta-cab { display: none; }
  body.cs-top-propia .cs-main .cs-cab { display: none; }          /* con la barra propia, el título de la página sobra */
  /* el paso 7 (capacitación y firmados) usa todo el ancho de la tarjeta, como en el dibujo; subir un firmado, al ancho */
  .cs-main .alta-paso .alta-p7 { margin-left: -42px; }
  .cs-main .alta-p7__zonas .up-zone { flex-wrap: wrap; }
  .cs-main .alta-p7__zonas .up-zone > .a-btn, .cs-main .alta-p7__zonas .up-zone > span:last-child { flex: 1 1 100%; }
  .cs-main .alta-p7__zonas .up-zone .a-btn { min-height: 44px; justify-content: center; }
  .cs-main .alta-p7__zonas .up-zone > span:last-child .a-btn { flex: 1; }
  .alta-resumen { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
  .alta-resumen .alta-paso__cuerpo > strong { font-size: 14.5px; line-height: 1.4; }
  .alta-resumen__k { flex: none; font-size: 12.5px; color: var(--cs-gris); }
  .cs-main .alta-paso--resumida { display: none; }
  .cs-main .alta-pasos > .alta-resumen + .alta-paso { border-top: 1px solid var(--hair); }
  .cs-pie-hueco { display: block; height: 132px; order: 9; }
  .cs-pie-fijo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--cs-lienzo); border-top: 1px solid var(--cs-borde);
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(20, 30, 27, 0.06); }
  body:has(.cs-pie-fijo) .cs-barra { display: none; }
  .cs-main .alta-cerrar.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; }
  .cs-main .alta-cerrar.cs-pie-fijo .alta-cerrar__falta { flex: none; font-size: 12.5px; line-height: 1.4; }
  .cs-main .alta-cerrar.cs-pie-fijo .a-btn { width: 100%; min-height: 48px; justify-content: center; margin-left: 0; }
}

/* ---------- 07 · AGENDAR LA CAPACITACIÓN: desde la tanda 5a vive entero en admin-capacitacion.css (ventana y hoja) ---------- */

/* ============================================================
   ZIP #5 · TANDA 3 (1-oct-2026) — las pantallas que solo cambian de cáscara (03 · 11 · 12 · 15 · 17 · 18 · 19 · 20 · 21)
   y la forma de lo que gana cada una. Misma regla de siempre: `.cs-main` delante, nada de datos ni de marca aquí.
   ============================================================ */

/* ---------- 20 · BLOQUEAR / DESBLOQUEAR ---------- */
.cs-main .bl.cap-wrap { max-width: none; margin: 0; }
.cs-main .bl-seg { max-width: 300px; margin-bottom: 16px; }
.cs-main .bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cs-main .bl-cols > .a-card { margin: 0; }
.cs-main .bl-buscar { max-width: none; }
.cs-main .bl-rot { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .bl-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cs-main .bl-rot + .bl-lista { margin-top: 0; }
.cs-main .bl-fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid transparent;
  background: var(--cs-lienzo); border-radius: 12px; padding: 12px 14px; }
.cs-main button.bl-fila { cursor: pointer; }
.cs-main button.bl-fila:hover, .cs-main .bl-fila.on { border-color: var(--cs-borde); background: #F1EEE6; }
.cs-main .bl-placa { font: 700 12.5px var(--font-mono, ui-monospace, monospace); background: #EFEBE0; color: #55605B; border-radius: 6px; padding: 4px 9px; white-space: nowrap; flex: none; }
.cs-main .bl-form__t .bl-placa { background: transparent; padding: 0; color: inherit; font-size: 14px; }
.cs-main .bl-fila__t { flex: 1; min-width: 0; }
.cs-main .bl-fila__t b { display: block; font-size: 14px; color: var(--cs-riel); }
.cs-main .bl-fila__t span { display: block; font-size: 12.5px; color: #6B6455; line-height: 1.4; }
.cs-main .bl-fila .apill { flex: none; }
.cs-main .bl-ger { font-weight: 700; }
.cs-main .bl-form__t { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--font-display); font-size: 15.5px; font-weight: 800; color: var(--cs-riel); }
.cs-main .bl-form__ic { width: 22px; height: 22px; border-radius: 5px; background: #9E2B20; color: #fff; display: grid; place-items: center; flex: none; }
.cs-main .bl-form__ic.verde { background: var(--cs-verde); }
.cs-main .bl-form__d { margin: 0 0 14px; font-size: 13.5px; color: #6B6455; line-height: 1.5; text-wrap: pretty; }
.cs-main .bl-form__l { display: block; font-size: 12.5px; font-weight: 600; color: var(--cs-tinta); margin-bottom: 6px; }
.cs-main .bl-form__m { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cs-borde); font: inherit; font-size: 14px; resize: vertical; min-height: 84px; }
.cs-main .bl-form__acc { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cs-main .bl-tel { display: none; }
@media (max-width: 860px) {
  .cs-main .bl-cols { grid-template-columns: minmax(0, 1fr); }
  .cs-main .bl-web { display: none; }
  .cs-main .bl-tel { display: inline; }
  /* con una placa elegida, el teléfono es la solicitud sola (20 móvil): la lista se esconde, «Enviar a Gerencia» abajo */
  .cs-main .bl--sel .bl-izq, .cs-main .bl--sel .bl-seg { display: none; }
  .cs-main .bl-form { background: transparent; border: 0; box-shadow: none; padding: 0; }
  .cs-main .bl-form__t { display: none; }
  .cs-main .bl-form__m { min-height: 110px; }
  .cs-main .bl-form__acc.cs-pie-fijo { margin: 0; }
  .cs-main .bl-form__acc .a-btn.ghost { display: none; }
  .cs-main .bl-form__acc .a-btn { flex: 1; min-height: 48px; justify-content: center; }
  .cs-main .bl--sel { padding-bottom: 90px; }
  /* cada fila: placa y estado arriba, quién y qué debajo, a todo el ancho */
  .cs-main .bl-fila { flex-wrap: wrap; min-height: 44px; gap: 8px 10px; }
  .cs-main .bl-fila .apill { margin-left: auto; }
  .cs-main .bl-fila__t { order: 3; flex: 1 1 100%; }
  .cs-main .bl-buscar input { min-height: 40px; }
}

/* ---------- 17 · ÚLTIMOS PAGOS ---------- */
.cs-main .up-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -10px 0 14px; }
.cs-main .up-sub { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--cs-gris); }
.cs-main .up-acc { display: flex; align-items: center; gap: 8px; }
.cs-main .up-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cs-gris); font-weight: 600; }
.cs-main .up-vivo__p { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-verde); box-shadow: 0 0 0 3px rgba(60, 126, 103, 0.18); }
.cs-main .up-vivo__p.ambar { background: #B8860B; box-shadow: 0 0 0 3px rgba(185, 138, 42, 0.18); }
.cs-main .up-tabla { padding: 0; overflow: hidden; }
.cs-main .up-tabla > .a-card__desc, .cs-main .up-tabla > .a-skel, .cs-main .up-tabla > .anocargo { margin: 16px; }
.cs-main .up-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-main .up-t th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); padding: 14px 16px; border-bottom: 1px solid var(--cs-borde); }
.cs-main .up-t td { padding: 14px 16px; border-top: 1px solid #F2EFE6; vertical-align: middle; color: #55605B; }
.cs-main .up-t tbody tr:first-child td { border-top: 0; }
.cs-main .up-t__v b { color: var(--cs-riel); font-size: 14px; }
.cs-main .up-t__v span { color: var(--cs-gris); font-size: 12.5px; }
.cs-main .up-pie { margin: 12px 2px 0; font-size: 12.5px; color: var(--cs-gris); }
@media (max-width: 860px) {
  .cs-main .up-cab { margin-top: 0; }
  .cs-main .up-sub { flex: 1 1 100%; }
  .cs-main .up-acc .a-btn { min-height: 44px; }
  /* cada pago, una tarjeta: placa · quién y qué · estado (17 móvil) */
  .cs-main .up-tabla { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .cs-main .up-t, .cs-main .up-t tbody { display: block; }
  .cs-main .up-t thead { display: none; }
  .cs-main .up-t tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'p v e' 'p c e'; gap: 2px 12px; align-items: center;
    background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
  .cs-main .up-t td { display: block; padding: 0; border: 0; }
  .cs-main .up-t__p { grid-area: p; }
  .cs-main .up-t__v { grid-area: v; }
  .cs-main .up-t__e { grid-area: e; }
  .cs-main .up-t__c { grid-area: c; font-size: 12.5px; }
  .cs-main .up-t__c::after { content: ' · ' attr(data-cuando); }
  .cs-main .up-t td.up-t__f, .cs-main .up-t td.up-t__m { display: none; }
}

/* ---------- COMÚN DE LA TANDA 3 · 2 ----------
   La línea bajo el título cuando lleva cifras del día o una acción (15, 21…): el texto a la izquierda, lo que se hace a la derecha.
   `cs-enlace`: un botón que se lee como enlace dentro de una frase. `dt-web` / `dt-tel`: lo que solo va en una de las dos. */
.cs-main .cs-subcab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -10px 0 14px; }
.cs-main .cs-subcab__t { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--cs-gris); line-height: 1.45; }
.cs-main .cs-subcab__acc { display: flex; align-items: center; gap: 8px; }
.cs-main .cs-enlace { border: 0; background: transparent; padding: 0; font: inherit; color: var(--btn); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cs-main .dt-tel { display: none; }

/* ---------- 15 · DETENIDOS ---------- */
.cs-main .dt-lista { padding: 0; overflow: hidden; }
.cs-main .dt-grupo + .dt-grupo { border-top: 1px solid var(--cs-borde); }
.cs-main .dt-grupo__cab { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer;
  background: var(--cs-lienzo); padding: 13px 16px; border-bottom: 1px solid var(--cs-borde); }
.cs-main .dt-grupo__cab[aria-expanded="false"] { border-bottom: 0; }
.cs-main .dt-grupo__t { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .dt-grupo__n { font-size: 12px; color: var(--cs-gris); text-align: right; }
.cs-main .dt-grupo__cab > svg { flex: none; color: var(--cs-gris); }
.cs-main .dt-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px 120px; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; }
.cs-main .dt-fila + .dt-fila { border-top: 1px solid #F2EFE6; }
.cs-main .dt-fila.rojo { background: #FBEEEC; }
.cs-main .dt-fila > .placa { text-align: center; overflow: hidden; text-overflow: ellipsis; }
.cs-main .dt-fila__t { min-width: 0; }
.cs-main .dt-fila__t b { display: block; font-size: 14px; color: var(--cs-riel); }
.cs-main .dt-fila__t span { display: block; margin-top: 2px; font-size: 12.5px; color: #6B6455; line-height: 1.4; }
.cs-main .dt-fila.rojo .dt-fila__t span { color: #A43F33; }
.cs-main .dt-fila > .apill { justify-self: start; }
.cs-main .dt-fila__acc { justify-self: stretch; text-align: center; }
.cs-main .dt-fila__acc .a-btn { width: 100%; justify-content: center; }
.cs-main .dt-fila__acc .hoy-vigilar { padding: 0; }
@media (max-width: 860px) {
  .cs-main .cs-subcab { margin-top: 0; }
  .cs-main .cs-subcab__t { flex: 1 1 100%; }
  .cs-main .cs-subcab__acc .a-btn { min-height: 44px; }
  .cs-main .dt-web { display: none; }
  .cs-main .dt-tel { display: inline; }
  /* cada caso, una tarjeta: placa y días arriba, el qué en medio, Abrir al ancho (15 móvil) */
  .cs-main .dt-lista { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .cs-main .dt-grupo + .dt-grupo { border-top: 0; }
  .cs-main .dt-grupo__cab { background: transparent; border: 0; padding: 14px 2px 8px; min-height: 44px; }
  .cs-main .dt-grupo__n { display: none; }
  .cs-main .dt-fila { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'placa pill' 't t' 'acc acc'; gap: 10px 8px;
    padding: 14px; margin-bottom: 10px; border: 1px solid var(--cs-borde); border-radius: 14px; }
  .cs-main .dt-fila + .dt-fila { border-top: 1px solid var(--cs-borde); }
  .cs-main .dt-fila.rojo { border-color: #E3B4AC; }
  .cs-main .dt-fila > .placa { grid-area: placa; justify-self: start; }
  .cs-main .dt-fila > .apill { grid-area: pill; justify-self: end; }
  .cs-main .dt-fila__t { grid-area: t; }
  .cs-main .dt-fila__acc { grid-area: acc; }
  .cs-main .dt-fila__acc .a-btn { min-height: 44px; }
  .cs-main .dt-fila__acc:has(> .hoy-vigilar) { display: none; }
}

/* el selector de dos («Nuevo cambio · Historial») a la derecha de la línea bajo el título (11 · 12) */
.cs-main .cs-subcab .cs-seg { flex: none; }
.cs-main .cs-subcab .cs-seg button { flex: none; padding: 8px 14px; }

/* ---------- 11 · CAMBIO DE PROPIETARIO ---------- */
.cs-main .cp.cap-wrap { max-width: none; margin: 0; }
.cs-main .cs-subcab__t b { color: var(--cs-tinta); font-weight: 700; }
/* el candado con salida (B4), a todo el ancho: lo que debe ítem por ítem, sin pesos, y «Ver en Mora y acuerdos» */
.cs-main .cp-saldo { margin: 0 0 18px; }
.cs-main .cp-saldo .bq-candado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 14px 16px; }
.cs-main .cp-saldo .bq-candado__t { grid-column: 1; }
.cs-main .cp-saldo .bq-candado__t p { font-size: 14px; }
.cs-main .cp-saldo__cuerpo { grid-column: 1; padding-left: 24px; }
.cs-main .cp-saldo__items { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #6B6455; }
.cs-main .cp-saldo__items span { color: var(--cs-gris); }
.cs-main .cp-saldo__nota { margin: 6px 0 0; font-size: 12.5px; color: #6B6455; line-height: 1.5; }
.cs-main .cp-saldo__ir { grid-column: 2; grid-row: 1 / span 2; align-self: start; border-color: #E3B4AC; color: #8E3A31; }
.cs-main .cp-form { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cs-main .cp-form__izq { flex: 999 1 480px; min-width: 0; }
.cs-main .cp-form__izq > .a-card + .a-card, .cs-main .cp-form__izq > * + .a-card { margin-top: 18px; }
/* el pie: lo que falta a la izquierda, el botón a la derecha (web) · fijo abajo con el botón al ancho (teléfono) */
.cs-main .cp-pie { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 18px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; padding: 14px 16px; }
.cs-main .cp-pie .cap-falta { flex: 1 1 260px; margin: 0; text-align: left; color: #A43F33; }
.cs-main .cp-pie .cap-submit { width: auto; min-height: 44px; font-size: 15px; margin: 0 0 0 auto; padding: 10px 22px; }
.cs-main .cp-pie .rev-confirma { flex: 1 1 260px; margin: 0; background: transparent; border: 0; padding: 0; }
.cs-main .cp-pie .rev-acciones { margin-left: auto; }
@media (max-width: 860px) {
  .cs-main .cs-subcab .cs-seg { flex: 1 1 100%; }
  .cs-main .cs-subcab .cs-seg button { flex: 1; min-height: 44px; }
  .cs-main .cp-saldo .bq-candado { grid-template-columns: minmax(0, 1fr); }
  .cs-main .cp-saldo__cuerpo { padding-left: 0; }
  .cs-main .cp-saldo__nota { display: none; }
  .cs-main .cp-saldo__ir { grid-column: 1; grid-row: auto; width: 100%; min-height: 44px; justify-content: center; }
  .cs-main .cp-form { flex-direction: column; align-items: stretch; }
  .cs-main .cp-form__izq { flex: none; }
  .cs-main .cp-pie.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  .cs-main .cp-pie .cap-falta { flex: none; font-size: 12.5px; }
  .cs-main .cp-pie .cap-submit { width: 100%; min-height: 48px; margin: 0; justify-content: center; }
  .cs-main .cp-pie .rev-confirma { flex: none; }
  .cs-main .cp-pie .rev-acciones { margin: 0; flex-wrap: nowrap; }
  .cs-main .cp-pie .rev-acciones .a-btn { flex: 1; min-height: 48px; justify-content: center; }
}

/* ---------- 12 · PAZ Y SALVO / CESIÓN ---------- */
.cs-main .ps.cap-wrap { max-width: none; margin: 0; }
.cs-main .ps .ps-wrap { max-width: none; }
.cs-main .ps .rn-search { max-width: 560px; }
.cs-main .ps-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.cs-main .ps-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs-main .ps-col > .a-card { margin: 0; }
.cs-main .ps-col > .a-card[style] { margin-top: 0 !important; }   /* PSComparendo trae su margen en línea */
.cs-main .ps-veh { order: 9; }                                       /* los datos del carro, después de los requisitos */
/* los requisitos: cada uno en su franja, el detalle a la derecha (12) */
.cs-main .ps .ps-candado { align-items: center; border: 0; padding: 11px 14px; }
.cs-main .ps .ps-candado__txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; flex: 1; min-width: 0; }
.cs-main .ps .ps-candado__txt span { text-align: right; }
/* qué se emite: tres casillas en fila; las dos que siempre van, marcadas y quietas */
.cs-main .ps-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-main .ps-doc { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--cs-borde); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--cs-riel); cursor: pointer; min-height: 44px; box-sizing: border-box; }
.cs-main .ps-doc.on { background: #E9F0ED; border-color: transparent; }
.cs-main .ps-doc.fija { cursor: default; }
.cs-main .ps-doc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-main .ps-doc input:focus-visible + .ps-doc__box { box-shadow: var(--ring); }
.cs-main .ps-doc__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--cs-verde); display: grid; place-items: center; color: transparent; flex: none; }
.cs-main .ps-doc.on .ps-doc__box { background: var(--cs-verde); color: #fff; }
.cs-main .ps-parque { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; background: var(--cs-lienzo); border-radius: 10px; font-size: 13px; color: #6B6455; line-height: 1.5; }
.cs-main .ps-parque svg { flex: none; margin-top: 2px; color: var(--cs-gris); }
.cs-main .ps-comp { margin-top: 16px; }
.cs-main .ps-comp__l { display: block; font-size: 12.5px; font-weight: 600; color: var(--cs-tinta); margin-bottom: 8px; }
.cs-main .ps-hint { font-size: 12px; color: var(--cs-gris); text-align: right; }
.cs-main .ps-archivo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #E9F0ED; border-radius: 10px; color: var(--cs-verde); }
.cs-main .ps-archivo b { flex: 1; min-width: 0; color: var(--cs-riel); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-main .ps-adjuntar { width: 100%; min-height: 44px; border-style: dashed; justify-content: center; }
.cs-main .ps-pie { margin-top: 14px; border: 0; padding: 0; background: transparent; }
@media (max-width: 1100px) { .cs-main .ps-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .cs-main .ps-docs { flex-direction: column; }
  .cs-main .ps-doc { width: 100%; }
  .cs-main .ps-hint { display: none; }
  /* cada comprador en dos renglones: el nombre al lado del número, el documento debajo (con la «x» al lado). En una sola
     línea, nombre + documento de 160 px no caben en 302 y la página medía 409 (medido el 2-oct) */
  .cs-main .ps-comprador { flex-wrap: wrap; }
  .cs-main .ps-comprador input { min-width: 0; height: 44px; flex: 1 1 calc(100% - 35px); }
  .cs-main .ps-comprador input:last-of-type { flex: 1 1 0; margin-left: 35px; }
  .cs-main .ps-pie.cs-pie-fijo { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--cs-lienzo); border-top: 1px solid var(--cs-borde); }
}

/* ---------- 03 · VEHÍCULOS · 18 · FLOTA · 19 · FUEC — SOLO CSS ----------
   Las tres viven en admin-operacion.jsx, COMÚN con Comercial (que no se publica en esta tanda): OJO no se edita. Se revisten
   desde aquí, acotadas por el rótulo de la pantalla (`data-screen-label` de .cs-main). Lo que esas pantallas traen con estilo
   EN LÍNEA solo se gana con !important: por eso aparece aquí, y solo aquí. */
/* 03 · los filtros con su cifra («Todos · 181») y sus rótulos en versalitas, como el dibujo */
.cs-main[data-screen-label="Vehículos"] .a-chip .n { background: none; padding: 0; min-width: 0; color: inherit; font-weight: 700; }
.cs-main[data-screen-label="Vehículos"] .a-chip .n::before { content: '· '; font-weight: 400; }
.cs-main[data-screen-label="Vehículos"] .a-toolbar > span { font-size: 11.5px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris) !important; }
/* 03 · documentos: «al día» y «vencido» son un punto con su texto; «en alta» y «por vencer» siguen en chip */
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.green, .cs-main[data-screen-label="Vehículos"] .a-table td .apill.red {
  background: transparent; padding: 0; gap: 7px; font-weight: 700; }
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.green { color: #55605B; font-weight: 600; }
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.red { color: #A43F33; }
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.green svg, .cs-main[data-screen-label="Vehículos"] .a-table td .apill.red svg { display: none; }
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.green::before, .cs-main[data-screen-label="Vehículos"] .a-table td .apill.red::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-verde); flex: none; }
.cs-main[data-screen-label="Vehículos"] .a-table td .apill.red::before { background: #B4322A; }

/* 18 · el selector de empresa como el de dos de la cáscara; las cifras en tarjetas; la explicación, en letra de nota */
.cs-main[data-screen-label="Flota y Capacidad"] > .rev-acciones { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px !important;
  background: #fff; border: 1px solid var(--cs-borde); border-radius: 11px; justify-content: flex-start; }
.cs-main[data-screen-label="Flota y Capacidad"] > .rev-acciones .a-btn { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 8px; }
.cs-main[data-screen-label="Flota y Capacidad"] > .rev-acciones .a-btn.ghost { background: transparent; color: #6B6455; }
.cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 0 14px !important; }
.cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) > div { background: #fff !important; border: 1px solid var(--cs-borde) !important; border-radius: 14px !important;
  padding: 16px 18px !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) > div > div:first-child { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cs-gris) !important; }
.cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) > div > div:last-child { font-family: var(--font-display); font-size: 32px !important; font-weight: 800 !important;
  color: var(--cs-riel) !important; line-height: 1; }
.cs-main[data-screen-label="Flota y Capacidad"] > .a-intro { margin: 0 0 18px !important; font-size: 13px; color: #6B6455; line-height: 1.55; max-width: 980px; }
.cs-main[data-screen-label="Flota y Capacidad"] .a-card .a-table th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }

/* 19 · el buscador-verificador en su tarjeta, con la letra grande del folio */
.cs-main[data-screen-label="FUEC"] > .a-toolbar { background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.cs-main[data-screen-label="FUEC"] > .a-toolbar .a-search { flex: 1; max-width: none; }
.cs-main[data-screen-label="FUEC"] > .a-toolbar .a-search input { min-height: 48px; font-size: 15px; }
@media (max-width: 1100px) {
  .cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
  .cs-main[data-screen-label="Vehículos"] .a-toolbar > span { display: none; }
  .cs-main[data-screen-label="Flota y Capacidad"] > .rev-acciones { display: flex; }
  .cs-main[data-screen-label="Flota y Capacidad"] > .rev-acciones .a-btn { flex: 1; min-height: 44px; justify-content: center; }
  .cs-main[data-screen-label="Flota y Capacidad"] > div:not([class]) > div > div:last-child { font-size: 26px !important; }
  .cs-main[data-screen-label="FUEC"] > .a-toolbar { padding: 12px; }
}

/* ---------- 21 · REPORTES ---------- */
.cs-main .rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cs-main .rp-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; padding: 18px 18px 16px; min-height: 128px; }
.cs-main button.rp-tarjeta { cursor: pointer; }
.cs-main button.rp-tarjeta:hover { border-color: #D9D2C1; box-shadow: 0 4px 14px rgba(20, 30, 27, 0.05); }
.cs-main .rp-tarjeta b { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--cs-riel); }
.cs-main .rp-tarjeta__d { flex: 1; font-size: 13px; color: #6B6455; line-height: 1.5; text-wrap: pretty; }
.cs-main .rp-tarjeta__a { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--cs-verde); }
.cs-main .rp-tarjeta__a.gris { color: #8A6D1E; }
.cs-main .rp-tarjeta > svg { display: none; }
.cs-main .rp > .a-card + .a-card, .cs-main .rp > #semana-dinamic { margin: 0 0 18px; }
@media (max-width: 1100px) { .cs-main .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* el teléfono: una lista de nombres con su flecha (21 móvil); la de los tiempos, solo cuando ya hay mediana */
  .cs-main .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cs-main .rp-tarjeta { flex-direction: row; align-items: center; min-height: 52px; padding: 12px 14px; border-radius: 12px; }
  .cs-main .rp-tarjeta b { flex: 1; font-size: 14px; }
  .cs-main .rp-tarjeta__d, .cs-main button.rp-tarjeta .rp-tarjeta__a { display: none; }
  .cs-main .rp-tarjeta > svg { display: block; flex: none; color: var(--cs-gris); }
  .cs-main .rp-tarjeta--fija { flex-wrap: wrap; }
  .cs-main .rp-tarjeta--fija.sin-datos { display: none; }
}

/* ---------- 10 · RENOVACIÓN (tanda 3): el historial de este carro en la ficha del expediente ---------- */
.cs-main .rn-hist strong { display: block; font-size: 14px; color: var(--cs-tinta); }
.cs-main .rn-hist__nota { display: block; margin-top: 2px; font-size: 12.5px; color: var(--cs-gris); line-height: 1.45; }
.cs-main .rn-hist__nota.rojo { color: #A43F33; }
/* 10 · G4 (2-oct-2026): a todo el ancho de la cáscara, como las demás de la tanda 3; «En curso · Historial» a la derecha de la
   línea bajo el título; las 4 tarjetas de la vista del año (borde de color arriba: rojo · ocre · verde · gris); y la
   «Verificación RUNT · consultada» del expediente: un cuadrito de color por ítem, lo declarado en ámbar. */
.cs-main .rn.cap-wrap { max-width: none; margin: 0; }
.cs-main .rn-vista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.cs-main .rn-vista__t { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--cs-borde); border-top: 3px solid #D9D4C7; border-radius: 14px; padding: 14px 16px 12px; }
.cs-main .rn-vista__t.rojo { border-top-color: #B4322A; }
.cs-main .rn-vista__t.ocre { border-top-color: #B8860B; }
.cs-main .rn-vista__t.verde { border-top-color: var(--cs-verde); }
.cs-main .rn-vista__t strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--cs-tinta); }
.cs-main .rn-vista__l { font-size: 12.5px; color: var(--cs-gris); line-height: 1.35; }
.cs-main .rn-vista__c { display: none; font-size: 11.5px; color: var(--cs-gris); }
.cs-main .rn-runt2__items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 14px; list-style: none; background: #F4F1EA; border-radius: 12px; }
.cs-main .rn-runt2__linea { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.cs-main .rn-runt2__p { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--cs-verde); }
.cs-main .rn-runt2__it.ambar .rn-runt2__p { background: #B8860B; }
.cs-main .rn-runt2__it.rojo .rn-runt2__p { background: #B4322A; }
.cs-main .rn-runt2__t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--cs-tinta); }
.cs-main .rn-runt2__it.ambar .rn-runt2__t { color: #9A6B0F; }
.cs-main .rn-runt2__it.rojo .rn-runt2__t { color: #A43F33; }
.cs-main .rn-runt2__decl { flex: none; }
.cs-main .rn-runt2__nota { margin: 4px 0 0 22px; font-size: 12.5px; line-height: 1.45; color: #A43F33; }
.cs-main .rn-runt2__declarada { margin: 6px 0 0 22px; padding: 10px 12px; background: #fff; border: 1px solid #E6D3A0; border-radius: 10px; font-size: 13px; line-height: 1.5; color: #6B6455; }
.cs-main .rn-runt2__declarada b { font-weight: 600; color: var(--cs-tinta); }
.cs-main .rn-runt2__form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 22px; padding: 12px; background: #fff; border: 1px solid #E6D3A0; border-radius: 10px; }
.cs-main .rn-runt2__form label { font-size: 12.5px; font-weight: 700; color: var(--cs-tinta); }
.cs-main .rn-runt2__form label span { font-weight: 400; color: var(--cs-gris); }
.cs-main .rn-runt2__form input { padding: 9px 12px; border: 1.5px solid #E2DDD0; border-radius: 10px; background: #fff; font-family: inherit; font-size: 14px; color: var(--cs-tinta); outline: none; }
.cs-main .rn-runt2__form input:focus { border-color: var(--cs-verde); }
.cs-main .rn-runt2__error { margin: 0; font-size: 12.5px; color: #A43F33; }
.cs-main .rn-runt2__acc { display: flex; justify-content: flex-end; gap: 8px; }
.cs-main .rn-runt2__pie { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 12px; line-height: 1.45; color: var(--cs-gris); }
@media (max-width: 860px) {
  .cs-main .rn-vista { gap: 8px; margin-bottom: 14px; }
  .cs-main .rn-vista__t { align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 12px; text-align: center; }
  .cs-main .rn-vista__t strong { font-size: 20px; }
  .cs-main .rn-vista__l { display: none; }
  .cs-main .rn-vista__c { display: block; }
  .cs-main .rn-runt2__linea { flex-wrap: wrap; }
  .cs-main .rn-runt2__decl { min-height: 44px; }
  .cs-main .rn-runt2__acc .a-btn { flex: 1; min-height: 44px; }
  .cs-main .rn-runt2__form input { min-height: 44px; font-size: 16px; }
}

/* ---------- 14 · DESVINCULACIÓN ----------
   El carro abierto arriba (etapas · lo comprobado | la etapa con su pie), la lista de pendientes debajo como filas (las de
   15, `dt-fila`, con su estado y «Dar por terminada» en la del radicado). El candado «al día» es el de 11 (`cp-saldo`). */
.cs-main .dv.cap-wrap { max-width: none; margin: 0; }
.cs-main .dv-buscar { max-width: 640px; }
.cs-main .dv-tram { padding: 18px 20px; }
.cs-main .dv-tram__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-main .dv-tram__cab strong { font-size: 15px; color: var(--cs-tinta); }
.cs-main .dv-tram__cuando { margin-left: auto; font-size: 12.5px; color: var(--cs-gris); }
.cs-main .dv-tram__cab .up-x { margin-left: auto; }
.cs-main .dv-tram__cuando + .up-x { margin-left: 4px; }
.cs-main .dv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.cs-main .dv-izq { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-main .dv-der { display: flex; flex-direction: column; min-width: 0; }
.cs-main .dv-aldia { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #E9F0ED; border-radius: 12px; color: var(--cs-verde); }
.cs-main .dv-aldia svg, .cs-main .dv-aldia .spinner { flex: none; margin-top: 1px; }
.cs-main .dv-aldia b { display: block; font-size: 14px; color: var(--cs-tinta); }
.cs-main .dv-aldia p { margin: 4px 0 0; font-size: 12.5px; color: #6B6455; line-height: 1.5; }
.cs-main .dv-aldia.gris { background: var(--cs-lienzo); color: var(--cs-gris); }
/* G3 (3-oct-2026): el TIPO DE SALIDA, los dos botones del dibujo (el elegido lleno, el otro con borde). Con el trámite
   abierto quedan fijos: el elegido marcado y el otro apagado. «· mutuo acuerdo» solo en la web. */
.cs-main .dv-tipo { padding: 12px 14px; background: var(--cs-lienzo); border-radius: 12px; }
.cs-main .dv-tipo__lab { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .dv-tipo__ops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cs-main .dv-tipo__op { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--cs-borde); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: #55605B; cursor: pointer; }
.cs-main .dv-tipo__op.on { background: var(--cs-riel); border-color: var(--cs-riel); color: #fff; }
.cs-main .dv-tipo__op:disabled { cursor: default; }
.cs-main .dv-tipo__op:disabled:not(.on) { opacity: .55; }
.cs-main .dv-tipo__op:focus-visible { outline: none; box-shadow: var(--ring); }
.cs-main .dv-izq .cp-saldo { margin: 0; }
.cs-main .dv-izq .cp-saldo .bq-candado { grid-template-columns: minmax(0, 1fr); }
.cs-main .dv-izq .cp-saldo__cuerpo { padding-left: 24px; }
.cs-main .dv-izq .cp-saldo__ir { grid-column: 1; grid-row: auto; justify-self: start; min-height: 40px; }
.cs-main .dv-izq .val-res { margin-top: 0 !important; }      /* ANoCargo trae su margen en línea */
.cs-main .dv-datos { padding: 12px 14px; background: var(--cs-lienzo); border-radius: 12px; }
.cs-main .dv-datos .cap-nota { margin: 0 0 8px; }
.cs-main .dv-datos .to-empresa { margin: 0; }
.cs-main .dv-etapa__t { margin: 0 0 2px; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--cs-tinta); }
.cs-main .dv-etapa__nota { margin: 10px 0 0; font-size: 12.5px; color: var(--cs-gris); line-height: 1.5; }
.cs-main .dv-pie { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 16px; }
.cs-main .dv-pie__falta { flex: 1 1 200px; margin: 0; font-size: 13px; color: #A43F33; }
.cs-main .dv-pie .a-btn { margin-left: auto; min-height: 44px; }
.cs-main .dv-lista { margin-top: 18px; }
.cs-main .dv-lista .dt-fila { grid-template-columns: 96px minmax(0, 1fr) auto 150px; }
.cs-main .dv-lista .dt-fila.on { background: var(--cs-lienzo); }
.cs-main .dv-lista .placa.on { background: var(--cs-riel); border-color: var(--cs-riel); color: #fff; }
.cs-main .dv-fila__abrir { border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cs-main .dv-fila__abrir:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cs-main .dv-lista__aviso { padding: 14px 16px; }
.cs-main .dv-nota-pie { margin: 12px 2px 0; font-size: 12.5px; color: var(--cs-gris); line-height: 1.5; }
@media (max-width: 1100px) { .cs-main .dv-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  /* la «X» de cerrar, arriba a la derecha: en 375 la cabecera se parte y la dejaba sola en otra línea */
  .cs-main .dv-tram { padding: 14px; position: relative; }
  .cs-main .dv-tram__cab { padding-right: 36px; }
  .cs-main .dv-tram__cab .up-x, .cs-main .dv-tram__cuando + .up-x { position: absolute; top: 6px; right: 6px; margin: 0; width: 44px; height: 44px; }
  .cs-main .dv-tram__cuando { flex-basis: 100%; order: 9; margin-left: 0; }
  .cs-main .dv-izq .cp-saldo__cuerpo { padding-left: 0; }
  .cs-main .dv-tipo__mas { display: none; }                  /* G3: en el teléfono, «Cambio de empresa» a secas */
  .cs-main .dv-aldia.hecho p { display: none; }              /* G3: con el trámite abierto, una sola línea */
  .cs-main .dv-izq .cp-saldo__ir { width: 100%; justify-content: center; min-height: 44px; }
  .cs-main .dv-pie.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
  .cs-main .dv-pie .dv-pie__falta { flex: none; font-size: 12.5px; }
  .cs-main .dv-pie .dv-pie__falta:empty { display: none; }
  .cs-main .dv-pie .a-btn { width: 100%; min-height: 48px; justify-content: center; margin: 0; }
  .cs-main .dv-lista .dt-fila { grid-template-columns: auto minmax(0, 1fr); }
  .cs-main .dv-lista__aviso { padding: 0; }
}

/* ---------- 13 · CANCELACIÓN T.O. (tanda 3 · G2) ----------
   Izquierda: las autorizadas por Gerencia en filas (Elegir / Elegida) y «Otra placa» al pie; derecha: el carro elegido
   con el motivo (catálogo de la base), la tarjeta de propiedad, las pólizas, la confirmación y el pie. */
.cs-main .ct.cap-wrap { max-width: none; margin: 0; }
.cs-main .ct-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cs-main .ct-izq, .cs-main .ct-der { margin: 0; padding: 18px 20px; }
.cs-main .ct-izq__cab { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-main .ct-izq__cab h2 { margin: 0; flex: 1 1 auto; font-family: var(--font-display); font-size: 14.5px; font-weight: 800; color: var(--cs-riel); white-space: nowrap; }
.cs-main .ct-izq__cab > span { font-size: 12.5px; color: var(--cs-gris); }
.cs-main .ct-vacia { margin: 0 0 12px; font-size: 13px; color: var(--cs-gris); }
.cs-main .ct-fila { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 12px 14px; text-align: left;
  font: inherit; cursor: pointer; background: var(--cs-lienzo); border: 2px solid transparent; border-radius: 12px; }
.cs-main .ct-fila.on { background: var(--cs-lienzo); border-color: var(--cs-verde); }   /* la elegida no cambia de fondo, solo el borde (barrido 5-oct) */
.cs-main .ct-fila:focus-visible { box-shadow: var(--ring); }
.cs-main .ct-fila > .placa { flex: none; }
.cs-main .ct .placa.on { background: var(--cs-riel); border-color: var(--cs-riel); color: #fff; }
.cs-main .ct-fila__t { flex: 1; min-width: 0; }
.cs-main .ct-fila__t b { font-size: 14px; color: var(--cs-riel); }
.cs-main .ct-fila__t .dt-web { display: block; }
.cs-main .ct-fila__t .dt-tel { display: none; }
.cs-main .ct-fila__t span { margin-top: 2px; font-size: 12.5px; color: #55605B; line-height: 1.4; }
.cs-main .ct-fila__acc { flex: none; font-size: 12.5px; color: var(--cs-gris); }
.cs-main .ct-fila.on .ct-fila__acc { color: var(--cs-verde); font-weight: 700; }
.cs-main .ct-otra { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; min-height: 44px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--cs-borde); border-radius: 10px; color: var(--cs-gris); }
.cs-main .ct-otra.on { border-color: var(--cs-verde); }
.cs-main .ct-otra > svg { flex: none; }
.cs-main .ct-otra input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--cs-tinta); padding: 6px 0; }
.cs-main .ct-otra input::placeholder { color: var(--cs-gris); }
.cs-main .ct-der__vacio { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--cs-gris); }
.cs-main .ct-carro { display: flex; align-items: flex-start; gap: 12px; }
.cs-main .ct-carro > .placa { flex: none; margin-top: 1px; }
.cs-main .ct-carro__t { flex: 1; min-width: 0; }
.cs-main .ct-carro__t strong { display: block; font-size: 14.5px; color: var(--cs-riel); }
.cs-main .ct-carro__t span { display: block; margin-top: 2px; font-size: 12.5px; color: #6B6455; line-height: 1.45; }
.cs-main .ct-carro .up-x { flex: none; }
.cs-main .ct-motivo { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.cs-main .ct-lab { font-size: 12px; font-weight: 600; color: #55605B; }
.cs-main .ct-op { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 9px 12px;
  background: #fff; border: 1px solid var(--cs-borde); border-radius: 10px; font-size: 13px; color: #55605B; cursor: pointer; }
.cs-main .ct-op.on { background: #E7EEEB; border-color: transparent; color: var(--cs-riel); font-weight: 700; }
.cs-main .ct-op.off { opacity: 0.55; cursor: default; }
.cs-main .ct-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-main .ct-op input:focus-visible + .ct-op__dot { box-shadow: var(--ring); }
.cs-main .ct-op__dot { flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #DDD9CC; background: #fff; }
.cs-main .ct-op.on .ct-op__dot { border: 0; background: var(--cs-verde); }
.cs-main .ct-op__t { flex: 1; min-width: 0; }
.cs-main .ct-op__nota { flex: none; font-size: 11.5px; font-weight: 600; color: #55605B; }
.cs-main .ct-doc { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; margin-top: 12px; padding: 10px 12px;
  border: 1.5px dashed var(--cs-borde); border-radius: 10px; background: #FBFAF6; color: var(--cs-gris); cursor: pointer; }
.cs-main .ct-doc.on { border: 1.5px solid transparent; background: #E7EEEB; color: var(--cs-verde); }
.cs-main .ct-doc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-main .ct-doc:focus-within { box-shadow: var(--ring); }
.cs-main .ct-doc > svg { flex: none; }
.cs-main .ct-doc__t { flex: 1; min-width: 0; }
.cs-main .ct-doc__t b { display: block; font-size: 13.5px; color: var(--cs-riel); }
.cs-main .ct-doc__nombre { display: block; font-size: 12px; color: #55605B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-main .ct-doc__nota { flex: none; font-size: 12px; color: var(--cs-gris); }
.cs-main .ct .ct-chk { margin: 12px 0 0; padding: 0; background: transparent; border: 0; font-family: inherit; font-weight: 400; font-size: 13px; color: var(--cs-tinta); }
.cs-main .ct-pie { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; }
.cs-main .ct-pie__nota, .cs-main .ct-pie__falta { flex: 1 1 220px; margin: 0; font-size: 12.5px; line-height: 1.5; }
.cs-main .ct-pie__nota { color: var(--cs-gris); }
.cs-main .ct-pie__falta { color: #A43F33; }
.cs-main .ct-pie .a-btn { margin-left: auto; min-height: 44px; padding: 10px 20px; }
@media (max-width: 1100px) { .cs-main .ct-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .cs-main .ct-izq, .cs-main .ct-der { padding: 14px; }
  .cs-main .ct-izq__cab { margin-bottom: 10px; }
  .cs-main .ct-fila { padding: 9px 12px; }
  .cs-main .ct-fila__t .dt-web { display: none; }
  .cs-main .ct-fila__t .dt-tel { display: block; margin-top: 0; }
  .cs-main .ct-op { min-height: 48px; }
  .cs-main .ct .ct-chk { min-height: 44px; align-items: center; }
  .cs-main .ct-pie.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
  .cs-main .ct-pie .ct-pie__nota { display: none; }
  .cs-main .ct-pie .ct-pie__falta { flex: none; font-size: 12.5px; }
  .cs-main .ct-pie .a-btn { width: 100%; min-height: 48px; justify-content: center; margin: 0; }
}

/* ---------- LO QUE SE ABRE DESDE «MÁS» (teléfono) ----------
   La barra verde con volver la pone index.html (`cs-propia--gen`); si la pantalla está en un detalle con barra propia,
   esa manda y la general se esconde. El título de la página sobra en el teléfono (lo dice la barra). */
@media (max-width: 860px) {
  body:has(.cs-propia:not(.cs-propia--gen)) .cs-propia--gen { display: none; }
}

/* ---------- G5 · el radicado que llegó del correo del RUNT (RadSugerida, admin-bloques.jsx · 3-oct-2026) ----------
   01 Hoy y 05 Ministerio, en la fila donde ya está el trámite: «Solicitud N · radicada el D · única … pendiente → ¿es
   esta? · No, otro número» con «Sí, es esta» (o «Llegaron K solicitudes… · elige cuál es» con «Elegir»). En el teléfono:
   «Llegó la solicitud N · D · ¿es esta?» + «Sí, es esta» + «Otro número» (botón, no enlace: hit target de 44 px). */
.rs-linea em { font-style: normal; }
.rs-linea .rs-movil { display: none; }
.rs-num { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--dinamic-green-dark); letter-spacing: 0.02em; }
.rs-otro { display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--dinamic-green); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rs-otro:hover { color: var(--dinamic-green-dark); }
.rs-solo-movil { display: none !important; }
.min-td-accion.rs-dos { white-space: nowrap; }
.rs-elegir { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #FCF7EC; border: 1px solid #EBDDB8; border-radius: 10px; }
.rs-elegir__f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--ink-500); }
.rs-elegir__f em { font-style: normal; }
.rs-elegir__runt { flex: 1 1 160px; min-width: 0; }
.rs-elegir__f .a-btn { margin-left: auto; }
@media (max-width: 860px) {
  .cs-main .rs-linea .rs-web { display: none; }
  .cs-main .rs-linea .rs-movil { display: inline; }
  .cs-main .rs-solo-movil { display: inline-flex !important; }
  .cs-main .hoy-fila__acc.rs-dos, .cs-main .min-tabla .min-td-accion.rs-dos { display: flex; gap: 8px; }
  .cs-main .hoy-fila__acc.rs-dos .a-btn, .cs-main .min-tabla .min-td-accion.rs-dos .a-btn { width: auto; flex: 1 1 0; min-width: 0; }
  .cs-main .hoy-fila__acc.rs-dos .a-btn:first-child, .cs-main .min-tabla .min-td-accion.rs-dos .a-btn:first-child { flex-grow: 2; }
  .cs-main .rs-elegir__f .a-btn { flex: 1 1 100%; min-height: 44px; margin-left: 0; }
}

/* ---------- P17 (a) · la solicitud del RUNT que no es de ningún trámite (01 Hoy · 3-oct-2026) ----------
   La fila del aviso abre debajo «Razón · 10 letras o más» + Cancelar / No es de ningún trámite (la forma de «Declarar»
   de 10). El botón de la fila lleva el texto largo del dueño: en la web parte en dos líneas dentro de su columna. */
.cs-main .hoy-fila__acc .a-btn.hoy-desc-btn { white-space: normal; line-height: 1.2; text-align: center; max-width: 156px; }
.cs-main .hoy-desc { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #FCF7EC; border: 1px solid #EBDDB8; border-radius: 10px; }
.cs-main .hoy-desc label { font-size: 12.5px; font-weight: 700; color: var(--cs-tinta); }
.cs-main .hoy-desc label span { font-weight: 400; color: var(--cs-gris); }
.cs-main .hoy-desc input { padding: 9px 12px; border: 1.5px solid #E2DDD0; border-radius: 10px; background: #fff; font-family: inherit; font-size: 14px; color: var(--cs-tinta); outline: none; }
.cs-main .hoy-desc input:focus { border-color: var(--cs-verde); }
.cs-main .hoy-desc__error { margin: 0; font-size: 12.5px; color: #A43F33; }
.cs-main .hoy-desc__acc { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 860px) {
  .cs-main .hoy-fila__acc .a-btn.hoy-desc-btn { max-width: none; }
  .cs-main .hoy-desc__acc .a-btn { flex: 1; min-height: 44px; }
  .cs-main .hoy-desc input { min-height: 44px; font-size: 16px; }
}

/* ---------- BARRIDO DEL #5 (5-oct-2026, regla 5 del NORTE): lo «distinto por error», corregido ----------
   Solo forma: ninguna regla cambia lo que hace una pantalla. Cada una dice qué fila de BARRIDO.md corrige. */
/* Negritas: en el dibujo un <b> suelto sale en 400, igual que aquí (el cuerpo de los dos es 300: `colors_and_type.css`
   del sistema de diseño); lo que el dibujo pinta grueso lleva su peso escrito. Por eso van una a una y no con una regla
   para todo <b> (esa engrosaba la bitácora, el candado de 11 y 14 y «Al día en todo concepto», que el dibujo pinta finos) */
.cs-main .dt-fila__t b, .cs-main .bl-fila__t b,                                   /* 14, 15 y 20 · el título de la fila */
.cs-main .ps-candado__txt strong,                                                  /* 12 · los rótulos de los requisitos */
.cs-main .ct-fila__t b, .cs-main .ct-carro__t strong, .cs-main .ct-doc__t b,      /* 13 · la fila, el carro y «Tarjeta de propiedad» */
.cs-main .up-t__v b,                                                               /* 17 · el vinculado */
.cs-main .alta-cab__veh, .cs-main .alta-fila__t strong,                            /* 06 y 07 · el título; 06 · la lista de altas */
.cs-main .dv-tram__cab strong { font-weight: 700; }                               /* 14 · el carro */
/* 04 · el titular, 14 / 700 en verde oscuro como el dibujo */
.cs-main .fc-cab .bq-ficha__per .fc-cab__linea b { font-weight: 700; color: var(--cs-riel); }
/* 01 · el título de la fila, 14 / 800 como el dibujo (el 800 se pinta igual que en el dibujo: los dos cargan 300–700 y 900) */
.cs-main .hoy-fila__t strong { font-size: 14px; font-weight: 800; }
/* 03 · el nombre del vinculado en negrita (venía en 600) */
.cs-main[data-screen-label="Vehículos"] .a-table td strong { font-weight: 700; }
/* 08 (los selectores del formulario), 10, 11, 12, 13, 14 y 20 · todo selector `.seg` es blanco en el dibujo (9 de 9: #fff
   con borde), no beige */
.cs-main .seg { background: #fff; }
/* 11 y 14 · el botón del candado en rojo, como el dibujo (`.a-btn.ghost` de index.html le ganaba) */
.cs-main .a-btn.ghost.cp-saldo__ir { border-color: #E3B4AC; color: #8E3A31; }
/* 04 «Iniciar trámite» y 07 «Agendar y enviar»: el verde medio del dibujo (--dinamic-green), no el oscuro de las filas */
.cs-main .a-btn.primary.fc-iniciar__btn, .cs-main .ag-enviar .a-btn.primary { background: var(--cs-verde); }
.cs-main .a-btn.primary.fc-iniciar__btn:hover:not(:disabled), .cs-main .ag-enviar .a-btn.primary:hover:not(:disabled) { background: var(--cs-riel); }
/* 11, 12 y todo botón principal apagado: beige con texto gris, como el dibujo (#ECE9E0 / #8A8574 en sus 5 botones
   apagados), no el verde al 42 %. Van también los primarios que traen su propio fondo, que si no le ganarían */
.cs-main .a-btn.primary:disabled,
.cs-main .a-btn.primary.fc-iniciar__btn:disabled, .cs-main .ag-enviar .a-btn.primary:disabled,
.cs-main .mo-pacto .a-btn.primary.mo-boton:disabled { background: #ECE9E0; color: #8A8574; opacity: 1; }
/* 04 · bitácora: «Fuera de orden» y «Anulado» en los tonos del dibujo (#7A5A08 · #8E3A31) y sin negrita, como su <b> suelto */
.cs-main .bq-bita.orden p b { color: #7A5A08; font-weight: 400; }
.cs-main .bq-bita.anula p b { color: #8E3A31; font-weight: 400; }
/* 21 · «Aún sin datos suficientes» en el gris del dibujo (#8A8574), no en ocre */
.cs-main .rp-tarjeta__a.gris { color: #8A8574; }
@media (min-width: 861px) {
  /* 04 · «Cuánto tarda cada paso…» y su dato en una sola fila, como el dibujo (el rótulo se parte; el dato no) */
  .cs-main .fc-tarda { flex-wrap: nowrap; gap: 8px; }
  .cs-main .fc-tarda span { flex: 1; }
}
@media (max-width: 860px) {
  /* lo que se abre desde «Más» (y la ficha) lleva su barra verde con volver y SIN la barra de abajo, como el dibujo
     (08, 09, 10, 15, 17–21 y 04); Hoy, Cerrar el alta, Vehículos y Ministerio la conservan */
  body:has(.cs-propia) .cs-barra { display: none; }
  /* 02 · el renglón del carro va entero: con el chip se cortaba y se perdía el dueño */
  .bk-velo .bk-it__t span { white-space: normal; }
  /* 04 · la línea de bitácora: «cuándo · quién» arriba y el hecho debajo, como el dibujo */
  .cs-main .bq-bita { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "c q" "p p"; column-gap: 0; }
  .cs-main .bq-bita__c { grid-area: c; }
  .cs-main .bq-bita__q { grid-area: q; }
  .cs-main .bq-bita__q:not(:empty)::before { content: " · "; white-space: pre; }
  .cs-main .bq-bita p { grid-area: p; }
  /* 14 · el candado en una sola línea y el tipo de salida con los dos botones sueltos, sin la caja ni el rótulo */
  .cs-main .dv-aldia p { display: none; }
  .cs-main .dv-tipo { padding: 0; background: none; border-radius: 0; }
  .cs-main .dv-tipo__lab { display: none; }
}