/* D&J Diluyentes · tema de marca: rojo y azul del logo, menú oscuro, tipografía Barlow */
:root {
  --rojo-dj: #e42228;  --rojo-dj-2: #c4161c;  --rojo-dj-suave: #fde7e7;
  --azul-dj: #1f4fc4;  --azul-dj-2: #173c99;  --azul-dj-suave: #e7eefc;  --azul-web: #2f6bff;
  --noche: #0f1b33;    --noche-2: #18284a;
  --arena: #f4f6fa;  --arena-2: #e9edf4;  --arena-3: #d3dae6;
  --blanco: #ffffff;
  --tinta: #14213d;  --tinta-2: #44516b;  --tinta-3: #7a869c;
  --turquesa: var(--azul-dj);  --turquesa-2: var(--azul-dj-2);  --turquesa-suave: var(--azul-dj-suave);
  --coral: var(--rojo-dj);  --coral-2: var(--rojo-dj-2);  --coral-suave: var(--rojo-dj-suave);
  --primario: var(--azul-dj);
  --borde: #dfe4ee;
  --sombra: 0 1px 2px rgba(20, 33, 61, .05), 0 6px 20px rgba(20, 33, 61, .06);
  --radio: 14px;  --radio-sm: 10px;
  --fuente: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulo: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --fuente-logo: var(--fuente-titulo);
  --ancho-menu: 250px;
}
body { font-size: 15.5px; }
h1, h2, h3, .barra .titulo, .kpi .val, .acceso b { font-family: var(--fuente-titulo); letter-spacing: 0; }
h2 { font-size: 1.2rem; }
a { color: var(--azul-dj); }

/* menú lateral oscuro con logo */
.menu { background: var(--noche); border-right: 0; color: #c9d3e6; padding: 1rem .75rem; }
.menu .logo { display: flex; align-items: center; gap: .6rem; padding: .2rem .5rem 1.1rem; margin-bottom: .3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.logo-horizontal { display: block; width: 100%; max-width: 205px; height: auto; }
.logo-texto { display: flex; flex-direction: column; line-height: 1; width: 100%; }
.logo-texto b { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: .02em; }
.logo-texto small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #8ea1c4; margin-top: .55rem; font-weight: 600; }
.menu .grupo { color: #6f81a6; letter-spacing: .16em; padding: 1rem .75rem .35rem; }
.menu a.item { color: #c9d3e6; padding: .62rem .75rem; font-weight: 500; font-size: .95rem; border-left: 3px solid transparent; border-radius: 0 var(--radio-sm) var(--radio-sm) 0; }
.menu a.item svg { opacity: .85; }
.menu a.item:hover { background: var(--noche-2); color: #fff; }
.menu a.item.activo { background: linear-gradient(90deg, rgba(47, 107, 255, .28), rgba(47, 107, 255, .08)); color: #fff;
  border-left-color: var(--rojo-dj); font-weight: 700; }
.menu a.item.activo svg { opacity: 1; color: #8fb2ff; }
.menu .pie-menu { color: #8ea1c4; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .9rem; }
.menu .pie-menu b { color: #ff8a8e !important; }

/* barra superior: buscador y acciones a mano */
.barra { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--borde); padding: .65rem 1.5rem;
  box-shadow: 0 1px 0 rgba(20, 33, 61, .03); }
.barra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--rojo-dj) 0 50%, var(--azul-dj) 50% 100%); }
.barra .titulo { font-size: 1.3rem; font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.buscador { position: relative; flex: 0 1 360px; margin-left: auto; }
.buscador input { padding-left: 2.3rem; border-radius: 999px; background: var(--arena); border-color: transparent; }
.buscador input:focus { background: #fff; }
.buscador svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.barra .espacio { flex: 0; }

/* botones */
.btn { border-radius: 10px; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 61, .08); }
.btn.rojo, .btn.coral { background: var(--rojo-dj); }
.btn.rojo:hover, .btn.coral:hover { background: var(--rojo-dj-2); }
.btn.sec { box-shadow: none; }
input:focus, select:focus, textarea:focus { border-color: var(--azul-web); box-shadow: 0 0 0 3px rgba(47, 107, 255, .15); }

/* tarjetas, KPI y tablas */
.tarjeta { border-color: #e3e8f1; }
.kpi { border-top: 3px solid var(--azul-dj); }
.kpi.coral { border-top-color: var(--rojo-dj); } .kpi.sol { border-top-color: #f0a020; } .kpi.verde { border-top-color: #2e9d68; }
.kpi .val { font-size: 1.9rem; }
.kpi::after { display: none; }
.tabla th { color: var(--tinta-3); background: #f8fafd; }
.tabla tbody tr:hover { background: #f3f7ff; }
.tabla td { border-bottom-color: #edf0f5; }
.chip.ok { background: #dcf2e6; color: #1f7a4f; }

/* accesos rápidos del tablero */
.saludo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.saludo h1 { margin: 0; font-size: 1.7rem; }
.saludo p { margin: 0; color: var(--tinta-2); }
.contenido { max-width: none; }
/* 8 accesos en una fila; 4 + 4 en pantallas medianas */
.accesos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.acceso { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.05rem; border-radius: var(--radio); background: var(--blanco);
  border: 1px solid #e3e8f1; box-shadow: var(--sombra); color: var(--tinta); transition: transform .12s, box-shadow .12s, border-color .12s; }
.acceso:hover { text-decoration: none; transform: translateY(-2px); border-color: #c8d6f5; box-shadow: 0 10px 24px rgba(31, 79, 196, .12); }
.acceso .ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-dj-suave); color: var(--azul-dj); }
.acceso .ico svg { width: 22px; height: 22px; }
.acceso b { font-size: 1.08rem; font-weight: 700; }
.acceso span { font-size: .84rem; color: var(--tinta-3); line-height: 1.3; }
.acceso.principal-rojo { background: var(--rojo-dj); border-color: var(--rojo-dj); color: #fff; }
.acceso.principal-rojo .ico { background: rgba(255, 255, 255, .18); color: #fff; }
.acceso.principal-rojo span { color: rgba(255, 255, 255, .85); }
.acceso.principal-azul { background: var(--azul-dj); border-color: var(--azul-dj); color: #fff; }
.acceso.principal-azul .ico { background: rgba(255, 255, 255, .18); color: #fff; }
.acceso.principal-azul span { color: rgba(255, 255, 255, .85); }
.acceso.rojo .ico { background: var(--rojo-dj-suave); color: var(--rojo-dj); }

@media (max-width: 1100px) { .buscador { flex-basis: 240px; } }
@media (max-width: 1350px) { .accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .buscador { display: none; }
  .barra .espacio { flex: 1; }
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.logo b { color: inherit; }

/* composición del precio */
.composicion { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: .4rem 0 .6rem; }
.composicion span { display: block; height: 100%; }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.g-Producto { background: #1d4e89; } .g-Ganancia { background: #2e9d68; } .g-Envase { background: #e08a1e; }
.g-Caja { background: #b8862f; } .g-Mano { background: #7a6fbf; } .g-Flete { background: #4aa3c9; }
.g-Impuestos { background: #c8443a; } .g-Otros { background: #9aa3ad; }

input.input-chico { width: 7rem; padding: .35rem .5rem; }
.fila-linea td { padding-top: .2rem; padding-bottom: .2rem; }
.grupo-tipo td { background: var(--arena); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.marcado td { background: #fff8ec; }
.barra-acciones { position: sticky; bottom: 0; background: var(--blanco); border-top: 1px solid var(--borde); padding: .8rem 1.2rem; margin: 1rem -1.2rem -1.1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; border-radius: 0 0 var(--radio) var(--radio); }
.sube { color: var(--rojo); font-weight: 600; } .baja { color: var(--verde); font-weight: 600; }

/* lista de precios imprimible */
.lista-hoja { max-width: 900px; margin: 0 auto; background: #fff; padding: 2rem 2.2rem; border: 1px solid var(--borde); border-radius: var(--radio); }
.lista-hoja h1 { margin: 0; font-size: 1.5rem; }
.lista-hoja h3 { margin: 1.4rem 0 .3rem; font-size: 1rem; border-bottom: 2px solid var(--turquesa); padding-bottom: .2rem; color: var(--turquesa); }
.lista-hoja table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.lista-hoja td, .lista-hoja th { padding: .28rem .4rem; border-bottom: 1px solid #eceff3; }
.lista-hoja th { text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--tinta-3); }
@media print {
  .menu, .barra, .no-imprimir, .avisos { display: none !important; }
  .app, .principal, .contenido { display: block !important; padding: 0 !important; margin: 0 !important; }
  .lista-hoja { border: 0; padding: 0; max-width: none; }
  .lista-hoja h3 { break-after: avoid; }
  .lista-hoja tr { break-inside: avoid; }
}

/* Importar de Paradigma */
.pila { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin: .6rem 0; }
.grilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .6rem 1rem; margin: .6rem 0 1rem; }
.grilla-campos select { width: 100%; }

/* Orden por columna en listados */
th a.orden { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
th a.orden:hover { text-decoration: underline; }
th a.orden.activa { color: var(--primario, #1d3c78); }
.grupo-fila td { background: #f3f5f9; font-weight: 700; letter-spacing: .02em; padding-top: .7rem; }

/* KPI clickeables (Artículos y precios) */
a.kpi-link { display:block; color:inherit; text-decoration:none; cursor:pointer; transition:transform .12s, box-shadow .12s; }
a.kpi-link:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,27,51,.12); }
a.kpi-link.elegido { outline:2px solid var(--azul, #1f4fc4); outline-offset:-2px; }
.pila-tarjetas { display: flex; flex-direction: column; gap: 1rem; }
/* Atajos de período (Ventas y facturación) */
.periodos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip-periodo { padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--borde); color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; }
.chip-periodo:hover { border-color: var(--azul, #1f4fc4); }
.chip-periodo.elegido { background: var(--azul, #1f4fc4); border-color: var(--azul, #1f4fc4); color: #fff; }
/* Barras por rubro (compras y gastos) */
.barra-rubro { display: grid; grid-template-columns: minmax(140px, 260px) 1fr auto; gap: .8rem; align-items: center; padding: .3rem 0; }
.barra-rubro .pista { background: var(--arena, #eef1f6); border-radius: 999px; height: 10px; overflow: hidden; }
.barra-rubro .pista div { background: linear-gradient(90deg, var(--azul, #1f4fc4), var(--rojo, #e42228)); height: 100%; border-radius: 999px; }
@media (max-width: 560px) { .barra-rubro { grid-template-columns: 1fr auto; } .barra-rubro .pista { grid-column: 1 / -1; } }
.opciones-pago { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.opciones-pago label, .cheque-tercero { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; background: #fff; }
.opciones-pago label:has(input:checked), .cheque-tercero:has(input:checked) { border-color: var(--azul, #1f4fc4); box-shadow: 0 0 0 2px rgba(31, 79, 196, .15); }
.lista-cheques { display: grid; gap: .4rem; max-height: 260px; overflow-y: auto; }
/* Estado de resultados */
.eerr td { padding: .45rem .6rem; }
.eerr .grupo td { font-weight: 700; color: var(--azul, #1f4fc4); padding-top: .9rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }
.eerr .sangria { padding-left: 1.4rem; }
.eerr .total td { font-weight: 700; border-top: 2px solid var(--borde); }
.eerr .final td { font-size: 1.15rem; background: rgba(31, 79, 196, .06); }
.eerr .final.pierde td { background: rgba(228, 34, 40, .07); color: var(--rojo, #e42228); }
.periodo-libre { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.periodo-libre input { padding: .35rem .5rem; border: 1px solid var(--borde); border-radius: 8px; }

/* Ingreso */
.pantalla-ingreso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: #0f1b33; }
.caja-ingreso { width: 100%; max-width: 360px; display: grid; gap: .8rem; padding: 1.6rem; }
.envoltura-ingreso { width: 100%; max-width: 360px; display: grid; gap: 1.2rem; }
.logo-ingreso { width: 240px; max-width: 80%; height: auto; margin: 0 auto; display: block; }
.caja-ingreso h2 { text-align: center; margin: 0 0 .2rem; font-size: 1.1rem; }
.caja-ingreso label { display: grid; gap: .3rem; font-weight: 600; }
.caja-ingreso .btn { justify-content: center; margin-top: .4rem; }
.form-salir { display: inline; margin: 0; }

/* ---------- celular ---------- */
@media (max-width: 640px) {
  /* tablas → fichas */
  .tabla-envoltura { overflow: visible; margin: 0; padding: 0; }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tfoot, .tabla-tarjetas tr, .tabla-tarjetas td,
  .tabla-tarjetas tfoot th { display: block; width: 100%; }
  .tabla-tarjetas tfoot tr { border: 2px solid var(--azul-dj); border-radius: 12px; padding: .55rem .8rem; background: #f3f7ff; }
  .tabla-tarjetas tfoot th { display: flex; justify-content: space-between; gap: .8rem; padding: .2rem 0; border: 0; text-align: right; }
  .tabla-tarjetas tfoot th::before { content: attr(data-label); text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--tinta-3); }
  .tabla-tarjetas tfoot th:empty { display: none; }
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas tbody tr { border: 1px solid var(--borde); border-radius: 12px; padding: .55rem .8rem; margin-bottom: .6rem; background: var(--blanco); }
  .tabla-tarjetas tbody tr.marcado { background: #fff8ec; }
  .tabla-tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .2rem 0; border: 0; text-align: right; min-height: 0; }
  .tabla-tarjetas td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
  .tabla-tarjetas td:not([data-label]) { justify-content: flex-end; }
  .tabla-tarjetas td:not([data-label])::before { display: none; }
  .tabla-tarjetas td:empty { display: none; }
  .tabla-tarjetas tr.fila-entera { border: 0; padding: .3rem 0; background: transparent; }
  .tabla-tarjetas tr.fila-entera td { display: block; text-align: left; }
  /* celdas con campos: título arriba y campo a todo el ancho */
  .tabla-tarjetas td:has(input:not([type=checkbox]), select, textarea) { flex-direction: column; align-items: stretch; text-align: left; gap: .2rem; }
  .tabla-tarjetas td input:not([type=checkbox]), .tabla-tarjetas td select, .tabla-tarjetas td textarea { width: 100% !important; max-width: none; min-width: 0 !important; }
  .barra-acciones { position: static; }
  .tabla-tarjetas td .btn { margin-left: .3rem; }
  .tabla-tarjetas tbody tr:hover { background: var(--blanco); }

  /* números arriba: 2 por fila y más chicos */
  .grilla:has(> .kpi) { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .grilla > .tarjeta + .tarjeta { margin-top: 0; }
  .grilla:has(> .kpi) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: .75rem .85rem; }
  .kpi .etq { font-size: .66rem; letter-spacing: .06em; }
  .kpi .val { font-size: 1.25rem; word-break: break-word; }
  .kpi .sub { font-size: .76rem; }

  /* accesos del tablero compactos */
  .accesos { gap: .55rem; }
  .acceso { flex-direction: row; align-items: center; gap: .55rem; padding: .7rem .75rem; }
  .acceso .ico { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
  .acceso b, .acceso strong { font-size: .92rem; }
  .acceso span { display: none; }

  .contenido { padding: .8rem .75rem 3rem; }
  .tarjeta { padding: .9rem .85rem; }
  .barra-acciones { margin: 1rem -.85rem -.9rem; padding: .7rem .85rem; }
  .filtros .btn { flex: 1 1 auto; justify-content: center; }
  .periodo-libre { flex-wrap: wrap; }
  .periodo-libre input { min-width: 0; flex: 1 1 120px; }
  .lista-hoja { padding: 1rem .8rem; overflow-x: auto; }
  .lista-hoja table { font-size: .8rem; }
}