:root{
    --bg:#F2F1EE;
    --surface:#FFFFFF;
    --surface-alt:#E9E8E4;
    --border:#DAD8D3;
    --border-strong:#C3C1BA;
    --text:#1E1E1C;
    --text-secondary:#65645E;
    --text-muted:#9A988F;
    --accent:#45484D;
    --accent-soft:#E3E3E1;
    --warn:#B9862E;
    --warn-soft:#F5E9D5;
    --danger:#A9433F;
    --danger-soft:#F3DFDD;
    --ok:#4F7358;
    --ok-soft:#E1EAE3;
    --radius:10px;
    --sans:'Inter',system-ui,sans-serif;
    --display:'Space Grotesk',var(--sans);
    --mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased;}
  .app{display:flex;min-height:100vh;}

  /* Sidebar */
  .sidebar{width:236px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column;}
  .brand{padding:0 20px 20px;border-bottom:1px solid var(--border);margin-bottom:12px;}
  .brand-name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:0.02em;}
  .brand-tag{font-size:10px;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;margin-top:2px;}
  .nav{flex:1;overflow-y:auto;padding:4px 10px;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;user-select:none;}
  .nav-item:hover{background:var(--surface-alt);color:var(--text);}
  .nav-item.active{background:var(--accent);color:#fff;}
  .nav-dot{width:6px;height:6px;border-radius:50%;background:var(--border-strong);flex-shrink:0;}
  .nav-item.active .nav-dot{background:#fff;}
  .nav-group{margin-top:2px;}
  .nav-sub{margin-left:16px;padding-left:10px;border-left:1px solid var(--border);display:none;flex-direction:column;gap:1px;margin-top:2px;margin-bottom:4px;}
  .nav-sub.open{display:flex;}
  .nav-sub-item{padding:7px 10px;border-radius:7px;color:var(--text-secondary);font-size:12.5px;cursor:pointer;}
  .nav-sub-item:hover{background:var(--surface-alt);color:var(--text);}
  .nav-sub-item.active{background:var(--accent-soft);color:var(--text);font-weight:600;}
  .nav-chevron{margin-left:auto;font-size:11px;color:var(--text-muted);transition:transform .15s;}
  .nav-chevron.open{transform:rotate(90deg);}
  .sidebar-foot{padding:14px 20px 4px;border-top:1px solid var(--border);margin-top:8px;}
  .sidebar-user{display:flex;align-items:center;gap:8px;}
  .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);flex-shrink:0;}
  .sidebar-user-name{font-size:12.5px;font-weight:600;}
  .sidebar-user-role{font-size:11px;color:var(--text-muted);}

  /* Main */
  .main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0;background:var(--surface);}
  .topbar-title{font-family:var(--display);font-weight:600;font-size:16px;}
  .topbar-right{display:flex;align-items:center;gap:14px;}
  .pill{font-size:11px;color:var(--text-secondary);background:var(--surface-alt);padding:5px 10px;border-radius:20px;font-family:var(--mono);}
  .content{padding:24px 28px 60px;overflow-y:auto;}
  .view{display:none;}
  .view.active{display:block;}

  h2.section-title{font-family:var(--display);font-size:15px;font-weight:600;margin:0 0 12px;}
  .subtle{color:var(--text-secondary);font-size:12.5px;margin:0 0 20px;}

  /* KPI cards */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
  .kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;cursor:pointer;transition:border-color .15s, transform .1s;}
  .kpi-card:hover{border-color:var(--border-strong);transform:translateY(-1px);}
  .kpi-label{font-size:11.5px;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.03em;}
  .kpi-value{font-family:var(--mono);font-size:26px;font-weight:500;}
  .kpi-delta{font-size:11.5px;margin-top:6px;color:var(--text-muted);}
  .kpi-delta.warn{color:var(--warn);}
  .kpi-delta.danger{color:var(--danger);}
  .kpi-delta.ok{color:var(--ok);}

  .chart-row{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:20px;}
  /* La fila de planillas de gastos pasa a tres columnas iguales cuando la
     cuenta tiene un segundo pais de destino. */
  .chart-row.gastos-3{grid-template-columns:1fr 1fr 1fr;}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .card-title{font-size:13px;font-weight:600;}
  .card-link{font-size:11.5px;color:var(--text-secondary);cursor:pointer;}
  .card-link:hover{color:var(--text);text-decoration:underline;}
  /* Estado de un papel que se vence (licencia del chofer): el color dice solo
     que tan urgente es, sin hacer falta leer la fecha. */
  .card-link.warn{color:var(--warn);}
  .card-link.danger{color:var(--danger);}
  .card-link.warn:hover,.card-link.danger:hover{text-decoration:none;}
  .card.clickable{cursor:pointer;}
  .card.clickable:hover{border-color:var(--border-strong);}

  .legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px;font-size:11.5px;color:var(--text-secondary);}
  .legend span{display:flex;align-items:center;gap:5px;}
  .dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}

  /* Alerts */
  .alert-list{display:flex;flex-direction:column;gap:0;}
  .alert-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
  .alert-row:last-child{border-bottom:none;}
  .badge{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;flex-shrink:0;font-family:var(--mono);}
  .badge.danger{background:var(--danger-soft);color:var(--danger);}
  .badge.warn{background:var(--warn-soft);color:var(--warn);}
  .badge.ok{background:var(--ok-soft);color:var(--ok);}
  .alert-text{flex:1;}
  .alert-sub{color:var(--text-muted);font-size:11px;}

  /* Tables */
  table.data{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.03em;color:var(--text-muted);font-weight:600;padding:0 10px 10px;border-bottom:1px solid var(--border);}
  table.data td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
  table.data tbody tr{cursor:pointer;}
  table.data tbody tr:hover{background:var(--surface-alt);}
  table.data tbody tr:last-child td{border-bottom:none;}
  /* Cuadros con scroll propio
     Una tabla con muchos registros estiraba la pagina hacia abajo hasta hacerla
     incomoda de recorrer, sobre todo en el telefono. Cada tabla larga queda
     metida en su propia caja de alto limitado: se ven las primeras filas y el
     resto se recorre ahi adentro, sin alargar la pagina.
     El alto lo calcula el JS midiendo las filas reales, asi vale igual para la
     vista de escritorio y para las tarjetas del telefono. */
  .tabla-scroll{overflow-y:auto;overflow-x:auto;position:relative;}
  /* El encabezado queda fijo: al desplazarse adentro no se pierde de vista
     de que columna es cada dato. */
  .tabla-scroll table.data thead th{
    position:sticky;top:0;z-index:2;
    background:var(--surface);
    padding-top:10px;
  }
  /* El pie con los totales tambien queda fijo: de nada sirve un total que hay
     que ir a buscar desplazandose hasta el fondo del cuadro. */
  .tabla-scroll table.data tfoot td,
  .tabla-scroll table.data tfoot th{
    position:sticky;bottom:0;z-index:2;
    background:var(--surface);
    border-top:1px solid var(--border);
  }
  /* Barra fina y discreta, para que la caja no parezca un marco pesado. */
  .tabla-scroll::-webkit-scrollbar{width:8px;height:8px;}
  .tabla-scroll::-webkit-scrollbar-track{background:transparent;}
  .tabla-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}
  .tabla-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
  .tabla-scroll{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
  /* Aviso al pie: cuantas filas hay y que se puede seguir bajando. */
  .tabla-scroll-nota{
    font-size:11px;color:var(--text-muted);
    padding:7px 10px 0;border-top:1px solid var(--border);
    display:flex;align-items:center;gap:6px;
  }
  .tabla-scroll-nota.oculta{display:none;}

  .mono{font-family:var(--mono);}
  .status-dot{display:inline-flex;align-items:center;gap:6px;}
  .status-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--border-strong);}
  .status-dot.on::before{background:var(--ok);}
  .status-dot.off::before{background:var(--danger);}
  .status-dot.mid::before{background:var(--warn);}

  .toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;}
  .tab{padding:9px 14px;font-size:12.5px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .tab:hover{color:var(--text);}
  .tab.active{color:var(--text);border-bottom-color:var(--accent);}
  .subview{display:none;}
  .subview.active{display:block;}

  .back-link{font-size:12px;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;}
  .back-link:hover{color:var(--text);}

  .profile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .profile-title{font-family:var(--display);font-size:19px;font-weight:600;}
  .profile-sub{font-size:12.5px;color:var(--text-secondary);margin-top:3px;}
  .profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
  .stat-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
  .stat-mini-card{background:var(--surface-alt);border-radius:8px;padding:12px 14px;}
  .stat-mini-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px;}
  .stat-mini-value{font-family:var(--mono);font-size:16px;font-weight:500;}

  .placeholder-note{font-size:11.5px;color:var(--text-muted);background:var(--surface-alt);border-radius:8px;padding:10px 12px;margin-top:14px;}

  .btn-primary{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .btn-primary:hover{opacity:0.9;}
  .btn-secondary{background:var(--surface);border:1px solid var(--border-strong);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text);font-family:var(--sans);}
  .btn-secondary:hover{background:var(--surface-alt);}

  .upload-zone{border:1.5px dashed var(--border-strong);border-radius:10px;padding:26px;text-align:center;cursor:pointer;color:var(--text-secondary);}
  .upload-zone:hover{background:var(--surface-alt);border-color:var(--accent);}
  .editable{cursor:text;border-bottom:1px dashed var(--border-strong);padding-bottom:1px;display:inline-block;min-width:28px;min-height:1.3em;}
  .editable:hover{border-bottom-color:var(--accent);}
  .editable:focus{outline:none;border-bottom:1px solid var(--accent);background:var(--accent-soft);border-radius:2px;padding:0 2px;}
  /* Nombre del eje: se renombra en el lugar, pero es un encabezado y no una celda
     de datos, así que el subrayado punteado sólo aparece al pasar por encima. */
  .eje-nombre{border-bottom-color:transparent;min-width:60px;}
  .eje-nombre:hover{border-bottom-color:var(--accent);}
  /* Celdas con unidad fija (km, %): se escribe sólo el número y la unidad va al lado. */
  .num-unidad{min-width:56px;text-align:right;}
  .num-unidad:empty::before{content:'—';color:var(--text-muted);}
  .sufijo-unidad{margin-left:4px;color:var(--text-muted);font-size:.92em;user-select:none;}
  .upload-icon{font-family:var(--display);font-size:20px;color:var(--text-muted);}
  .upload-text{font-size:13px;font-weight:500;color:var(--text);margin-top:6px;}
  .upload-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}

  .ocr-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);margin-top:12px;}
  .ocr-spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .cuenta-table input{width:100%;border:1px solid transparent;background:transparent;font-family:var(--mono);font-size:12px;padding:5px 6px;border-radius:5px;color:var(--text);}
  .cuenta-table input:hover, .cuenta-table input:focus{border-color:var(--border);background:var(--surface-alt);outline:none;}
  .cuenta-table input[type=text]{font-family:var(--sans);}
  .cuenta-table td{padding:5px 8px;}
  .tag-ocr{font-size:10px;background:var(--ok-soft);color:var(--ok);padding:2px 6px;border-radius:5px;font-weight:600;white-space:nowrap;}
  .fila-total-peajes:hover{background:var(--accent-soft) !important;}

  /* Tarjetas plegables: al cerrarlas queda sólo el encabezado. */
  .chevron-plegable{display:inline-block;width:14px;flex:0 0 auto;color:var(--text-muted);font-size:11px;}
  .card.plegable > .card-head{gap:6px;}
  .card.plegable > .card-head{user-select:none;}
  .card.plegable.plegada > .card-head{margin-bottom:0;}
  .card.plegable.plegada > *:not(.card-head){display:none !important;}
  .cuenta-add{font-size:11.5px;color:var(--text-secondary);cursor:pointer;margin-top:10px;}
  .cuenta-add:hover{color:var(--text);text-decoration:underline;}
  .fila-actions{display:flex;align-items:center;gap:6px;}
  .del-btn{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;flex-shrink:0;}
  .del-btn:hover{background:var(--danger-soft);color:var(--danger);}
  tfoot .total-row td{border-top:1.5px solid var(--border-strong);border-bottom:none;padding-top:10px;font-weight:600;font-size:12.5px;}
  tfoot .total-row input{font-weight:600;}

  .form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .form-field label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:5px;}
  .form-field input{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px 9px;font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--surface);}
  .form-field input:focus{outline:none;border-color:var(--accent);}

  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

  /* Menú hamburguesa (oculto en escritorio) */
  .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px;cursor:pointer;flex-shrink:0;}
  .menu-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;}
  .sidebar-overlay{display:none;}

  /* ============ RESPONSIVE / MÓVIL ============ */
  @media (max-width: 900px){
    .app{flex-direction:column;}
    .menu-toggle{display:flex;}
    .sidebar{
      position:fixed; top:0; left:0; bottom:0; z-index:60;
      width:250px; transform:translateX(-100%);
      transition:transform .2s ease; box-shadow:2px 0 18px rgba(0,0,0,.18);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-overlay{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:55;
    }
    .sidebar-overlay.open{display:block;}

    .content{padding:16px 14px 60px;}
    .topbar{padding:0 14px;}

    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .chart-row,.chart-row.gastos-3{grid-template-columns:1fr;}
    .profile-grid{grid-template-columns:1fr;}
    .stat-mini{grid-template-columns:1fr 1fr;}
    .form-grid{grid-template-columns:1fr 1fr;}

    /* Red de seguridad: si alguna tabla quedara sin .card-table, que no rompa. */
    .card{overflow-x:auto;}
    table.data:not(.card-table){min-width:560px;}

    /* Todas las tablas pasan a formato tarjeta apilada: nada de scroll horizontal */
    table.data.card-table thead{display:none;}
    table.data.card-table,
    table.data.card-table tbody,
    table.data.card-table tfoot{display:block;width:100%;min-width:0;}
    table.data.card-table tr{
      display:block; width:100%; border:1px solid var(--border); border-radius:10px;
      padding:10px 12px; margin-bottom:10px; background:var(--surface);
    }
    table.data.card-table tr:hover{background:var(--surface-alt);}
    table.data.card-table td{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:6px 0; border-bottom:1px solid var(--border); text-align:right;
      overflow-wrap:anywhere;
    }
    table.data.card-table td:last-child{border-bottom:none;}
    table.data.card-table td::before{
      content:attr(data-label); font-size:10.5px; color:var(--text-muted);
      font-weight:600; text-transform:uppercase; letter-spacing:0.03em; text-align:left;
      flex:0 0 auto; max-width:45%;
    }
    /* Una celda sin etiqueta (acciones, subtítulos de eje) ocupa la fila entera. */
    table.data.card-table td[data-label=""]{justify-content:flex-end;}
    table.data.card-table td[data-label=""]::before{content:none;}

    /* Los campos editables de la cuenta ocupan lo que sobra, sin desbordar. */
    table.data.card-table td input,
    table.data.card-table td select{
      flex:1 1 auto; min-width:0; width:auto; text-align:right;
    }
    /* Las filas de subtotal y total se distinguen del resto de las tarjetas. */
    table.data.card-table tr.fila-total-diesel,
    table.data.card-table tr.total-row{background:var(--surface-alt);font-weight:600;}

    .toolbar{flex-direction:column;align-items:flex-start;gap:10px;}
    .profile-head{flex-direction:column;align-items:flex-start;gap:10px;}
  }

  @media (max-width: 520px){
    .kpi-row{grid-template-columns:1fr 1fr;}
    .form-grid{grid-template-columns:1fr;}
    .stat-mini{grid-template-columns:1fr;}
    .profile-title{font-size:16px;}
    .kpi-value{font-size:21px;}
    body{font-size:13px;}
  }

/* ── Neumáticos ─────────────────────────────────────────────
   La marca sale de un desplegable con las que se usan siempre; elegirla trae
   su duración sola. "Otra marca…" deja escribir cualquier otra a mano. */
.marca-select {
  width: 100%;
  max-width: 22ch;
  padding: 3px 4px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.marca-select:hover { border-color: var(--border); background: var(--surface-alt); }
.marca-select:focus { outline: none; border-color: var(--accent); background: var(--surface-alt); }
.marca-select.vacio { color: var(--text-muted); }

/* De dónde vino una rueda rotada: sin esto, una rueda del semi con más km que
   el semi entero no tiene explicación posible. */
.rueda-nota {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  max-width: 34ch;
}

/* ── Contabilidad · cobranzas y pagos ───────────────────────── */
.cb-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.cb-bar-der{display:flex;gap:8px;}
.cb-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.cb-tab{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-family:var(--sans);}
.cb-tab:hover{color:var(--text);border-color:var(--border-strong);}
.cb-tab.on{background:var(--accent-soft);color:var(--text);border-color:var(--accent);}
.cb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px;}
.cb-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
.cb-kpi-t{font-size:11.5px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
.cb-kpi-v{font-family:var(--mono);font-size:22px;font-weight:500;}
.cb-rojo{color:var(--danger);}
.cb-neto{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:var(--ok-soft);color:var(--ok);border-radius:var(--radius);padding:16px 18px;font-size:14px;}
.cb-neto strong{font-family:var(--mono);font-size:24px;font-weight:500;}
.cb-nota{font-size:11.5px;color:var(--text-secondary);margin:8px 0 0;}
.cb-vacio{text-align:center;color:var(--text-muted);padding:22px 12px;font-size:12.5px;}
.cb-herr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.cb-herr select{border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;font-size:12px;background:var(--surface);font-family:var(--sans);color:var(--text);}

.cb-cliente{margin-top:16px;}
.cb-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:9px 12px;background:var(--surface-alt);border-radius:8px;cursor:pointer;font-size:13px;}
.cb-head-info{font-size:12px;color:var(--text-secondary);}
.cb-flecha{display:inline-block;width:14px;color:var(--text-muted);}
.cb-scroll{overflow-x:auto;}
.cb-tabla{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;margin-top:4px;}
.cb-tabla th{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:left;padding:7px 6px;border-bottom:1px solid var(--border);}
.cb-tabla td{padding:6px 6px;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.cb-tabla tr.nb td{border-bottom:none;padding-bottom:1px;}
.cb-tabla .r{text-align:right;}
.cb-tabla td.cb-det{padding-top:0;white-space:normal;font-size:11px;color:var(--text-secondary);}
.cb-ed{border-bottom:1px dashed var(--border-strong);padding:0 2px;outline:none;display:inline-block;min-width:18px;}
.cb-ed:empty::before{content:'—';color:var(--text-muted);}
.cb-ed:focus{background:var(--accent-soft);border-bottom-color:var(--accent);}
.cb-dt{font-size:11px;color:var(--text-secondary);border-bottom:none;min-width:120px;}
.cb-dt:empty::before{content:'Agregar detalle…';color:var(--text-muted);}
.cb-falta{border-bottom-color:var(--danger);}
.cb-reg{font-size:11px;color:var(--text-muted);}
.cb-bd{font-size:11px;padding:2px 8px;border-radius:6px;white-space:nowrap;font-weight:600;}
.cb-cobrado{background:var(--ok-soft);color:var(--ok);}
.cb-vencido{background:var(--danger-soft);color:var(--danger);}
.cb-vigente{background:var(--warn-soft);color:var(--warn);}
.cb-acc{white-space:nowrap;}
.cb-ib{border:1px solid var(--border-strong);background:var(--surface);border-radius:6px;padding:2px 7px;font-size:11.5px;cursor:pointer;color:var(--text);font-family:var(--sans);margin-left:3px;}
.cb-ib:hover{background:var(--surface-alt);}
.cb-ib-ok{color:var(--ok);border-color:var(--ok);}
.cb-pago{background:var(--surface-alt);padding:10px 12px !important;white-space:normal !important;}
.cb-pago-f{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.cb-pago-f label,.cb-campos label{display:block;font-size:11px;color:var(--text-secondary);}
.cb-pago-f input,.cb-campos input{display:block;margin-top:4px;border:1px solid var(--border);border-radius:7px;padding:8px 9px;font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--surface);width:100%;}
.cb-pago-f input{width:150px;}
.cb-pago-f input:focus,.cb-campos input:focus{outline:none;border-color:var(--accent);}
.cb-err{color:var(--danger);font-size:12.5px;margin-top:8px;}

.cb-form{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px 18px;margin:12px 0 4px;}
.cb-form-t{margin:0 0 4px;font-size:14px;font-weight:600;}
.cb-paso{margin:6px 0 8px;font-size:12px;color:var(--text-secondary);}
.cb-paso2{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.cb-sel{margin:0 0 6px;font-size:12.5px;font-weight:600;}
.cb-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px;}
.cb-campos.cb-uno{grid-template-columns:1fr;}
.cb-botones{display:flex;gap:8px;margin-top:14px;}

.cb-campos select{display:block;margin-top:4px;border:1px solid var(--border);border-radius:7px;padding:8px 9px;font-family:var(--sans);font-size:12.5px;color:var(--text);background:var(--surface);width:100%;}
.cb-campos select:focus{outline:none;border-color:var(--accent);}
.cb-selc{width:100%;border:none;border-bottom:1px dashed var(--border-strong);background:transparent;font-family:var(--sans);font-size:12px;color:var(--text);padding:0;cursor:pointer;}
.cb-selc:focus{outline:none;background:var(--accent-soft);}

.cb-req{color:var(--danger);font-weight:700;}
.cb-leyenda{font-size:11.5px;color:var(--text-secondary);margin:0 0 10px;}
.cb-corto{max-width:380px;}
.cb-fecha{width:100%;border:none;border-bottom:1px dashed var(--border-strong);background:transparent;font-family:var(--mono);font-size:11.5px;color:var(--text);padding:0;}
.cb-fecha:focus{outline:none;background:var(--accent-soft);}
.cb-fecha.cb-falta{border-bottom-color:var(--danger);}

.cb-pago-det{flex:1;min-width:240px;}
.cb-pago-det input{width:100% !important;font-family:var(--sans) !important;}

.cb-tabla tfoot td{font-weight:700;background:var(--surface-alt);border-top:2px solid var(--border-strong);border-bottom:none;padding:8px 6px;}
.cb-tabla tfoot td.r{font-family:var(--mono);}
.cb-total-general{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:16px;padding:12px 16px;background:var(--surface-alt);border:1px solid var(--border-strong);border-radius:8px;font-size:12.5px;}
.cb-total-general strong{font-family:var(--mono);}
.cb-total-general > strong:first-child{font-family:var(--sans);font-size:13px;margin-right:auto;}

#cobranzas-app{container-type:inline-size;container-name:cb;}
.cb-vence{font-size:10.5px;color:var(--text-muted);margin-top:2px;white-space:normal;}
.cb-tabla tr.cb-detr td.cb-det{padding:0 6px 6px;border-bottom:1px solid var(--border);}
.cb-det-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cb-det-t{flex:1;min-width:160px;white-space:normal;}
.cb-acc{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap;}
.cb-tabla td.cb-tl{white-space:normal;}
.cb-tabla .cb-fecha{font-size:11px;}

/* Pantallas angostas (celular o ventana chica): cada viaje pasa a ser una tarjeta, sin barra de desplazamiento. */
@container cb (max-width: 940px){
  .cb-scroll{overflow:visible;}
  .cb-tabla{table-layout:auto;margin-top:0;}
  .cb-tabla colgroup,.cb-tabla thead{display:none;}
  .cb-tabla,.cb-tabla tbody,.cb-tabla tfoot,.cb-tabla tr{display:block;}
  .cb-tabla td{display:block;border:none;padding:0;white-space:normal;overflow:visible;text-align:left;}
  .cb-tabla .r{text-align:left;}
  .cb-tabla tr.fv,.cb-tabla tr.fm{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;background:var(--surface);border:1px solid var(--border);padding:10px 12px;margin-top:10px;}
  .cb-tabla tr.fv{border-bottom:none;border-radius:8px 8px 0 0;padding-bottom:4px;}
  .cb-tabla tr.fm{border-radius:8px;}
  .cb-tabla tr.fv td::before,.cb-tabla tr.fm td[data-label]::before,.cb-tabla tfoot td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;color:var(--text-muted);margin-bottom:2px;}
  .cb-tabla tr.cb-detr{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:0 12px 10px;}
  .cb-tabla tr.cb-detr td.cb-det{padding:0;border:none;}
  .cb-tabla tr.fm td.cb-acc-m{grid-column:1 / -1;text-align:right;}
  .cb-tabla tfoot tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;background:var(--surface-alt);border-radius:8px;padding:10px 12px;margin-top:10px;}
  .cb-tabla tfoot td{background:none;border:none;padding:0;}
  .cb-tabla tfoot td.cb-tl{grid-column:1 / -1;}
  .cb-tabla tfoot td:empty{display:none;}
  .cb-tabla td.cb-pago{border-radius:8px;margin-top:6px;}
  .cb-selc,.cb-fecha{font-size:13px;}
}
.cb-tabla tfoot td::before{font-family:var(--sans);font-weight:400;}

/* ── Contabilidad · libro diario ─────────────────────────────── */
#libro-app{container-type:inline-size;container-name:lb;}
.lb-asiento{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:10px 12px;margin-top:12px;}
.lb-asiento.lb-editando{border-color:var(--accent);}
.lb-anulado .lb-tabla,.lb-anulado .lb-facts{opacity:.5;text-decoration:line-through;}
.lb-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;}
.lb-tabla td.lb-wrap{white-space:normal;}
.lb-facts{font-size:11.5px;color:var(--text-secondary);margin-top:8px;line-height:1.6;}
.lb-facts strong{color:var(--text);}
.lb-lineas{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed;}
.lb-lineas th{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:left;padding:4px;}
.lb-lineas th:nth-child(1){width:56%;}
.lb-lineas th:nth-child(4){width:38px;}
.lb-lineas td{padding:3px 4px;vertical-align:top;}
.lb-lineas .r{text-align:right;}
.lb-lineas input{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px 9px;font-size:12.5px;font-family:var(--sans);color:var(--text);background:var(--surface);}
.lb-lineas input:focus{outline:none;border-color:var(--accent);}
.lb-lineas input.lb-num{font-family:var(--mono);text-align:right;}
.lb-lineas tfoot td{font-size:12.5px;font-weight:600;padding:7px 4px;}
.lb-lineas tr.lb-avr td{padding:0 4px;}
.lb-x{text-align:center;padding-top:7px !important;}
.lb-aviso{background:var(--warn-soft);color:var(--warn);border-radius:7px;padding:7px 10px;font-size:12px;margin:2px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lb-aviso strong{color:var(--text);}
.lb-ok{color:var(--ok);}
.lb-tipo{display:flex;align-items:center;gap:16px;margin:14px 0 8px;font-size:12.5px;}
.lb-tipo span{font-weight:600;}
.lb-tipo label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.lb-factura{border:1px solid var(--border);border-radius:9px;padding:10px 12px;margin:8px 0;background:var(--surface-alt);}
.lb-fact-cab{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;}
.lb-calc{margin-top:10px;}
.lb-calc input.lb-auto{background:var(--accent-soft);font-weight:600;cursor:default;}
@container lb (max-width: 620px){
  .lb-lineas thead{display:none;}
  .lb-lineas tbody tr:not(.lb-avr){display:grid;grid-template-columns:1fr 1fr 34px;gap:4px;padding:8px 0;border-bottom:1px solid var(--border);}
  .lb-lineas tbody tr:not(.lb-avr) td{padding:0;}
  .lb-lineas tbody tr:not(.lb-avr) td:nth-child(1){grid-column:1 / -1;}
  .lb-lineas tbody tr.lb-avr{display:block;}
  .lb-lineas tbody tr.lb-avr td{display:block;}
}

/* Recuadro del asiento, como en el comprobante impreso: número, fecha y T.C. */
.lb-cab-izq{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lb-rec{border:1.5px solid var(--text);border-radius:8px;font-family:var(--mono);font-size:12px;text-align:center;overflow:hidden;min-width:132px;}
.lb-rec-n{font-weight:700;font-size:13px;padding:3px 10px;border-bottom:1.5px solid var(--text);}
.lb-rec-f{display:grid;grid-template-columns:1fr 1fr 1.4fr;border-bottom:1.5px solid var(--text);}
.lb-rec-f span{padding:2px 6px;}
.lb-rec-f span + span{border-left:1.5px solid var(--text);}
.lb-rec-t{padding:2px 10px;display:flex;justify-content:space-between;gap:10px;}
.lb-facts-tot{margin-top:4px;padding-top:4px;border-top:1px dashed var(--border);}
.lb-facts-tot strong{font-family:var(--mono);}
.lb-comb{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:10px;cursor:pointer;}
.lb-comb input{width:auto;margin:0;}
.lb-tipo-compra{grid-column:span 2;}
.cb-pendiente{background:var(--surface-alt);color:var(--text-secondary);}
.cb-plazo{min-width:22px;text-align:center;}
.cb-plazo:empty::before{content:'—';}

/* Cobranzas: fuera del modo edición los datos son texto; «Editar» habilita la fila. */
.cb-ro{display:inline-block;min-width:18px;}
.cb-vacio-c{color:var(--text-muted);}
.cb-dt-ro{font-size:11px;color:var(--text-secondary);}
.cb-modo-ed{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:12px;}

/* ── Seguimiento (GPS) ────────────────────────────────────────── */
:root { --sg-mov:#1f8a4c; --sg-det:#2f6fb3; --sg-sin:#b3261e; --sg-nogps:#8a8780; }
.sg-barra{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.sg-resumen{display:flex;gap:8px;flex-wrap:wrap;}
.sg-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sg-reloj{font-size:12px;color:var(--text-muted);}
.sg-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--border);white-space:nowrap;}
.sg-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.sg-chip.sg-mov{color:var(--sg-mov);} .sg-chip.sg-mov i{background:var(--sg-mov);}
.sg-chip.sg-det{color:var(--sg-det);} .sg-chip.sg-det i{background:var(--sg-det);}
.sg-chip.sg-sin{color:var(--sg-sin);} .sg-chip.sg-sin i{background:var(--sg-sin);}
.sg-chip.sg-nogps{color:var(--sg-nogps);} .sg-chip.sg-nogps i{background:var(--sg-nogps);}
.sg-aviso{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px;}
.sg-cuerpo{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start;}
.sg-lado{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 190px);min-height:420px;}
.sg-buscar{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:14px;background:var(--surface);color:var(--text);font-family:var(--sans);}
.sg-buscar:focus{outline:none;border-color:var(--accent);}
.sg-lista{overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px;}
.sg-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;transition:border-color .15s;}
.sg-item:hover{border-color:var(--border-strong);}
.sg-item.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.sg-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.sg-patente{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.02em;}
.sg-frase{font-size:14px;font-weight:600;color:var(--text);}
.sg-dir{font-size:13px;color:var(--text-secondary);margin-top:3px;}
.sg-meta{font-size:12px;color:var(--text-muted);margin-top:4px;}
.sg-singps{font-size:12px;color:var(--text-muted);line-height:1.5;padding:2px 4px;}
.sg-mapa{height:calc(100vh - 190px);min-height:420px;border-radius:12px;border:1px solid var(--border);overflow:hidden;background:#e9e8e4;}
.sg-marca-envoltorio{background:none;border:none;}
.sg-marca{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;color:#fff;font:700 12px/1.3 var(--mono);white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.35);border:2px solid #fff;transform:translate(0,0);}
.sg-marca::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9;}
.sg-marca.sg-mov{background:var(--sg-mov);} .sg-marca.sg-det{background:var(--sg-det);} .sg-marca.sg-sin{background:var(--sg-sin);opacity:.75;}
.sg-marca.sel{outline:3px solid #f5b400;outline-offset:1px;}
.sg-marca .sg-flecha{display:inline-block;font-size:10px;line-height:1;}
.sg-marca:has(.sg-flecha)::before{display:none;}
.sg-pop{font-family:var(--sans);font-size:13px;line-height:1.5;}
.sg-pop-t{font:700 16px var(--mono);}
.sg-pop-m{color:#6b6a65;font-size:12px;}
.sg-pop-link{display:inline-block;margin-top:6px;font-weight:600;}
.sg-perfil{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13.5px;}
.sg-perfil-t{flex:1;min-width:200px;}
.sg-perfil-no{color:var(--text-muted);}
@media (max-width: 900px){
  .sg-cuerpo{grid-template-columns:1fr;}
  .sg-mapa{order:-1;height:55vh;min-height:320px;}
  .sg-lado{max-height:none;min-height:0;}
  .sg-lista{overflow:visible;}
}