:root{
  --azul:#1d4ed8;
  --azul-osc:#1e3a8a;
  --gris:#f4f6fb;
  --nav-h:60px;   /* alto del navbar, lo ajusta el JS */
}
*{font-family:'Inter',system-ui,Arial,sans-serif;}
body{background:var(--gris);}
.app-navbar{background:linear-gradient(90deg,var(--azul-osc),var(--azul));box-shadow:0 2px 8px rgba(0,0,0,.15);}
.navbar-brand{letter-spacing:.2px;}
.nav-link.active{background:rgba(255,255,255,.18);border-radius:.4rem;}

.card{border:none;border-radius:.75rem;box-shadow:0 1px 6px rgba(30,58,138,.08);}
.card-header{background:#fff;border-bottom:1px solid #eef1f7;border-radius:.75rem .75rem 0 0!important;font-weight:600;}

table.tabla{background:#fff;border-radius:.5rem;}
table.tabla thead th{background:#eef2fb;color:#334155;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid #dde3f0;
  position:sticky;top:0;z-index:3;}
/* La zona de la tabla scrollea sola (alto lo fija el JS); el thead queda fijo arriba */
.table-responsive{overflow:auto;}
table.tabla tbody tr:hover{background:#f8faff;}
table.tabla tbody tr{cursor:pointer;}
/* Tablas .tabla cuyas filas NO abren nada (solo lectura o formulario): flecha, no mano.
   Las filas que sí son clicables (p.ej. acordeón) ponen su propio cursor:pointer inline. */
table.tabla.no-click tbody tr{cursor:default;}
table.tabla td,table.tabla th{vertical-align:middle;}

/* Cabecera de sección (título + botones) */
.page-head{background:var(--gris);padding:.35rem 0 .6rem;margin:0;gap:.75rem;}
.page-head h4{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.page-head > div:last-child{flex-shrink:0;white-space:nowrap;}
/* La cabecera de búsqueda: bloque estático; solo scrollea la tabla */
.filtros{background:#fff;border-radius:.6rem;padding:.85rem 1rem;box-shadow:0 1px 6px rgba(30,58,138,.06);margin-bottom:.75rem;}
/* En listados la página no scrollea: solo la zona de la tabla (thead queda fijo) */
body.listado{overflow:hidden;}
/* En pantalla pequeña la página SÍ scrollea: el buscador no se queda fijo ocupando todo */
@media (max-width:991.98px){
  body.listado{overflow:visible;}
  .table-responsive{max-height:none !important;}
}
/* El calendario del datepicker por encima de cabeceras fijas, navbar y panel */
.ui-datepicker{z-index:2000 !important;}

/* En el panel lateral (embed): los botones del formulario van ARRIBA, no en el pie */
/* El título en embed ya no se pinta (lo muestra la cabecera del panel); si la barra de
   botones se queda sin nada visible, el JS del panel la oculta. */
body.embed form.card{display:flex;flex-direction:column;}
body.embed form.card .card-footer{order:-1;position:sticky;top:0;z-index:5;
  background:#fff;border-top:0;border-bottom:1px solid #eef1f7;border-radius:.5rem .5rem 0 0;}

/* Menu de inicio tipo tarjetas */
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;border-radius:.9rem;padding:1.6rem 1rem;text-decoration:none;color:#1e293b;
  box-shadow:0 1px 6px rgba(30,58,138,.08);transition:.15s;height:100%;}
.tile:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(30,58,138,.16);color:var(--azul);}
.tile i{font-size:2.2rem;color:var(--azul);}
.tile span{font-weight:600;text-align:center;}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1e3a8a,#1d4ed8);}
.login-card{background:#fff;border-radius:1rem;padding:2.4rem;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.login-card .logo{font-size:2.6rem;color:var(--azul);}

.badge-estado{font-weight:600;text-transform:capitalize;}
.req{color:#dc2626;}

/* ===== Pantallas pequeñas: cada fila de la tabla se ve como una TARJETA =====
   La etiqueta de cada dato sale de la cabecera de columna (data-label, lo pone el JS). */
@media (max-width:767.98px){
  table.tabla thead{display:none;}
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td{display:block;width:100%;}
  table.tabla{background:transparent;}
  table.tabla tbody tr{
    background:#fff;border:1px solid #e5e9f2;border-radius:.6rem;
    box-shadow:0 1px 4px rgba(30,58,138,.06);margin-bottom:.6rem;padding:.4rem .75rem;
  }
  table.tabla tbody tr:hover{background:#fff;}
  table.tabla tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    border:0;padding:.25rem 0;text-align:right;white-space:normal!important;max-width:none!important;
  }
  table.tabla tbody td::before{
    content:attr(data-label);flex:0 0 42%;text-align:left;
    font-size:.72rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.2px;
  }
  table.tabla tbody td:not([data-label])::before{content:none;}
  table.tabla tbody td.sin-dato{display:none;}          /* celda vacía: no ensucia la tarjeta */
  table.tabla tbody td[colspan]{display:block;text-align:center;}
  table.tabla tbody td[colspan]::before{content:none;}
  table.tabla tfoot{display:block;}
  table.tabla tfoot tr{display:block;background:#fff;border-radius:.6rem;padding:.4rem .75rem;}
  table.tabla tfoot td{display:flex;justify-content:space-between;border:0;}
}

/* Popup a todo el espacio disponible: dentro del panel lateral (un iframe) el ancho
   está limitado por el propio panel, así que un modal-xl se quedaba corto. */
.modal-ancho{ max-width:none; width:calc(100% - 1rem); margin:.5rem auto; }
.modal-ancho .modal-content{ min-height:calc(100vh - 1rem); }

/* Barra de acciones de las fichas con pestañas (cliente, proveedor): vive dentro de
   la pestaña de datos, asi que no aparece en la de cargas, y se queda pegada arriba
   al hacer scroll para tener siempre a mano Guardar. */
.acciones-datos{
  position:sticky; top:0; z-index:6;
  background:#fff; border-bottom:1px solid #eef1f7;
  padding:.6rem 1rem; gap:.5rem;
}

/* Formularios con muchos campos (facturas): la etiqueta pegada a su campo y menos
   aire entre filas, para que quepa todo sin scroll. */
.form-compacto .form-label{ margin-bottom:.15rem; font-size:.875rem; }
.form-compacto .fila-campos{ row-gap:.5rem; }
.form-compacto .form-check{ margin-bottom:0; }

/* Fila de campos todos del mismo ancho, repartiendo el espacio disponible.
   Se usa donde la rejilla de 12 de Bootstrap no reparte bien (7 u 8 columnas).
   Si no caben (pantalla estrecha o panel lateral), envuelven manteniendo el ancho. */
.fila-campos{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fila-campos > div{ flex:1 1 7.5rem; min-width:7.5rem; }

/* Datos numéricos alineados a la derecha en formularios (por tipo y por nombre de campo) */
input[type=number],
input[name*="importe"], input[name*="precio"], input[name*="kilos"],
input[name="longitud"], input[name="litros"], input[name="kilometros"],
input[name*="comision"], input[name="descuento"], input[name*="tipoiva"],
input[name*="tipoirpf"], input[name*="dia"], input[name*="_meses"]{
  text-align:right;
}

/* Rejilla de permisos: filas estrechas y casillas centradas verticalmente */
.tabla-permisos td, .tabla-permisos th { vertical-align: middle; }
.tabla-permisos .form-check-input { margin: 0; }
/* Cabecera de dos pisos (empresa arriba, subcolumnas debajo): aquí el sticky tiene que
   ir en el THEAD entero y no en cada celda. Con sticky por celda, las dos filas se pegan
   a top:0 y la celda con rowspan se sale de su sitio, tapando la primera fila de datos. */
table.tabla-permisos thead { position: sticky; top: 0; z-index: 3; }
table.tabla-permisos thead th { position: static; }
/* El fondo va también en el thead y en sus filas: el color solo estaba en las celdas y
   por la juntura entre los dos pisos se veía pasar el contenido de la tabla. */
table.tabla-permisos thead, table.tabla-permisos thead tr { background: #eef2fb; }
/* La raya de separación la pinta solo el último piso, no los de arriba */
table.tabla-permisos thead tr:not(:last-child) th { border-bottom: none; }

/* ============================================================================
   Ficha en bloques (estilo compartido de formularios)
   Antes solo en cliente_form/proveedor_form; sacado aquí para reutilizar.
   Estructura: contenedor .ficha > .caja (tarjeta gris) con cabecera bloque()
   y filas campoD() (etiqueta col-sm-3 a la izquierda, campo a la derecha).
   Pestañas con .ficha-tabs. Lo específico de cada ficha (pastillas, listas…)
   sigue en el <style> local de su página.
   ========================================================================== */
.ficha { max-width: none; }
.ficha .bloque-tit {
    display: flex; align-items: center; gap: .5rem;
    margin: 1.4rem 0 .75rem; padding-bottom: .35rem;
    border-bottom: 2px solid #dbe3ec;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #1c7293;
    /* Altura mínima fija: así una cabecera con botón no queda más alta que la de al lado */
    min-height: 2.6rem;
}
.ficha .bloque-tit:first-child { margin-top: .25rem; }
.ficha .bloque-tit i { color: #9ab3c9; }
/* Las etiquetas guían la lectura: no deben ser el texto más tenue de la pantalla */
.ficha .col-form-label { color: #3c4858; font-weight: 500; }
/* Cada bloque en su tarjeta; van de dos en dos para aprovechar el ancho del panel */
.ficha .caja {
    background: #f7f9fb; border: 1px solid #e3e9f0;
    border-radius: .5rem; padding: .25rem 1rem 1rem; height: 100%;
}
.ficha .caja .bloque-tit { margin-top: .9rem; }
/* Zona de baja, al pie y sin llamar la atención */
.ficha .zona-baja { margin-top: 1.75rem; padding-top: .9rem; border-top: 1px dashed #dde3ea; }

/* Pestañas: que la activa se distinga de verdad */
.ficha-tabs .nav-link { color: #5a6b7d; font-weight: 500; }
.ficha-tabs .nav-link:hover { color: #1c7293; }
.ficha-tabs .nav-link.active {
    color: #0f172a; font-weight: 700;
    border-bottom: 3px solid #1c7293; margin-bottom: -1px;
}
.ficha-tabs .badge { font-weight: 600; }

/* Aviso de que el registro está dado de baja. Mismo rojo que en el listado. */
.acciones-datos .aviso-baja {
    color: #cd2c3c; font-weight: 600;
    background: #fdecee; border: 1px solid #f5c6cc;
    border-radius: .35rem; padding: .3rem .7rem;
}