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

/* ── Variables compartidas (siempre iguales, sin importar el tema) ── */
:root {
  /* Marca */
  --pt-orange:         #009dff;
  --pt-orange2:        #008ae0;
  --pt-orange-glow:    rgba(0,157,255,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;

  /* Elevación — mismo criterio de sombra en toda tarjeta/card del sistema,
     para no repetir el mismo rgba() suelto en cada bloque. */
  --pt-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
  --pt-shadow-md: 0 4px 8px rgba(0,0,0,.08), 0 16px 32px -14px rgba(0,0,0,.24);
  --pt-ease: cubic-bezier(.4,0,.2,1);
}

/* ── 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;
  /* Mismo criterio que en modo claro pero al revés: más separados del fondo. */
  --pt-muted:          #a3aeb9;
  --pt-muted2:         #8b949e;
  --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;
  /* Un escalón más oscuros que antes (#64748b/#94a3b8): sobre fondo blanco el
     gris viejo se leía lavado, sobre todo el muted2, que no llegaba al mínimo
     de contraste accesible. Se usan en ~290 lugares, así que esto aclara la
     lectura de todo el ERP de una. */
  --pt-muted:          #475569;
  --pt-muted2:         #64748b;
  --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;
}

/* Foco visible consistente para navegación por teclado (accesibilidad) —
   solo aparece con Tab, no al hacer click con el mouse. */
:focus-visible {
  outline: 2px solid var(--pt-orange);
  outline-offset: 2px;
}

/* Respeta la preferencia del sistema operativo de reducir animaciones
   (mareos/vestibular) — apaga transiciones y animaciones, no las oculta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   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;
  /* Sin esto, #content (flex item) se niega a achicarse por debajo del ancho
     mínimo de su contenido (min-width:auto es el default en flexbox). Con una
     tabla o una fila de filtros anchas, eso empujaba la página entera más allá
     de la pantalla y aparecía scroll horizontal en TODO el ERP — medido: a
     1024px de ancho el documento pedía 1043px. Con min-width:0 el contenido
     se adapta y cada contenedor interno (.table-responsive) maneja su propio
     scroll, que es lo que se buscaba desde el principio. */
  min-width: 0;
  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;
}
.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.nav-section-toggle:hover { opacity: .85; }
.nav-section-caret { font-size: .6rem; transition: transform .2s; }
.nav-section-toggle.collapsed .nav-section-caret { transform: rotate(-90deg); }

.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);
  border-radius: 14px;
  box-shadow: var(--pt-shadow-sm);
}
.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: var(--pt-shadow-sm);
  transition: box-shadow .2s, transform .2s;
}

/* ── KPI Cards ── */
.kpi-card {
  background: var(--pt-card);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--pt-shadow-sm);
  border-left: 4px solid transparent;
  transition: transform .18s var(--pt-ease), box-shadow .18s var(--pt-ease);
  border: 1px solid var(--pt-border);
  height: 100%; /* pareja con las tarjetas vecinas de la misma fila */
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-md); }
.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: var(--pt-shadow-sm);
  height: 100%; /* pareja con las tarjetas vecinas de la misma fila (el .row de Bootstrap ya estira la columna, esto estira la tarjeta adentro) */
}
.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: var(--pt-shadow-sm);
  height: 100%; /* pareja con las tarjetas vecinas de la misma fila */
  display: flex;
  flex-direction: column;
}
.table-card .table-responsive { flex: 1; }
.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 td { transition: background-color .12s var(--pt-ease); }
.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.

     OJO con `overflow-x: hidden` en <html>: en Safari de iOS rompe el scroll
     VERTICAL de la página — el dedo baja pero no vuelve a subir, o directamente
     no se mueve — y encima recorta lo que se desborda sin dejar llegar a ello,
     que se ve como si la página estuviera "con zoom". Reportado en iPhone sobre
     Taller y Productos.

     `clip` corta igual pero NO crea un contenedor de scroll, así que no toca el
     scroll vertical ni rompe position:sticky. Donde no esté soportado (Safari
     viejo), el fallback deja el hidden SOLO en <body>: ahí no dispara el bug,
     porque el que scrollea la página en iOS es <html>. */
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }
  @supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
  }
  #content { overflow-x: clip; }

  /* 1.bis  EL ZOOM QUE NO VUELVE (iPhone)

     Safari de iOS hace zoom AUTOMÁTICO al enfocar cualquier campo cuya letra
     mida menos de 16px — y al salir del campo NO deshace el zoom. La página
     queda agrandada para siempre hasta que el usuario la achica con los dedos.
     Reportado en Productos: "cuando toco buscar se agranda, busca, pero no
     vuelve a la normalidad". Los filtros del ERP usan 13px, así que lo dispara
     cualquier búsqueda.

     16px es el mínimo exacto que iOS acepta sin hacer zoom. Va con !important
     porque los módulos ponen su propio font-size en estilos inline y en reglas
     más específicas. Solo aplica en pantallas chicas: en escritorio los campos
     siguen con su tamaño original.

     La alternativa —maximum-scale=1 en el viewport— también lo evita, pero de
     paso le prohíbe al usuario hacer zoom en TODA la página, y eso rompe la
     accesibilidad para quien necesita agrandar. Por eso se resuelve por CSS. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .pt-filter-inp {
    font-size: 16px !important;
  }

  /* 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; }
}

/* ═══════════════════════════════════════════════════════════
   POPUP DE COBRO / TICKET — compartido por POS, Taller y Presupuestos
   (antes cada uno tenía su propia copia pegada; un solo lugar para
   tocar el estilo del cobro en los tres)
   ═══════════════════════════════════════════════════════════ */
.pos-modal-overlay { display:flex; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1100; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 200ms ease-out; }
.pos-modal-overlay.open { opacity:1; pointer-events:auto; }
.pos-modal-overlay .pos-ticket-modal, .pos-modal-overlay .pos-mini-modal { transform:scale(.96); transition:transform 200ms ease-out; }
.pos-modal-overlay.open .pos-ticket-modal, .pos-modal-overlay.open .pos-mini-modal { transform:scale(1); }

.pos-mini-modal { background:var(--pt-card); border:1px solid var(--pt-border); border-radius:12px; width:380px; max-width:95vw; }
.pos-mini-header { padding:16px 22px; border-bottom:1px solid var(--pt-border); display:flex; align-items:center; justify-content:space-between; }
.pos-mini-body { padding:20px 22px; max-height:78vh; overflow-y:auto; }
.pos-mini-footer { padding:14px 22px; border-top:1px solid var(--pt-border); display:flex; gap:10px; justify-content:flex-end; }
.pos-field { margin-bottom:12px; }
.pos-field label { display:block; font-size:12px; color:var(--pt-muted); text-transform:uppercase; font-weight:600; margin-bottom:5px; }
.pos-field input { width:100%; background:var(--pt-input-bg); border:1px solid var(--pt-border2); color:var(--pt-text); border-radius:7px; padding:11px 13px; font-size:15px; outline:none; }
.pos-field input:focus { border-color:var(--pt-orange); }

/* El visor de PDF del navegador necesita que el iframe tenga un alto REAL para
   mostrar la hoja entera. Antes el modal era "max-height + overflow-y:auto" y el
   iframe tenía un min-height fijo de 70vh: el comprobante quedaba cortado y con
   dos scrolls encima (el del modal y el del visor). Ahora el modal es una
   columna de alto definido — cabecera y botones quedan fijos — y el ticket
   ocupa todo lo que sobra. El min-height:0 del body es lo que deja que el flex
   lo achique de verdad; sin eso el iframe vuelve a desbordar. */
.pos-ticket-modal { background:var(--pt-card); border:1px solid var(--pt-border); border-radius:14px; width:820px; max-width:96vw; height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.pos-ticket-header { flex:0 0 auto; padding:18px 20px 14px; border-bottom:1px solid var(--pt-border); display:flex; align-items:center; justify-content:space-between; }
.pos-ticket-body { flex:1 1 auto; min-height:0; padding:14px 16px; overflow:hidden; display:flex; }
.pos-ticket-actions { flex:0 0 auto; padding:14px 20px; border-top:1px solid var(--pt-border); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
#ticket-iframe, #tc-ticket-iframe, #pp-ticket-iframe, #cont-ticket-iframe { flex:1 1 auto; width:100%; min-height:0; border:none; background:#fff; border-radius:8px; }

.pos-btn { padding:11px 22px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; border:none; }
.pos-btn-orange { background:var(--pt-orange); color:#fff; }
.pos-btn-orange:hover { background:var(--pt-orange2); }
.pos-btn-ghost { background:transparent; border:1px solid var(--pt-border2); color:var(--pt-muted); }
.pos-btn-ghost:hover { background:var(--pt-card2); color:var(--pt-text); }
.pos-btn-danger { background:var(--pt-red-dim); border:1px solid var(--pt-red-border); color:var(--pt-red); }
.pos-cs-clear { background:none; border:none; color:var(--pt-muted); cursor:pointer; font-size:16px; }
.pos-cs-clear:hover { color:var(--pt-red); }

.co-step-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pt-muted); margin-bottom:9px; }
.co-step-n { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#16a34a; color:#fff; font-size:11px; font-weight:800; }

.pos-client-search { position:relative; }
/* Campo de búsqueda de cliente: alto de lectura y borde marcado. Es lo primero
   que se toca al facturar y antes pasaba desapercibido entre el resto. */
.pos-client-search input { width:100%; background:var(--pt-input-bg); border:2px solid var(--pt-border2); color:var(--pt-text); border-radius:9px; padding:12px 14px; font-size:15px; outline:none; transition:border-color .12s; }
.pos-client-search input::placeholder { color:var(--pt-muted); opacity:1; }
.pos-client-search input:focus { border-color:var(--pt-orange); box-shadow:0 0 0 3px rgba(22,163,74,.15); }
/* position:fixed + coordenadas calculadas en JS (positionClientSuggestions):
   así el dropdown nunca queda recortado por el overflow:auto del modal,
   sin importar dónde esté el campo "Cliente" adentro del popup. */
/* max-height en vh y no en px: en un monitor grande entran 7-8 clientes sin
   scrollear, y en una pantalla chica no se come toda la ventana. El tope de
   220px dejaba ver dos y medio. */
.pos-client-suggestions { display:none; position:fixed; background:var(--pt-card); border:2px solid var(--pt-border2); border-radius:10px; max-height:min(46vh, 460px); overflow-y:auto; z-index:3000; box-shadow:0 12px 32px rgba(0,0,0,.32); }
.pos-client-suggestions.open { display:block; }
.pos-cs-label { padding:8px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pt-muted); border-bottom:1px solid var(--pt-border); }
/* Cada fila tiene tres líneas (nombre, documento, dirección): con el padding
   viejo quedaban apretadas y costaba distinguir dónde termina un cliente y
   empieza el siguiente. */
.pos-cs-item { padding:12px 14px; cursor:pointer; font-size:14px; border-bottom:1px solid var(--pt-border); }
.pos-cs-item:hover { background:var(--pt-card2); }
.pos-cs-item:last-child { border-bottom:none; }
.pos-cs-name { color:var(--pt-text); font-weight:700; font-size:15px; }
.pos-cs-name mark { background:var(--pt-orange); color:#fff; border-radius:3px; padding:0 2px; }
.pos-cs-doc  { color:var(--pt-muted); font-size:12.5px; font-family:monospace; margin-top:2px; }
/* Dirección del cliente en el buscador: sin monospace (es texto, no un número) y
   en una línea, cortada con puntos suspensivos si no entra. */
.pos-cs-dir  { color:var(--pt-muted2); font-size:12.5px; margin-top:2px;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-client-selected { display:flex; align-items:center; justify-content:space-between; background:var(--pt-card); border:1px solid var(--pt-border); border-radius:8px; padding:8px 12px; }

.pos-pay-methods { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.pos-pay-btn { flex:1; min-width:70px; padding:7px 8px; border-radius:7px; border:1px solid var(--pt-border); background:var(--pt-card); color:var(--pt-muted); font-size:12px; font-weight:600; cursor:pointer; text-align:center; transition:all .15s; }
.pos-pay-btn:hover { border-color:var(--pt-orange); color:var(--pt-orange); }
.pos-pay-btn.active { background:var(--pt-orange-glow); border-color:var(--pt-orange); color:var(--pt-orange); }
.pos-pay-detail { display:none; }
.pos-pay-detail.open { display:block; }
.pos-pay-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
.pos-pay-field label { font-size:11px; color:var(--pt-muted); text-transform:uppercase; display:block; margin-bottom:4px; }
.pos-pay-field select, .pos-pay-field input { width:100%; background:var(--pt-input-bg); border:1px solid var(--pt-border2); color:var(--pt-text); border-radius:6px; padding:10px 12px; font-size:14.5px; font-family:monospace; }
.pos-pay-field select:focus, .pos-pay-field input:focus { border-color:var(--pt-orange); outline:none; }

/* Chevron que gira al abrir/cerrar un acordeón (ej: "Qué mejorar" del Dashboard) */
.bi-chevron-down { transition: transform .2s ease; display: inline-block; }
.bi-chevron-down.rotate-180 { transform: rotate(180deg); }