/* Vencimientos de pólizas y vehículos.
 *
 * Todo acotado a .mod-vencimientos. Los CSS de los módulos CHOCAN entre sí, así
 * que cada uno lleva el suyo dentro de su clase.
 *
 * Monocromo, con el rojo reservado a lo vencido — que es exactamente el uso que
 * tokens.css le reserva a --alarma. Lo "por vencer" no lleva color: se marca con
 * la regla gruesa del borde izquierdo, porque si todo grita nada grita. */

/* ── resumen ──────────────────────────────────────────────────────────── */
.mod-vencimientos .resumen{display:flex;gap:40px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:20px}
.mod-vencimientos .dato{display:flex;flex-direction:column;gap:2px}
.mod-vencimientos .dato b{font-size:30px;font-weight:600;line-height:1}
.mod-vencimientos .dato.duda b{color:var(--alarma)}
.mod-vencimientos .lbl{font-size:12px;color:var(--meta)}

.mod-vencimientos .aviso{font-size:13px;color:var(--meta);border-left:2px solid var(--ink);
  padding:8px 0 8px 12px;margin-bottom:28px;max-width:70ch}
.mod-vencimientos .aviso b{color:var(--ink)}

/* ── fichas ───────────────────────────────────────────────────────────── */
.mod-vencimientos .lista{display:grid;gap:0}
.mod-vencimientos .ficha{border-top:1px solid var(--rule);padding:16px 0 16px 14px;
  border-left:3px solid transparent}
.mod-vencimientos .ficha:last-of-type{border-bottom:1px solid var(--rule)}
.mod-vencimientos .ficha.vencido{border-left-color:var(--alarma)}
.mod-vencimientos .ficha.proximo{border-left-color:var(--ink)}

.mod-vencimientos .cab{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.mod-vencimientos .ficha h3{font-size:15px;font-weight:600;line-height:1.3}
.mod-vencimientos .meta{font-size:12px;color:var(--meta)}
.mod-vencimientos .estado{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

.mod-vencimientos .chip{font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;padding:2px 7px;border:1px solid var(--rule);white-space:nowrap}
.mod-vencimientos .chip-vencido{border-color:var(--alarma);color:var(--alarma)}
.mod-vencimientos .chip-proximo{border-color:var(--ink);color:var(--ink)}
.mod-vencimientos .chip-vigente,.mod-vencimientos .chip-sinfecha{color:var(--meta)}
/* La duda se marca en negativo: es lo único que se ve antes que la fecha. */
.mod-vencimientos .chip-duda{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.mod-vencimientos .datos{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px;
  font-size:13px;align-items:baseline}
.mod-vencimientos .datos a{color:var(--ink)}
.mod-vencimientos .ficha .acciones{display:flex;gap:10px;margin-top:10px}

/* ── captura ──────────────────────────────────────────────────────────── */
.mod-vencimientos .captura{border-top:1px solid var(--rule);margin-top:14px;padding-top:16px}
.mod-vencimientos .captura-nueva{border-top:1px solid var(--ink);margin-bottom:20px}
.mod-vencimientos .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px 20px;max-width:900px}
.mod-vencimientos label{display:grid;gap:5px;font-size:13px;font-weight:500}
.mod-vencimientos label.ancho{grid-column:1/-1}
.mod-vencimientos label.marca{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-weight:400}
.mod-vencimientos label.marca input{margin:0}
.mod-vencimientos input[type=text],.mod-vencimientos input[type=date],
.mod-vencimientos select,.mod-vencimientos input[type=file]{font:inherit;font-size:13px;
  border:1px solid var(--rule);border-radius:0;padding:7px 9px;background:var(--paper);color:var(--ink)}
.mod-vencimientos input:focus,.mod-vencimientos select:focus{outline:none;border-color:var(--ink)}
.mod-vencimientos .captura .acciones{display:flex;gap:14px;margin-top:18px;align-items:center}
.mod-vencimientos .err{color:var(--alarma);font-size:13px;margin-top:10px}
.mod-vencimientos .btn-alta{margin-top:24px}

@media(max-width:620px){
  .mod-vencimientos .cab{flex-direction:column}
  .mod-vencimientos .estado{justify-content:flex-start}
  .mod-vencimientos .resumen{gap:24px}
}