/* ============================================================
   POSX — HOJA DE ESTILOS UNIFICADA
   Generada a partir de: estilos.css, estilos_productos.css
   y todos los bloques <style> de cada archivo .php
   ============================================================ */

/* ============================================================
   BASE GLOBAL — Variables, Reset, Body
   ============================================================ */

:root {
  --posx-bg:      #0b1220;
  --posx-bg2:     #0f1a30;
  --posx-border:  rgba(255,255,255,.10);
  --posx-text:    rgba(255,255,255,.92);
  --posx-muted:   rgba(255,255,255,.66);
  --posx-accent:  #00bcd4;
  --posx-shadow:  0 14px 40px rgba(0,0,0,.22);
  --posx-w:       250px;

  /* Paleta de aplicación (modo claro) */
  --bg:       #f4f6f8;
  --card:     #ffffff;
  --text:     #111827;
  --muted:    #6b7280;
  --border:   #e5e7eb;
  --primary:  #2c7be5;
  --secondary:#6c757d;
  --danger:   #dc3545;
  --ok:       #0f766e;
  --shadow:   0 10px 30px rgba(0,0,0,.08);
  --radius:   14px;

  /* Paleta calypso/fuchsia (agregar_producto, agregar_producto_base) */
  --calypso:  #00bcd4;
  --calypso2: #00a7bd;
  --fuccia:   #e91e63;
  --fuccia2:  #cf1452;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  padding-left: var(--posx-w);
}

/* FIN BASE GLOBAL
   ============================================================ */


/* ============================================================
   PÁGINA: menu.php — Menú lateral fijo (incluido en todas)
   ============================================================ */

.posx-side-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--posx-w);
  background: linear-gradient(180deg, var(--posx-bg), var(--posx-bg2));
  border-right: 1px solid var(--posx-border);
  box-shadow: var(--posx-shadow);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.posx-menu-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--posx-border);
}

.posx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.posx-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--posx-accent);
  box-shadow: 0 0 0 4px rgba(0,188,212,.14);
  flex: 0 0 auto;
}

.posx-title {
  color: var(--posx-text);
  font-weight: 800;
  letter-spacing: .2px;
}

.posx-menu-links {
  padding: 10px;
  overflow: auto;
}

.posx-menu-group {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.posx-last { border-bottom: none; margin-bottom: 0; }

.posx-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--posx-text);
  transition: background .15s ease, transform .15s ease;
}

.posx-menu-link:hover {
  background: rgba(255,255,255,.08);
  transform: translateX(1px);
}

.posx-menu-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.posx-menu-ico svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .95;
}

.posx-menu-text {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}

.posx-impersonation {
  margin: 10px 12px 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}

.posx-impersonation-title { font-size: 12px; opacity: .9; margin-bottom: 2px; }
.posx-impersonation-sub   { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

.posx-impersonation-link {
  display: inline-block;
  font-size: 12px;
  text-decoration: underline;
  margin-right: 10px;
  color: var(--posx-muted);
}

.posx-impersonation-form { display: inline; }

.posx-impersonation-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}

/* Responsive menú */
@media (max-width: 720px) {
  body {
    padding-left: 0;
    padding-top: 56px;
  }
  .posx-side-menu {
    width: 100%;
    height: 56px;
    inset: 0 0 auto 0;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }
  .posx-menu-head {
    border-bottom: none;
    border-right: 1px solid var(--posx-border);
    padding: 8px 10px;
    flex-shrink: 0;
  }
  .posx-title { font-size: 13px; }
  .posx-menu-links {
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 4px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
  }
  .posx-menu-links::-webkit-scrollbar { display: none; }
  .posx-menu-group {
    display: flex;
    flex-direction: row;
    gap: 2px;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 0 4px 0 0;
    margin: 0 4px 0 0;
  }
  .posx-last { border-right: none; margin-right: 0; padding-right: 0; }
  .posx-menu-link {
    padding: 7px 8px;
    border-radius: 8px;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    min-width: 52px;
  }
  .posx-menu-text {
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 56px;
  }
  .posx-menu-ico { width: 16px; height: 16px; flex: 0 0 16px; }
  .posx-menu-ico svg { width: 16px; height: 16px; }
  .posx-impersonation { display: none; }
}

/* FIN PÁGINA: menu.php
   ============================================================ */


/* ============================================================
   PÁGINA: login.php — Inicio de sesión
   ============================================================ */

.login-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* login no usa menú, así que sobreescribimos el padding-left */
  padding-left: 16px;
}

.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.login-box h2 {
  margin: 0 0 20px;
  font-size: 22px;
  color: var(--text);
}

.login-box label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 5px;
  font-weight: 600;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}

.login-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44,123,229,.12);
}

.login-box button[type="submit"] {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}

.login-box button[type="submit"]:hover { background: #1a6fd4; }

.login-msg {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 8px;
  background: #fde8e8;
  color: #721c24;
  font-size: 13px;
  border: 1px solid #f5c6cb;
}

.login-forzar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.login-link {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
}

.login-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .login-box { padding: 22px 16px; }
}

/* FIN PÁGINA: login.php
   ============================================================ */


/* ============================================================
   PÁGINA: register.php — Registro de usuarios
   ============================================================ */

.register-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  padding-left: 16px;
}

.register-box {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.register-box h2 {
  margin: 0 0 20px;
  font-size: 20px;
}

.register-box label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 5px;
  font-weight: 600;
}

.register-box input,
.register-box select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.register-box input:focus,
.register-box select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44,123,229,.12);
}

.register-box button[type="submit"] {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.register-box button[type="submit"]:hover { background: #1a6fd4; }

.register-msg {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 13px;
}

.register-msg.ok  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.register-msg.err { background: #fde8e8; color: #721c24; border: 1px solid #f5c6cb; }

.register-link {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
}

.register-link:hover { text-decoration: underline; }

/* FIN PÁGINA: register.php
   ============================================================ */


/* ============================================================
   PÁGINA: producto_base.php — Catálogo global (Director)
   ============================================================ */

.pb-wrap {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 16px 40px;
}

/* Panel director: selección de admin */
.pb-director-panel {
  margin-bottom: 14px;
}

.pb-director-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}

.pb-director-label  { font-weight: 700; font-size: 13px; }

.pb-director-select {
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
}

.pb-director-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
}

.pb-director-btn.secondary {
  background: #eee;
  color: var(--text);
}

.pb-director-current { font-size: 12px; opacity: .85; }

.pb-top {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pb-top a {
  text-decoration: none;
  color: #fff;
  background: #333;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.pb-top a:hover { background: #555; }

.pb-contenedor {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.pb-contenedor h2 { margin: 0 0 14px; font-size: 18px; }

#pb-search {
  width: 100%;
  max-width: 340px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  outline: none;
  font-size: 14px;
}

.pb-msg { margin: 10px 0; padding: 10px 13px; border-radius: 10px; display: none; }
.pb-msg.success { background: #d4edda; color: #155724; }
.pb-msg.error   { background: #fde8e8; color: #721c24; }

.pb-table-wrap { overflow-x: auto; }

.pb-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}

.pb-tabla th, .pb-tabla td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}

.pb-tabla th { background: #444; color: #fff; }
.pb-tabla tbody tr:hover { background: #f7f8fa; }

.pb-tabla input[type="text"],
.pb-tabla input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  box-sizing: border-box;
}

img.pb-thumb {
  max-width: 70px;
  max-height: 55px;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.pb-smallBtn {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 2px;
}

@media (max-width: 900px) {
  .pb-tabla { min-width: 700px; }
  .pb-director-form { flex-direction: column; align-items: flex-start; }
}

/* FIN PÁGINA: producto_base.php
   ============================================================ */


/* ============================================================
   PÁGINA: agregar_producto_base.php — Agregar al catálogo global
   ============================================================ */

.apb-wrap {
  max-width: 580px;
  margin: 36px auto;
  padding: 0 16px 40px;
}

.apb-contenedor {
  background: var(--card);
  padding: 22px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(21,32,43,.10);
  border: 1px solid rgba(23,190,187,.15);
}

.apb-contenedor h2 {
  margin: 0 0 14px;
  color: #17BEBB;
  letter-spacing: .2px;
  font-size: 20px;
}

.apb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.apb-btn-tab {
  border: 1px solid rgba(23,190,187,.35);
  background: rgba(23,190,187,.06);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: .15s;
  color: var(--text);
}

.apb-btn-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(21,32,43,.10);
  border-color: rgba(23,190,187,.55);
}

.apb-btn-tab.active {
  border-color: rgba(255,46,147,.65);
  background: linear-gradient(135deg, rgba(23,190,187,.14), rgba(255,46,147,.12));
  box-shadow: 0 10px 22px rgba(21,32,43,.12);
}

.apb-contenedor label {
  display: block;
  margin-top: 12px;
  font-weight: 800;
  font-size: 13px;
  color: #0c5b59;
}

.apb-contenedor input[type="text"],
.apb-contenedor input[type="number"] {
  width: 100%;
  padding: 10px 13px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-size: 14px;
}

.apb-contenedor input[type="text"]:focus,
.apb-contenedor input[type="number"]:focus {
  border-color: rgba(23,190,187,.75);
  box-shadow: 0 0 0 3px rgba(23,190,187,.15);
}

.apb-row { display: flex; gap: 12px; }
.apb-col { flex: 1; }

button.apb-primary {
  margin-top: 16px;
  padding: 13px;
  width: 100%;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #17BEBB, #FF2E93);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
}

button.apb-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 22px rgba(23,190,187,.18);
}

button.apb-primary:disabled {
  filter: grayscale(.25);
  opacity: .65;
  box-shadow: none;
}

.apb-small-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

.apb-msg { margin-bottom: 12px; padding: 10px 13px; border-radius: 12px; font-size: 14px; }
.apb-msg.success { background: #dff6f5; color: #0c5b59; border: 1px solid rgba(23,190,187,.35); }
.apb-msg.error   { background: #ffe3f0; color: #7a1a47; border: 1px solid rgba(255,46,147,.35); }

.apb-subtle { margin-top: 8px; font-size: 13px; color: var(--text); }
.apb-subtle.ok  { color: #0c5b59; }
.apb-subtle.bad { color: #7a1a47; }

.apb-contenedor hr { border: 0; border-top: 1px solid rgba(21,32,43,.08); margin: 16px 0; }

.apb-back {
  display: block;
  text-align: center;
  margin-top: 16px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}

.apb-back:hover { color: #FF2E93; }

.apb-hidden { display: none !important; }

.apb-toggle {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.apb-toggle button {
  flex: 1;
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  transition: .15s;
}

.apb-toggle button:hover {
  border-color: rgba(23,190,187,.55);
  transform: translateY(-1px);
}

.apb-toggle button.active {
  border-color: rgba(23,190,187,.65);
  background: linear-gradient(135deg, rgba(23,190,187,.16), rgba(255,46,147,.10));
}

@media (max-width: 600px) {
  .apb-row { flex-direction: column; }
  .apb-toolbar { gap: 8px; }
}

/* FIN PÁGINA: agregar_producto_base.php
   ============================================================ */


/* ============================================================
   PÁGINA: productos.php — Inventario del admin (CRUD inline)
   ============================================================ */

/* productos.php NO usa padding-left del menú directamente
   porque incluye menu.php pero el .contenedor está sin offset propio */

.prod-contenedor {
  width: 97%;
  margin: 0 auto;
  background: var(--card);
  padding: 10px 20px 30px;
  border-radius: 8px;
}

.prod-filterBox { margin: 10px 0; }

.prod-filterBox input {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}

.prod-errorBox {
  background: #000;
  color: #721c24;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  display: none;
  font-size: 13px;
}

.prod-successBox {
  background: #d4edda;
  color: #155724;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  display: none;
  font-size: 13px;
}

/* Tabla con cabecera sticky */
.prod-tablaWrapper {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#tablaProductos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#tablaProductos thead th {
  position: sticky;
  top: 0;
  background: #000;
  color: #fff;
  z-index: 2;
  padding: 6px 8px;
  border: 1px solid #ccc;
  white-space: nowrap;
}

#tablaProductos td {
  border: 1px solid #ccc;
  padding: 3px 5px;
  vertical-align: middle;
}

#tablaProductos tbody tr:hover { background: #f9f9f9; }

/* Inputs dentro de la tabla */
#tablaProductos input[type="text"],
#tablaProductos input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.prod-stock_maximo { width: 70px; }

/* Stock bajo el mínimo */
.stock-total-bajo { color: #e53935; font-weight: 700; }

img.prod-thumb {
  max-height: 55px;
  max-width: 55px;
  border-radius: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
  display: block;
}

.prod-smallBtn {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  margin: 2px;
  border: 1px solid #ccc;
}

/* Columnas de lotes */
.col-precio-lotes input.precios_compra,
.col-vencimiento-lotes input.fechas_vencimiento,
.col-stock-lotes input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  padding: 4px 5px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Colores por vencimiento */
.col-vencimiento-lotes input.fechas_vencimiento.vence-30     { background: #fffde7; }
.col-vencimiento-lotes input.fechas_vencimiento.vence-15     { background: #fff3e0; }
.col-vencimiento-lotes input.fechas_vencimiento.vence-8      { background: #ffebee; }
.col-vencimiento-lotes input.fechas_vencimiento.vence-vencido{ background: #000; color: #fff; }

/* Tooltip de vencimiento */
.col-vencimiento-lotes .venc-item {
  position: relative;
  display: block;
}

.col-vencimiento-lotes .venc-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 6px;
  padding: 4px 7px;
  background: #333;
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .08s linear;
  z-index: 10;
}

.col-vencimiento-lotes .venc-item:hover::after { opacity: 1; }

/* Stock total bajo — badge azul */
.col-stock-total span.stock-total-bajo {
  background: #1565c0;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* Botones de fila */
.prod-updateBtn,
.prod-deleteBtn {
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 7px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 2px;
}

.prod-updateBtn { background: #e3f2fd; }
.prod-deleteBtn { background: #ffebee; }

@media (max-width: 720px) {
  .prod-contenedor { padding: 8px; }
  .prod-tablaWrapper { max-height: 75vh; }
}

/* FIN PÁGINA: productos.php
   ============================================================ */


/* ============================================================
   PÁGINA: agregar_producto.php — Registro de compras / lote FIFO
   ============================================================ */

.ap-contenedor {
  width: 60%;
  min-width: 320px;
  max-width: 980px;
  margin: 26px auto;
  background: var(--card);
  padding: 20px 22px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid var(--border);
}

.ap-contenedor h2 { margin: 0 0 12px; font-size: 20px; }

.ap-contenedor a {
  color: var(--calypso2);
  text-decoration: none;
}

.ap-contenedor a:hover { text-decoration: underline; }

.ap-msg { padding: 10px 13px; border-radius: 10px; margin: 12px 0; font-size: 14px; }
.ap-msg.ok  { background: rgba(0,188,212,.12); border: 1px solid rgba(0,188,212,.25); }
.ap-msg.err { background: rgba(233,30,99,.12);  border: 1px solid rgba(233,30,99,.25); }

/* Segmented button bar */
.ap-segbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.ap-segbtn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.ap-segbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,188,212,.35);
}

.ap-segbtn.active {
  background: var(--calypso2);
  color: #fff;
  border-color: var(--calypso2);
}

/* Cards de sección */
.ap-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}

.ap-card h3, .ap-card h4 { margin: 0 0 8px; }

.ap-contenedor label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
  font-weight: 500;
}

.ap-contenedor input,
.ap-contenedor select,
.ap-contenedor textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.ap-contenedor input:focus,
.ap-contenedor select:focus,
.ap-contenedor textarea:focus {
  outline: none;
  border-color: rgba(0,188,212,.55);
  box-shadow: 0 0 0 4px rgba(0,188,212,.12);
}

.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ap-small { color: var(--muted); font-size: 13px; margin-top: 6px; }

.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0,188,212,.10);
  border: 1px solid rgba(0,188,212,.20);
  color: var(--calypso2);
}

.ap-btn { padding: 11px 14px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; transition: .15s; }
.ap-btnPrimary  { background: var(--fuccia); color: #fff; }
.ap-btnPrimary:hover  { background: var(--fuccia2); }
.ap-btnGhost    { background: #fff; border: 1px solid var(--border); }
.ap-btnGhost:hover    { border-color: rgba(233,30,99,.35); transform: translateY(-1px); }
.ap-btnCalipso  { background: var(--calypso); color: #fff; }
.ap-btnCalipso:hover  { background: var(--calypso2); }

.ap-toggleLink {
  color: var(--calypso2);
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
}

.ap-hidden { display: none !important; }

@media (max-width: 720px) {
  .ap-contenedor { width: 95%; padding: 16px; }
  .ap-row { grid-template-columns: 1fr; }
  .ap-segbar { gap: 6px; }
}

/* FIN PÁGINA: agregar_producto.php
   ============================================================ */


/* ============================================================
   PÁGINA: carrito_usuario.php — Caja (2 carritos simultáneos)
   ============================================================ */

.cu-main {
  width: 98%;
  margin: 0 auto;
  background: var(--card);
  padding: 0 14px 20px;
  border-radius: 10px;
}

.cu-topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.cu-topBar h2 { margin: 0; font-size: 16px; }

.cu-topBar a {
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  margin-left: 10px;
}

.cu-cartTabs { margin-top: 8px; }

.cu-cartTabs button {
  padding: 6px 14px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid #999;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
}

.cu-cartTabActive {
  background: #333 !important;
  color: #fff !important;
  border-color: #333 !important;
}

.cu-codigoForm {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cu-codigoForm label { font-size: 13px; margin: 0; }

.cu-codigoForm input[type="text"] {
  width: 220px;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
}

.cu-codigoForm button {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
}

/* Layout 2 columnas */
.cu-layout {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.cu-left  { flex: 2; overflow-x: auto; }
.cu-right {
  flex: 2.4;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px;
  min-width: 260px;
}

/* Tabs de sección (frutas, verduras, cecinas, cat3) */
.cu-sectionTabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cu-sectionTabs button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  min-height: 38px;
}

.cu-sectionTabs button.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Tabla del carrito */
.cu-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 460px;
}

.cu-tabla th, .cu-tabla td {
  border: 1px solid #ccc;
  padding: 5px 9px;
}

.cu-tabla th { background: #eee; }

img.cu-thumb40 {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.cu-totalBox {
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}

.cu-pagoBox {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #f9f9f9;
  border: 1px solid #ddd;
}

.cu-pagoBox input {
  padding: 6px 8px;
  font-size: 14px;
  width: 130px;
  border: 1px solid #ccc;
  border-radius: 7px;
}

.cu-pagoBox button {
  padding: 7px 12px;
  margin-left: 8px;
  border-radius: 7px;
  border: 1px solid #ccc;
  cursor: pointer;
  min-height: 36px;
}

/* Grid de variables (frutas, verduras, etc.) */
.cu-varHeader { font-weight: bold; margin-bottom: 6px; font-size: 14px; }

#varsSearch {
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 13px;
}

#varsGrid {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cu-varItem {
  width: 100px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .12s;
}

.cu-varItem:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }

.cu-varItem img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.cu-varItem .cu-var-name  { font-size: 11px; margin-top: 4px; }
.cu-varItem .cu-var-price { font-size: 11px; font-weight: bold; }

.cu-pesoInput { width: 50px; }

#pagoResumen div { margin-top: 3px; font-size: 13px; }

/* === Modales === */
.cu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.cu-overlay.show { display: flex; }

/* Modal cantidad */
.cu-qtyModal {
  background: #fff;
  border-radius: 14px;
  width: min(340px, 96vw);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.cu-qtyModal .cu-modal-title {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 15px;
}

.cu-qtyBtns {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.cu-qtyBtns button {
  flex: 1;
  padding: 12px 0;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fafafa;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  min-height: 44px;
}

.cu-qtyModal input {
  width: 100%;
  padding: 11px;
  font-size: 17px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  box-sizing: border-box;
}

.cu-qtyActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.cu-qtyActions button {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  cursor: pointer;
  min-height: 38px;
}

/* Modal tarjeta */
.cu-payModal {
  background: #fff;
  border-radius: 14px;
  width: min(380px, 96vw);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.cu-payModal .cu-modal-title {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 15px;
}

.cu-payRow {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.cu-payRow button {
  flex: 1;
  padding: 11px 0;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fafafa;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  min-height: 44px;
}

.cu-payRow button.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.cu-payModal input {
  width: 100%;
  padding: 11px;
  font-size: 17px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  box-sizing: border-box;
}

.cu-payHint { font-size: 12px; color: #555; margin-top: 6px; }

.cu-payActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.cu-payActions button {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  cursor: pointer;
  min-height: 38px;
}

/* Modal confirmación vaciar */
.cu-confirmModal {
  background: #fff;
  border-radius: 14px;
  width: min(360px, 96vw);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.cu-confirmModal .cu-modal-title {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 15px;
}

.cu-confirmActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.cu-confirmActions button {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  cursor: pointer;
  min-height: 38px;
}

@media (max-width: 720px) {
  .cu-layout { flex-direction: column; }
  .cu-right { min-width: unset; }
  .cu-tabla { min-width: 360px; }
  .cu-varItem { width: 85px; }
  #varsGrid { gap: 6px; }
}

/* FIN PÁGINA: carrito_usuario.php
   ============================================================ */


/* ============================================================
   PÁGINA: proveedores.php — Listado de proveedores
   ============================================================ */

.prov-wrap {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 14px 40px;
}

.prov-topbar {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0,0,0,.03);
  flex-wrap: wrap;
}

.prov-topbar h2 { margin: 0; font-size: 18px; }
.prov-small { font-size: 13px; color: var(--muted); }

.prov-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

a.prov-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  font-size: 13px;
}

.prov-search {
  width: 300px;
  max-width: 55vw;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-size: 13px;
}

.prov-card {
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.03);
  overflow: hidden;
}

.prov-table-wrap {
  overflow: auto;
  max-height: 70vh;
}

.prov-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}

.prov-tabla th, .prov-tabla td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.prov-tabla th {
  position: sticky;
  top: 0;
  background: #fbfbfc;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  color: #374151;
  font-weight: 700;
}

.prov-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: #f3f4f6;
  color: #374151;
}

.prov-badge.ok { background: #ecfdf5; color: var(--ok); }

.prov-btn-mini {
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin: 2px;
  min-height: 34px;
}

.prov-btn-mini.primary   { background: var(--primary); }
.prov-btn-mini.secondary { background: var(--secondary); }
.prov-btn-mini.danger    { background: var(--danger); }

.prov-notice { margin-top: 12px; font-size: 13px; color: var(--muted); }
.prov-notice.ok { color: var(--ok); }

/* Modal de proveedores */
.prov-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--posx-w);
  background: rgba(17,24,39,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 50;
  transition: left .28s cubic-bezier(.4,0,.2,1);
}
body.posx-menu-hidden .prov-modal-backdrop {
  left: 0;
}

.prov-modal {
  width: min(860px, 96vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

.prov-modal header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prov-modal header h3 { margin: 0; font-size: 15px; }
.prov-modal .prov-modal-content { padding: 16px; }

.prov-modal footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.prov-close-x {
  border: none;
  background: #f3f4f6;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-weight: 900;
}

.prov-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.prov-modal label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 5px;
  font-weight: 600;
}

.prov-modal input, .prov-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  font-size: 13px;
}

.prov-modal textarea { min-height: 80px; resize: vertical; }

.prov-muted { color: var(--muted); }

.prov-transportistas-list { display: grid; gap: 10px; }

.prov-tcard {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}

@media (max-width: 720px) {
  .prov-tabla { min-width: 700px; }
  .prov-topbar { flex-direction: column; align-items: flex-start; }
  .prov-modal-row { grid-template-columns: 1fr; }
}

/* FIN PÁGINA: proveedores.php
   ============================================================ */


/* ============================================================
   PÁGINA: agregar_proveedor.php — Formulario nuevo proveedor
   ============================================================ */

.aprov-container {
  max-width: 760px;
  margin: 28px auto;
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.03);
}

.aprov-container h2 { margin: 0 0 6px; font-size: 18px; }

.aprov-sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}

.aprov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aprov-container label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 6px;
  font-weight: 600;
}

.aprov-container input,
.aprov-container textarea,
.aprov-container select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-size: 14px;
}

.aprov-container textarea { min-height: 90px; resize: vertical; }

.aprov-container input:disabled,
.aprov-container textarea:disabled,
.aprov-container select:disabled {
  background: #f9fafb;
  color: #9ca3af;
}

.aprov-container hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.aprov-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.aprov-container button {
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
}

.aprov-btn-primary   { background: var(--primary);   color: #fff; }
.aprov-btn-secondary { background: var(--secondary); color: #fff; }
.aprov-btn-danger    { background: var(--danger);    color: #fff; }

.aprov-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  margin-bottom: 10px;
}

.aprov-notice { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.aprov-notice.ok   { color: #0f766e; }
.aprov-notice.warn { color: #92400e; }
.aprov-notice.bad  { color: #991b1b; }

.aprov-transportista-box {
  display: none;
  padding: 14px;
  border: 1px dashed #c7ced8;
  border-radius: 14px;
  background: #fbfcff;
  margin-top: 10px;
}

.aprov-transportista-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.aprov-small-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
}

.aprov-small-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .aprov-row { grid-template-columns: 1fr; }
  .aprov-container { padding: 18px 14px; }
}

/* FIN PÁGINA: agregar_proveedor.php
   ============================================================ */


/* ============================================================
   PÁGINAS COMPARTIDAS: compras.php / ventas.php
   (Comparten diseño casi idéntico — prefijo .cv-)
   ============================================================ */

.cv-wrap {
  max-width: 1150px;
  margin: 24px auto;
  padding: 0 14px 40px;
}

.cv-topbar {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  border: 1px solid rgba(0,0,0,.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cv-topbar h2    { margin: 0; font-size: 18px; }
.cv-small        { font-size: 13px; color: var(--muted); }

.cv-searchbox {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

input.cv-search {
  width: 320px;
  max-width: 68vw;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-size: 13px;
}

button.cv-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
  background: var(--primary);
  color: #fff;
  min-height: 40px;
}

.cv-card {
  margin-top: 14px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.03);
  overflow: hidden;
}

.cv-table-wrap {
  overflow: auto;
  max-height: 72vh;
}

.cv-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1000px;
}

.cv-tabla th, .cv-tabla td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.cv-tabla th {
  position: sticky;
  top: 0;
  background: #fbfbfc;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  color: #374151;
  font-weight: 700;
}

.cv-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: #f3f4f6;
  color: #374151;
}

.cv-badge.ok   { background: #ecfdf5; color: var(--ok); }
.cv-badge.card { background: #eef2ff; color: #3730a3; }

.cv-btn-mini {
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  background: var(--secondary);
  min-height: 34px;
}

.cv-muted { color: var(--muted); font-size: 12px; }

/* Modal de ventas/compras */
.cv-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--posx-w);
  background: rgba(17,24,39,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 50;
  transition: left .28s cubic-bezier(.4,0,.2,1);
}
body.posx-menu-hidden .cv-modal-backdrop {
  left: 0;
}

.cv-modal {
  width: min(920px, 96vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

.cv-modal header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cv-modal header h3 { margin: 0; font-size: 15px; }
.cv-modal .cv-modal-content { padding: 14px 16px; }

.cv-modal footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cv-close-x {
  border: none;
  background: #f3f4f6;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-weight: 900;
}

.cv-items { display: grid; gap: 10px; }

.cv-icard {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #fbfbff;
}

.cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.cv-kv       { font-size: 13px; }
.cv-kv b     { display: block; font-size: 11px; color: var(--muted); font-weight: 800; margin-bottom: 2px; }

@media (max-width: 720px) {
  .cv-tabla { min-width: 760px; }
  .cv-topbar { flex-direction: column; align-items: flex-start; }
  .cv-grid { grid-template-columns: 1fr; }
}

/* FIN PÁGINAS: compras.php / ventas.php
   ============================================================ */


/* ============================================================
   PÁGINA: reportes.php — Reportes Gráficos con Chart.js
   ============================================================ */

.rep-main {
  width: 95%;
  max-width: 1000px;
  margin: 16px auto 30px;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,.10);
  padding: 16px 22px 28px;
}

.rep-topBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.rep-topBar a {
  text-decoration: none;
  color: #333;
  margin-right: 10px;
  font-size: 13px;
}

/* Tabs de sección */
.rep-seccion-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rep-seccion-tab {
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 5px;
  padding: 7px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, color .15s;
  min-height: 36px;
}

.rep-seccion-tab.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

.rep-seccion-tab:hover:not(.active) { background: #e9ecef; }

/* Filtros de fecha */
.rep-h1 { margin: 0 0 10px; font-size: 20px; }

.rep-filters {
  margin: 10px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.rep-filters button {
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 4px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
}

.rep-filters button.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

.rep-filters form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}

.rep-filters input[type="date"] {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.rep-filters button[type="submit"] {
  background: #28a745;
  color: #fff;
  border-color: #28a745;
}

.rep-range-label { margin-bottom: 10px; font-size: 13px; color: #555; }

/* Charts */
.rep-chart-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 22px;
}

/* Métricas */
.rep-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.rep-metric-card {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 14px;
}

.rep-metric-title { font-size: 13px; color: #777; margin-bottom: 5px; }
.rep-metric-value { font-size: 20px; font-weight: bold; color: #333; }

/* Botones modo (total / por día) */
.rep-modeBtn {
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 4px;
  min-height: 30px;
}

.rep-modeBtn.active {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}

/* Secciones ocultables */
.rep-seccion-bloque         { display: none; }
.rep-seccion-bloque.visible { display: block; }

/* Filtros IVA */
.rep-iva-filters {
  margin: 6px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rep-iva-filters select {
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.rep-iva-filters button {
  border: 1px solid #007bff;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  min-height: 34px;
}

@media (max-width: 720px) {
  .rep-main { width: 98%; padding: 12px 14px 24px; }
  .rep-metrics { grid-template-columns: 1fr 1fr; }
  .rep-filters { gap: 6px; }
  .rep-filters form { margin-left: 0; }
}

@media (max-width: 480px) {
  .rep-metrics { grid-template-columns: 1fr; }
  .rep-seccion-tabs { gap: 4px; }
  .rep-seccion-tab { padding: 7px 12px; font-size: 13px; }
}

/* FIN PÁGINA: reportes.php
   ============================================================ */


/* ============================================================
   PÁGINA: reporte_fechas.php — Triage de Vencimientos
   ============================================================ */

.rf-contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

.rf-contenedor h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #0b1220;
}

.rf-subtitle {
  font-size: .875rem;
  color: #666;
  margin-bottom: 24px;
}

/* Contadores */
.rf-counters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.rf-counter-card {
  flex: 1;
  min-width: 120px;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.rf-counter-card .rf-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.rf-counter-card .rf-lbl { font-size: .78rem; margin-top: 4px; opacity: .9; }

.rf-cc-vencido    { background: #111; }
.rf-cc-critico    { background: #c62828; }
.rf-cc-preventivo { background: #e65100; }
.rf-cc-ok         { background: #2e7d32; }

/* Filtros */
.rf-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  align-items: center;
}

.rf-btn-filtro {
  padding: 9px 18px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  color: #fff;
  min-height: 38px;
}

.rf-btn-filtro:hover  { opacity: .85; transform: translateY(-1px); }
.rf-btn-filtro.activo { outline: 3px solid #00bcd4; outline-offset: 2px; }

.rf-btn-todos       { background: #455a64; }
.rf-btn-vencidos    { background: #111; }
.rf-btn-critico     { background: #c62828; }
.rf-btn-preventivo  { background: #e65100; }

.rf-btn-pdf {
  margin-left: auto;
  padding: 9px 20px;
  background: #1565c0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}

.rf-btn-pdf:hover { background: #0d47a1; }

/* Tabla */
.rf-tabla-wrap {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.rf-tabla {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .875rem;
}

.rf-tabla thead th {
  background: #0b1220;
  color: #fff;
  padding: 11px 14px;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.rf-tabla tbody tr { border-bottom: 1px solid #eee; transition: background .1s; }
.rf-tabla tbody tr:hover { background: #f5f7fa; }
.rf-tabla tbody td { padding: 10px 14px; vertical-align: middle; }

/* Colores de fila */
tr.rf-row-vencido    { background: #111 !important; color: #fff; }
tr.rf-row-critico    { background: #ffebee; }
tr.rf-row-preventivo { background: #fff3e0; }
tr.rf-row-vencido td { color: #fff; }

/* Badge días */
.rf-badge-dias {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.rf-badge-vencido    { background: #555; }
.rf-badge-critico    { background: #c62828; }
.rf-badge-preventivo { background: #e65100; }
.rf-badge-ok         { background: #2e7d32; }

.rf-sin-datos { text-align: center; padding: 40px; color: #999; font-size: .95rem; }

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; padding-left: 0; }
  .rf-contenedor { padding: 10px; }
  .rf-tabla-wrap { box-shadow: none; }
  .rf-tabla { font-size: .8rem; }
  .rf-tabla thead th { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.rf-row-vencido    { background: #111 !important;    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.rf-row-critico    { background: #ffebee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.rf-row-preventivo { background: #fff3e0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 720px) {
  .rf-counters { gap: 8px; }
  .rf-counter-card { min-width: 100px; padding: 12px 10px; }
  .rf-counter-card .rf-num { font-size: 1.6rem; }
  .rf-filtros { gap: 8px; }
  .rf-btn-pdf { margin-left: 0; }
}

/* FIN PÁGINA: reporte_fechas.php
   ============================================================ */


/* ============================================================
   PÁGINA: reporte_stock.php — Asistente de Compras / Stock Bajo
   ============================================================ */

.rs-contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

.rs-contenedor h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #0b1220;
}

.rs-subtitle {
  font-size: .875rem;
  color: #666;
  margin-bottom: 24px;
}

/* Resumen */
.rs-resumen {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.rs-res-card {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  text-align: center;
}

.rs-res-card .rs-num { font-size: 2rem; font-weight: 800; color: #c62828; line-height: 1; }
.rs-res-card .rs-lbl { font-size: .8rem; color: #666; margin-top: 5px; }
.rs-res-card.verde .rs-num { color: #2e7d32; }

/* Acciones */
.rs-acciones {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.rs-btn-pdf {
  padding: 9px 20px;
  background: #1565c0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}

.rs-btn-pdf:hover { background: #0d47a1; }

.rs-busqueda {
  padding: 9px 14px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: .85rem;
  width: 240px;
  max-width: 80vw;
}

/* Tabla */
.rs-tabla-wrap {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.rs-tabla {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .875rem;
}

.rs-tabla thead th {
  background: #0b1220;
  color: #fff;
  padding: 11px 14px;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.rs-tabla thead th.rs-th-sug { background: #1565c0; }

.rs-tabla tbody tr { border-bottom: 1px solid #eee; }
.rs-tabla tbody tr:hover { background: #f5f7fa; }
.rs-tabla tbody td { padding: 10px 14px; vertical-align: middle; }

.rs-td-stock-zero { color: #c62828; font-weight: 700; }

.rs-badge-sug {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: #1565c0;
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  min-width: 40px;
  text-align: center;
}

.rs-badge-sug-cero { background: #bdbdbd; color: #555; }

.rs-sin-datos { text-align: center; padding: 40px; color: #999; font-size: .95rem; }

.rs-print-header {
  display: none;
  margin-bottom: 16px;
  font-size: .85rem;
  color: #333;
}

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; padding-left: 0; }
  .rs-contenedor { padding: 10px; max-width: 100%; }
  .rs-tabla-wrap { box-shadow: none; }
  .rs-tabla { font-size: .78rem; }
  .rs-tabla thead th { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rs-tabla thead th.rs-th-sug { background: #1565c0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rs-badge-sug { background: #1565c0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rs-print-header { display: block !important; }
}

@media (max-width: 720px) {
  .rs-resumen { gap: 8px; }
  .rs-res-card { min-width: 110px; }
  .rs-busqueda { width: 100%; max-width: 100%; }
  .rs-acciones { flex-direction: column; align-items: flex-start; }
}

/* FIN PÁGINA: reporte_stock.php
   ============================================================ */


/* ============================================================
   PÁGINA: carrito_usuario.php — Caja usuario
   ============================================================ */

body.cu-page {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

.cu-wrap { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Top bar */
.cu-top { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 50px;
  background: #111; color: #fff; flex-shrink: 0; }
.cu-brand { font-size: 16px; font-weight: 700; letter-spacing: .4px; margin-right: 4px; }
.cu-tabs { display: flex; gap: 6px; }
.cu-tab { padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: transparent; color: rgba(255,255,255,.72); cursor: pointer; font-size: 13px;
  text-decoration: none; transition: all .14s; }
.cu-tab:hover { background: rgba(255,255,255,.1); }
.cu-tab.on { background: #fff; color: #111; border-color: #fff; font-weight: 600; }
.cu-top-r { margin-left: auto; }
.cu-logout button { padding: 4px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: rgba(255,255,255,.8); cursor: pointer; font-size: 13px; }
.cu-logout button:hover { background: rgba(255,255,255,.12); }

/* Barra código */
.cu-cbar { display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: #fff; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.cu-cbar label { font-size: 13px; color: #555; white-space: nowrap; }
.cu-cbar input { width: 200px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 7px; font-size: 14px; outline: none; }
.cu-cbar input:focus { border-color: #444; }
.cu-cbar button { padding: 6px 14px; border-radius: 7px; border: 1px solid #ccc;
  background: #f2f2f2; cursor: pointer; font-size: 13px; font-weight: 500; }
.cu-cbar button:hover { background: #e5e5e5; }

/* Cuerpo */
.cu-body { display: flex; flex: 1; overflow: hidden; }

/* Columna izquierda */
.cu-left { width: clamp(430px, 36vw, 500px); 
  min-width: clamp(430px, 36vw, 500px); 
  max-width: clamp(500px, 36vw, 500px); display: flex; flex-direction: column; flex-shrink: 0; background: #fff; border-right: 1px solid #ddd; }
.cu-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 4px; }

/* Tabla */
.cu-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.cu-tbl th { position: sticky; top: 0; background: #111; color: #fff; padding: 8px 10px;
  text-align: left; font-size: 12px; font-weight: 600; z-index: 2; white-space: nowrap; }
.cu-tbl td { padding: 8px 6px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.cu-tbl tbody tr:hover { background: #fafafa; }
.cu-tbl th:nth-child(1), .cu-tbl td:nth-child(1) { width: 48px; }
.cu-tbl th:nth-child(2), .cu-tbl td:nth-child(2) { width: 120px; max-width: 120px; }
.cu-tbl th:nth-child(3), .cu-tbl td:nth-child(3) { width: 78px; }
.cu-tbl th:nth-child(4), .cu-tbl td:nth-child(4) { width: 66px; }
.cu-tbl th:nth-child(5), .cu-tbl td:nth-child(5) { width: 44px; text-align: center; }
.cu-tbl th:nth-child(6), .cu-tbl td:nth-child(6) { width: 86px; }
.cu-tbl th:nth-child(7), .cu-tbl td:nth-child(7) { width: 36px; text-align: center; }
.cu-tbl td:nth-child(2) > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-tbl td:nth-child(2) > div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
img.cu-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px;
  border: 1px solid #ddd; display: block; }
.cu-peso-inp { width: 68px; padding: 5px 6px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 13px; text-align: center; outline: none; }
.cu-peso-inp:focus { border-color: #444; }
.cu-del { width: 26px; height: 26px; border-radius: 50%; border: none; background: #fee;
  color: #c00; cursor: pointer; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.cu-del:hover { background: #fcc; }

/* Panel pago */
.cu-pago { flex-shrink: 0; background: #111; color: #fff; padding: 12px 16px 14px; border-top: 2px solid #222; }
.cu-pago-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cu-total-txt { font-size: 22px; font-weight: 700; white-space: nowrap; }
.cu-pago-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.cbtn { padding: 7px 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.09); color: #fff; cursor: pointer; font-size: 13px; font-weight: 500;
  white-space: nowrap; transition: background .12s; }
.cbtn:hover { background: rgba(255,255,255,.18); }
.cbtn.primary { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.cbtn.primary:hover { background: #eee; }
.cbtn.danger { background: rgba(220,40,40,.28); border-color: rgba(220,40,40,.45); }
.cbtn.danger:hover { background: rgba(220,40,40,.45); }
.cbtn:disabled { opacity: .5; cursor: not-allowed; }

.cu-ef-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.cu-ef-row label { font-size: 13px; color: rgba(255,255,255,.7); }
.cu-ef-inp { width: 120px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 7px;
  background: rgba(255,255,255,.09); color: #fff; font-size: 15px; font-weight: 600; outline: none; }
.cu-ef-inp:focus { border-color: rgba(255,255,255,.55); }
.cu-ef-inp::placeholder { color: rgba(255,255,255,.32); }

.cu-resumen { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 7px; }
.cu-rc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; padding: 7px 11px; }
.cu-rc-lbl { font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 2px; }
.cu-rc-val { font-size: 16px; font-weight: 700; color: #fff; }
.cu-rc-val.ok { color: #4ade80; }
.cu-rc-val.mal { color: #f87171; }

/* Columna derecha */
.cu-right { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column;
  background: #f7f7f7; overflow: hidden; }
.cu-sec-tabs { display: flex; overflow-x: auto; background: #ebebeb; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.cu-sec-tabs::-webkit-scrollbar { height: 3px; }
.cu-sec-tabs button { padding: 8px 12px; border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 500; color: #666; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all .12s; }
.cu-sec-tabs button:hover { color: #111; background: rgba(0,0,0,.03); }
.cu-sec-tabs button.on { color: #111; border-bottom-color: #111; font-weight: 700; }
.cu-psearch { padding: 7px 9px; flex-shrink: 0; border-bottom: 1px solid #e5e5e5; background: #fff; }
.cu-psearch input { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 7px;
  font-size: 13px; outline: none; }
.cu-psearch input:focus { border-color: #444; }
.cu-grid { flex: 1; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; align-content: flex-start; }
.cu-vi { width: 90px; border: 1px solid #ddd; border-radius: 7px; padding: 5px; text-align: center;
  cursor: pointer; background: #fff; transition: all .12s; }
.cu-vi:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); border-color: #aaa; transform: translateY(-1px); }
.cu-vi img { width: 72px; height: 72px; object-fit: cover; border-radius: 5px; display: block; margin: 0 auto; }
.cu-vi .vn { font-size: 10px; margin-top: 3px; color: #222; line-height: 1.3; word-break: break-word; }
.cu-vi .vp { font-size: 11px; font-weight: 700; color: #333; margin-top: 2px; }
.cu-empty { padding: 20px; text-align: center; color: #999; font-size: 13px; width: 100%; }

/* Modales */
.cu-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none;
  align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.cu-ov.show { display: flex; }
.cu-mod { background: #fff; border-radius: 13px; width: min(350px,96vw); padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.cu-mod-title { font-size: 15px; font-weight: 700; margin-bottom: 13px; color: #111; }
.cu-mod-inp { width: 100%; padding: 11px; font-size: 17px; border: 1px solid #ccc;
  border-radius: 9px; box-sizing: border-box; outline: none; }
.cu-mod-inp:focus { border-color: #444; }
.cu-mod-hint { font-size: 12px; color: #888; margin-top: 5px; }
.cu-mod-qbtns { display: flex; gap: 9px; margin-bottom: 11px; }
.cu-mod-qbtns button { flex: 1; padding: 11px 0; border-radius: 9px; border: 1px solid #ccc;
  background: #f5f5f5; cursor: pointer; font-size: 16px; font-weight: 700; }
.cu-mod-qbtns button:hover { background: #e8e8e8; }
.cu-mod-qbtns button.on { background: #111; color: #fff; border-color: #111; }
.cu-mod-acts { display: flex; justify-content: flex-end; gap: 9px; margin-top: 13px; }
.cu-mod-acts button { padding: 8px 17px; border-radius: 9px; border: 1px solid #ccc;
  background: #f5f5f5; cursor: pointer; font-size: 13px; font-weight: 500; }
.cu-mod-acts button.ok { background: #111; color: #fff; border-color: #111; }
.cu-mod-acts button.rojo { background: #c00; color: #fff; border-color: #c00; }

.cu-sale-sum { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cu-sale-sum li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: #333; }
.cu-sale-sum strong { color: #111; }

@media (max-width: 980px) {
  .cu-left { width: 380px; min-width: 380px; max-width: 380px; }
  .cu-tbl th:nth-child(2), .cu-tbl td:nth-child(2) { width: 135px; max-width: 135px; }
  .cu-tbl th:nth-child(3), .cu-tbl td:nth-child(3) { width: 72px; }
  .cu-tbl th:nth-child(6), .cu-tbl td:nth-child(6) { width: 78px; }
}

@media (max-width: 700px) {
  .cu-right { width: 100%; border-top: 1px solid #ddd; }
  .cu-left { width: 100%; min-width: 0; max-width: none; border-right: none; }
  .cu-body { flex-direction: column; }
  .cu-brand { display: none; }
  .cu-tbl th:nth-child(2), .cu-tbl td:nth-child(2) { width: auto; max-width: none; }
}

/* FIN PÁGINA: carrito_usuario.php
   ============================================================ */


/* ============================================================
   MENÚ LATERAL — Toggle collapse (persistido en localStorage)
   ============================================================ */

/* Botón toggle visible en todas las páginas */
.posx-menu-toggle {
  position: fixed;
  top: 14px;
  left: calc(var(--posx-w) + 10px);
  z-index: 1000;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left .28s cubic-bezier(.4,0,.2,1), background .15s;
  color: var(--text);
  padding: 0;
}
.posx-menu-toggle:hover { background: #e9ecef; }
.posx-menu-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}

/* Ícono cuando menú está colapsado: apunta a la derecha */
body.posx-menu-hidden .posx-menu-toggle svg {
  transform: rotate(180deg);
}

/* Menú colapsado: se desliza fuera a la izquierda */
body.posx-menu-hidden .posx-side-menu {
  transform: translateX(calc(-1 * var(--posx-w)));
}

/* Toggle se mueve al borde izquierdo cuando menú está oculto */
body.posx-menu-hidden .posx-menu-toggle {
  left: 10px;
}

/* El contenido empuja cuando el menú está visible */
body:not(.posx-menu-hidden) {
  padding-left: var(--posx-w);
}
body.posx-menu-hidden {
  padding-left: 0;
}

/* Transición suave en el menú y el body */
.posx-side-menu {
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
body {
  transition: padding-left .28s cubic-bezier(.4,0,.2,1);
}

/* Responsive: en mobile el toggle no se muestra (menú ya es horizontal) */
@media (max-width: 720px) {
  .posx-menu-toggle { display: none; }
  body.posx-menu-hidden .posx-side-menu {
    transform: none;
  }
  body.posx-menu-hidden { padding-left: 0; }
}


/* Responsive backdrop: en mobile el menú es top-bar, no sidebar */
@media (max-width: 720px) {
  .cv-modal-backdrop,
  .prov-modal-backdrop {
    left: 0;
    top: 56px; /* altura del menú mobile */
  }
}

/* ── Transportistas: grid de datos ── */
.tgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.tkv {
  font-size: 12.5px;
  color: var(--text);
}
.tkv b {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 1px;
}
@media (max-width: 600px) {
  .tgrid { grid-template-columns: 1fr; }
}

/* FIN MENÚ TOGGLE
   ============================================================ */


/* ============================================================
   VENTAS / COMPRAS — Tabla detalle modal (dv-*)
   ============================================================ */

.cv-modal.cv-modal-xl {
  width: min(1100px, 97vw);
}
.cv-modal-content {
  padding: 0 !important;
  max-height: 68vh;
  overflow-y: auto;
}
.dv-table-wrap {
  overflow-x: auto;
  padding: 4px 0;
}
.dv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 860px;
}
.dv-table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fb;
  z-index: 3;
  padding: 10px 10px;
  border-bottom: 2px solid var(--border);
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  color: #4b5563;
  white-space: nowrap;
}
.dv-table tbody tr:hover { background: #f5f7ff; }
.dv-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dv-table tbody tr:last-child td { border-bottom: none; }

.dv-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
.dv-thumb-placeholder {
  width: 44px;
  height: 44px;
  background: #f3f4f6;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: 18px;
}

.dv-nombre    { font-weight: 700; color: #111827; line-height: 1.3; }
.dv-marca     { color: var(--muted); font-size: 11px; margin-top: 1px; }
.dv-codigo    { color: #9ca3af; font-size: 10.5px; margin-top: 1px; font-family: monospace; }

.dv-badge-exento { display: inline-block; padding: 2px 8px; border-radius: 999px;
                   background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 700; }
.dv-badge-afecto { display: inline-block; padding: 2px 8px; border-radius: 999px;
                   background: #ede9fe; color: #5b21b6; font-size: 10px; font-weight: 700; }

.dv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-ganancia-pos { color: #059669; font-weight: 700; }
.dv-ganancia-neg { color: #dc2626; font-weight: 700; }

.dv-totals-row td {
  background: #f0f4ff;
  font-weight: 700;
  font-size: 12.5px;
  border-top: 2px solid #c7d2fe;
}

.cv-modal-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #f8f9fb;
  font-size: 12px;
  color: #374151;
}
.cv-modal-summary b  { font-size: 13.5px; }
.cv-modal-summary .sep { color: var(--border); }
.cv-modal-summary .sum-gain { color: #059669; font-weight: 800; font-size: 13px; }

.dv-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* FIN VENTAS / COMPRAS — Tabla detalle modal
   ============================================================ */