/* ============================================================================
   Transacciones · Paola Rodriguez Real Estate

   La paleta y los gestos vienen del panel del asistente (paola.jeanpasquel.com),
   que Jean ya aprobó: blanco, tinta, una marca navy, cobre para lo que pide
   atención, verde para lo que está bien, y cifras en monoespaciada que son
   PESTAÑAS DE FILTRO, no adornos. La estructura viene de C48: tablero con
   métricas + buscador + filtros + tabla, ficha por ruta, modales de formulario.

   El color es información: rojo = vencida, cobre = vence esta semana, verde =
   al día. Nada más lleva color, para que el rojo siga saltando.
   ========================================================================= */

:root {
  --tinta: #111820; --tinta-2: #46586c; --tenue: #8a99a8;
  --papel: #ffffff; --linea: #e8ecf1; --linea-2: #f2f5f8; --fondo-2: #f8fafc;
  --marca: #12385f; --cobre: #a8792f;
  --verde: #14794a; --gris: #6b7b8c; --rojo: #a33a35;
  --cobre-velo: #fdf8f1; --verde-velo: #f0f8f4; --rojo-velo: #fdf3f2; --marca-velo: #eaf1f9;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r: 7px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* --- cabecera (idéntica en gesto a la del asistente) --- */
header.barra { display: flex; align-items: center; gap: 14px; padding: 16px 34px; border-bottom: 1px solid var(--linea); }
header.barra img { height: 46px; width: auto; display: block; }
header.barra .sub { color: var(--tenue); font-size: 14px; }
header.barra nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: 14.5px; }
header.barra nav a { text-decoration: none; color: var(--tenue); cursor: pointer; padding-bottom: 2px; border-bottom: 2px solid transparent; }
header.barra nav a.on { color: var(--tinta); font-weight: 600; border-bottom-color: var(--tinta); }
header.barra nav a.salir { text-decoration: underline; }
header.barra .vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--tinta-2); margin-right: 8px; }
header.barra .vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
header.barra .vivo.mal::before { background: var(--rojo); }

main { padding: 0 34px 60px; }
.cargando, .vacio { padding: 60px 20px; text-align: center; color: var(--tenue); }
.vacio strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 6px; }

/* --- métricas = pestañas de filtro --- */
.tabs { display: flex; gap: 52px; padding: 30px 0 0; flex-wrap: wrap; }
.tab { cursor: pointer; padding-bottom: 14px; border-bottom: 3px solid transparent; }
.tab b { display: block; font-family: var(--mono); font-size: 46px; font-weight: 400; line-height: 1; letter-spacing: -2px; color: var(--tinta); }
.tab span { display: block; margin-top: 11px; font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--tenue); }
.tab.on { border-bottom-color: var(--tinta); }
.tab.on span { color: var(--tinta); font-weight: 600; }
.tab.verde b { color: var(--verde); }
.tab.cobre b { color: var(--cobre); }
.tab.rojo b { color: var(--rojo); }
.tab.vacia b { color: #c3ccd6; }
.tabs-linea { border-bottom: 1px solid var(--linea); margin-bottom: 26px; }

/* --- acciones de sección --- */
.seccion { margin-top: 34px; }
.seccion__tit { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.seccion__tit h2 { font-size: 16px; }
.seccion__tit .crece { flex: 1; }

/* --- filtros --- */
.filtros { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.canales { display: flex; gap: 6px; flex-wrap: wrap; }
.canal { font: inherit; font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--tenue); white-space: nowrap; }
.canal b { font-weight: 600; opacity: .65; margin-left: 2px; }
.canal:hover { border-color: var(--tinta); color: var(--tinta); }
.canal.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }
input[type=search], input[type=password], input[type=text], input[type=number], input[type=date], input[type=email], input[type=tel], select, textarea {
  padding: 11px 15px; border: 1px solid var(--linea); border-radius: var(--r); font: inherit; font-size: 14.5px; background: #fff; color: var(--tinta); width: 100%;
}
input[type=search] { width: 350px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); }
input[type=date], input[type=number], .mono { font-family: var(--mono); }
.conteo { margin-left: auto; font-size: 13px; color: var(--tenue); font-family: var(--mono); }
.palanca { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tenue); cursor: pointer; white-space: nowrap; }
.palanca input { margin: 0; accent-color: var(--tinta); }
.palanca.on { color: var(--tinta); }

/* --- tabla (gesto del asistente: filete izquierdo por estado) --- */
.envuelta { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); font-weight: 600; padding: 0 14px 12px 0; border-bottom: 1px solid var(--linea); }
tbody td { padding: 16px 14px 16px 0; vertical-align: middle; font-family: var(--mono); font-size: 13.5px; border-bottom: 1px solid var(--linea-2); color: var(--tinta-2); }
tbody td:first-child { padding-left: 15px; border-left: 3px solid transparent; }
tr.vencida td:first-child { border-left-color: var(--rojo); }
tr.semana  td:first-child { border-left-color: var(--cobre); }
tr.aldia   td:first-child { border-left-color: var(--verde); }
tr.cerrada td:first-child { border-left-color: var(--linea); }
tr.clicable { cursor: pointer; }
tr.clicable:hover td { background: var(--fondo-2); }
.quien b { font-family: var(--sans); font-size: 15px; display: block; color: var(--tinta); }
.quien .via { font-size: 11px; color: var(--tenue); display: block; margin-top: 2px; font-family: var(--sans); }
.estado { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; font-family: var(--sans); }
.estado.verde { color: var(--verde); } .estado.gris { color: var(--gris); } .estado.azul { color: var(--marca); }
.estado.rojo { color: var(--rojo); } .estado.cobre { color: var(--cobre); }
.dias { font-family: var(--mono); font-size: 15px; }
.dias.rojo { color: var(--rojo); } .dias.cobre { color: var(--cobre); } .dias.verde { color: var(--verde); }
td.falta, .falta { color: #c3ccd6; }
.motivo { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 4px; max-width: 260px; line-height: 1.35; font-family: var(--sans); }
.barra-dep { display: flex; align-items: center; gap: 3px; }
.bloque { width: 15px; height: 9px; background: var(--linea); }
.bloque.si { background: var(--tinta); }
.barra-dep em { font-style: normal; margin-left: 9px; color: var(--tinta-2); font-size: 12.5px; }

/* --- botones (contorno cobre / verde, como el asistente; sólido marca para el principal) --- */
.accion, .btn { border: 1px solid var(--cobre); color: var(--cobre); background: #fff; padding: 8px 15px; border-radius: 5px; font-size: 13px; white-space: nowrap; font-family: var(--sans); }
.accion:hover, .btn:hover { background: var(--cobre-velo); }
.btn--verde { border-color: var(--verde); color: var(--verde); } .btn--verde:hover { background: var(--verde-velo); }
.btn--rojo { border-color: var(--rojo); color: var(--rojo); } .btn--rojo:hover { background: var(--rojo-velo); }
.btn--gris { border-color: var(--linea); color: var(--tinta-2); } .btn--gris:hover { background: var(--fondo-2); border-color: var(--tenue); }
.btn--principal { background: var(--marca); border-color: var(--marca); color: #fff; padding: 10px 20px; border-radius: 6px; font-size: 14px; }
.btn--principal:hover { background: #0e2c4c; }
.btn--plano { border-color: transparent; color: var(--tenue); background: transparent; }
.btn--plano:hover { color: var(--tinta); background: transparent; }
.btn:disabled, .accion:disabled { opacity: .5; cursor: default; }

/* --- agenda: la regla del hoy --- */
.agenda { position: relative; padding: 26px 0 0; }
.agenda::before { content: ""; position: absolute; top: 0; bottom: 0; left: 92px; width: 1px; background: var(--linea); }
.tramo > h3 { padding: 22px 0 8px 116px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.fila { display: grid; grid-template-columns: 92px 1fr auto; align-items: baseline; gap: 0 24px; padding: 13px 0; border-bottom: 1px solid var(--linea-2); cursor: pointer; position: relative; }
.fila:hover { background: var(--fondo-2); }
.fila .d { text-align: right; padding-right: 22px; font: 400 21px/1 var(--mono); color: var(--tenue); letter-spacing: -.03em; }
.fila.pasado .d { color: var(--rojo); } .fila.hoy .d { color: var(--marca); font-weight: 600; } .fila.pronto .d { color: var(--cobre); }
.fila.pasado::after, .fila.hoy::after { content: ""; position: absolute; left: 92px; top: 20px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--rojo); }
.fila.hoy::after { background: var(--marca); }
.fila .cuerpo { padding-left: 24px; }
.fila .titulo { font-weight: 600; color: var(--tinta); }
.fila .sitio { font-size: 13px; color: var(--tenue); margin-top: 2px; }
.fila .der { font: 400 13.5px/1 var(--mono); color: var(--tinta-2); white-space: nowrap; }
.fila .der small { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 5px; }
.marca-hoy { display: grid; grid-template-columns: 92px 1fr; align-items: center; margin: 8px 0; }
.marca-hoy .eje { text-align: right; padding-right: 22px; font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: 1.2px; color: var(--marca); }
.marca-hoy .traza { height: 1px; background: var(--marca); opacity: .35; }
.nota-cobre { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--cobre); margin-left: 8px; font-family: var(--sans); }

/* --- ficha (ruta /transaccion/:id) --- */
.ficha-cab { display: flex; align-items: flex-start; gap: 16px; padding: 30px 0 22px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.ficha-cab .folio { font-family: var(--mono); font-size: 12.5px; color: var(--cobre); letter-spacing: .5px; }
.ficha-cab h1 { font-size: 24px; font-weight: 600; margin-top: 4px; }
.ficha-cab .sub { color: var(--tenue); font-size: 14px; margin-top: 4px; }
.ficha-cab .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; margin-top: 26px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 24px; }
.dato .rot { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); font-weight: 600; margin-bottom: 4px; }
.dato .val { color: var(--tinta-2); font-family: var(--mono); font-size: 13.5px; }
.dato .val.sans { font-family: var(--sans); font-size: 14.5px; }
.dato .val a { color: var(--marca); }
h5 { margin: 0 0 12px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
.lado > * + * { margin-top: 26px; }
.resumen { background: var(--fondo-2); border-left: 2px solid var(--marca); padding: 11px 14px; font-size: 13.5px; color: var(--tinta-2); }
.resumen.cobre { border-left-color: var(--cobre); background: var(--cobre-velo); }
.resumen.rojo { border-left-color: var(--rojo); background: var(--rojo-velo); color: var(--rojo); }
.resumen b { color: var(--tinta); }
.resumen.rojo b { color: var(--rojo); }
.plazos { list-style: none; padding: 0; margin: 0; position: relative; }
.plazos::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 56px; width: 1px; background: var(--linea); }
.plazos li { display: grid; grid-template-columns: 56px 1fr auto; gap: 0 18px; align-items: baseline; padding: 8px 0; }
.plazos .d { text-align: right; padding-right: 16px; font: 400 15px/1 var(--mono); color: var(--tenue); }
.plazos li.pasado .d { color: var(--rojo); } .plazos li.hoy .d { color: var(--marca); font-weight: 600; } .plazos li.pronto .d { color: var(--cobre); }
.plazos li.listo .d, .plazos li.listo .q { color: #c3ccd6; }
.plazos .q { padding-left: 18px; color: var(--tinta-2); font-size: 14px; }
.plazos .f { font: 400 12px/1 var(--mono); color: var(--tenue); }
.libro .fila-l { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linea-2); font-size: 14px; color: var(--tinta-2); }
.libro .fila-l b { font-family: var(--mono); font-weight: 500; color: var(--tinta); }
.libro .fila-l.suma { border-bottom: 0; border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 12px; }
.bitacora { list-style: none; padding: 0; margin: 0; }
.bitacora li { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 7px 0; font-size: 13px; color: var(--tinta-2); border-bottom: 1px solid var(--linea-2); }
.bitacora time { font-family: var(--mono); font-size: 11.5px; color: var(--tenue); }

/* --- adjuntos --- */
.soltar { border: 1.5px dashed var(--linea); border-radius: var(--r); padding: 22px 16px; text-align: center; color: var(--tenue); font-size: 13.5px; cursor: pointer; }
.soltar b { display: block; color: var(--tinta-2); font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.soltar:hover, .soltar.encima { border-color: var(--cobre); background: var(--cobre-velo); color: var(--cobre); }
.adjuntos { display: grid; gap: 8px; margin-top: 12px; }
.adjunto { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--r); font-size: 13.5px; }
.adjunto__ext { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; color: var(--tenue); border: 1px solid var(--linea); border-radius: 4px; padding: 3px 5px; }
.adjunto a { color: var(--tinta); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.adjunto__peso { font-family: var(--mono); font-size: 11.5px; color: var(--tenue); }

/* --- modal (formulario; el pie fijo al final del MODAL, no de la página) --- */
.velo { position: fixed; inset: 0; background: rgba(17,24,32,.32); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.modal { background: #fff; border-radius: 10px; width: min(860px, 100%); max-height: min(90vh, 940px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(17,24,32,.22); }
.modal--angosto { width: min(520px, 100%); }
.modal__cab { padding: 22px 30px 18px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; }
.modal__cab h2 { font-size: 18px; }
.modal__cab .cerrar { margin-left: auto; border: 0; background: none; font-size: 22px; color: var(--tenue); padding: 0 4px; line-height: 1; }
.modal__cuerpo { padding: 24px 30px; overflow-y: auto; flex: 1; }
.modal__pie { padding: 16px 30px; border-top: 1px solid var(--linea); display: flex; gap: 10px; align-items: center; justify-content: flex-end; background: var(--fondo-2); }
.modal__pie .error { margin-right: auto; }
.grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 18px; margin-bottom: 26px; }
.grupo--tit { grid-column: 1 / -1; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cobre); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.campo { display: block; }
.campo > span { display: block; font-size: 11.5px; color: var(--tenue); margin-bottom: 5px; letter-spacing: .3px; }
.campo--doble { grid-column: span 2; } .campo--ancho { grid-column: 1 / -1; }
.campo__pista { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 5px; line-height: 1.4; }
.campo.propuesta input { border-style: dashed; }
.error { border-left: 3px solid var(--rojo); background: var(--rojo-velo); color: var(--rojo); padding: 12px 15px; font-size: 13.5px; border-radius: 0 var(--r) var(--r) 0; }
.error p { margin: 6px 0 0; color: var(--tinta-2); }

/* --- buscador del CRM --- */
.buscacrm__caja { position: relative; }
.buscacrm__lista { margin-top: 6px; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); max-height: 264px; overflow-y: auto; padding: 5px; }
.buscacrm__fila { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 5px; }
.buscacrm__fila:hover { background: var(--fondo-2); }
.buscacrm__nombre { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscacrm__meta { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 1px; font-family: var(--mono); }
.buscacrm__nota { padding: 11px 10px; font-size: 12.5px; color: var(--tenue); line-height: 1.5; }
.buscacrm__pie { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--tenue); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buscacrm__crear { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 5px; border: 1px solid var(--verde); background: #fff; color: var(--verde); font-size: 12.5px; font-weight: 600; }
.buscacrm__estado { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); font-family: var(--sans); }
.chip--verde { border-color: var(--verde); color: var(--verde); background: var(--verde-velo); }
.chip--cobre { border-color: var(--cobre); color: var(--cobre); background: var(--cobre-velo); }

/* --- toast --- */
.nota { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 14px; z-index: 60; box-shadow: 0 10px 30px rgba(17,24,32,.25); }
.nota--mal { background: var(--rojo); }

/* --- ajustes --- */
.ajustes { display: grid; grid-template-columns: 1fr 340px; gap: 36px; margin-top: 28px; }
.ajustes .tarjeta { border: 1px solid var(--linea); border-radius: 10px; padding: 24px; }
.ajustes .lado > * + * { margin-top: 18px; }

/* --- entrada --- */
.puerta { max-width: 330px; margin: 90px auto; text-align: center; }
.puerta img { height: 52px; margin-bottom: 34px; }
.puerta label { display: block; text-align: left; font-size: 11.5px; color: var(--tenue); margin-bottom: 5px; letter-spacing: .3px; }
.puerta button { width: 100%; margin-top: 12px; }
.puerta .error { margin-top: 14px; text-align: left; }

/* --- importar --- */
.tabla-lectura td { font-size: 13px; }

/* --- teléfono --- */
@media (max-width: 900px) {
  .ficha-grid, .ajustes { grid-template-columns: 1fr; }
  .grupo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Cuatro entradas de menú más el logo no caben en 375 px: la barra se parte en
     dos líneas, el logo arriba y el menú debajo, en vez de romper «Qué vence». */
  header.barra { padding: 12px 18px; gap: 8px 10px; flex-wrap: wrap; }
  header.barra img { height: 34px; }
  header.barra .sub, header.barra .vivo { display: none; }
  header.barra nav { width: 100%; margin-left: 0; gap: 18px; font-size: 13.5px; }
  .seccion__tit { flex-wrap: wrap; }
  .tab[style*="margin-left:auto"] { margin-left: 0 !important; }
  main { padding: 0 18px 50px; }
  .tabs { gap: 22px; } .tab b { font-size: 30px; } .tab span { font-size: 10.5px; letter-spacing: .8px; }
  .filtros { flex-wrap: wrap; } .conteo { margin-left: 0; }
  .grupo { grid-template-columns: 1fr; } .campo--doble, .campo--ancho { grid-column: auto; }
  .modal__cab, .modal__cuerpo, .modal__pie { padding-left: 18px; padding-right: 18px; }
  /* La tabla se vuelve tarjetas: una de 7 columnas no cabe. */
  thead { display: none; }
  tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 14px 0 14px 13px; border-left: 3px solid transparent; border-bottom: 1px solid var(--linea-2); }
  tr.vencida { border-left-color: var(--rojo); } tr.semana { border-left-color: var(--cobre); } tr.aldia { border-left-color: var(--verde); }
  tbody td { display: block; padding: 0; border: 0 !important; }
  tbody td:first-child { padding-left: 0; grid-column: 1; }
  tbody td:nth-child(2) { grid-column: 2; text-align: right; }
  tbody td:last-child { grid-column: 2; grid-row: 2; text-align: right; }
  .oculta-movil { display: none !important; }
  .agenda::before { left: 62px; } .tramo > h3 { padding-left: 84px; }
  .fila { grid-template-columns: 62px 1fr; } .fila .d { padding-right: 16px; font-size: 18px; }
  .fila.pasado::after, .fila.hoy::after { left: 62px; top: 18px; }
  .fila .cuerpo { padding-left: 18px; } .fila .der { grid-column: 2; padding-left: 18px; margin-top: 4px; }
  .marca-hoy { grid-template-columns: 62px 1fr; } .marca-hoy .eje { padding-right: 16px; }
  .ficha-cab .acciones { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- tipo de transacción: tarjetas de radio --- */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tipo-opcion { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; cursor: pointer; display: block; }
.tipo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-opcion b { display: block; font-size: 14px; color: var(--tinta); }
.tipo-opcion span { display: block; font-size: 12px; color: var(--tenue); margin-top: 4px; line-height: 1.35; }
.tipo-opcion.on { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-velo); }
/* --- draws dentro del formulario --- */
.draw-fila { display: grid; grid-template-columns: 28px 1.4fr .7fr 1fr 1.1fr 1.1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.draw-fila .draw-n { font-family: var(--mono); color: var(--tenue); text-align: center; }
.draw-fila input, .draw-fila select { padding: 8px 10px; font-size: 13.5px; }
@media (max-width: 700px) { .draw-fila { grid-template-columns: 28px 1fr 1fr; } .draw-fila [data-d=fecha_pactada], .draw-fila [data-d=fecha_pagada] { grid-column: span 1; } }