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

/* ── Variables compartidas (siempre iguales, sin importar el tema) ── */
:root {
  /* Marca */
  --pt-orange:         #16a34a;
  --pt-orange2:        #138f41;
  --pt-orange-glow:    rgba(22,163,74,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;
  --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;
}

/* 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:14px 18px; border-bottom:1px solid var(--pt-border); display:flex; align-items:center; justify-content:space-between; }
.pos-mini-body { padding:16px 18px; max-height:70vh; overflow-y:auto; }
.pos-mini-footer { padding:12px 18px; border-top:1px solid var(--pt-border); display:flex; gap:8px; justify-content:flex-end; }
.pos-field { margin-bottom:12px; }
.pos-field label { display:block; font-size:11px; color:var(--pt-muted); text-transform:uppercase; font-weight:600; margin-bottom:4px; }
.pos-field input { width:100%; background:var(--pt-input-bg); border:1px solid var(--pt-border); color:var(--pt-text); border-radius:7px; padding:9px 12px; font-size:13px; outline:none; }
.pos-field input:focus { border-color:var(--pt-orange); }

.pos-ticket-modal { background:var(--pt-card); border:1px solid var(--pt-border); border-radius:14px; width:780px; max-width:95vw; max-height:90vh; overflow-y:auto; }
.pos-ticket-header { padding:18px 20px 14px; border-bottom:1px solid var(--pt-border); display:flex; align-items:center; justify-content:space-between; }
.pos-ticket-body { padding:20px; }
.pos-ticket-actions { padding:14px 20px; border-top:1px solid var(--pt-border); display:flex; gap:10px; justify-content:flex-end; }
#ticket-iframe, #tc-ticket-iframe, #pp-ticket-iframe, #cont-ticket-iframe { width:100%; min-height:70vh; border:none; background:#fff; border-radius:8px; }

.pos-btn { padding:8px 18px; border-radius:7px; font-size:13px; 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:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pt-muted); margin-bottom:8px; }
.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; }
.pos-client-search input { width:100%; background:var(--pt-input-bg); border:1px solid var(--pt-border); color:var(--pt-text); border-radius:8px; padding:8px 12px; font-size:13px; outline:none; }
.pos-client-search input:focus { border-color:var(--pt-orange); }
/* 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. */
.pos-client-suggestions { display:none; position:fixed; background:var(--pt-card); border:1px solid var(--pt-border2); border-radius:8px; max-height:220px; overflow-y:auto; z-index:3000; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.pos-client-suggestions.open { display:block; }
.pos-cs-label { padding:6px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--pt-muted); border-bottom:1px solid var(--pt-border); }
.pos-cs-item { padding:9px 12px; cursor:pointer; font-size:13px; 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:500; }
.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:11px; font-family:monospace; }
.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:10px; color:var(--pt-muted); text-transform:uppercase; display:block; margin-bottom:3px; }
.pos-pay-field select, .pos-pay-field input { width:100%; background:var(--pt-input-bg); border:1px solid var(--pt-border); color:var(--pt-text); border-radius:6px; padding:7px 10px; font-size:13px; 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); }