/* ═══════════════════════════════════════════════════════════
   PowerTech CRM — Styles  (dark default / light override)
   ═══════════════════════════════════════════════════════════ */

/* ── Variables compartidas (siempre iguales, sin importar el tema) ── */
:root {
  /* Marca */
  --pt-orange:         #ff00bb;
  --pt-orange2:        #e000a5;
  --pt-orange-glow:    rgba(255,0,187,0.2);

  /* Acentos de estado */
  --pt-green:          #22c55e;
  --pt-green-dim:      rgba(34,197,94,.12);
  --pt-green-border:   rgba(34,197,94,.3);
  --pt-red:            #f87171;
  --pt-red-dim:        rgba(239,68,68,.12);
  --pt-red-border:     rgba(239,68,68,.3);
  --pt-blue:           #60a5fa;
  --pt-blue-dim:       rgba(59,130,246,.12);
  --pt-blue-border:    rgba(59,130,246,.3);
  --pt-yellow:         #fbbf24;
  --pt-purple:         #c084fc;

  /* Layout */
  --sidebar-w:         240px;

  /* Sidebar (siempre oscuro sin importar el tema) */
  --pt-dark:           #0d1b2a;
  --pt-darker:         #0a1520;
  --pt-sidebar-border: #1e3048;
  --pt-sidebar-text:   #94a3b8;
}

/* ── DARK THEME (default) ── */
:root,
[data-bs-theme="dark"] {
  --pt-bg:             #0d1117;
  --pt-bg2:            #0a0e15;
  --pt-card:           #161b22;
  --pt-card2:          #1c2330;
  --pt-border:         #21262d;
  --pt-border2:        #2d3748;
  --pt-text:           #e2e8f0;
  --pt-text2:          #c9d1d9;
  --pt-muted:          #8b949e;
  --pt-muted2:         #6e7681;
  --pt-input-bg:       #21262d;
  --pt-input-bd:       #30363d;
  --pt-row-hover:      rgba(255,255,255,.03);
  --pt-row-stripe:     rgba(255,255,255,.015);
  --pt-table-head:     #0d1117;
  --pt-topbar-bg:      #161b22;
  --pt-topbar-bd:      #21262d;
  --pt-thumb-bg:       linear-gradient(135deg,#1e3a5c,#0d2040);
  --pt-input-subtle:   rgba(255,255,255,.05);
  --pt-badge-text-on:  #4ade80;
  --pt-badge-text-off: #94a3b8;

  /* Sincronizar variables de Bootstrap con nuestro tema */
  --bs-body-bg:        #0d1117;
  --bs-body-color:     #e2e8f0;
  --bs-border-color:   #21262d;
  --bs-secondary-color:#8b949e;
  --bs-table-bg:       transparent;
  --bs-table-color:    #e2e8f0;
  --bs-card-bg:        #161b22;
  --bs-modal-bg:       #161b22;
}

/* ── LIGHT THEME ── */
[data-bs-theme="light"] {
  --pt-bg:             #f0f4f8;
  --pt-bg2:            #e8edf3;
  --pt-card:           #ffffff;
  --pt-card2:          #f8fafc;
  --pt-border:         #e2e8f0;
  --pt-border2:        #cbd5e1;
  --pt-text:           #1e293b;
  --pt-text2:          #334155;
  --pt-muted:          #64748b;
  --pt-muted2:         #94a3b8;
  --pt-input-bg:       #ffffff;
  --pt-input-bd:       #cbd5e1;
  --pt-row-hover:      rgba(0,0,0,.03);
  --pt-row-stripe:     rgba(0,0,0,.015);
  --pt-table-head:     #f8fafc;
  --pt-topbar-bg:      #ffffff;
  --pt-topbar-bd:      #e2e8f0;
  --pt-thumb-bg:       linear-gradient(135deg,#dbeafe,#bfdbfe);
  --pt-input-subtle:   rgba(0,0,0,.04);
  --pt-badge-text-on:  #15803d;
  --pt-badge-text-off: #64748b;

  /* Sincronizar variables de Bootstrap con nuestro tema claro */
  --bs-body-bg:        #f0f4f8;
  --bs-body-color:     #1e293b;
  --bs-border-color:   #e2e8f0;
  --bs-secondary-color:#64748b;
  --bs-table-bg:       transparent;
  --bs-table-color:    #1e293b;
  --bs-card-bg:        #ffffff;
  --bs-modal-bg:       #ffffff;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — forzar fondos y colores (override Bootstrap)
   Usar html[data-bs-theme] para máxima especificidad
══════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body { background-color: #0d1117 !important; color: #e2e8f0 !important; }
html[data-bs-theme="dark"] #wrapper,
html[data-bs-theme="dark"] #content { background-color: #0d1117 !important; }
html[data-bs-theme="dark"] .card-pt,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .table-card,
html[data-bs-theme="dark"] .chart-card,
html[data-bs-theme="dark"] .kpi-card { background-color: #161b22 !important; border-color: #21262d !important; color: #e2e8f0 !important; }
html[data-bs-theme="dark"] .modal-content { background-color: #161b22 !important; color: #e2e8f0 !important; border-color: #21262d !important; }
html[data-bs-theme="dark"] .table > * > tr > * { background-color: transparent !important; color: #c9d1d9 !important; border-color: #21262d !important; }
html[data-bs-theme="dark"] .table > thead > tr > th { background-color: #0d1117 !important; color: #8b949e !important; }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select { background-color: #21262d !important; border-color: #30363d !important; color: #e2e8f0 !important; }
html[data-bs-theme="dark"] .input-group-text { background-color: #21262d !important; border-color: #30363d !important; color: #8b949e !important; }
html[data-bs-theme="dark"] .text-muted { color: #8b949e !important; }
html[data-bs-theme="dark"] .badge.bg-secondary { background-color: #30363d !important; }
html[data-bs-theme="dark"] .dropdown-menu { background-color: #161b22 !important; border-color: #21262d !important; }
html[data-bs-theme="dark"] .dropdown-item { color: #e2e8f0 !important; }
html[data-bs-theme="dark"] .dropdown-item:hover { background-color: #21262d !important; }

/* ══════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--pt-bg);
  color: var(--pt-text);
  transition: background .2s, color .2s;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ══════════════════════════════════════════════════════════
   TIPOGRAFÍA — Poppins en títulos (mismo criterio que la tienda)
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5,
.topbar h1,
.kpi-value,
.table-card .table-title,
.chart-card .card-title,
.login-wrapper .fw-semibold,
.sidebar-brand,
.modal-title {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR — fino y temático (Chromium/WebKit)
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pt-border2); border-radius: 20px; border: 2px solid var(--pt-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--pt-muted); }

/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */
#wrapper { min-height: 100vh; display: flex; }

#content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  padding: 1.5rem;
  transition: margin-left .3s;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--pt-dark);
  color: var(--pt-sidebar-text);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  z-index: 1040;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease;
}

.sidebar-brand {
  background: var(--pt-darker);
  border-bottom: 1px solid var(--pt-sidebar-border);
  min-height: 60px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-brand img {
  display: block;
  height: 36px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
  flex-shrink: 0;
}

#sidebar .nav-link {
  color: var(--pt-sidebar-text);
  border-radius: 8px;
  padding: .45rem .75rem;
  font-size: .875rem;
  transition: background .15s, color .15s, border-color .15s;
  display: flex;
  align-items: center;
  border-left: 3px solid transparent;
  margin-left: -3px;
}
#sidebar .nav-link:hover  { background: var(--pt-sidebar-border); color: #fff; }
#sidebar .nav-link.active { background: var(--pt-sidebar-border); color: var(--pt-orange); font-weight: 600; border-left-color: var(--pt-orange); }

.nav-section {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--pt-sidebar-text);
  padding: .75rem .75rem .25rem;
  text-transform: uppercase;
  opacity: .6;
}

.sidebar-footer {
  border-top: 1px solid var(--pt-sidebar-border);
  margin-top: auto;
}

.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-orange), var(--pt-orange2));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--pt-orange-glow);
}

/* ══════════════════════════════════════════════════════════
   MOBILE TOPBAR (hamburger)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #mobile-topbar { display: none !important; }
}

#mobile-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--pt-dark);
  z-index: 1035;
  align-items: center;
  padding: 0 1rem;
  gap: 12px;
  border-bottom: 1px solid var(--pt-sidebar-border);
}
#mobile-topbar img {
  height: 30px;
  object-fit: contain;
}
#btn-sidebar-toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

/* Overlay para cerrar sidebar en mobile */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1039;
}
#sidebar-overlay.show { display: block; }

/* ══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════════════════ */
#btn-theme {
  background: none;
  border: 1px solid var(--pt-sidebar-border);
  color: var(--pt-sidebar-text);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
}
#btn-theme:hover { background: var(--pt-sidebar-border); color: #fff; }

/* ══════════════════════════════════════════════════════════
   CARDS & COMMON
══════════════════════════════════════════════════════════ */
.card {
  background: var(--pt-card);
  border-color: var(--pt-border);
  color: var(--pt-text);
}
.card-header, .card-footer {
  background: transparent;
  border-color: var(--pt-border);
}

/* card-pt: tarjeta oscura en ambos temas */
.card-pt {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  color: var(--pt-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
  transition: box-shadow .2s, transform .2s;
}

/* ── KPI Cards ── */
.kpi-card {
  background: var(--pt-card);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
  border-left: 4px solid transparent;
  transition: transform .18s, box-shadow .18s;
  border: 1px solid var(--pt-border);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px -14px rgba(0,0,0,.24); }
.kpi-card.orange { border-left-color: var(--pt-orange); }
.kpi-card.blue   { border-left-color: #3b82f6; }
.kpi-card.green  { border-left-color: #22c55e; }
.kpi-card.purple { border-left-color: #a855f7; }

.kpi-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
[data-bs-theme="dark"] .kpi-icon.orange  { background: rgba(22,163,74,.15); color: var(--pt-orange); }
[data-bs-theme="dark"] .kpi-icon.blue    { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-bs-theme="dark"] .kpi-icon.green   { background: rgba(34,197,94,.15);  color: #4ade80; }
[data-bs-theme="dark"] .kpi-icon.purple  { background: rgba(168,85,247,.15); color: #c084fc; }
[data-bs-theme="light"] .kpi-icon.orange { background: #ecfdf5; color: var(--pt-orange); }
[data-bs-theme="light"] .kpi-icon.blue   { background: #eff6ff; color: #3b82f6; }
[data-bs-theme="light"] .kpi-icon.green  { background: #f0fdf4; color: #22c55e; }
[data-bs-theme="light"] .kpi-icon.purple { background: #faf5ff; color: #a855f7; }

.kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--pt-text); line-height: 1.2; }
.kpi-label { font-size: .8rem; color: var(--pt-muted); margin-top: .15rem; }

/* ── Chart cards ── */
.chart-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
}
.chart-card .card-title { font-size: .95rem; font-weight: 600; color: var(--pt-text); }

/* ── Tables ── */
.table-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
}
.table-card .table-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--pt-text);
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--pt-border);
}
.table-card table { margin: 0; }
.table-card thead th {
  background: var(--pt-table-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--pt-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-color: var(--pt-border);
  padding: .6rem 1rem;
}
.table-card tbody td {
  font-size: .85rem;
  padding: .65rem 1rem;
  vertical-align: middle;
  border-color: var(--pt-border);
  color: var(--pt-text);
}

/* Bootstrap table adapta al tema */
.table { --bs-table-color: var(--pt-text); --bs-table-border-color: var(--pt-border); }
.table thead th { background: var(--pt-table-head); color: var(--pt-muted); }
.table tbody tr:hover td { background: var(--pt-row-hover); }

/* ── Badges universales (usan variables de tema) ── */
.pt-badge-on  { display:inline-block; background:var(--pt-green-dim);  color:var(--pt-badge-text-on);  border:1px solid var(--pt-green-border);  border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }
.pt-badge-off { display:inline-block; background:rgba(100,116,139,.12); color:var(--pt-badge-text-off); border:1px solid rgba(100,116,139,.3);       border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }
.pt-badge-ok  { display:inline-block; background:var(--pt-green-dim);  color:var(--pt-badge-text-on);  border:1px solid var(--pt-green-border);  border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }
.pt-badge-low { display:inline-block; background:var(--pt-red-dim);    color:var(--pt-red);            border:1px solid var(--pt-red-border);    border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }
.pt-badge-warn{ display:inline-block; background:rgba(251,191,36,.12); color:#fbbf24;                  border:1px solid rgba(251,191,36,.3);       border-radius:20px; padding:2px 10px; font-size:11px; font-weight:700; }

/* ── Tabla universal de módulos ── */
.pt-table { width:100%; border-collapse:collapse; }
.pt-table thead tr { border-bottom:1px solid var(--pt-border); }
.pt-table thead th { padding:10px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pt-muted); white-space:nowrap; background:var(--pt-table-head); }
.pt-table tbody tr { border-bottom:1px solid var(--pt-border); transition:background .12s; }
.pt-table tbody tr:last-child { border-bottom:none; }
.pt-table tbody tr:hover { background:var(--pt-row-hover); }
.pt-table td { padding:10px 12px; font-size:13px; vertical-align:middle; color:var(--pt-text); }
.pt-table td.muted { color:var(--pt-muted); }

/* ── Encabezados de tabla ordenables (click para ordenar) ── */
th.th-sort { cursor:pointer; user-select:none; }
th.th-sort:hover { color:var(--pt-orange) !important; }
th.th-sort .sort-ico { display:inline-block; width:12px; margin-left:3px; font-size:10px; opacity:.35; }
th.th-sort.sort-activo .sort-ico { opacity:1; color:var(--pt-orange); }
/* Encabezados ordenables server-side (link <a> dentro de <th>, ej: Clientes, Pedidos) */
thead a { cursor:pointer; }
thead a:hover { color:var(--pt-orange) !important; }

/* ── Input de filtro universal ── */
.pt-filter-inp { background:var(--pt-input-subtle); border:1px solid var(--pt-border); color:var(--pt-text); border-radius:9px; padding:8px 14px; font-size:13px; outline:none; transition:.15s; }
.pt-filter-inp:focus { border-color:var(--pt-orange); background:var(--pt-input-bg); box-shadow:0 0 0 3px var(--pt-orange-glow); }
.pt-filter-inp::placeholder { color:var(--pt-muted); }
.pt-filter-inp option { background:var(--pt-card); color:var(--pt-text); }

/* ── Botones de acción de tabla ── */
.pt-act-btn { background:var(--pt-input-subtle); border:1px solid var(--pt-border); color:var(--pt-muted); border-radius:7px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; font-size:13px; }
.pt-act-btn:hover          { border-color:var(--pt-orange); color:var(--pt-orange); }
.pt-act-btn.edit:hover     { border-color:var(--pt-blue);   color:var(--pt-blue);   }
.pt-act-btn.danger:hover   { border-color:var(--pt-red);    color:var(--pt-red);    }
.pt-act-btn.destacado-on   { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,.12); }
.pt-act-btn.destacado-on:hover { border-color:#d97706; color:#d97706; }

/* ── Thumbnail de producto ── */
.pt-thumb { width:46px !important; height:46px !important; min-width:46px; border-radius:9px; background:var(--pt-thumb-bg); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; overflow:hidden; }
.pt-thumb img { width:46px !important; height:46px !important; max-width:46px !important; max-height:46px !important; object-fit:cover; border-radius:9px; display:block; }

/* ── Modal styles para ambos temas ── */
.modal-content {
  background: var(--pt-card);
  border-color: var(--pt-border);
  color: var(--pt-text);
}
.modal-header, .modal-footer { border-color: var(--pt-border); }
.modal-header .btn-close { filter: var(--pt-close-filter, none); }
[data-bs-theme="dark"] { --pt-close-filter: invert(1); }

/* Override para componentes Bootstrap hardcodeados al dark en light mode */
[data-bs-theme="light"] .modal-content.bg-dark  { background: #fff !important; color: #1e293b !important; }
[data-bs-theme="light"] .table-dark             { --bs-table-bg: #fff; --bs-table-color: #1e293b; --bs-table-border-color: #e2e8f0; }
[data-bs-theme="light"] .form-control.bg-dark   { background: #fff !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
[data-bs-theme="light"] .form-select.bg-dark    { background: #fff !important; color: #1e293b !important; border-color: #cbd5e1 !important; }
[data-bs-theme="light"] .border-secondary       { border-color: #e2e8f0 !important; }
[data-bs-theme="light"] .text-white             { color: #1e293b !important; }
[data-bs-theme="light"] .bg-dark                { background: #fff !important; }

/* ── Topbar (dentro del content) ── */
.topbar {
  background: var(--pt-topbar-bg);
  border-bottom: 1px solid var(--pt-topbar-bd);
  padding: .75rem 1.5rem;
  margin: -1.5rem -1.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.topbar h1 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--pt-text); }

/* ══════════════════════════════════════════════════════════
   BADGES DE ESTADO TALLER
══════════════════════════════════════════════════════════ */
.badge-estado { padding: .3em .65em; border-radius: 6px; font-size: .75rem; font-weight: 600; }
.estado-recibido      { background: #1d4ed820; color: #60a5fa; border: 1px solid #1d4ed840; }
.estado-diagnostico   { background: #92400e20; color: #fbbf24; border: 1px solid #92400e40; }
.estado-en_reparacion { background: #c2410c20; color: #fb923c; border: 1px solid #c2410c40; }
.estado-listo         { background: #15803d20; color: #4ade80; border: 1px solid #15803d40; }
.estado-entregado     { background: #0369a120; color: #38bdf8; border: 1px solid #0369a140; }
.estado-cancelado     { background: #b91c1c20; color: #f87171; border: 1px solid #b91c1c40; }

[data-bs-theme="light"] .estado-recibido      { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
[data-bs-theme="light"] .estado-diagnostico   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
[data-bs-theme="light"] .estado-en_reparacion { background: #fed7aa; color: #c2410c; border-color: #fdba74; }
[data-bs-theme="light"] .estado-listo         { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
[data-bs-theme="light"] .estado-entregado     { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
[data-bs-theme="light"] .estado-cancelado     { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ══════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════ */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--pt-darker) 0%, #0f2e1e 55%, #14532d 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.login-card {
  background: #fff;
  border-radius: 18px;
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.btn-login { background: var(--pt-orange); border: none; font-weight: 600; padding: .65rem; }
.btn-login:hover { background: var(--pt-orange2); }

/* Login sobre tarjeta blanca: labels en negro e iconos verdes como el resto */
.login-card .form-label { color: #111827 !important; }
.login-card .input-group-text { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: var(--pt-orange) !important; }
.login-card .input-group-text i { color: var(--pt-orange) !important; }

/* ══════════════════════════════════════════════════════════
   UTILIDADES
══════════════════════════════════════════════════════════ */
.text-orange  { color: var(--pt-orange) !important; }
.btn-orange   { background: var(--pt-orange); border-color: var(--pt-orange); color: #fff; }
.btn-orange:hover { background: var(--pt-orange2); border-color: var(--pt-orange2); color: #fff; }

/* ══════════════════════════════════════════════════════════
   BOTONES — look moderno unificado a la marca verde
══════════════════════════════════════════════════════════ */
.btn {
  border-radius: 9px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--pt-orange);
  border-color: var(--pt-orange);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--pt-orange2);
  border-color: var(--pt-orange2);
  box-shadow: 0 4px 12px var(--pt-orange-glow);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--pt-orange); border-color: var(--pt-orange);
}
.btn-outline-primary {
  color: var(--pt-orange); border-color: var(--pt-orange);
}
.btn-outline-primary:hover {
  background-color: var(--pt-orange); border-color: var(--pt-orange);
  box-shadow: 0 4px 12px var(--pt-orange-glow);
}
.btn-orange:hover, .btn-login:hover {
  box-shadow: 0 4px 12px var(--pt-orange-glow);
}

.spinner-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

/* Form controls adaptan al tema */
.form-control, .form-select {
  background-color: var(--pt-input-bg);
  border-color: var(--pt-input-bd);
  color: var(--pt-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--pt-input-bg);
  color: var(--pt-text);
  border-color: var(--pt-orange);
  box-shadow: 0 0 0 .2rem rgba(22,163,74,.2);
}
.form-label { color: var(--pt-text); }
.input-group-text {
  background: var(--pt-input-bg);
  border-color: var(--pt-input-bd);
  color: var(--pt-muted);
}

/* Modal adapta al tema */
.modal-content {
  background: var(--pt-card);
  border-color: var(--pt-border);
  color: var(--pt-text);
}
.modal-header, .modal-footer {
  border-color: var(--pt-border);
}
.btn-close-white { filter: invert(1); }
[data-bs-theme="light"] .btn-close-white { filter: none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE / TABLET
══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  #mobile-topbar { display: flex !important; }

  #sidebar {
    transform: translateX(-100%);
    top: 0;
  }
  #sidebar.open { transform: translateX(0); }

  #content {
    /* !important para ganarle a las utilidades de Bootstrap (.p-4/.p-3)
       que los módulos ponen en #content y que, sin esto, tapaban el
       contenido detrás de la barra superior fija (56px). */
    margin-left: 0 !important;
    padding: calc(56px + 1rem) 1rem 1rem !important; /* top reserva la topbar */
  }

  .topbar {
    margin: calc(-56px - 1rem) -1rem 1rem;
    padding: .75rem 1rem;
  }

  /* POS responsive */
  .pos-layout {
    flex-direction: column !important;
  }
  .pos-left, .pos-right {
    width: 100% !important;
    min-width: unset !important;
    max-height: unset !important;
  }
  .pos-right {
    border-left: none !important;
    border-top: 1px solid #2d3148;
  }

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

  /* Cards stack */
  .kpi-card { padding: 1rem; }
  .kpi-value { font-size: 1.3rem; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
  :root { --sidebar-w: 200px; }
  .sidebar-brand img { max-height: 30px; }
}

/* ══════════════════════════════════════════════════════════
   RED DE SEGURIDAD RESPONSIVE (solo móvil/tablet ≤991px)
   Evita desbordes horizontales sin tocar el layout de PC.
   No cambia nada en escritorio (>991px).
══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  /* 1. Nada empuja la página más ancha que la pantalla */
  html, body { overflow-x: hidden; max-width: 100%; }
  #content { overflow-x: hidden; }

  /* 2. Imágenes y media nunca superan el ancho disponible */
  #content img,
  #content video,
  #content canvas,
  #content svg { max-width: 100%; height: auto; }

  /* 3. Tablas: si son más anchas que la pantalla, scroll horizontal
        propio en vez de romper el layout. Se respeta .table-fixed. */
  #content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #content table:not(.table-fixed) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 4. Bloques de código / texto largo no desbordan */
  #content pre { white-space: pre-wrap; word-break: break-word; }

  /* 5. La topbar interna puede envolver sus elementos */
  .topbar { flex-wrap: wrap; gap: .5rem; }

  /* 6. Modales: ancho cómodo y con margen en pantallas chicas */
  .modal-dialog { margin: .5rem; }
}

/* Ajustes finos sólo para celular (≤575px) */
@media (max-width: 575.98px) {
  /* Grillas de botones/filtros que estén en flex se apilan mejor */
  .topbar .btn,
  .topbar .form-control,
  .topbar .form-select { flex: 1 1 auto; }
}