:root {
  --primary: #2B2D3E;
  --primary-light: #3D3F55;
  --primary-hover: #1e2030;
  --accent: #FFC300;
  --accent-dark: #E6AF00;
  --accent-text: #2B2D3E;
  --success: #28a745;
  --warning: #fd7e14;
  --danger: #dc3545;
  --sidebar-width: 230px;
  --header-height: 56px;
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --text: #212529;
  --border: #dee2e6;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }

/* ── LAYOUT ── */
#app { display: flex; height: 100vh; }
#sidebar { width: var(--sidebar-width); background: var(--primary); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 2050; }
#sidebar .nav-item { position: relative; z-index: 2051; pointer-events: auto; }
#sidebar.collapsed { width: 56px; }
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#header { height: var(--header-height); background: #fff; border-bottom: 2px solid var(--accent); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(43,45,62,.12); }
#content { flex: 1; overflow-y: auto; padding: 20px; }

/* ── SIDEBAR ── */
.sidebar-brand {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,195,0,.2);
  background: linear-gradient(135deg, #1e2030, #2B2D3E);
}
.sidebar-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--accent);
  padding: 3px;
  border: 2px solid var(--accent);
}
.sidebar-brand span { color: var(--accent); font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; letter-spacing: .5px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: rgba(255,255,255,.75); cursor: pointer; border-left: 3px solid transparent; transition: all .15s; text-decoration: none; white-space: nowrap; }
.nav-item:hover { background: rgba(255,195,0,.12); color: var(--accent); }
.nav-item.active { background: rgba(255,195,0,.15); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.nav-item i { font-size: 16px; min-width: 20px; text-align: center; }
.nav-section { padding: 8px 16px 4px; font-size: 10px; text-transform: uppercase; color: rgba(255,195,0,.4); letter-spacing: 1.5px; font-weight: 600; }
.nav-badge { margin-left: auto; background: #FFC300; color: #2B2D3E; border-radius: 10px; font-size: 10px; font-weight: 800; padding: 1px 6px; min-width: 18px; text-align: center; line-height: 16px; }
.btn-xs { padding: 2px 7px; font-size: 11px; line-height: 1.4; }

/* ── HEADER ── */
.header-title { font-weight: 800; color: var(--primary); font-size: 15px; flex: 1; letter-spacing: .3px; }
.sync-badge { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.sync-badge.ok { background: #d4edda; color: #155724; }
.sync-badge.pending { background: #fff8d0; color: #7a5c00; }
.sync-badge.error { background: #f8d7da; color: #721c24; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: #28a745; }
.dot-pending { background: var(--accent); }
.dot-error { background: #dc3545; }

/* ── STAT CARDS ── */
.stat-card { background: var(--card-bg); border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(43,45,62,.1); border-left: 4px solid var(--accent); }
.stat-card .stat-val { font-size: 26px; font-weight: 800; color: var(--primary); }
.stat-card .stat-label { font-size: 12px; color: #6c757d; margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-card .stat-sub { font-size: 11px; color: #aaa; margin-top: 4px; }

/* ── CARDS ── */
.card { background: var(--card-bg); border-radius: 12px; box-shadow: 0 2px 8px rgba(43,45,62,.08); border: none; margin-bottom: 16px; }
.card-header { background: var(--primary); border-bottom: none; font-weight: 700; color: var(--accent); padding: 12px 16px; border-radius: 12px 12px 0 0 !important; font-size: 13px; letter-spacing: .3px; }

/* ── TABLES ── */
.table-responsive { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.table { font-size: 13px; margin: 0; }
.table th { background: var(--primary); color: var(--accent); font-weight: 700; font-size: 12px; white-space: nowrap; letter-spacing: .3px; }
.table td { vertical-align: middle; }
.table tbody tr:hover { background: #fffbea; }
.badge-exento { background: #d4edda; color: #155724; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 700; }
.badge-gravado { background: #fff3cd; color: #7a5c00; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 700; }
.stock-low { background: #fff8d0 !important; }
.stock-zero { background: #f8d7da !important; }

/* ── BUTTONS ── */
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--accent); }
.btn-outline-primary { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.btn-outline-primary:hover { background: var(--primary); color: var(--accent); }
.btn-warning { background: var(--accent); border-color: var(--accent-dark); color: var(--accent-text); font-weight: 700; }
.btn-warning:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-text); }

/* ── POS SICAR ── */
#page-pos { padding: 0 !important; }
#pos-sicar { display: flex; height: calc(100vh - var(--header-height)); overflow: hidden; }

/* Left action bar */
#pos-actions {
  width: 82px; flex-shrink: 0;
  background: #e4e6ed;
  border-right: 1px solid #c8cad4;
  display: flex; flex-direction: column;
  padding: 6px 4px; gap: 3px;
  overflow-y: auto;
}
.pos-btn {
  background: #fff; border: 1px solid #bfc2cc; border-radius: 6px;
  padding: 7px 4px 5px; font-size: 10px; text-align: center; cursor: pointer;
  color: var(--primary); display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: all .12s; width: 100%;
}
.pos-btn:hover { background: #fffbea; border-color: var(--accent); color: var(--primary); }
.pos-btn i { font-size: 17px; line-height: 1; }
.pos-btn span { font-size: 9.5px; font-weight: 600; line-height: 1; }
.pos-btn kbd { font-size: 8px; background: #ddd; color: #555; border-radius: 3px; padding: 1px 3px; border: none; margin-top: 1px; }
.pos-btn-gold { background: var(--primary) !important; color: var(--accent) !important; border-color: var(--primary) !important; }
.pos-btn-gold:hover { background: #1e2030 !important; }
.pos-btn-gold kbd { background: rgba(255,195,0,.3); color: var(--accent); }
.pos-act-sep { height: 1px; background: #c8cad4; margin: 3px 0; }

/* Main area */
#pos-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Top search bar */
#pos-topbar {
  background: #f2f3f7; border-bottom: 2px solid var(--accent);
  padding: 6px 10px; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
#pos-search-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
.pos-upc-icon { font-size: 22px; color: var(--primary); flex-shrink: 0; }
#pos-search {
  flex: 1; font-size: 14px; font-weight: 700; color: var(--primary);
  border: 2px solid var(--primary); border-radius: 6px; padding: 5px 10px;
  background: #fff; min-width: 0;
}
#pos-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,195,0,.2); }
#pos-search-btn {
  background: var(--primary); color: var(--accent); border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
#pos-search-btn:hover { background: var(--primary-hover); }
.pos-meta-pill { font-size: 12px; color: #555; background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 2px 10px; white-space: nowrap; }
#pos-topbar-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Client / doc bar */
#pos-docbar {
  background: #fff; border-bottom: 1px solid #e0e0e0;
  padding: 5px 10px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.pos-cliente-input {
  width: 100%; border: none; outline: none; font-size: 13px; font-weight: 700;
  color: var(--primary); background: transparent; padding: 2px 4px;
}
.pos-cliente-input:focus { background: #fffbea; border-radius: 4px; }
.pos-cliente-dropdown {
  position: absolute; left: 0; top: 100%; z-index: 999; background: #fff;
  border: 1px solid #ddd; border-radius: 6px; max-height: 200px; overflow-y: auto;
  width: 340px; box-shadow: 0 4px 12px rgba(0,0,0,.12); display: none;
}
.pos-meta-rtn { font-size: 11px; color: #888; white-space: nowrap; flex-shrink: 0; min-width: 140px; }
.pos-mini-btn { background: none; border: none; color: #aaa; cursor: pointer; font-size: 14px; padding: 2px; flex-shrink: 0; }
.pos-mini-btn:hover { color: #dc3545; }
.pos-doc-sep { width: 1px; height: 20px; background: #e0e0e0; flex-shrink: 0; }
.pos-cond-select { border: none; background: transparent; font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; padding: 2px 4px; }
.pos-desc-input { width: 60px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; padding: 2px 4px; text-align: center; }

/* Search results dropdown */
.pos-search-dropdown {
  display: none; position: absolute; left: 82px; right: 0;
  top: calc(var(--header-height) + 44px);
  background: #fff; border: 1px solid #ddd; border-top: none;
  border-radius: 0 0 8px 8px; max-height: 280px; overflow-y: auto;
  z-index: 997; box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.pos-result-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; font-size: 13px;
}
.pos-result-row:hover { background: #fffbea; }
.pos-result-manual { background: #f0f7ff !important; color: #0066cc !important; font-size: 12px !important; }
.pos-result-manual:hover { background: #dbeeff !important; }
.pos-result-code { font-weight: 700; color: var(--primary); min-width: 90px; font-size: 12px; }
.pos-result-desc { flex: 1; }
.pos-result-price { font-weight: 700; color: var(--primary); min-width: 80px; text-align: right; }
.pos-result-stock { font-size: 11px; color: #888; min-width: 60px; text-align: right; }

/* Cart grid SICAR */
#pos-grid { flex: 1; overflow-y: auto; background: #fff; position: relative; }
#pos-cart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#pos-cart-table thead th {
  background: var(--primary); color: var(--accent); font-weight: 700; font-size: 12px;
  padding: 7px 8px; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
#pos-cart-table tbody tr { border-bottom: 1px solid #f2f2f2; }
#pos-cart-table tbody tr:hover td { background: #fffbea; }
#pos-cart-table tbody tr.pos-row-selected td { background: #fff3cc !important; }
#pos-cart-table td { padding: 5px 8px; vertical-align: middle; }
.pos-cart-qty-input {
  width: 72px; text-align: right; border: 1px solid transparent; border-radius: 4px;
  font-size: 13px; font-weight: 700; padding: 2px 4px; background: transparent;
}
.pos-cart-qty-input:focus { border-color: var(--accent); background: #fffbea; outline: none; }
.pos-cart-desc-code { font-size: 11px; color: #888; font-weight: 600; }
.pos-cart-desc-name { font-size: 13px; font-weight: 500; }
.pos-isv-badge { font-size: 9px; background: #cce5ff; color: #004085; border-radius: 3px; padding: 1px 3px; font-weight: 700; }
.pos-exento-badge { font-size: 9px; background: #d4edda; color: #155724; border-radius: 3px; padding: 1px 3px; font-weight: 700; }
.pos-cart-disc-input {
  width: 60px; text-align: right; border: 1px solid transparent; border-radius: 4px;
  font-size: 12px; padding: 2px 4px; background: transparent;
}
.pos-cart-disc-input:focus { border-color: var(--accent); background: #fffbea; outline: none; }
.pos-cart-price-input {
  width: 90px; text-align: right; border: 1px solid transparent; border-radius: 4px;
  font-size: 13px; font-weight: 600; padding: 2px 4px; background: transparent;
}
.pos-cart-price-input:focus { border-color: var(--accent); background: #fffbea; outline: none; }
.pos-del-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.pos-del-btn:hover { color: #dc3545; background: #f8d7da; }

#pos-empty-cart {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #bbb; pointer-events: none;
}
#pos-empty-cart i { font-size: 56px; margin-bottom: 12px; opacity: .25; }
#pos-empty-cart p { margin: 4px 0; font-size: 14px; }

/* Bottom bar */
#pos-bottombar {
  background: var(--primary); color: #fff; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 3px solid var(--accent); flex-shrink: 0; gap: 16px;
}
.pos-bottom-stats { font-size: 13px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pos-bottom-desglose { display: flex; gap: 16px; font-size: 12px; flex: 1; justify-content: center; flex-wrap: wrap; }
.pos-bottom-desglose span { white-space: nowrap; }
#pos-total-big { font-size: 22px; font-weight: 800; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
#pos-total-big small { font-size: 13px; opacity: .8; }

/* Pay method buttons */
.pos-pay-btn { border: 2px solid #dee2e6; background: #fff; color: var(--primary); font-weight: 600; font-size: 12px; }
.pos-pay-btn:hover, .pos-pay-btn.active { border-color: var(--primary); background: var(--primary); color: var(--accent); }

/* Quick denomination buttons */
.pago-denom { background: #f0f2f5; border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pago-denom:hover { background: var(--primary); color: var(--accent); border-color: var(--primary); }

/* Product result shared */
.product-result { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.product-result:hover { background: #fffbea; }

/* ── FORMS ── */
.form-label { font-size: 13px; font-weight: 600; color: #495057; margin-bottom: 3px; }
.form-control, .form-select { font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(255,195,0,.25); }
.input-group-text { font-size: 13px; }
.required::after { content: ' *'; color: #dc3545; }

/* ── MODAL ── */
.modal-header { background: var(--primary); color: var(--accent); border-bottom: 2px solid var(--accent); }
.modal-header .btn-close { filter: invert(1) sepia(1) saturate(5) hue-rotate(0deg); }
.modal-title { font-weight: 800; font-size: 14px; letter-spacing: .3px; }

/* ── ALERTS ── */
.alert-fiscal { border: 2px solid var(--accent); background: #fffbea; border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.alert-fiscal.danger { border-color: var(--danger); background: #fff5f5; }

/* ── LOGIN ── */
.page { display: none; }
.page.active { display: block; }
#login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1c28 0%, #2B2D3E 50%, #3D3F55 100%);
  position: relative;
  overflow: hidden;
}
#login-page::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,195,0,.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 380px;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
  position: relative;
  z-index: 1;
  border-top: 4px solid var(--accent);
}

/* ── MISC ── */
.spinner-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; }

/* ── PAGINATION ── */
.page-link { color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--accent); }
.page-link:hover { color: var(--accent); background: var(--primary); border-color: var(--primary); }

/* ── MOBILE / TABLET RESPONSIVE ── */

/* Tablet (768px - 1024px): collapsed icon-only sidebar */
@media (max-width: 1024px) and (min-width: 768px) {
  #sidebar { width: 56px; }
  #sidebar .nav-item span, #sidebar .sidebar-brand span, #sidebar .nav-section { display: none; }
  #main { flex: 1; }
}

/* Mobile (< 768px): overlay sidebar */
@media (max-width: 767.98px) {
  /* Sidebar becomes a fixed overlay */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 230px;
    z-index: 2050; /* siempre por encima de cualquier dropdown de Bootstrap (~1000) */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    background: var(--primary); /* fondo opaco garantizado */
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Bell dropdown: constreñirlo al viewport */
  #notif-dropdown-menu.show {
    max-width: 92vw !important;
    width: 320px;
    right: 8px !important;
    left: auto !important;
  }
  /* Main always fills full width on mobile */
  #main {
    width: 100%;
    flex: 1;
  }
  #app {
    display: flex;
    flex-direction: column;
  }

  /* Backdrop overlay */
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 2040; /* justo debajo del sidebar (2050) y encima del resto */
  }

  /* Touch-friendly nav items */
  .nav-item {
    min-height: 48px;
  }

  /* Touch-friendly buttons */
  .btn {
    min-height: 44px;
  }

  /* Larger touch targets for table action buttons */
  .table td .btn, .table td button {
    min-height: 36px;
    padding: 4px 10px;
  }

  /* Touch-friendly table cells */
  .table td, .table th {
    padding: 10px 8px;
  }

  /* POS layout: stack vertically on mobile */
  #pos-sicar {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  #pos-actions {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: 64px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    border-right: none;
    border-bottom: 1px solid #c8cad4;
  }
  #pos-actions .pos-btn {
    min-width: 64px;
    flex-shrink: 0;
  }
  #pos-main {
    flex: 1;
    min-height: 0;
  }
  #pos-cart {
    width: 100%;
  }

  /* Tables: horizontal scroll */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals: full-screen on mobile for .modal-fullscreen-mobile */
  .modal-fullscreen-mobile .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  .modal-fullscreen-mobile .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  /* Header: show role badge */
  #header-rol-badge {
    display: inline-block !important;
  }

  /* Login card: full width on small screens */
  .login-card {
    width: 95%;
    padding: 28px 20px;
  }
}

/* ── Cotizaciones: columna de acciones responsive ────────────────────────── */
.cot-actions { white-space: nowrap; }
.cot-actions .btn { padding: 2px 6px; margin-right: 2px; }
.cot-actions .btn:last-child { margin-right: 0; }

/* En móvil: botones más compactos + tabla con scroll horizontal y columnas
   prioritarias estrechas. Total y Estado caben sin scroll lateral. */
@media (max-width: 768px) {
  /* Tablas dentro de table-responsive: forzar que el contenedor controle scroll */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive table { font-size: 12px; }
  .table-responsive th, .table-responsive td { padding: 6px 4px; }

  /* Acciones aún más compactas en móvil */
  .cot-actions .btn { padding: 1px 4px; font-size: 11px; }
  .cot-actions .btn i { font-size: 11px; }

  /* Cards de estadísticas: 2 columnas en móvil */
  #cotizaciones .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }

  /* Tarjeta KPI más compacta */
  .kpi-card .display-6, .kpi-card .h3 { font-size: 1.25rem; }

  /* Filtros: stack vertical en móvil */
  #cotizaciones-page .row.g-2 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Notif dropdown: layout interno solo cuando el dropdown está abierto */
.notif-dropdown {
  min-width: 320px;
  max-width: 90vw;
  max-height: 60vh;
  overflow: hidden;
}
.notif-dropdown.show {
  display: flex !important;
  flex-direction: column;
}
.notif-dropdown .notif-list {
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
}
.notif-dropdown .notif-footer {
  flex-shrink: 0;
}

/* Backdrop element (always in DOM, shown by JS) */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1040;
}