/* ==========================================================================
   depositos_gueros — hoja de estilo única
   Pantallas densas de ERP: prioridad a la legibilidad de tablas y formularios.
   Paleta heredada de maymen (azul marino + dorado).
   ========================================================================== */

:root {
  --primary-50:#f0f5fc; --primary-100:#dbe7f5; --primary-200:#b7cfeb;
  --primary-400:#5a8fc9; --primary-500:#2e6cb0; --primary-600:#1e5294;
  --primary-700:#123e70; --primary-800:#0d2b52; --primary-900:#0a1f3d;

  --gold-100:#f4ecd1; --gold-300:#dcc374; --gold-500:#c9a961; --gold-700:#7a6435;

  --ok-bg:#e6f4ea;   --ok-fg:#1e6b34;
  --err-bg:#fdecea;  --err-fg:#a4262c;
  --warn-bg:#fff6e0; --warn-fg:#8a6100;

  --texto:#1f2933; --texto-suave:#6b7280;
  --borde:#d7dee8;  --fondo:#f4f6fa; --superficie:#fff;

  --radio:6px;
  --sombra:0 1px 3px rgb(16 32 64 / 8%);
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--fondo); color:var(--texto);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

a { color:var(--primary-600); }

/* ───────────────────────────── Barra lateral ───────────────────────────── */

/* El sprite vive en el HTML pero no se dibuja: solo alimenta a los <use>. */
.sprite { display:none; }

.ic {
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.app { display:flex; min-height:100vh; }

.lateral {
  --ancho-menu:216px;
  width:var(--ancho-menu); flex:none;
  background:var(--primary-800); color:#dbe7f5;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; z-index:20;
}

.lateral-marca {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px; border-bottom:1px solid rgb(255 255 255 / 10%);
}
.lateral-marca a {
  font-weight:700; font-size:16px; color:var(--gold-500);
  text-decoration:none; letter-spacing:.3px; white-space:nowrap;
}

.btn-estrechar {
  background:transparent; border:0; color:#7d97b8; cursor:pointer;
  font-size:17px; line-height:1; padding:2px 7px; border-radius:var(--radio);
}
.btn-estrechar:hover { background:rgb(255 255 255 / 10%); color:#fff; }

.lateral-menu { flex:1; overflow-y:auto; padding:10px 8px; }

.grupo-titulo {
  margin:12px 8px 4px; font-size:10.5px; letter-spacing:.8px;
  text-transform:uppercase; color:#7d97b8;
}
.lateral-menu > .grupo-titulo:first-child { margin-top:2px; }

.lateral-menu a {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-bottom:1px;
  border-radius:var(--radio); border-left:3px solid transparent;
  color:#dbe7f5; text-decoration:none; font-size:13.5px; white-space:nowrap;
}
.lateral-menu a:hover { background:rgb(255 255 255 / 8%); color:#fff; }
.lateral-menu a.activo {
  background:rgb(255 255 255 / 12%); color:#fff; font-weight:600;
  border-left-color:var(--gold-500);
}

.lateral-pie {
  border-top:1px solid rgb(255 255 255 / 10%); padding:10px;
  display:flex; flex-direction:column; gap:9px;
}

.lateral-usuario {
  display:flex; align-items:center; gap:10px; overflow:hidden;
  color:#fff; text-decoration:none; line-height:1.2;
  padding:4px 6px; border-radius:var(--radio);
}
.lateral-usuario:hover { background:rgb(255 255 255 / 8%); }
.lateral-usuario strong { display:block; font-size:12.5px; font-weight:600; }
.lateral-usuario small  { display:block; color:var(--gold-300); font-size:11px; }

.btn-salir {
  width:100%; background:transparent; color:#fff;
  border:1px solid rgb(255 255 255 / 35%); border-radius:var(--radio);
  padding:6px 12px; cursor:pointer; font-size:12.5px;
}
.btn-salir:hover { background:rgb(255 255 255 / 12%); }

/* ── Menú estrecho: se quedan los iconos ─────────────────────────────────
   Los títulos de grupo no desaparecen: se vuelven una línea divisoria, que
   es lo que separaba visualmente los bloques. */
.menu-estrecho .lateral { --ancho-menu:58px; }
.menu-estrecho .lateral-marca { justify-content:center; padding:14px 0; }
.menu-estrecho .lateral-marca a,
.menu-estrecho .lateral-menu a span,
.menu-estrecho .lateral-usuario span { display:none; }
.menu-estrecho .lateral-menu { padding:10px 6px; }
.menu-estrecho .lateral-menu a { justify-content:center; padding:9px 0; border-left-width:0; }
.menu-estrecho .lateral-usuario { justify-content:center; }
.menu-estrecho .grupo-titulo {
  height:1px; margin:9px 6px; padding:0; overflow:hidden;
  background:rgb(255 255 255 / 12%); font-size:0; color:transparent;
}
.menu-estrecho .btn-salir { padding:6px 2px; font-size:11px; }

/* Panel deslizante y barra de celular: apagados en escritorio. */
.principal { flex:1; min-width:0; display:flex; flex-direction:column; }
.barra-movil   { display:none; }
.lateral-fondo { display:none; }


/* ──────────────────────────────── Contenido ────────────────────────────── */

.contenido { flex:1; width:100%; max-width:1200px; margin:0 auto; padding:20px; }

.encabezado {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px; flex-wrap:wrap;
}
.encabezado h1 { font-size:20px; margin:0; color:var(--primary-800); }

.pie {
  text-align:center; color:var(--texto-suave);
  font-size:12px; padding:24px 0;
}

.tarjeta {
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
  padding:16px; margin-bottom:16px;
}

/* ───────────────────────────────── Avisos ──────────────────────────────── */

.aviso {
  padding:10px 14px; border-radius:var(--radio);
  margin-bottom:16px; border-left:4px solid;
}
.aviso ul { margin:6px 0 0; padding-left:18px; }
.aviso-exito { background:var(--ok-bg);   color:var(--ok-fg);   border-color:var(--ok-fg); }
.aviso-error { background:var(--err-bg);  color:var(--err-fg);  border-color:var(--err-fg); }
.aviso-avisar{ background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-fg); }

/* ───────────────────────────────── Tablas ──────────────────────────────── */

.tabla-scroll { overflow-x:auto; }

table.datos {
  width:100%; border-collapse:collapse; background:var(--superficie);
  border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
}

table.datos th {
  background:var(--primary-50); color:var(--primary-800);
  font-size:12px; text-transform:uppercase; letter-spacing:.4px;
  text-align:left; padding:10px 12px; border-bottom:2px solid var(--borde);
  white-space:nowrap;
}

table.datos td { padding:9px 12px; border-bottom:1px solid var(--borde); }
table.datos tbody tr:hover { background:var(--primary-50); }
table.datos tbody tr.inactivo { opacity:.55; }
table.datos .num { text-align:right; font-variant-numeric:tabular-nums; }
table.datos .acciones { text-align:right; white-space:nowrap; }
table.datos .vacio { text-align:center; color:var(--texto-suave); padding:28px; }

/* ───────────────────────────────── Badges ──────────────────────────────── */

.badge {
  display:inline-block; padding:2px 9px; border-radius:11px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.badge-ok    { background:var(--ok-bg);      color:var(--ok-fg); }
.badge-no    { background:var(--err-bg);     color:var(--err-fg); }
.badge-cedis { background:var(--gold-100);   color:var(--gold-700); }
.badge-suc   { background:var(--primary-100);color:var(--primary-700); }
.badge-serv  { background:#ede9fe;           color:#5b21b6; }

/* ──────────────────────────────── Botones ──────────────────────────────── */

.btn {
  display:inline-block; padding:8px 14px; border-radius:var(--radio);
  border:1px solid var(--borde); background:var(--superficie); color:var(--texto);
  text-decoration:none; cursor:pointer; font-size:13.5px; font-family:inherit;
}
.btn:hover { background:var(--primary-50); }
.btn-primario { background:var(--primary-600); border-color:var(--primary-600); color:#fff; }
.btn-primario:hover { background:var(--primary-700); }
.btn-ok      { background:var(--ok-fg);  border-color:var(--ok-fg);  color:#fff; }
.btn-peligro { background:var(--err-fg); border-color:var(--err-fg); color:#fff; }
.btn-ok:hover, .btn-peligro:hover { filter:brightness(1.1); }
.btn-chico { padding:4px 10px; font-size:12px; }
.en-linea { display:inline-block; margin:0; }

/* ─────────────────────────────── Formularios ───────────────────────────── */

.formulario { max-width:720px; }
.fila { display:flex; gap:16px; flex-wrap:wrap; }
.fila > .campo { flex:1; min-width:200px; }

.campo { margin-bottom:14px; }
.campo label { display:block; font-weight:600; font-size:13px; margin-bottom:5px; }
.campo .req { color:var(--err-fg); }

.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=number], .campo input[type=date], .campo select, .campo textarea {
  width:100%; padding:8px 10px; border:1px solid var(--borde);
  border-radius:var(--radio); font:inherit; background:var(--superficie);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline:none; border-color:var(--primary-400);
  box-shadow:0 0 0 3px rgb(46 108 176 / 15%);
}
.campo.con-error input, .campo.con-error select { border-color:var(--err-fg); }
.campo small.error { color:var(--err-fg); font-size:12px; display:block; margin-top:4px; }
.campo small.ayuda { color:var(--texto-suave); font-size:12px; display:block; margin-top:4px; }
.campo label.check { display:flex; align-items:center; gap:8px; font-weight:400; }
.campo label.check input { width:auto; }

.acciones-form {
  display:flex; gap:10px; align-items:center;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--borde);
}

/* Renglones de documentos: aviso de existencia insuficiente o duplicado */
.faltante {
  border-color: var(--err-fg) !important;
  background: var(--err-bg) !important;
}
table.datos td .apoyo, table.datos .apoyo {
  color: var(--texto-suave); font-size: 12px;
}
#renglones input.cantidad, #renglones select.producto {
  width: 100%; padding: 6px 8px; border: 1px solid var(--borde);
  border-radius: var(--radio); font: inherit;
}

/* ──────────────────────────────── Filtros ──────────────────────────────── */

.filtros {
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); padding:12px; margin-bottom:16px;
}
.filtros .campo { margin:0; }
.filtros input, .filtros select { min-width:170px; }

/* ────────────────────────────── Paginación ─────────────────────────────── */

.paginacion {
  display:flex; gap:4px; align-items:center; margin-top:14px; flex-wrap:wrap;
}
.paginacion-info { color:var(--texto-suave); font-size:12.5px; margin-right:auto; }
.paginacion a, .paginacion .actual {
  padding:5px 11px; border:1px solid var(--borde);
  border-radius:var(--radio); text-decoration:none; font-size:13px;
  background:var(--superficie);
}
.paginacion .actual { background:var(--primary-600); border-color:var(--primary-600); color:#fff; font-weight:600; }

/* ───────────────────────────────── Login ───────────────────────────────── */

.login-fondo {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--primary-800),var(--primary-900));
  padding:20px;
}
.login-caja {
  background:var(--superficie); border-radius:10px; padding:32px;
  width:100%; max-width:380px; box-shadow:0 12px 40px rgb(0 0 0 / 30%);
}
.login-caja h1 {
  margin:0 0 4px; font-size:21px; color:var(--primary-800); text-align:center;
}
.login-caja .sub {
  text-align:center; color:var(--texto-suave);
  font-size:13px; margin-bottom:22px;
}
.login-caja .btn { width:100%; text-align:center; padding:10px; }

/* ──────────────────────────────── Tablero ──────────────────────────────── */

.tarjetas {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; margin-bottom:22px;
}
.dato {
  background:var(--superficie); border:1px solid var(--borde);
  border-left:4px solid var(--primary-500);
  border-radius:var(--radio); padding:14px 16px; box-shadow:var(--sombra);
}
.dato .cifra { font-size:26px; font-weight:700; color:var(--primary-800); line-height:1.1; }
.dato .rotulo { color:var(--texto-suave); font-size:12.5px; margin-top:2px; }
.dato.acento { border-left-color:var(--gold-500); }


/* ── Reportes, bitácora y tablero ─────────────────────────────────────── */

/* Tarjeta de cifra que además es enlace: mismo aspecto, sin subrayado. */
a.dato { text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
a.dato:hover { border-left-color:var(--primary-600); box-shadow:0 2px 8px rgb(16 32 64 / 12%); }

.titulo-bloque { font-size:16px; color:var(--primary-800); margin:22px 0 10px; }

.periodo { color:var(--texto-suave); font-size:12.5px; margin:0 0 10px; }

/* Portada de reportes: una tarjeta por reporte. */
.tarjetas-enlace {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:18px;
}
.tarjeta-enlace {
  display:block; padding:16px; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra); text-decoration:none; color:inherit;
  border-left:4px solid var(--gold-500);
}
.tarjeta-enlace:hover { box-shadow:0 2px 10px rgb(16 32 64 / 12%); }
.tarjeta-enlace strong { display:block; color:var(--primary-800); font-size:15px; margin-bottom:5px; }
.tarjeta-enlace span { color:var(--texto-suave); font-size:12.5px; }

/* Detalle de un renglón de bitácora: cerrado por omisión para que la tabla
   siga siendo legible con cien registros en pantalla. */
table.datos details summary { cursor:pointer; color:var(--primary-600); font-size:12.5px; }
.cambios { display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
.cambios strong { display:block; font-size:11.5px; color:var(--texto-suave); text-transform:uppercase; }
.cambios pre {
  margin:2px 0 0; padding:8px 10px; background:var(--primary-50); border-radius:var(--radio);
  font:12px/1.45 ui-monospace,Consolas,monospace; white-space:pre-wrap; max-width:420px;
}

/* ─────────────────────────────── Pantallas chicas ──────────────────────── */

@media (max-width:900px) {
  .lateral {
    position:fixed; top:0; bottom:0; left:0; height:100vh;
    transform:translateX(-100%); transition:transform .18s ease;
  }
  .app.lateral-abierto .lateral { transform:none; }

  /* En celular el menú siempre va ancho: con 58 px de iconos no se navega. */
  .menu-estrecho .lateral { --ancho-menu:236px; }
  .menu-estrecho .lateral-marca a,
  .menu-estrecho .lateral-menu a span,
  .menu-estrecho .lateral-usuario span { display:block; }
  .menu-estrecho .lateral-menu a { justify-content:flex-start; padding:8px 10px; border-left-width:3px; }
  .menu-estrecho .grupo-titulo {
    height:auto; margin:12px 8px 4px; font-size:10.5px;
    background:none; color:#7d97b8;
  }

  .lateral-fondo { display:block; position:fixed; inset:0; background:rgb(10 31 61 / 45%); z-index:15; }
  .lateral-fondo[hidden] { display:none; }

  .barra-movil {
    display:flex; align-items:center; gap:12px;
    background:var(--primary-700); color:#fff; padding:10px 14px;
    position:sticky; top:0; z-index:10; box-shadow:var(--sombra);
  }
  .barra-movil span { font-weight:600; font-size:14px; }
  .btn-menu {
    background:transparent; border:1px solid rgb(255 255 255 / 35%); color:#fff;
    font-size:16px; line-height:1; padding:5px 10px;
    border-radius:var(--radio); cursor:pointer;
  }

  .contenido { padding:14px; }
  .cambios pre { max-width:100%; }
}

/* ──────────────────────────────── Impresión ────────────────────────────── */
/* Los documentos tienen su propia plantilla, pero cualquier pantalla se puede
   mandar a imprimir: que no salga el menú. */

@media print {
  .lateral, .barra-movil, .lateral-fondo, .pie, .filtros, .paginacion { display:none !important; }
  .contenido { max-width:none; padding:0; }
  .app { display:block; }
}

/* ── Selector de registros por página ─────────────────────────────────────
   Vive dentro de .paginacion, pegado al conteo de registros y separado de los
   números de página, que están a la derecha. */
.por-pagina { display:flex; align-items:center; gap:4px; margin-right:auto; }
.por-pagina .rotulo {
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texto-suave); margin-right:2px;
}
.por-pagina a, .por-pagina .actual {
  padding:3px 8px; border-radius:var(--radio); font-size:12.5px;
  border:1px solid var(--borde); background:var(--superficie);
  color:var(--primary-600); text-decoration:none; line-height:1.3;
}
.por-pagina a:hover { background:var(--primary-50); }
.por-pagina .actual {
  background:var(--primary-100); border-color:var(--primary-200);
  color:var(--primary-800); font-weight:600;
}
/* El conteo pierde su `margin-right:auto` para que el selector quede junto. */
.paginacion .paginacion-info { margin-right:10px; }

@media print { .por-pagina { display:none; } }

/* ── Reportes imprimibles ─────────────────────────────────────────────────
   `.no-imprimir` desaparece en papel; `.solo-imprimir` es lo contrario. El
   encabezado de pantalla y el de papel son distintos a propósito: en pantalla
   los filtros ya se ven, en papel hay que decir qué filtros traía. */
.solo-imprimir { display:none; }

.encabezado-papel { margin-bottom:10px; }
.encabezado-papel strong { display:block; font-size:14px; }
.encabezado-papel span { display:block; font-size:11px; color:var(--texto-suave); }

table.datos tfoot td {
  font-weight:600; background:var(--primary-50);
  border-top:2px solid var(--borde); color:var(--primary-800);
}

@media print {
  @page { size: letter; margin: 12mm 10mm; }

  .no-imprimir { display:none !important; }
  .solo-imprimir { display:block; }

  /* Que el encabezado de la tabla se repita en cada hoja: un listado de 80
     productos ocupa varias páginas y sin esto solo la primera dice qué es
     cada columna. */
  table.tabla-papel thead { display:table-header-group; }
  table.tabla-papel tfoot { display:table-footer-group; }
  table.tabla-papel tr    { page-break-inside:avoid; }

  table.datos { font-size:9.5pt; border:0; }
  table.datos th, table.datos td { padding:3px 5px; }
  table.datos th { background:#eee !important; color:#000; }
  table.datos tbody tr:hover { background:none; }
  table.datos tr.inactivo { opacity:1; }   /* en papel el gris no se distingue */
  .tabla-scroll { overflow:visible; }
  .badge { border:1px solid #999; background:none !important; color:#000 !important; }
}