/* Panel Trámites — la TANDA 5 del zip #5 (6-oct-2026): el cuerpo de las pantallas igual a la captura del dibujo.
   Hoja propia para que admin-pantallas.css no siga creciendo; la 5b y la 5c suman aquí lo suyo. */

/* ============================================================
   ZIP #5 · TANDA 5a (6-oct-2026) — 08 Capacidad · 11 Cambio de propietario · 18 Flota: el cuerpo igual a la captura.
   Medidas y colores literales de `Tramites v2.dc.html` (#t08, #t11, #t18). 07 vive en admin-capacitacion.css.
   Las clases *-web / *-tel: lo que el dibujo pinta solo en la web o solo en el teléfono.
   ============================================================ */
.cap5-tel, .cp5-tel, .fl5-tel { display: none; }
.cap5-cuadro { flex: none; width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; background: #3C7E67; color: #fff; }
.cap5-cuadro svg { width: 10px; height: 10px; }

/* ---------- 08 · CAPACIDAD ---------- */
.cs-main .cap5 { max-width: none; }
.cap5-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cap5-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-main .cap5-card, .cs-main .cp5-card { margin: 0; padding: 16px 18px; border: 1px solid #EAE5D9; border-radius: 14px; box-shadow: none;
  display: flex; flex-direction: column; gap: 12px; }
.cap5-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #304D45; }
.cap5-h--fila { display: flex; align-items: center; gap: 8px; }
.cap5-h--fila h3 { flex: 1; margin: 0; font: inherit; color: inherit; }
.cap5-cuenta { font-family: var(--font-body, inherit); font-weight: 400; font-size: 12px; color: #8A8574; white-space: nowrap; }
.cap5-lab, .cap5-campo > span { display: block; font-size: 11.5px; font-weight: 600; color: #55605B; margin-bottom: 5px; }
.cap5-campo { display: block; min-width: 0; margin: 0; }
.cap5-campo .c-select, .cap5-campo .c-input { width: 100%; box-sizing: border-box; height: 42px; border: 1px solid #DDD9CC; border-radius: 9px;
  padding: 0 12px; font-size: 13.5px; color: #27282A; background: #fff; }
.cap5-card > .cap5-lab { margin-bottom: -7px; }
.cap5-vin { display: flex; gap: 8px; }
.cap5-vin input { flex: 1; min-width: 0; height: 42px; box-sizing: border-box; border: 1px solid #DDD9CC; border-radius: 9px; padding: 0 12px;
  font: 600 14px ui-monospace, monospace; letter-spacing: 0.04em; color: #27282A; background: #fff; }
.cap5-runt { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #DDD9CC; background: #fff; border-radius: 9px;
  padding: 0 14px; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: #304D45; cursor: pointer; }
.cap5-runt:disabled { color: #8A8574; cursor: default; }
.cap5-eco { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #E7EEEB; }
.cap5-eco .cap5-cuadro { width: 16px; height: 16px; margin-top: 1px; }
.cap5-eco p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.45; color: #304D45; }
.cap5-eco.gris { background: #EFEBE0; }
.cap5-eco.gris .cap5-cuadro { background: #8A8574; }
.cap5-eco.gris p { color: #55605B; }
.cap5-eco.mal { background: #FBEEEC; }
.cap5-eco.mal .cap5-cuadro { background: #8E3A31; }
.cap5-eco.mal p { color: #8E3A31; }
.cap5-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cap5-conceptos { display: flex; gap: 4px; }
.cap5-conceptos button { flex: 1; min-width: 0; border: 1px solid #DDD9CC; background: #fff; border-radius: 8px; padding: 10px 4px;
  font: inherit; font-size: 12px; line-height: 1.25; color: #55605B; cursor: pointer; }
.cap5-conceptos button.on { background: #304D45; border-color: #304D45; color: #fff; font-weight: 700; }
.cap5-pct { max-width: 200px; }
.cap5-sop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cap5-card .cap5-h--fila + .cap5-sop { margin-top: -2px; }
.cap5-pieza { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; font: inherit; text-align: left;
  cursor: pointer; border: 1.5px solid transparent; background: none; }
.cap5-pieza strong { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #304D45; }
.cap5-pieza__k { flex: none; font-size: 11.5px; color: #55605B; }
.cap5-pieza.ok { background: #E7EEEB; }
.cap5-pieza.falta { background: #fff; border-color: #B8860B; border-style: dashed; }
.cap5-pieza.falta .cap5-cuadro { background: #B8860B; }
.cap5-pieza.falta strong, .cap5-pieza.falta .cap5-pieza__k { color: #7A5A08; }
.cap5-pieza.drag { background: #FBF3E0; }
.cap5-agregar { border: 0; background: none; padding: 0; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  color: #3C7E67; cursor: pointer; }
.cap5-prop { position: relative; border: 1px solid #EAE5D9; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cap5-prop__doc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.cap5-prop .cap5-campo > span { font-size: 11px; margin-bottom: 4px; }
.cap5-docin { display: flex; align-items: stretch; height: 40px; box-sizing: border-box; border: 1px solid #DDD9CC; border-radius: 8px; background: #fff; overflow: hidden; }
.cap5-tipo { display: block; width: auto; max-width: 100%; margin: 0 0 4px; padding: 0 14px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23A8B2AE'/%3E%3C/svg%3E") no-repeat right center;
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 11px; font-weight: 600; color: #55605B; cursor: pointer; }
.cap5-reviso.cap5-tel { display: none; }
/* 5a · 3 (§2-8): «Quitar» y «Facturar a este» se VEN siempre (antes aparecían al pasar el ratón, y el teléfono no tiene hover).
   «Quitar» va a la derecha del renglón Cédula · Nombre, desde el segundo propietario. */
.cap5-prop__doc2.con-quitar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.cap5-quitar { align-self: end; height: 40px; border: 0; background: none; padding: 0 2px; font: inherit; font-family: var(--font-display);
  font-weight: 700; font-size: 12px; color: #8A8574; cursor: pointer; }
.cap5-quitar:hover { color: #8E3A31; text-decoration: underline; }
/* 5a · 3 (E1): el selector de «Empresa que emite» muestra la razón social completa, en dos líneas si no cabe */
.cap5-campo > .cap5-sel { position: relative; display: flex; margin: 0; font-weight: 400; align-items: center; min-height: 42px; box-sizing: border-box; padding: 4px 30px 4px 12px;
  border: 1px solid #DDD9CC; border-radius: 9px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8574'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 13.5px; line-height: 1.3; color: #27282A; }
.cap5-sel.vacio { color: #8A8574; }
.cap5-sel:focus-within { border-color: #3C7E67; box-shadow: 0 0 0 3px rgba(60, 126, 103, 0.15); }
.cap5-sel__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cap5-sel__n { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
/* 5a · 3 (§2-4): la nota del % al pie de Propietarios, como el dibujo */
.cap5-notapct { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #F7F5EF; }
.cap5-notapct .cap5-cuadro { width: 16px; height: 16px; background: #8A8574; }
.cap5-notapct p { margin: 0; font-size: 12px; line-height: 1.45; color: #55605B; }
.cap5-notapct b { font-weight: 700; }
/* 5a · 3 (§2-7): «3 de 10» del subtítulo es un enlace que abre «registrar compra» (verde, subrayado al pasar) */
.cs-cab--pant .cs-cab__t p button.cap5-cupl { color: #3C7E67; }
.cap5-docin input { flex: 1; min-width: 0; border: 0; padding: 0 10px; font: inherit; font-size: 13px; color: #27282A; background: transparent; }
.cap5-eco-nombre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 40px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid #EAE5D9; border-radius: 8px; background: #F7F5EF; }
.cap5-eco-nombre .cap5-cuadro { width: 13px; height: 13px; }
.cap5-eco-nombre strong { font-size: 13px; font-weight: 700; color: #304D45; }
.cap5-eco-nombre .a-btn.mini { padding: 4px 10px; font-size: 12px; }
.cap5-fact-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap5-fact { border: 1px solid #DDD9CC; background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-family: var(--font-display);
  font-weight: 700; font-size: 11.5px; color: #304D45; cursor: pointer; }
.cap5-fact:disabled { cursor: default; }
.cap5-fact.on { background: #304D45; border-color: #304D45; color: #fff; }
.cap5-pista { font-size: 12px; color: #8A8574; }
.cap5-contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cap5-contacto .c-input { width: 100%; box-sizing: border-box; height: 38px; border: 1px solid #DDD9CC; border-radius: 8px; padding: 0 10px;
  font-size: 13px; color: #27282A; background: #fff; }
.cap5-contacto .prop-field { position: relative; }
.cap5-reviso { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.45; color: #27282A; cursor: pointer; }
.cap5-reviso input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #3C7E67; }
.cap5-reviso b { font-weight: 700; }
.cap5-pie { display: flex; align-items: center; gap: 12px; }
.cap5-falta { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.45; color: #8E3A31; }
.cap5-falta b { font-weight: 700; }
.cs-main .cap5-generar { flex: none; margin-left: auto; min-height: 0; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  background: #3C7E67; border-color: #3C7E67; }
.cs-main .cap5-generar:disabled { background: #ECE9E0; border-color: #ECE9E0; color: #8A8574; opacity: 1; }
.cap5-nota { margin: 0; font-size: 12px; line-height: 1.45; color: #8A8574; }

@media (max-width: 1100px) {
  .cap5-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cap5-web { display: none !important; }
  .cap5-tel { display: inline; }
  .cap5-grid, .cap5-col { gap: 10px; }
  .cs-main .cap5-card { padding: 12px; border-radius: 12px; gap: 8px; }
  .cs-main .cap5-col:first-child > .cap5-card:first-child { background: transparent; border: 0; padding: 0; gap: 10px; }
  .cap5-vin input { height: 44px; border-radius: 10px; font-size: 13px; }
  .cap5-eco .cap5-cuadro { width: 14px; height: 14px; margin-top: 2px; }
  .cap5-eco p { font-size: 12px; }
  .cap5-2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cap5-campo .c-select, .cap5-campo .c-input { height: 44px; border-radius: 10px; }
  .cap5-campo > .cap5-sel { min-height: 44px; border-radius: 10px; }
  .cap5-conceptos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .cap5-conceptos button { padding: 11px 4px; font-size: 12.5px; }
  .cap5-h { font-size: 13px; }
  .cap5-agregar { font-size: 12px; }
  .cap5-pieza.ok { display: none; }
  .cap5-pieza .cap5-pieza__k { display: none; }
  .cap5-sop { grid-template-columns: minmax(0, 1fr); }
  /* 5a · 3 (E5): el orden del dibujo en el teléfono — el vehículo → Propietarios → Soportes → casilla + Falta + Generar.
     Las dos columnas de la web se disuelven (display: contents) y cada tarjeta toma su turno. */
  .cap5-col { display: contents; }
  .cap5-col:first-child > .cap5-card:first-child { order: 1; }
  .cap5-col:last-child > .cap5-card:first-child { order: 2; }
  .cap5-col:first-child > .cap5-card:nth-child(2) { order: 3; }
  .cap5-cierre { order: 4; }
  .cap5-grid > .cap5-col > .cs-pie-hueco { order: 5; }
  .cap5-prop { border: 0; padding: 0; gap: 8px; }
  /* 5a · 3 (§2-8): el verificado es una tarjeta compacta; al tocarla se despliega (cédula, nombre, chip, facturación, Quitar) */
  .cap5-prop.hecho:not(.abierto) .cap5-prop__doc2, .cap5-prop.hecho:not(.abierto) .cap5-fact-fila,
  .cap5-prop.hecho:not(.abierto) .cap5-contacto { display: none; }
  .cap5-prop__fila.cap5-tel, .cp5 .cap5-prop__fila.cp5-tel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; border: 0;
    background: none; padding: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
  .cap5-prop__fila strong { flex: 1; font-weight: 700; color: #304D45; }
  .cap5-prop__fila .cap5-fact.on { padding: 2px 8px; font-size: 10.5px; }
  .cap5-prop.hecho.abierto { padding-bottom: 4px; }
  .cap5-prop__doc { font-size: 11.5px; color: #8A8574; }
  .cap5-prop__doc2, .cap5-prop__doc2.con-quitar, .cap5-contacto { grid-template-columns: minmax(0, 1fr); }
  .cap5-quitar { justify-self: end; height: 32px; }
  .cs-main .cap5-cierre { background: transparent; border: 0; padding: 0; }
  .cap5-pie.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: #F7F5EF; border-top: 0; }
  .cap5-pie .cap5-reviso.cap5-tel { display: flex; }
  .cap5-pie .cap5-falta { flex: none; font-size: 12px; }
  .cs-main .cap5-pie .cap5-generar { width: 100%; height: 48px; margin: 0; border-radius: 12px; font-size: 14px; justify-content: center; }
}

/* ---------- 11 · CAMBIO DE PROPIETARIO (5a) ---------- */
.cp5 .cp-saldo { margin-bottom: 16px; }
/* 5a · 3 (E6): el candado agrupado del dibujo — «Administración · agosto y septiembre   Renovación T.O. · cobro cargado …» */
.cs-main .cp-saldo__fam { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; line-height: 1.5; color: #55605B; }
.cs-main .cp-saldo__fam b { font-weight: 700; color: #304D45; }
.cs-main .cp-saldo__linea { margin: 0; font-size: 12px; line-height: 1.45; color: #55605B; }
.cp5-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cs-main .cp5-card { gap: 10px; }
.cp5-firmados { display: flex; flex-direction: column; gap: 10px; }
.cp5-pieza { width: 100%; }
.cp5-dispara { padding: 10px 12px; border-radius: 10px; background: #F7F5EF; display: flex; flex-direction: column; gap: 4px; }
.cp5-dispara h4 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8574; }
.cp5-dispara p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #55605B; }
.cp5-dispara b { font-weight: 700; color: #304D45; }
.cs-main .cp5-cierre { margin-top: 16px; padding: 14px 18px; }
.cp5-pie { display: flex; align-items: center; gap: 12px; }
.cp5-pie .cap5-reviso { flex: 1; }
.cp5-pie .cap5-falta { flex: none; text-align: right; }

/* ---------- 18 · FLOTA Y CAPACIDAD (5a) ---------- */
.fl5-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fl5-tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; min-width: 0; }
.fl5-tarjeta__k { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8574; }
.fl5-tarjeta strong { margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.2; color: #304D45; }
.fl5-tarjeta__s { font-size: 12.5px; line-height: 1.45; color: #55605B; }
.fl5-tarjeta__t { display: none; }
.fl5-cupos.ambar { border-top: 3px solid #B8860B; }
.fl5-cupos.ambar strong { color: #7A5A08; }
.fl5-cupos.rojo { border-top: 3px solid #B4322A; }
.fl5-cupos.rojo strong { color: #B4322A; }
.cs-main .fl5-tabla { margin: 0; padding: 0; border: 1px solid #EAE5D9; border-radius: 14px; box-shadow: none; overflow: hidden; }
.fl5-fila { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 18px;
  border-bottom: 1px solid #F2EFE6; font-size: 13px; color: #55605B; }
.fl5-fila:last-child { border-bottom: 0; }
.fl5-fila strong { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #304D45; }
.fl5-fila--cab { padding: 10px 18px; border-bottom: 1px solid #EAE5D9; font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8A8574; }
.fl5-pend { font-style: italic; color: #8A8574; }
/* 5a · 3 (E9): «pendiente de definir» dentro de una tarjeta, en el sitio de la cifra */
.fl5-tarjeta strong .fl5-pend--t { display: block; margin: 8px 0 6px; font-family: var(--font-body, inherit); font-weight: 400; font-size: 15px; line-height: 1.3; }
.fl5-seg.fl5-tel { display: none; }
.fl5-pasa { color: #B4322A; font-weight: 700; }
.fl5-barra { display: block; height: 8px; border-radius: 4px; background: #EFEBE0; overflow: hidden; }
.fl5-barra > span { display: block; height: 100%; }
.fl5-barra .verde { background: #3C7E67; }
.fl5-barra .ambar { background: #B8860B; }
.fl5-barra .rojo { background: #B4322A; }

@media (max-width: 860px) {
  .cp5-web, .fl5-web { display: none !important; }
  .cp5-tel, .fl5-tel { display: inline; }
  /* 11 · el teléfono */
  .cp5-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs-main .cp5-card { padding: 12px 14px; gap: 8px; }
  .cs-main .cp5-grid .cp5-card:last-child { gap: 6px; }
  .cp5 .cp-saldo { margin-bottom: 10px; }
  .cp5 .cp-saldo__ir { width: 100%; height: 40px; justify-content: center; }
  .cs-main .cp-saldo__linea.cp5-tel { display: block; }
  .cp5 .cap5-prop { border: 0; padding: 0; }
  .cp5 .cap5-prop__doc2, .cp5 .cap5-prop__doc2.con-quitar, .cp5 .cap5-contacto { grid-template-columns: minmax(0, 1fr); }
  .cp5-firmados { gap: 6px; }
  /* 5a · 3 (E7): «Firmados» muestra TODAS las piezas — primero las hechas con su punto verde, luego la que falta */
  .cp5 .cap5-pieza.ok { display: flex; order: 0; }
  .cp5 .cap5-pieza.falta { order: 1; }
  .cp5-pieza.ok { background: none; padding: 0; border: 0; }
  .cp5-pieza.ok .cap5-cuadro { width: 12px; height: 12px; border-radius: 50%; }
  .cp5-pieza.ok .cap5-cuadro svg { display: none; }
  .cp5-pieza.ok strong { font-weight: 400; color: #304D45; }
  .cp5-pieza.falta .cap5-cuadro { display: none; }
  .cs-main .cp5-cierre { background: transparent; border: 0; padding: 0; margin: 0; }
  .cp5-pie.cs-pie-fijo { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: #F7F5EF; border-top: 0; }
  .cp5-pie .cap5-falta { text-align: left; font-size: 12px; }
  .cs-main .cp5-pie .cap5-generar { width: 100%; height: 48px; margin: 0; border-radius: 12px; font-size: 14px; justify-content: center; }
  /* 18 · el teléfono: tres cifras chicas y la lista con su barra debajo */
  /* 5a · 3 (E8): el selector de empresa en una fila bajo la cabecera — la misma pieza de la web, a todo el ancho */
  .fl5-seg.fl5-tel { display: flex; gap: 4px; padding: 4px; margin: 0 0 10px; background: #fff; border: 1px solid #EAE5D9; border-radius: 10px; }
  .fl5-seg.fl5-tel button { flex: 1; min-width: 0; min-height: 36px; border: 0; background: transparent; border-radius: 7px; padding: 7px 10px; font: inherit;
    font-size: 12.5px; color: #55605B; cursor: pointer; }
  .fl5-seg.fl5-tel button.on { background: #304D45; color: #fff; font-weight: 700; }
  .fl5-tarjeta strong .fl5-pend--t { margin: 4px 0 2px; font-size: 12px; }
  .fl5-tarjetas { gap: 8px; margin-bottom: 10px; }
  .fl5-tarjeta { align-items: center; padding: 10px; border-radius: 12px; text-align: center; }
  .fl5-tarjeta__k, .fl5-tarjeta__s { display: none; }
  .fl5-tarjeta strong { margin: 0; font-size: 22px; }
  .fl5-tarjeta__t { display: block; font-size: 10.5px; color: #55605B; }
  .cs-main .fl5-tabla { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .fl5-fila--cab { display: none; }
  .fl5-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; column-gap: 8px; padding: 0; border: 0; font-size: 12.5px; color: #304D45; }
  .fl5-fila strong { font-size: 12.5px; }
  .fl5-par { justify-self: end; color: #304D45; }
  .fl5-par.fl5-pasa { color: #B4322A; font-weight: 700; }
  .fl5-barra { grid-column: 1 / -1; height: 7px; }
}

/* ============================================================
   ZIP #5 · TANDA 5a · 9 (6-oct-2026) — las correcciones de Design para el Run: 5a-27 (08, el VIN que el RUNT no tiene) ·
   5a-20 (08 y 11, el eco del documento caído: reusa la franja gris del RUNT, `.cap5-eco.gris`) · 5a-25 (11, la empresa
   entra al parque). Medidas y colores de `Tramites v2.dc.html` (#t08 y #t11, los estados).
   ============================================================ */
/* 08 · 5a-27: borde rojo en el campo y la línea roja bajo él, sin franja */
.cap5-vin.mal input { border: 1.5px solid #B4322A; }
.cap5-vin-mal { display: flex; align-items: center; gap: 6px; margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; color: #8E3A31; }
.cap5-vin-mal svg { flex: none; }

/* 11 · 5a-25: «+ Agregar» con chevron → el menú (web) · la hoja (teléfono) */
.cp5-agregar { position: relative; flex: none; }
.cp5-agregar .cap5-agregar { display: inline-flex; align-items: center; gap: 3px; }
.cp5-agregar__ch { display: inline-flex; }
.cp5-agregar__ch svg { transform: rotate(90deg); }
.cp5-velo { position: fixed; inset: 0; z-index: 60; }
.cp5-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 61; width: max-content; min-width: 300px; max-width: 360px; box-sizing: border-box; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #EAE5D9; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(48, 77, 69, 0.14); font-family: var(--font-body, inherit); font-weight: 400; }
.cp5-menu__op { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; text-align: left; color: #304D45; cursor: pointer; }
.cp5-menu__op:hover, .cp5-menu__op:focus-visible { background: #F7F5EF; outline: none; }
.cp5-menu__op > svg { flex: none; margin-top: 1px; color: #3C7E67; }
.cp5-menu__t { display: flex; flex-direction: column; min-width: 0; }
.cp5-menu__t b { font-size: 13px; font-weight: 600; color: #304D45; }
.cp5-menu__t small { font-size: 11.5px; line-height: 1.4; color: #8A8574; }

/* 11 · 5a-25: la caja de la empresa — entra al parque (NIT y razón social de la configuración, en gris: no se digitan; el %
   sí) o fija (ya en parque: su % de la base, «No se quita aquí.») */
.cp5-emp { border: 1px solid #EAE5D9; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #F7F5EF; }
.cp5-emp.fija { padding: 10px 12px; }
.cp5-emp__det { display: flex; flex-direction: column; gap: 8px; }
.cp5-emp__doc2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.cp5-emp .cap5-campo > span { font-size: 11px; margin-bottom: 4px; }
.cp5-emp__v { display: flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 1px solid #EAE5D9; border-radius: 8px;
  background: #EFEBE0; font-size: 13px; color: #55605B; overflow-wrap: anywhere; }
.cp5-emp__v.fuerte { color: #304D45; font-weight: 700; }
.cp5-emp__fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp5-chip { flex: none; border: 1px solid #3C7E67; border-radius: 999px; padding: 4px 10px; font-family: var(--font-display); font-size: 11.5px;
  font-weight: 700; line-height: 1.2; color: #3C7E67; white-space: nowrap; }
.cp5-chip.fija { border-color: #8A8574; color: #55605B; }
.cp5-emp__pctin { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }
.cp5-emp__pctin > span { font-size: 11.5px; font-weight: 600; color: #55605B; }
.cs-main .cp5-emp__pctin .c-input { width: 64px; height: 36px; box-sizing: border-box; border: 1px solid #DDD9CC; border-radius: 8px; padding: 0 10px;
  font-size: 13px; color: #27282A; background: #fff; }
.cp5-emp .cap5-quitar { align-self: center; height: auto; color: #8E3A31; font-weight: 600; }
.cp5-emp__pct { flex: none; font-size: 12px; color: #55605B; }
.cp5-emp__nombre { display: flex; align-items: center; gap: 10px; }
.cp5-emp__nombre > svg { flex: none; color: #8A8574; }
.cp5-emp__nombre strong { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #304D45; }
.cp5-emp__dato { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #55605B; }
.cp5-emp__dato b { font-weight: 700; color: #304D45; }
.cp5-emp__noq { margin-left: auto; color: #8A8574; }

/* 11 · 5a-25: la línea del parque — web, con su ícono en la franja crema; teléfono, la línea corta */
.cp5-parque { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #F7F5EF; font-size: 12px;
  line-height: 1.45; color: #55605B; }
.cp5-parque.largo { align-items: flex-start; }
.cp5-parque > svg { flex: none; color: #8A8574; }
.cp5-parque.largo > svg { margin-top: 2px; }
.cp5-parque b, .cp5-parque-tel b { font-weight: 700; color: #304D45; }
.cp5-parque-tel { margin: 0; font-size: 11.5px; line-height: 1.45; color: #55605B; }
.cp5-enlace { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #3C7E67; text-decoration: underline; cursor: pointer; }

@media (max-width: 860px) {
  /* 08: la línea roja del teléfono (12 px, a 6 px del campo) */
  .cap5-vin-mal { margin-top: -4px; align-items: flex-start; font-size: 12px; }
  .cap5-vin-mal svg { margin-top: 1px; }
  /* la hoja de «+ Agregar»: abajo, a todo el ancho, sobre la barra y el pie fijo */
  .cp5-velo { z-index: 72; background: rgba(39, 40, 42, 0.32); }
  .cp5-menu { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 73; width: auto; min-width: 0; max-width: none; padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(48, 77, 69, 0.14); }
  .cp5-menu__op { min-height: 48px; padding: 12px; align-items: center; }
  /* la empresa, como las personas: un renglón que al tocarse se despliega */
  .cs-main .cp5-emp { border: 0; padding: 0; background: none; }
  .cp5 .cp5-emp__tel.cp5-tel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; border: 0; background: none; padding: 0;
    font: inherit; font-size: 13px; text-align: left; color: #304D45; }
  .cp5 button.cp5-emp__tel { cursor: pointer; }
  .cp5-emp__tel strong { flex: 1; min-width: 0; font-weight: 700; color: #304D45; }
  .cp5-emp__tel .cp5-chip { padding: 2px 8px; font-size: 10.5px; }
  .cp5-emp:not(.abierto) .cp5-emp__det { display: none; }
  .cp5-emp__doc2 { grid-template-columns: minmax(0, 1fr); }
  .cp5-emp__pctin { margin-left: 0; }
  .cp5-emp .cap5-quitar { margin-left: auto; }
  .cp5-parque-tel.cp5-tel { display: block; }
}