/* ============================================================================
   Tema IMS / Sport Zone  (estilo Bitwarden) — capa sobre Bootstrap 5.3
   Portado del handoff visual: paleta de marca + sidebar navy + badges/botones
   "soft" + tipografia Public Sans. Se aplica como override de clases Bootstrap,
   por lo que TODAS las vistas que ya usan Bootstrap heredan el look sin tocarlas.
   Servido con 'self' (public/) -> no requiere cambios en la CSP.
   Se integra con el toggle nativo: variables por [data-bs-theme].
   ============================================================================ */

/* --- Fuente auto-alojada (sin Google Fonts, funciona offline) --------------- */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/public-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/public-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/public-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/public-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/public-sans-latin-800-normal.woff2') format('woff2');}

/* --- Paleta / variables ---------------------------------------------------- */
:root{
  --brand:#2563eb; --brand-dark:#1d4ed8; --navy:#17244a;
  --app-bg:#f4f6fa; --card-bg:#ffffff; --border:#e5e8ef; --text:#1f2733; --muted:#6b7280; --hover:#f5f7fb;
  /* Recolorea links / .text-primary / componentes que usan la primary de Bootstrap */
  --bs-primary:#2563eb; --bs-primary-rgb:37,99,235;
  --bs-link-color:#2563eb; --bs-link-color-rgb:37,99,235;
  --bs-link-hover-color:#1d4ed8; --bs-link-hover-color-rgb:29,78,216;
}
[data-bs-theme="dark"]{
  --app-bg:#0f172a; --card-bg:#1e293b; --border:#334155; --text:#e2e8f0; --muted:#94a3b8; --hover:#243244;
  /* Alinea el dark nativo de Bootstrap con la paleta del tema */
  --bs-body-bg:#0f172a; --bs-body-color:#e2e8f0;
  --bs-tertiary-bg:#1e293b; --bs-secondary-bg:#1e293b;
  --bs-border-color:#334155;
  --bs-primary-rgb:37,99,235; --bs-link-color:#60a5fa; --bs-link-hover-color:#93c5fd;
}

body{font-family:'Public Sans',system-ui,-apple-system,Helvetica,Arial,sans-serif;background:var(--app-bg);color:var(--text);}

/* --- Color de marca sobre componentes Bootstrap --------------------------- */
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);--bs-btn-disabled-bg:var(--brand);--bs-btn-disabled-border-color:var(--brand);}
.btn-success{--bs-btn-bg:#16a34a;--bs-btn-border-color:#16a34a;--bs-btn-hover-bg:#15803d;--bs-btn-hover-border-color:#15803d;--bs-btn-active-bg:#15803d;--bs-btn-active-border-color:#15803d;}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);}
/* Unifica el cyan de btn-info al azul de marca (fuera de tablas, que ya van "soft"). */
.btn-info{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--brand-dark);--bs-btn-hover-border-color:var(--brand-dark);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--brand-dark);--bs-btn-active-border-color:var(--brand-dark);--bs-btn-active-color:#fff;}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand);}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(37,99,235,.15);}
.page-link{color:var(--brand);} .page-item.active .page-link{background-color:var(--brand);border-color:var(--brand);}
.nav-pills{--bs-nav-pills-link-active-bg:var(--brand);}

/* --- Superficies siguen el tema (coherencia en dark) ---------------------- */
.card{background:var(--card-bg);border-color:var(--border);--bs-card-border-radius:1rem;--bs-card-inner-border-radius:calc(1rem - 1px);}
.card-header{background:var(--hover);border-color:var(--border);}
/* Cabecera ámbar sutil + acento lateral para pedidos EN PROCESO (contarlos de un vistazo en Taller). */
.card-proceso>.card-header{background:rgba(217,119,6,.16);border-color:rgba(217,119,6,.28);}
.card-proceso{border-color:rgba(217,119,6,.28);border-left:3px solid rgba(217,119,6,.6);}
/* Rojo sutil para pedidos FUERA DE PLAZO (inicio de fabricación ya vencido). Tiene prioridad sobre el ámbar. */
.card-atrasado>.card-header{background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.30);}
.card-atrasado{border-color:rgba(220,38,38,.30);border-left:3px solid rgba(220,38,38,.7);}
/* En modo CLARO los tintes de baja opacidad se lavan sobre el blanco y el ámbar se confunde
   con el rojo: se refuerzan y se separan los matices (ámbar amarillento vs rojo intenso). */
[data-bs-theme="light"] .card-proceso>.card-header{background:rgba(245,158,11,.22);border-color:rgba(217,119,6,.45);}
[data-bs-theme="light"] .card-proceso{border-color:rgba(217,119,6,.35);border-left-color:rgba(217,119,6,.9);}
[data-bs-theme="light"] .card-atrasado>.card-header{background:rgba(239,68,68,.20);border-color:rgba(220,38,38,.5);}
[data-bs-theme="light"] .card-atrasado{border-color:rgba(220,38,38,.4);border-left-color:rgba(220,38,38,1);}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-hover-bg:var(--hover);--bs-table-hover-color:var(--text);--bs-table-border-color:var(--border);}
.table>:not(caption)>*>*{padding:.7rem .9rem;}
.form-control::placeholder{color:#9aa4b6;}

/* --- Badges suaves (estado/categoria) ------------------------------------- */
.badge-soft-primary{background:rgba(37,99,235,.13);color:#2563eb;}
.badge-soft-success{background:rgba(22,163,74,.14);color:#16a34a;}
.badge-soft-warning{background:rgba(217,119,6,.14);color:#b45309;}
.badge-soft-danger{background:rgba(220,38,38,.13);color:#dc2626;}
.badge-soft-secondary{background:rgba(100,116,139,.14);color:#64748b;}
.badge-soft-rose{background:rgba(225,29,72,.13);color:#e11d48;}
[data-bs-theme="dark"] .badge-soft-warning{color:#fbbf24;}
[data-bs-theme="dark"] .badge-soft-secondary{color:#94a3b8;}

/* Badges de color solido -> look "soft" uniforme (handoff): estados y contadores.
   Acotado a .badge (no toca fondos .bg-light/.bg-white de tarjetas). Requiere
   !important porque las utilidades .bg-* de Bootstrap lo llevan. info -> azul marca. */
.badge.bg-primary,.badge.text-bg-primary,.badge.bg-info,.badge.text-bg-info{background-color:rgba(37,99,235,.13)!important;color:#2563eb!important;}
.badge.bg-success,.badge.text-bg-success{background-color:rgba(22,163,74,.14)!important;color:#16a34a!important;}
.badge.bg-warning,.badge.text-bg-warning{background-color:rgba(217,119,6,.14)!important;color:#b45309!important;}
.badge.bg-danger,.badge.text-bg-danger{background-color:rgba(220,38,38,.13)!important;color:#dc2626!important;}
.badge.bg-secondary,.badge.text-bg-secondary,.badge.bg-dark{background-color:rgba(100,116,139,.14)!important;color:#64748b!important;}
[data-bs-theme="dark"] .badge.bg-warning,[data-bs-theme="dark"] .badge.text-bg-warning{color:#fbbf24!important;}
[data-bs-theme="dark"] .badge.bg-secondary,[data-bs-theme="dark"] .badge.text-bg-secondary,[data-bs-theme="dark"] .badge.bg-dark{color:#94a3b8!important;}
/* Chip de fecha oscuro (estilo handoff). */
.badge-fecha{background:var(--navy)!important;color:#e7ecf7!important;}
/* Badge de plazo vencido: rojo SÓLIDO con texto blanco (legible sobre la cabecera roja,
   en claro y oscuro). No usar .bg-danger aquí porque el tema lo suaviza a rojo-sobre-rojo. */
.badge-vencido{background:#dc2626!important;color:#fff!important;border:0;}
/* Fila destacada "Cierre neto en caja": azul MUY tenue + borde superior de marca. */
.cierre-neto td{background:rgba(37,99,235,.06)!important;border-top:2px solid rgba(37,99,235,.25)!important;}

/* --- Botones de accion "soft" (iconos en tablas) -------------------------- */
.btn-soft-primary{background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.28);color:#2563eb;}
.btn-soft-primary:hover{background:rgba(37,99,235,.18);color:#1d4ed8;}
.btn-soft-success{background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.28);color:#16a34a;}
.btn-soft-success:hover{background:rgba(22,163,74,.2);color:#15803d;}
.btn-soft-warning{background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.28);color:#b45309;}
.btn-soft-warning:hover{background:rgba(217,119,6,.18);color:#92400e;}
.btn-soft-danger{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.26);color:#dc2626;}
.btn-soft-danger:hover{background:rgba(220,38,38,.18);color:#b91c1c;}
/* Acción de etapa (Cortar, Tomar diseño…): solo fija el ancho para que todos midan igual;
   el color lo pone la clase soft (verde=terminar, azul=tomar), suave para no chocar con
   los botones sólidos de "Ver pedido"/"Iniciar pedido". */
.btn-etapa{min-width:8rem;white-space:nowrap;}
/* Cursor de mano en los botones (Bootstrap 5 no lo pone por defecto en <button>). */
.btn:not(:disabled):not(.disabled){cursor:pointer;}
.btn-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;}

/* Botones de accion DENTRO de celdas de tabla -> look "soft" uniforme en todos
   los listados (handoff). Acotado a .table td/th para no tocar botones de
   formularios. Usa las vars de Bootstrap (hover/active correctos) y fuerza el
   color aunque el boton traiga .text-white. */
.table td .btn.btn-sm.btn-warning,.table td .btn.btn-sm.btn-outline-warning,.table th .btn.btn-sm.btn-warning{--bs-btn-bg:rgba(217,119,6,.1);--bs-btn-border-color:rgba(217,119,6,.28);--bs-btn-color:#b45309;--bs-btn-hover-bg:rgba(217,119,6,.18);--bs-btn-hover-border-color:rgba(217,119,6,.4);--bs-btn-hover-color:#92400e;--bs-btn-active-bg:rgba(217,119,6,.22);--bs-btn-active-border-color:rgba(217,119,6,.4);--bs-btn-active-color:#92400e;color:#b45309!important;}
.table td .btn.btn-sm.btn-danger,.table td .btn.btn-sm.btn-outline-danger,.table th .btn.btn-sm.btn-danger,.table th .btn.btn-sm.btn-outline-danger{--bs-btn-bg:rgba(220,38,38,.1);--bs-btn-border-color:rgba(220,38,38,.26);--bs-btn-color:#dc2626;--bs-btn-hover-bg:rgba(220,38,38,.18);--bs-btn-hover-border-color:rgba(220,38,38,.4);--bs-btn-hover-color:#b91c1c;--bs-btn-active-bg:rgba(220,38,38,.22);--bs-btn-active-border-color:rgba(220,38,38,.4);--bs-btn-active-color:#b91c1c;color:#dc2626!important;}
.table td .btn.btn-sm.btn-info,.table td .btn.btn-sm.btn-primary,.table td .btn.btn-sm.btn-outline-info,.table td .btn.btn-sm.btn-outline-primary,.table th .btn.btn-sm.btn-info,.table th .btn.btn-sm.btn-primary{--bs-btn-bg:rgba(37,99,235,.1);--bs-btn-border-color:rgba(37,99,235,.28);--bs-btn-color:#2563eb;--bs-btn-hover-bg:rgba(37,99,235,.18);--bs-btn-hover-border-color:rgba(37,99,235,.4);--bs-btn-hover-color:#1d4ed8;--bs-btn-active-bg:rgba(37,99,235,.22);--bs-btn-active-border-color:rgba(37,99,235,.4);--bs-btn-active-color:#1d4ed8;color:#2563eb!important;}
.table td .btn.btn-sm.btn-success,.table td .btn.btn-sm.btn-outline-success{--bs-btn-bg:rgba(22,163,74,.12);--bs-btn-border-color:rgba(22,163,74,.28);--bs-btn-color:#16a34a;--bs-btn-hover-bg:rgba(22,163,74,.2);--bs-btn-hover-border-color:rgba(22,163,74,.4);--bs-btn-hover-color:#15803d;--bs-btn-active-bg:rgba(22,163,74,.24);--bs-btn-active-color:#15803d;color:#16a34a!important;}
[data-bs-theme="dark"] .table td .btn.btn-sm.btn-warning,[data-bs-theme="dark"] .table th .btn.btn-sm.btn-warning{--bs-btn-color:#fbbf24;color:#fbbf24!important;}

/* --- Helpers de dashboard / calendario / "quien atiende" ------------------ */
.kpi-ico{width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.kpi-val{font-size:1.5rem;font-weight:800;white-space:nowrap;letter-spacing:-.02em;line-height:1.15;}
.cal-cell{min-height:118px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem;}
.cal-chip{background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;padding:.28rem .5rem;border-radius:.4rem;display:flex;align-items:center;justify-content:space-between;gap:.3rem;margin-bottom:.25rem;}
.attend-card{border:2px solid var(--border);border-radius:.75rem;background:var(--card-bg);cursor:pointer;transition:.15s;position:relative;}
.attend-card:hover:not(.sel):not(.selected){border-color:rgba(37,99,235,.4);}
.attend-card.sel,.attend-card.selected{border-color:var(--brand);background:rgba(37,99,235,.07);box-shadow:0 4px 14px rgba(37,99,235,.16);}
.attend-av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#e5e7eb;color:#6b7280;margin:0 auto .5rem;}
.attend-card.sel .attend-av,.attend-card.selected .attend-av{background:rgba(37,99,235,.16);color:var(--brand);}
.soft-shadow{box-shadow:0 1px 2px rgba(16,24,40,.05);}

/* --- Stepper de wizard (círculos numerados + línea conectora + subtítulos) --- */
.wizard-stepper{display:flex;align-items:flex-start;}
.wizard-step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;cursor:pointer;padding:0 .4rem;}
.wizard-step:not(:first-child)::before{content:"";position:absolute;top:17px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--border);}
.wizard-step.active::before,.wizard-step.done::before{background:var(--brand);}
.wizard-step .ws-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;background:var(--border);color:var(--muted);border:2px solid var(--border);z-index:1;transition:.15s;}
.wizard-step.active .ws-dot{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.15);}
.wizard-step.done .ws-dot{background:var(--brand);color:#fff;border-color:var(--brand);}
.wizard-step .ws-title{font-weight:600;font-size:.9rem;color:var(--text);margin-top:.4rem;line-height:1.2;}
.wizard-step:not(.active):not(.done) .ws-title{color:var(--muted);}
.wizard-step .ws-sub{font-size:.74rem;color:var(--muted);}

/* --- Tipografia / jerarquia consistente ----------------------------------- */
main h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;}
main h1 .fas,main h1 .far,main h1 .fab,main h1 .bi{font-size:1.35rem;vertical-align:-2px;}
main .card-header{font-weight:700;}
main .table thead th{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--border);}
/* Homogeneiza TODAS las cabeceras al estilo Clientes: sin banda de color, opacas
   (sirve para thead sticky) y coherentes en claro/oscuro. Neutraliza las variantes
   table-light/secondary y bg-* aplicadas al thead en ~40 vistas, sin editarlas. */
main .table > thead{--bs-table-bg:var(--card-bg)!important;--bs-table-accent-bg:transparent!important;}
main .table > thead > tr > th{background-color:var(--card-bg)!important;}
.form-label{margin-bottom:.35rem;font-weight:500;}

/* --- Header superior ------------------------------------------------------- */
.navbar.bg-body-tertiary{background:var(--card-bg)!important;border-bottom:1px solid var(--border)!important;}
.navbar-brand{color:var(--text)!important;}
.navbar-brand .fa-boxes{color:var(--brand);}

/* --- Notificaciones (campana + panel desplegable + banda) ----------------- */
.notif-menu{width:360px;max-width:92vw;}
.notif-list{max-height:min(62vh,460px);overflow-y:auto;}
.notif-item:last-child{border-bottom:0!important;}
.notif-item:hover{background:var(--hover);}
/* El contador de la campana destaca en rojo sólido (no soft, para que se vea). */
#notifCount{background-color:#dc2626!important;color:#fff!important;font-size:.62rem;}
/* Repique periódico (~cada 4s) cuando hay mensajes sin leer: llama la atención. */
@keyframes bell-ring{
  0%{transform:rotate(0);}
  3%{transform:rotate(16deg);}
  6%{transform:rotate(-14deg);}
  9%{transform:rotate(10deg);}
  12%{transform:rotate(-8deg);}
  15%{transform:rotate(4deg);}
  18%,100%{transform:rotate(0);}
}
@keyframes notif-pulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.55);}
  60%{box-shadow:0 0 0 7px rgba(220,38,38,0);}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}
}
#notifBell.has-unread .fa-bell{transform-origin:top center;animation:bell-ring 4s ease-in-out infinite;}
#notifBell.has-unread #notifCount{animation:notif-pulse 4s ease-out infinite;}
@media (prefers-reduced-motion:reduce){
  #notifBell.has-unread .fa-bell,#notifBell.has-unread #notifCount{animation:none;}
}

/* --- Sidebar (firma navy, full-height con footer fijo) -------------------- */
/* Layout tipo plantilla: la lista de menús scrollea sola (.sidebar-scroll) y la
   zona de usuario (.sidebar-footer) queda FIJA abajo, sin entrar en el scroll. */
#sidebarMenu{background:var(--navy)!important;border-right:0!important;width:240px;min-width:240px;}
#sidebarMenu .sidebar-scroll{min-height:0;}            /* permite que overflow-auto funcione en flexbox */
#sidebarMenu .sidebar-footer{background:var(--navy);border-color:rgba(255,255,255,.12)!important;}
/* En móvil el sidebar es un cajón superpuesto (overlay) sobre el contenido. */
@media (max-width:767.98px){
  #sidebarMenu{position:absolute;top:0;bottom:0;left:0;z-index:1035;width:260px;box-shadow:0 0 30px rgba(0,0,0,.35);}
  #sidebarMenu.show{display:flex!important;}   /* al abrir el cajón: columna flex (scroll+footer fijo) */
}
/* Ítems de menú: color legible SIEMPRE (gana a .link-body-emphasis con !important). */
#sidebarMenu .nav-link{color:#c7d2e8!important;border-radius:.55rem;padding:.5rem .7rem;font-weight:500;display:flex;align-items:center;}
#sidebarMenu .nav-link:hover:not(.active){background:rgba(255,255,255,.07);color:#fff!important;}
#sidebarMenu .nav-link.active,#sidebarMenu .nav-link.active.text-primary{background:var(--brand)!important;color:#fff!important;font-weight:700;}
#sidebarMenu .btn-toggle-nav .nav-link{padding:.4rem .7rem;font-size:.86rem;}
/* Cabeceras de grupo (botones colapsables) */
#sidebarMenu .btn-toggle{color:#8ea0c4!important;font-size:.7rem;letter-spacing:.06em;}
#sidebarMenu .btn-toggle:hover{color:#fff!important;background:rgba(255,255,255,.05);}
#sidebarMenu .btn-toggle.text-primary,#sidebarMenu .btn-toggle.fw-bold{color:#e7ecf7!important;}
/* Textos varios del sidebar (usuario, etiquetas) sobre navy */
#sidebarMenu .text-body,#sidebarMenu strong,#sidebarMenu .text-body-secondary{color:#e7ecf7!important;}
#sidebarMenu .text-muted,#sidebarMenu small{color:#8ea0c4!important;}
#sidebarMenu .fa-user-circle{color:#c7d2e8;}
#sidebarMenu hr{border-color:rgba(255,255,255,.12)!important;opacity:1;}
#sidebarMenu #themeToggle{border-color:rgba(255,255,255,.16)!important;color:#c7d2e8!important;}
#sidebarMenu #themeToggle:hover{background:rgba(255,255,255,.08)!important;}
/* La barra de scroll del sidebar, discreta sobre navy */
#sidebarMenu .sidebar-scroll::-webkit-scrollbar{width:8px;}
#sidebarMenu .sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:8px;}

/* --- Scrollbar general ----------------------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#c9d0dd;border-radius:8px;border:2px solid transparent;background-clip:content-box;}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{background:#475569;background-clip:content-box;}

/* --- Utilidad: ocultar flechas nativas de inputs number (cantidad/precio) --- */
.no-spinners::-webkit-outer-spin-button,.no-spinners::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.no-spinners{-moz-appearance:textfield;}