:root {
  --primary: #0a4b59;
  --primary-dark: #062f38;
  --primary-light: #12707f;
  --secondary: #06567f;
  --secondary-light: #0a7aab;
  --secondary-lighter: #3f9fc2;
  --accent: #7fd1e0;
  --bg: #eef4f5;
  --card-bg: #ffffff;
  --text-dark: #0d2b31;
  --text-muted: #5c7a80;
  --border: #dde8ea;
  --danger: #b3372c;
  --danger-bg: #fbeceb;
  --success: #1c7a5e;
  --success-bg: #e6f4ef;
  --warning: #b57c14;
  --warning-bg: #fdf3e0;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(10, 75, 89, 0.06), 0 8px 24px -8px rgba(10, 75, 89, 0.12);
  --shadow-sm: 0 1px 3px rgba(10, 75, 89, 0.08);
  --font-display: 'Barlow Semi Condensed', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  /* Red de seguridad: evita que la página completa gane un scroll
     horizontal accidental (ej. por el menú lateral oculto fuera de
     pantalla en celular). El contenido en sí ya está pensado para no
     desbordarse; esto es solo un respaldo. */
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}

/* Alinea números en tablas y precios (legibilidad de datos) */
td, .value, .badge { font-variant-numeric: tabular-nums; }

/* ===== Layout ===== */
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: linear-gradient(175deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #eaf6f8;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar .brand-mark-wrap {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(127,209,224,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 3px rgba(0,0,0,0.08);
}

.sidebar .brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sidebar .brand-text {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.sidebar .brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar nav {
  flex: 1;
  padding: 12px 0;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 14.5px;
  color: #d9edf0;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

.sidebar nav a.active {
  background: rgba(255,255,255,0.13);
  border-left-color: var(--secondary-lighter);
  font-weight: 600;
  color: #ffffff;
}

.sidebar .foot {
  padding: 16px 20px;
  font-size: 11.5px;
  opacity: 0.55;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--card-bg);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  color: var(--primary);
}

.menu-toggle {
  display: none;
  background: var(--secondary);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.menu-toggle:hover { filter: brightness(1.1); }

.content {
  padding: 22px;
  flex: 1;
  /* En monitores muy anchos, que el contenido no se estire de pared a
     pared (columnas de tabla con espacios exagerados): se limita el
     ancho y se centra, dejando el resto como margen. En pantallas
     normales y en celular esto no cambia nada (ya son más angostas). */
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Cards ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--secondary-light);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(10,75,89,0.08), 0 14px 28px -10px rgba(10,75,89,0.18);
}

.card .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.card .value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 4px;
}

.panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.panel h2, .panel h3 {
  color: var(--primary);
  font-weight: 600;
  margin-top: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--secondary); color: #fff; box-shadow: 0 2px 8px -2px rgba(6,86,127,0.45); }
.btn-outline { background: transparent; color: var(--secondary); border: 1.5px solid var(--secondary); }
.btn-outline:hover { background: rgba(6,86,127,0.06); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 8px -2px rgba(28,122,95,0.45); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 7px; }

/* ===== Forms ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--primary-dark);
  letter-spacing: 0.2px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-family: var(--font-body);
  background: #fbfdfd;
  color: var(--text-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover, select:hover { border-color: #c5d8db; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--secondary-light);
  box-shadow: 0 0 0 3px rgba(6, 86, 127, 0.12);
}

.form-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

/* ===== Buscador de productos (combobox) en Ventas ===== */
.combo-wrap { position: relative; }
.combo-resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
}
.combo-item {
  padding: 10px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: baseline;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.activo { background: var(--success-bg); }
.combo-marca { color: var(--text-muted); font-size: 12px; }
.combo-stock { margin-left: auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.combo-vacio { padding: 10px 12px; color: var(--text-muted); font-size: 13px; }

/* ===== Table ===== */
.table-wrap { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.table-wrap.es-arrastrable { cursor: grab; }
.table-wrap.es-arrastrable.arrastrando { cursor: grabbing; user-select: none; }
.table-wrap.es-arrastrable.arrastrando * { user-select: none; }
/* Barra de scroll un poco más visible, para dar la pista de que la tabla se puede recorrer */
.table-wrap::-webkit-scrollbar { height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--secondary, #06567f); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--primary, #0a4b59); }

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

thead th {
  background: var(--primary);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

tbody tr { transition: background 0.1s ease; }
tbody tr:nth-child(even) { background: #fafcfd; }
tbody tr:hover { background: #eef6f7; }

tfoot td {
  padding: 11px 14px;
  font-size: 13.5px;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}

.badge-compra { background: var(--warning-bg); color: var(--warning); }
.badge-venta { background: var(--success-bg); color: var(--success); }
.badge-intermedio { background: #e4eefa; color: var(--secondary); }
.badge-cat { background: #eaf3f4; color: var(--primary); border: 1px solid var(--primary-light); }
.badge-gasto { background: var(--danger-bg); color: var(--danger); }
.badge-inversion { background: var(--success-bg); color: var(--success); }
.badge-alerta { background: var(--warning-bg); color: var(--warning); }
.monto-gasto { color: var(--danger); font-weight: 700; }
.monto-inversion { color: var(--success); font-weight: 700; }

.low-stock { color: var(--danger); font-weight: 700; }

.col-descripcion { max-width: 220px; white-space: normal; font-size: 12.5px; color: var(--text-muted); }

/* ===== Comprobante de venta ===== */
.recibo-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.recibo-fila span { color: var(--text-muted); }
.recibo-fila strong { text-align: right; }
.recibo-total {
  border-bottom: none;
  border-top: 2px solid var(--border);
  margin-top: 6px;
  padding-top: 16px;
  font-size: 16px;
}
.recibo-total strong:last-child { font-size: 23px; color: var(--primary); }

/* ===== Mensajes tipo "toast" ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  animation: alertIn 0.25s ease;
  border-left: 4px solid transparent;
}
.alert::before {
  font-size: 16px;
  line-height: 1.3;
}
.alert-success { background: var(--success-bg); color: var(--success); border-left-color: var(--success); }
.alert-success::before { content: "✓"; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }
.alert-danger::before { content: "!"; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-left-color: var(--warning); }
.alert-warning::before { content: "⏰"; }
.alert-info { background: #e4eefa; color: var(--secondary); border-left-color: var(--secondary); }
.alert-info::before { content: "ℹ"; }

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.empty::before {
  content: "◌";
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
  opacity: 0.5;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}

.filters .field { min-width: 160px; }
/* Este campo en particular (el selector de producto en reportes.php) lleva
   texto largo (código + nombre), así que en escritorio necesita más ancho
   que un campo normal. En celular, la regla del punto de quiebre de abajo
   la reemplaza por "flex:1 1 140px" para que no se salga de la pantalla. */
.filters .campo-producto-filtro { min-width: 260px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* ===== Responsive sidebar ===== */
@media (max-width: 768px) {
  /* iOS Safari hace zoom automáticamente al tocar un campo si su letra
     mide menos de 16px — es una "sorpresa" molesta muy común en celular.
     Con 16px aquí (en vez de los 14px de escritorio) ese zoom no se activa. */
  input, select, textarea { font-size: 16px; }

  .sidebar {
    position: fixed;
    z-index: 50;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: 8px 0 30px rgba(0,0,0,0.25);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .content { padding: 14px; }
  .topbar { padding: 12px 14px; }
  /* Nota: todas las tablas de datos usan la clase .table-stack, que en este
     mismo punto de quiebre se apila como tarjetas (ver más abajo), así que
     ya no se necesita un ancho mínimo genérico con scroll horizontal aquí. */
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 30, 35, 0.45);
  z-index: 40;
}
.overlay.show { display: block; }

/* ===== Tablas -> tarjetas apiladas en celular (solo donde se use .table-stack) =====
   Mismo punto de quiebre (768px) que la barra lateral, para que no exista un
   rango intermedio (ej. tablets ~641-768px) donde la tabla ya no cabe entera
   pero tampoco se apila en tarjetas todavía. */
@media (max-width: 768px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack { min-width: 0; }
  .table-stack tr {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    padding: 6px 4px;
    box-shadow: var(--shadow-sm);
  }
  .table-stack tr:hover { background: var(--card-bg); }
  .table-stack tr:nth-child(even) { background: var(--card-bg); }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    /* Evita que valores largos e "inquebrables" (fechas con hora, los
       botones de Editar/Eliminar juntos, etc.) empujen la tarjeta más
       ancha que la pantalla y provoquen scroll horizontal en toda la
       página. Con esto, si no caben en una línea, bajan a la siguiente
       en vez de desbordarse. Usa !important porque algunas celdas traen
       su propio "white-space:nowrap" en línea (para verse bien en
       escritorio), que aquí debe ceder. */
    white-space: normal !important;
    flex-wrap: wrap;
    min-width: 0;
  }
  .table-stack td:last-child { border-bottom: none; }
  .table-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
    margin-right: 10px;
  }
  .table-stack td.empty::before { content: ""; }
  .table-stack td.empty { justify-content: center; text-align: center; }

  /* La columna de descripción ya no necesita limitar su ancho al apilarse:
     el texto queda a la derecha, alineado como el resto de valores. */
  .table-stack td.col-descripcion {
    max-width: none;
    text-align: right;
  }

  /* Las filas de TOTAL (tfoot) se distinguen mejor al apilarse */
  .table-stack tfoot tr {
    border: 1.5px solid var(--secondary-light);
  }
  .table-stack tfoot td { font-weight: 700; }
  .table-stack td.empty-cell-mobile { display: none; }

  /* Botones de Editar/Eliminar un poco más grandes en celular: son el
     área de toque más pequeña del sistema y conviene que sean fáciles
     de presionar con el dedo. */
  .table-stack .btn-sm { padding: 8px 12px; font-size: 13px; }
}

/* ===== Encabezados de panel y filtros: mejor uso del espacio en celular ===== */
@media (max-width: 768px) {
  .panel { padding: 16px 14px; }
  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-header h3 { font-size: 16px; }
  .panel-header .btn,
  .panel-header form.filters {
    width: 100%;
  }
  .panel-header .btn { justify-content: center; }
  .panel-header form.filters .field { min-width: 0; flex: 1; }

  .filters .field { min-width: 0; flex: 1 1 140px; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }

  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 14px; }
  .card .value { font-size: 20px; }
  .card .label { font-size: 11px; }

  /* Resultados del buscador de productos (Ventas): en celular, cada
     opción necesita ser más alta y grande para tocarla bien con el dedo
     (en vez del tamaño más compacto pensado para mouse en escritorio). */
  .combo-item { padding: 13px 12px; font-size: 14.5px; }
  .combo-resultados { max-height: 45vh; }
}

/* En teléfonos angostos, 2 columnas de tarjetas quedan muy apretadas para
   mostrar montos en soles — mejor una sola columna, de ancho completo. */
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .card .value { font-size: 24px; }
}

/* ===== Barra superior: en pantallas muy angostas, oculta el nombre de
   usuario para que el título de la página no se corte ===== */
@media (max-width: 420px) {
  .topbar h1 { font-size: 17px; }
  .topbar .usuario-actual { display: none; }
}

/* ===== Impresión / Guardar como PDF ===== */
.print-only { display: none; }

/* Tamaño de página por defecto para impresión: horizontal (landscape).
   La mayoría de las tablas del sistema tienen muchas columnas (Productos,
   Valorización, etc.) y en vertical no entran completas: el navegador las
   recorta silenciosamente en vez de mostrar todo. En horizontal entra
   mucho más contenido sin recortar nada. La página del comprobante de
   venta (venta_recibo.php) es angosta y se fuerza a vertical aparte. */
@page {
  size: landscape;
  margin: 10mm;
}
@media print {
  /* SIN "!important" a propósito: las 3 veces que se usa esta clase en el
     sistema (encabezado con logo de Reportes y del comprobante de venta)
     traen su propio "style=display:flex" en línea para poner el logo y el
     texto uno al lado del otro. Un estilo en línea ya gana, por
     especificidad, sobre esta clase sin necesidad de "!important" — pero
     si aquí se usara "!important", ganaría incluso sobre ese estilo en
     línea y forzaría "display:block", apilando el logo ARRIBA del texto
     en vez de al lado, y agregando así una fila extra de alto vacío en
     cada hoja impresa (Reportes y comprobante de venta). */
  .print-only { display: block; margin-bottom: 14px; }
  .sidebar, .topbar, .menu-toggle, .overlay, .no-print,
  .filters, .form-actions, .btn, form button, .alert {
    display: none !important;
  }
  body, .app, .main, .content {
    background: #fff !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Sin esto, ".app" conservaba su "min-height:100vh" (pensado para
       pantalla, que llena el alto de la ventana). Al imprimir, ese "100vh"
       puede calcularse más alto que el contenido real de una sola página,
       y el navegador agrega una hoja extra casi en blanco solo para cubrir
       ese alto mínimo forzado — muy notorio en páginas con poco contenido
       como Ventas (la tabla de un solo día). */
    min-height: 0 !important;
    height: auto !important;
  }
  .panel {
    box-shadow: none !important;
    border: 1px solid #ddd;
    /* "avoid" en un panel completo (que puede tener una tabla larga)
       hacía que el navegador empujara TODO el panel a la página
       siguiente si no cabía entero, dejando la anterior casi en blanco
       y, en tablas muy largas, cortando filas al no caber igual en una
       sola página. Permitimos que el panel se divida entre páginas;
       las filas individuales de la tabla se protegen aparte abajo. */
    page-break-inside: auto;
    margin-bottom: 14px;
    /* El relleno de 20px de cada panel está pensado para pantalla, con
       espacio de sobra. En papel, ese mismo relleno se repite en cada
       panel impreso (Ventas por día, por hora, por mes, Movimientos,
       Valorización...) y suma bastante espacio en blanco innecesario. */
    padding: 14px 16px !important;
  }

  /* Evita que el título de un panel quede "huérfano" solo al final de una
     hoja (con toda su tabla empujada a la siguiente): eso deja una hoja casi
     vacía debajo del título y desperdicia espacio. Al pedirle al navegador
     que no corte la página justo después del título, el título se mueve
     junto con al menos las primeras filas de su tabla. */
  .panel h2, .panel h3, .panel-header {
    page-break-after: avoid;
    break-after: avoid-page;
  }

  /* Las tarjetas de resumen (totales de Valorización, etc.) son bloques
     cortos: si una queda a la mitad de un corte de página, se ve como un
     hueco raro arriba o abajo. Se mantienen siempre juntas en la misma hoja. */
  .cards {
    page-break-inside: avoid;
    break-inside: avoid-page;
    gap: 10px;
    margin-bottom: 14px;
  }
  .cards .card {
    padding: 10px 12px;
  }

  /* El mensaje de "sin resultados" (con su icono decorativo grande) está
     pensado para pantalla, donde hay espacio de sobra. En papel, ese mismo
     espaciado se ve como un bloque de espacio vacío desperdiciado —sobre
     todo si varios reportes filtrados no tienen datos—, así que se reduce
     el alto y se quita el icono, dejando solo el texto, compacto. */
  .empty {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  .empty::before {
    display: none !important;
  }

  /* --- Tablas: que se vea TODO el contenido, sin recortes ni scroll --- */
  .table-wrap {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
  }
  /* Estas reglas de "achicar todo para que quepa" son a propósito solo
     para .table-stack (las tablas de datos con muchas columnas:
     Productos, Ventas, Reportes). Si fueran para cualquier <table> del
     sistema, también encogerían de más otras tablas simples que no
     necesitan ese tratamiento, como la del comprobante de venta. */
  .table-stack {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto;
    font-size: 10.5px;
  }
  .table-stack thead th, .table-stack tbody td, .table-stack tfoot td {
    padding: 5px 6px !important;
    white-space: normal !important;
    word-break: break-word;
  }
  .table-stack thead th {
    background: #0a4b59 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Los badges de color (estado del IGV, tipo de movimiento en Finanzas,
     etc.) por defecto pierden su fondo de color al imprimir/guardar en
     PDF -el navegador los deja en blanco y negro para "ahorrar tinta"-,
     lo que hace desaparecer justo la distinción visual que interesa
     conservar en el papel (ej. rojo = vencido, verde = al día). */
  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Repite el encabezado de la tabla en cada página impresa, y evita que
     una fila se corte a la mitad entre una página y la siguiente. Esto sí
     aplica a cualquier tabla, no solo a las de datos. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; }

  /* La columna de Acciones (Editar/Eliminar) no tiene sentido en un
     papel o PDF impreso, así que se oculta por completo en vez de dejar
     una columna vacía. */
  .col-acciones { display: none !important; }

  /* Los subtítulos "Detalle de cada venta..." (Reportes → Ventas por hora
     / por mes) usan un margen de 20px arriba y 10px abajo pensado para
     pantalla, con espacio de sobra. Al imprimir, ese mismo margen se repite
     en cada sección de cada reporte y suma bastante espacio en blanco;
     se reduce sin perder la separación visual del resto del texto. Con
     "!important" a propósito: solo hay 2 casos de <h4> en todo el sistema
     (ambos en reportes.php) y ninguno depende de flex ni de otra
     propiedad que este cambio pudiera romper, a diferencia de .print-only. */
  h4 { margin: 10px 0 6px !important; }

  /* Al ocultar el panel de formulario (Nuevo producto / Registrar venta),
     el panel que queda en un "grid-2" no debe quedarse a la mitad del
     ancho con un hueco en blanco al lado: que ocupe toda la página. */
  .grid-2 { display: block !important; }
}

/* Accesibilidad: algunas personas activan "reducir movimiento" en su
   sistema operativo (Windows, macOS, Android, iOS) porque las animaciones
   les provocan mareo, migrañas con aura, o simplemente las prefieren
   desactivadas. El navegador nos avisa de esa preferencia con esta media
   query. Se desactivan las transiciones/animaciones (tarjetas que se
   "levantan" al pasar el mouse, botones, el mensaje de confirmación que se
   desvanece solo, etc.) sin cambiar ningún color, tamaño ni disposición
   del resto del diseño. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}