/* ============================================================
   CleserApp — estilos
   Paleta y tipografía según la especificación.
   ============================================================ */

:root {
  /* Base */
  --bg: #ffffff;
  --texto: #334155;          /* gris pizarra oscuro */
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;
  --borde: #e2e8f0;
  --borde-fuerte: #cbd5e1;

  /* Estados */
  --amb-barra: #EF9F27;  --amb-fondo: #FAEEDA;  --amb-texto: #854F0B;
  --rojo-barra: #E24B4A; --rojo-fondo: #FCEBEB; --rojo-texto: #A32D2D;
  --ver-barra: #639922;  --ver-fila: #EAF3DE;   --ver-pill: #C0DD97; --ver-texto: #27500A;
  --azul-barra: #378ADD; --azul-fondo: #E6F1FB; --azul-texto: #185FA5;
  --err-barra: #800020;  --err-fondo: #F6E2E6;  --err-texto: #5C0017; /* granate */

  /* Empresas */
  --emp-gijon: #2563eb;     /* azul */
  --emp-oviedo: #7c3aed;    /* púrpura */
  --emp-santander: #0d9488; /* teal */

  --radio: 10px;
  --sombra: 0 8px 30px rgba(0,0,0,.08);
  --sombra-sutil: 0 1px 3px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }

/* El atributo [hidden] debe ganar siempre, incluso sobre reglas que fijan
   display (paneles, overlays, modales usan display:flex). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: var(--texto);
  background: var(--bg);
  font-size: 14px;
}

h1, h2, h3 { font-weight: 500; }

button { font-family: inherit; }

/* ---------- Botones ---------- */
.btn-green, .btn-blue, .btn-red, .btn-amber, .btn-ghost, .btn-gray {
  border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px;
  cursor: pointer; font-weight: 500; white-space: nowrap;
}
.btn-green { background: var(--ver-barra); color: #fff; }
.btn-blue  { background: var(--azul-barra); color: #fff; }
.btn-red   { background: var(--rojo-barra); color: #fff; }
.btn-amber { background: var(--amb-barra); color: #fff; }
.btn-gray  { background: #e2e8f0; color: #64748b; cursor: default; }
.btn-ghost { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.btn-green:hover, .btn-blue:hover, .btn-red:hover, .btn-amber:hover { filter: brightness(.95); }
.btn-ghost:hover { background: #f8fafc; }
button:disabled { opacity: .55; cursor: not-allowed; filter: none; }

.form-error { color: var(--rojo-texto); font-size: 13px; min-height: 18px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9;
}
.login-card {
  width: 330px; background: #fff; border: 1px solid var(--borde);
  border-radius: 14px; padding: 30px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 14px;
}
.login-logo { display: block; width: 180px; max-width: 80%; height: auto; margin: 0 auto 6px; }
.login-card h1 { font-size: 20px; margin: 0; text-align: center; }
.login-sub { margin: -10px 0 6px; color: var(--texto-tenue); font-size: 13px; text-align: center; }
.login-card label, .panel label.field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave);
}
.login-card input {
  padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 14px; text-transform: none; letter-spacing: normal;
}
.login-card input:focus { outline: 2px solid #93c5fd; border-color: #93c5fd; }
.login-card button { margin-top: 6px; padding: 10px; background: var(--ver-barra); color: #fff; border-radius: 8px; }

/* ============================================================
   TOPBAR
   ============================================================ */
.app-view { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--borde); background: #fff;
  position: sticky; top: 0; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-logo { height: 30px; width: auto; display: block; }
.brand { font-weight: 600; font-size: 15px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.empresa-selector {
  padding: 7px 10px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--texto);
}
.user-chip { font-size: 13px; color: var(--texto-suave); }

/* ============================================================
   MAIN / CARDS
   ============================================================ */
.main { padding: 18px 20px 40px; flex: 1; }
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.card {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px;
  background: #fff; box-shadow: var(--sombra-sutil); position: relative; overflow: hidden;
}
.card .card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.card .card-num { font-size: 26px; font-weight: 600; margin-top: 4px; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.card.total::before    { background: var(--borde-fuerte); }
.card.pendiente::before{ background: var(--amb-barra); }
.card.pendiente .card-num { color: var(--amb-texto); }
.card.revision::before { background: var(--rojo-barra); }
.card.revision .card-num { color: var(--rojo-texto); }
.card.validadas::before{ background: var(--ver-barra); }
.card.validadas .card-num { color: var(--ver-texto); }
.card.duplicado::before{ background: var(--azul-barra); }
.card.duplicado .card-num { color: var(--azul-texto); }
.card.error::before    { background: var(--err-barra); }
.card.error .card-num  { color: var(--err-texto); }

/* ============================================================
   FILTROS
   ============================================================ */
.filtros {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 14px;
}
.f-field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.f-field input, .f-field select {
  padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px;
  text-transform: none; letter-spacing: normal; color: var(--texto); background: #fff;
}
.f-grow { flex: 1; min-width: 200px; }
.f-grow input { width: 100%; }
.f-actions { display: flex; gap: 8px; margin-left: auto; }

/* ============================================================
   TABLA
   ============================================================ */
.tabla-wrap { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla thead th {
  text-align: left; padding: 9px 10px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-suave); border-bottom: 1px solid var(--borde);
  background: #f8fafc; position: sticky; top: 0;
}
.tabla tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: #f8fafc; }
.col-bar { width: 6px; padding: 0 !important; }
.cell-bar { padding: 0 !important; width: 6px; }
.cell-bar > span { display: block; width: 6px; min-height: 38px; height: 100%; }
.col-km { width: 48px; text-align: center; }
.col-tipos { width: 210px; }

/* Barra de color por estado */
.bar-pendiente > span { background: var(--amb-barra); }
.bar-revision  > span { background: var(--rojo-barra); }
.bar-validado  > span { background: var(--ver-barra); }
.bar-auto      > span { background: var(--ver-barra); }
.bar-duplicado > span { background: var(--azul-barra); }
.bar-error     > span { background: var(--err-barra); }

/* Fila validada/auto: fondo verde clarito de lado a lado */
tr.fila-validado, tr.fila-auto { background: var(--ver-fila); }
tr.fila-validado:hover, tr.fila-auto:hover { background: #e0eed0; }
/* Fila en error: fondo granate claro */
tr.fila-error { background: var(--err-fondo); }
tr.fila-error:hover { background: #f0d0d8; }

/* Código + tooltip dirección */
.cod { font-weight: 600; position: relative; }
.cod[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 0; top: 120%;
  background: #1e293b; color: #fff; padding: 6px 9px; border-radius: 6px; font-size: 11px;
  white-space: nowrap; z-index: 30; box-shadow: var(--sombra); font-weight: 400;
}

/* Operador + nota */
.op-cell { display: inline-flex; align-items: center; gap: 6px; }
.nota-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amb-barra);
  position: relative; cursor: help; flex: none;
}
.nota-dot:hover::after {
  content: attr(data-nota); position: absolute; left: 14px; top: -4px;
  background: var(--amb-fondo); color: var(--amb-texto); border: 1px solid var(--amb-barra);
  padding: 6px 9px; border-radius: 6px; font-size: 11px; max-width: 260px; white-space: normal;
  z-index: 30; box-shadow: var(--sombra); width: max-content;
}

/* Tipos en dos líneas */
.tipos-cell { display: flex; flex-direction: column; gap: 1px; max-width: 210px; }
.tipos-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tipos-lav { color: var(--texto-tenue); }

/* Pills de estado */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pill-pendiente { background: var(--amb-fondo); color: var(--amb-texto); }
.pill-revision  { background: var(--rojo-fondo); color: var(--rojo-texto); }
.pill-validado  { background: var(--ver-pill); color: var(--ver-texto); }
.pill-auto      { background: var(--ver-pill); color: var(--ver-texto); }
.pill-duplicado { background: var(--azul-fondo); color: var(--azul-texto); }
.pill-error     { background: var(--err-fondo); color: var(--err-texto); border: 1px solid var(--err-barra); }

/* Km icono (coche): contorno gris claro = no usa km; relleno rojo = requiere km */
.km-btn { background: none; border: none; cursor: pointer; padding: 2px; line-height: 0; }
.km-btn .km-car { width: 20px; height: 20px; display: block; }
.km-btn.km-off .km-car { fill: none; stroke: #cbd5e1; stroke-width: 1.3; stroke-linejoin: round; }
.km-btn.km-on  .km-car { fill: var(--rojo-barra); stroke: none; }
.km-btn:not(:disabled).km-off:hover .km-car { stroke: #94a3b8; }
.km-btn:disabled { cursor: not-allowed; opacity: .4; }

/* Facturable (€): relleno verde oscuro = sí; contorno gris claro = no */
.col-fact { width: 48px; text-align: center; }
.fact-btn { background: none; border: none; cursor: pointer; padding: 2px; line-height: 0; }
.fact-btn .fact-euro { width: 20px; height: 20px; display: block; }
.fact-btn.fact-on .fact-euro { fill: var(--ver-texto); stroke: none; }
.fact-btn.fact-off .fact-euro { fill: none; stroke: #cbd5e1; stroke-width: 1.3; }
.fact-btn:not(:disabled).fact-off:hover .fact-euro { stroke: #94a3b8; }
.fact-btn:disabled { cursor: not-allowed; opacity: .4; }

.tabla-vacia { padding: 30px; text-align: center; color: var(--texto-tenue); }

/* ============================================================
   PANEL LATERAL
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 40; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: #fff; z-index: 50; box-shadow: -10px 0 40px rgba(0,0,0,.15);
  display: flex; flex-direction: column; animation: slideIn .18s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--texto-suave); }
.panel-body { padding: 18px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.panel-footer { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 8px; flex-wrap: wrap; }

/* Banners */
.banner { padding: 10px 12px; border-radius: 8px; font-size: 12.5px; border-left: 4px solid; }
.banner-azul  { background: var(--azul-fondo); color: var(--azul-texto); border-color: var(--azul-barra); }
.banner-verde { background: var(--ver-fila); color: var(--ver-texto); border-color: var(--ver-barra); }
.banner-gris  { background: #f1f5f9; color: var(--texto-suave); border-color: var(--borde-fuerte); }
.banner-amber { background: var(--amb-fondo); color: var(--amb-texto); border-color: var(--amb-barra); }
.banner-error { background: var(--err-fondo); color: var(--err-texto); border-color: var(--err-barra); }

/* Aviso de incompletos en el dashboard */
.aviso-incompletos-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aviso-incompletos-box button { flex: none; }

/* Nota Excel readonly */
.nota-excel { background: #f8fafc; border-left: 4px solid var(--borde-fuerte); padding: 10px 12px; border-radius: 6px; font-size: 12.5px; color: var(--texto); white-space: pre-wrap; }

/* Campos del panel */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.field input, .field select, .field textarea {
  padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px;
  text-transform: none; letter-spacing: normal; color: var(--texto); font-family: inherit; background: #fff;
}
.field textarea { resize: vertical; min-height: 60px; }
.field .ro { background: #f8fafc; color: var(--texto-suave); padding: 8px 10px; border-radius: 8px; font-size: 13px; border: 1px solid var(--borde); }
.field input.input-error { border-color: var(--rojo-barra); outline-color: var(--rojo-barra); background: #fff5f5; }
.campo-err { font-size: 11px; min-height: 0; margin-top: 2px; }
.btn-green:disabled { background: #b9c4ad; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.sub-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin-bottom: 2px; }

/* Checks de tipos */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--borde);
  border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; background: #fff;
}
.chk input { accent-color: #2563eb; }
.chk.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.chk.disabled { opacity: .5; cursor: not-allowed; }

/* Operadores extra */
.op-principal { display: flex; align-items: center; gap: 8px; }
.op-principal .ro { flex: 1; }
.btn-add { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borde); background: #fff; cursor: pointer; font-size: 16px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 3px 8px; font-size: 12px; }
.chip button { background: none; border: none; cursor: pointer; color: #6366f1; font-size: 13px; }

/* Autocomplete genérico */
.ac { position: relative; }
.ac-input { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--texto); background: #fff; }
.ac-input:focus { outline: 2px solid #93c5fd; border-color: #93c5fd; }
.ac-input.input-error { border-color: var(--rojo-barra); background: #fff5f5; }
.ac-results {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--borde);
  border-radius: 8px; box-shadow: var(--sombra); max-height: 220px; overflow-y: auto; z-index: 70; margin-top: 4px;
}
.ac-item { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.ac-item:hover { background: #f1f5f9; }
.ac-item.ac-add { color: var(--ver-texto); font-weight: 500; border-top: 1px solid var(--borde); }

/* Buscador desplegable de operadores */
.op-search { position: relative; }
.op-search-results {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--borde);
  border-radius: 8px; box-shadow: var(--sombra); max-height: 200px; overflow-y: auto; z-index: 60; margin-top: 4px;
}
.op-search-results div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.op-search-results div:hover { background: #f1f5f9; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: 14px; width: 560px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--sombra); }
.modal.wide { width: 880px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--borde); }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }

/* Confirmación */
.confirm-box { background: #fff; border-radius: 14px; padding: 24px; width: 420px; max-width: 92vw; box-shadow: var(--sombra); }
.confirm-box p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Resumen import */
.imp-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.imp-resumen .item { border: 1px solid var(--borde); border-radius: 8px; padding: 10px; }
.imp-resumen .item b { display: block; font-size: 22px; }
.imp-aviso { margin-top: 12px; }

/* Tablas de configuración */
.cfg-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.cfg-tab { padding: 7px 14px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; }
.cfg-tab.on { background: #1e293b; color: #fff; border-color: #1e293b; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-table th { text-align: left; padding: 8px; font-size: 10px; text-transform: uppercase; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.cfg-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.cfg-table tr.fila-incompleta td { background: var(--amb-fondo); }
.cfg-table .acts { display: flex; gap: 6px; }
.cfg-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.cfg-help { font-size: 12.5px; color: var(--texto-suave); margin: 6px 0 10px; line-height: 1.45; }
.cfg-buscador { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13px; margin-bottom: 10px; }
.cfg-buscador:focus { outline: 2px solid #93c5fd; border-color: #93c5fd; }
.cfg-vacio { padding: 20px; text-align: center; color: var(--texto-tenue); font-size: 13px; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: var(--texto-suave); }
.badge.ok { background: var(--ver-pill); color: var(--ver-texto); }
.badge.no { background: var(--rojo-fondo); color: var(--rojo-texto); }
.mini-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-chips .badge { background: #eef2ff; color: #3730a3; }

/* Empresa color dot */
.emp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 13px; z-index: 100; box-shadow: var(--sombra); max-width: 80vw;
}
.toast.err { background: var(--rojo-barra); }
.toast.ok { background: var(--ver-barra); }

@media (max-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .col-tipos, .col-pobl { display: none; }
}

/* ===== Panel: operadores (todos al mismo nivel) ===== */
.op-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.op-row { display: flex; align-items: center; gap: 8px; }
.op-row .op-nombre { flex: 1; }
.car-radio { width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde-fuerte); border-radius: 8px; background: #fff; cursor: pointer; padding: 0; }
.car-radio .km-car { width: 20px; height: 20px; fill: var(--texto-tenue); }
.car-radio.on { background: var(--rojo-fondo); border-color: var(--rojo-barra); }
.car-radio.on .km-car { fill: var(--rojo-barra); }
.car-radio.disabled, .car-radio:disabled { opacity: .4; cursor: not-allowed; }
.op-min-wrap { display: inline-flex; align-items: center; gap: 3px; }
.op-min { width: 58px; }
.min-lbl { color: var(--texto-suave); font-size: .85em; }
.op-del { border: none; background: none; color: var(--rojo-texto); cursor: pointer; font-size: 1em; }
.btn-add-op { margin-top: 6px; background: none; border: 1px dashed var(--borde-fuerte);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; color: var(--azul-texto); }
.chk-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ===== Navegación por pestañas (Limpiezas / Kilómetros) ===== */
.nav-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.nav-tab { background: none; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 7px 16px; cursor: pointer; color: var(--texto-suave); font-weight: 600; }
.nav-tab.active { background: var(--azul-fondo); color: var(--azul-texto); border-color: var(--azul-barra); }

/* ===== Tabla genérica de kilómetros / resultados ===== */
.km-result-list { display: flex; flex-direction: column; gap: 4px; }
.km-stop { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--borde); }
.km-stop .km-ord { color: var(--texto-tenue); width: 22px; }
.origen-wrap { display: flex; flex-direction: column; gap: 4px; }
.origen-wrap select { font-size: .9em; }

/* ===== Informes: bloques de consulta ===== */
.inf-sec { margin: 18px 0 6px; color: var(--texto); }
.inf-bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin-bottom: 10px; }
.inf-bloque.inf-verde { border-left: 4px solid var(--ver-barra); }
.inf-bloque.inf-amber { border-left: 4px solid var(--amb-barra); }
.inf-bloque-tit { font-weight: 700; margin-bottom: 6px; }
.inf-totales { margin-top: 6px; font-weight: 600; color: var(--texto-suave); }
.inf-pend { margin: 6px 0 0 18px; }
.inf-pend li { margin: 2px 0; }