/* =====================================================================
   DS Industria Plástica — Producción + Personal y Pagos (diseño unificado)
   SOLO ESTILOS. Mismos colores que Ventas (versión nueva) y el sistema nuevo.
   Si este archivo no carga, las pantallas funcionan igual que siempre.
   ===================================================================== */
:root{
  --ds-red:#d4141c; --ds-red-700:#ad1016; --ds-red-500:#e5262d; --ds-red-100:#ffdcdc; --ds-red-50:#fff1f1;
  --ds-ink:#141414; --ds-ink-2:#1f1f1f; --ds-ink-3:#2a2a2a;
  --primary:#141414; --primary-dark:#000; --primary-light:#2a2a2a;
  --primary-pale:#f5f5f4; --primary-xpale:#fafaf9; --primary-border:#e7e5e4;
  --bg:#f5f5f4; --bg-white:#fff; --card:#fff;
  --sidebar-bg:#141414; --sidebar-hover:#1f1f1f; --sidebar-active:rgba(255,255,255,.09);
  --border:#e7e5e4; --border-mid:#d6d3d1;
  --text-900:#0c0a09; --text-700:#292524; --text-500:#57534e; --text-400:#a8a29e; --text-300:#d6d3d1;
  --green:#16a34a; --green-pale:#dcfce7; --green-border:#bbf7d0;
  --yellow:#d97706; --yellow-pale:#fef3c7; --yellow-border:#fde68a;
  --blue:#2563eb; --blue-pale:#dbeafe; --blue-border:#bfdbfe;
  --red:#d4141c; --red-pale:#fff1f1; --red-border:#ffdcdc;
  --orange:#ea580c; --orange-pale:#ffedd5; --orange-border:#fed7aa;
  --purple:#7c3aed; --purple-pale:#ede9fe; --purple-border:#ddd6fe;
  --r:12px; --r-lg:16px; --r-xl:20px;
  --shadow-xs:0 1px 2px rgba(12,10,9,.05);
  --shadow-sm:0 1px 2px rgba(12,10,9,.06);
  --shadow:0 6px 18px -8px rgba(12,10,9,.18);
  --shadow-lg:0 18px 40px -14px rgba(12,10,9,.28);
}
html body{ background:var(--bg); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:14.5px; color:var(--text-900); }
::selection{ background:var(--ds-red-100); }
::-webkit-scrollbar-thumb:hover{ background:var(--ds-red); }

/* ---------- Menú lateral unificado ---------- */
.sidebar{ background:var(--ds-ink) !important; border-right:0 !important; }
.sidebar-logo{ padding:18px 18px 14px !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }
.sidebar-logo.dsu-con-logo > *:not(.dsu-logo-w){ display:none !important; }
.dsu-logo-w{ display:flex; flex-direction:column; gap:6px; }
.dsu-logo{ height:44px; width:auto; display:block; }
.dsu-app{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a8a8a; }
.nav-wrap{ padding:8px 10px 0 !important; }
.dsu-grp{ margin-bottom:6px; }
.dsu-grp-t{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; cursor:pointer;
  color:#8a8a8a; font:700 10.5px/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:14px 8px 6px; }
.dsu-grp-t .dsu-flecha{ margin-left:auto; transition:transform .2s; font-size:10px; }
.dsu-grp.cerrado .dsu-flecha{ transform:rotate(-90deg); }
.dsu-grp.cerrado .dsu-items{ display:none; }
.dsu-grp.actual .dsu-grp-t{ color:#fca5a5; }
.nav-label{ color:#737373 !important; font-size:10.5px !important; letter-spacing:.12em !important; }
.nav-a{ position:relative; color:#d4d4d4 !important; border-left:0 !important; border-radius:12px !important;
  padding:9px 12px !important; font-size:14px !important; margin-bottom:2px !important; }
.nav-a:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }
.nav-a.on{ background:rgba(255,255,255,.09) !important; color:#fff !important; border-left:0 !important; font-weight:600; }
.nav-a.on::before{ content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--ds-red); }
.nav-a .ni{ opacity:.95; }
.nav-a.dsu-externo::after{ content:'↗'; margin-left:auto; font-size:11px; color:#737373; }
#notifBadge{ background:var(--ds-red) !important; }
.sidebar-foot{ border-top:1px solid rgba(255,255,255,.07) !important; }
.user-pill{ background:rgba(255,255,255,.05) !important; border-radius:14px !important; border:0 !important; }
.user-pill .av{ background:var(--ds-red) !important; border:0 !important; color:#fff !important; font-weight:700; }
.user-pill .un{ color:#fff !important; }
.user-pill .ur{ color:#a3a3a3 !important; }
.btn-out{ color:#a3a3a3 !important; }
.btn-out:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
.btn-llamar-sidebar{ background:rgba(255,255,255,.06) !important; color:#e5e5e5 !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:12px !important; }
.btn-llamar-sidebar:hover{ background:rgba(212,20,28,.22) !important; color:#fff !important; }
.sidebar-overlay.show{ background:rgba(12,10,9,.45) !important; backdrop-filter:blur(2px); }

/* ---------- Barra superior ---------- */
.topbar{ background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border) !important; box-shadow:none !important; }
.topbar-title{ font-family:'Inter',sans-serif !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--text-900) !important; }
.topbar-sub{ color:var(--text-500) !important; }
.date-chip{ background:#fff !important; border:1px solid var(--border) !important; border-radius:999px !important; color:var(--text-700) !important; }
.hamburger{ border-radius:12px !important; border:1px solid var(--border) !important; background:#fff !important; color:var(--text-900) !important; }
.noti-bell{ border-radius:12px !important; }
.noti-badge{ background:var(--ds-red) !important; }

/* ---------- Página ---------- */
.ph h1{ font-family:'Inter',sans-serif !important; font-weight:800 !important; letter-spacing:-.02em; color:var(--text-900) !important; }
.ph p{ color:var(--text-500) !important; }
.card,.sc,.maq-card,.ext-item{ border:1px solid var(--border) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow-xs) !important; background:#fff; }
.sc:hover,.maq-card:hover{ box-shadow:var(--shadow) !important; transform:none !important; }
.ch{ border-bottom:1px solid var(--border) !important; }
.ch h3{ font-family:'Inter',sans-serif !important; font-weight:700 !important; color:var(--text-900) !important; }
.sc-val{ font-family:'Inter',sans-serif !important; font-weight:800 !important; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text-900) !important; }
.sc-lbl{ color:var(--text-500) !important; font-weight:600 !important; }
.sc-ico,.ch-ico{ border-radius:12px !important; }
.sci-p,.ich-p{ background:var(--ds-red-50) !important; color:var(--ds-red) !important; }

/* Tablas */
table{ font-variant-numeric:tabular-nums; }
thead th{ background:#fafaf9 !important; color:var(--text-500) !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase; border-bottom:1px solid var(--border) !important; }
tbody td{ border-bottom:1px solid #f0efee !important; }
tbody tr:hover{ background:#fafaf9 !important; }

/* Botones */
.btn{ border-radius:12px !important; font-weight:600 !important; box-shadow:none !important; }
.btn-p{ background:var(--ds-red) !important; border-color:var(--ds-red) !important; color:#fff !important; }
.btn-p:hover{ background:var(--ds-red-700) !important; }
.btn-s{ background:#fff !important; border:1px solid var(--border-mid) !important; color:var(--text-900) !important; }
.btn-s:hover{ background:#fafaf9 !important; border-color:#a8a29e !important; }
.btn-g{ background:var(--green) !important; border-color:var(--green) !important; }
.btn-r{ background:#fff !important; color:var(--ds-red) !important; border:1px solid var(--ds-red-100) !important; }
.btn-r:hover{ background:var(--ds-red-50) !important; }

/* Formularios */
.fi,.search-bar input{ border:1px solid var(--border-mid) !important; border-radius:12px !important; background:#fff !important; }
.fi:focus,.search-bar input:focus{ border-color:var(--ds-red) !important; box-shadow:0 0 0 4px rgba(212,20,28,.12) !important; outline:0 !important; }
.fg label{ color:var(--text-700) !important; font-weight:600 !important; }
.chip{ border-radius:999px !important; }
.chip.on{ background:var(--ds-ink) !important; border-color:var(--ds-ink) !important; color:#fff !important; }
.turno-btn.active,.t-tab.active{ box-shadow:0 0 0 2px var(--ds-ink) inset !important; }

/* Etiquetas */
.badge{ border-radius:999px !important; font-weight:700 !important; }
.badge-primary{ background:var(--ds-ink) !important; color:#fff !important; }

/* Ventanas */
.overlay.open,.nom-overlay.show{ background:rgba(12,10,9,.45) !important; backdrop-filter:blur(3px); }
.modal,.nom-modal{ border-radius:20px !important; border:0 !important; box-shadow:var(--shadow-lg) !important; }
.modal::before,.nom-modal::before{ background:var(--ds-red) !important; }
.mh h2{ font-family:'Inter',sans-serif !important; font-weight:800 !important; }

/* Avisos */
.toast-item{ border-radius:14px !important; box-shadow:var(--shadow-lg) !important; }

/* Ingreso */
.dsu-login .lw,.dsu-login body{ background:var(--bg) !important; }
.dsu-login .lc{ border-radius:20px !important; border:1px solid var(--border) !important; box-shadow:var(--shadow) !important; }
.dsu-login .btn-login,.dsu-login #btnLogin{ background:var(--ds-red) !important; border-color:var(--ds-red) !important; border-radius:12px !important; }
.dsu-login .ll-ico{ background:none !important; box-shadow:none !important; border:0 !important; width:auto !important; }
.dsu-login .ll-ico img.dsu-logo{ height:64px; width:auto; }

/* Botón viejo "Volver" (se reemplaza por el menú) */
#btnCentral{ display:none !important; }

@media (max-width:1200px){
  .sidebar{ box-shadow:var(--shadow-lg); }
}
@media (max-width:600px){
  .page{ padding:14px 12px !important; }
  .ph h1{ font-size:20px !important; }
  .topbar{ padding:0 12px !important; }
  .date-chip{ display:none !important; }
}

/* Estado de la caseta de fichaje */
.dsu-caseta{ display:inline-flex; align-items:center; gap:6px; margin-right:10px; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dsu-caseta.bien{ background:#dcfce7; color:#166534; }
.dsu-caseta.mal{ background:var(--ds-red); color:#fff; animation:dsuLatido 1.6s ease-in-out infinite; }
@keyframes dsuLatido{ 50%{ box-shadow:0 0 0 6px rgba(212,20,28,.18); } }
@media (max-width:600px){ .dsu-caseta{ font-size:11px; padding:6px 9px; margin-right:6px; } }

/* Aviso de claves de fábrica */
.dsu-aviso-claves{ position:relative; background:#fff1f1; border:1px solid #ffdcdc; border-left:4px solid var(--ds-red); color:#7f1d1d; border-radius:14px; padding:12px 16px 12px 16px; margin-bottom:16px; font-size:13px; line-height:1.55; }
.dsu-aviso-claves ul{ margin:6px 0 6px 18px; }
.dsu-aviso-claves .dsu-nota{ color:#991b1b; font-size:12px; }
.dsu-aviso-claves button{ position:absolute; top:10px; right:12px; background:#fff; border:1px solid #fecaca; color:#991b1b; border-radius:10px; padding:4px 10px; font-weight:700; cursor:pointer; font-size:12px; }

/* Dentro del sistema principal (una sola pantalla) */
.dsu-embebido .sidebar,.dsu-embebido .sidebar-overlay,.dsu-embebido .hamburger,.dsu-embebido #btnCentral,.dsu-embebido #btnVolver{ display:none !important; }
.dsu-embebido .wrap{ margin-left:0 !important; width:100% !important; }
.dsu-embebido .topbar{ left:0 !important; position:sticky !important; top:0; }

.dsu-seg{ margin-right:10px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; cursor:pointer; color:var(--text-900); }
.dsu-seg:hover{ border-color:var(--ds-red); color:var(--ds-red); }

/* Aviso de claves compacto */
.dsu-aviso-claves{ padding:10px 14px !important; }
.dsu-ac-linea{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dsu-aviso-claves .dsu-ac-linea button{ position:static !important; }
.dsu-ac-det ul{ margin:8px 0 6px 18px; }
/* Dentro del sistema principal: sin título repetido (el título lo muestra la barra principal) */
.dsu-embebido .topbar > div:not(.topbar-right),.dsu-embebido .topbar .date-chip{ display:none !important; }
.dsu-embebido .topbar{ min-height:0 !important; height:auto !important; padding:8px 18px !important; justify-content:flex-end !important; }
.dsu-embebido.dsu-produccion .topbar{ display:none !important; }

/* ---------- Coherencia visual ---------- */
/* Montos y números con la misma letra en todo el sistema (antes: letra de máquina de escribir) */
html.dsu:not(.dsu-fichaje) [style*="monospace"], html.dsu .sc-val, html.dsu .money, html.dsu .total-box .val, html.dsu .tv{ font-family:'Inter',system-ui,sans-serif !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* Íconos de las tarjetas: sobrios y del mismo tono */
html.dsu .sc-ico, html.dsu .ch-ico{ filter:grayscale(1) contrast(1.05); background:#f5f5f4 !important; }
/* Un solo botón principal (rojo); los de colores pasan a ser secundarios */
html.dsu .btn-b, html.dsu .btn-y{ background:#fff !important; color:var(--text-900) !important; border:1px solid var(--border-mid) !important; }
html.dsu .btn-b:hover, html.dsu .btn-y:hover{ background:#fafaf9 !important; }
html.dsu .dsu-rot{ margin-left:6px; font-size:11.5px; font-weight:700; }
html.dsu .dsu-suave{ background:#fff !important; color:var(--ds-red) !important; border:1px solid var(--ds-red-100) !important; box-shadow:none !important; }
html.dsu .dsu-suave:hover{ background:var(--ds-red-50) !important; }
/* Menú "⋯" de acciones */
.dsu-mas{ font-weight:900 !important; letter-spacing:.05em; }
.dsu-menu{ display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:230px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; }
.dsu-menu.open{ display:block; }
.dsu-menu .dsu-menu-item{ display:flex !important; align-items:center; gap:10px; width:100%; text-align:left; background:none !important; border:0 !important; box-shadow:none !important; padding:8px 10px !important; border-radius:10px !important; font-size:13px !important; font-weight:600 !important; color:var(--text-900) !important; }
.dsu-menu .dsu-menu-item:hover{ background:#f5f5f4 !important; }
.dsu-menu .dsu-menu-item.btn-err, .dsu-menu .dsu-menu-item.btn-r{ color:var(--ds-red) !important; }
.dsu-menu .dsu-menu-item .i{ width:18px; text-align:center; filter:grayscale(1); }
/* ---------- Legibilidad (recorrido de colores) ---------- */
:root{ --text-400:#6b6560; --text-300:#78716c; }
html.dsu .total-box{ background:linear-gradient(135deg,#0c0a09,#292524) !important; color:#fff !important; border:0 !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow) !important; }
/* Botones Día/Noche: sobre barra oscura van en blanco; sobre fondo claro, en gris oscuro */
html.dsu .turno-btn{ font-weight:700; }
html.dsu div[style*="var(--bg)"] > .turno-btn:not(.active){ color:var(--text-500) !important; background:transparent !important; border-color:transparent !important; }
html.dsu div[style*="var(--bg)"] > .turno-btn.active{ background:#fff !important; color:var(--text-900) !important; border-color:var(--border) !important; box-shadow:var(--shadow-xs) !important; }
html.dsu [style*="color:#ffc107" i],html.dsu [style*="color: #ffc107" i],html.dsu [style*="color:#f39c12" i],html.dsu [style*="color: #f39c12" i]{ color:#b45309 !important; }
html.dsu [style*="color:#aaa" i],html.dsu [style*="color: #aaa" i],html.dsu [style*="color:#bbb" i],html.dsu [style*="color: #bbb" i],html.dsu [style*="color:#ccc" i],html.dsu [style*="color: #ccc" i]{ color:#78716c !important; }
/* Campos dentro de barras oscuras (ej.: fecha en Orden de corte) */
html.dsu .fi[style*="color:#fff"]{ background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.25) !important; color-scheme:dark; }
/* Botón secundario "Cargar sin orden": claro y legible */
html.dsu .btn-g[style*="opacity:.8"]{ opacity:1 !important; background:#fff !important; color:#15803d !important; border:1px solid #bbf7d0 !important; }
/* Gráfico de torta de Nómina: tamaño razonable */
html.dsu .cb:has(> #chartFormas){ max-width:320px; margin:0 auto; }
/* Pestañas de Liquidaciones con los colores del sistema (antes azul) */
html.dsu .liq-tab.on{ background:var(--ds-ink) !important; color:#fff !important; border-color:var(--ds-ink) !important; }
/* Números de tablas con la misma letra que el resto (antes de máquina de escribir) */
html.dsu:not(.dsu-fichaje) td{ font-family:'Inter',system-ui,sans-serif !important; font-variant-numeric:tabular-nums; }
/* Botones de filas de filtros: tamaño natural, no estirados */
html.dsu .fr:has(> .btn){ display:flex !important; flex-wrap:wrap; gap:10px; align-items:flex-end; }
html.dsu .fr > .btn{ flex:0 0 auto !important; width:auto !important; }

/* Recorrido 2: verdes, insignias "libre" y selector Día/Noche de Empleados */
html.dsu .btn-g{ background:#15803d !important; border-color:#15803d !important; }
html.dsu .mc-badge.libre, html.dsu .st-libre{ color:#44403c !important; }
html.dsu .op-avatar{ text-shadow:0 1px 2px rgba(0,0,0,.45); font-weight:800; }
html.dsu .turno-sel:has(> .t-tab){ display:inline-flex !important; background:#fff !important; border:1px solid #e7e5e4; border-radius:999px !important; padding:4px !important; gap:4px !important; }
html.dsu .turno-sel > .t-tab{ border:0 !important; background:transparent !important; color:#57534e !important; box-shadow:none !important; padding:8px 18px !important; }
html.dsu .turno-sel > .t-tab.active{ background:#0c0a09 !important; color:#fff !important; }
html.dsu{ --green:#15803d; --orange:#c2410c; }
html.dsu [style*="color:#d97706" i]:not([style*="background:#d97706" i]), html.dsu [style*="color: #d97706" i]{ color:#b45309 !important; }
html.dsu [style*="color:#16a34a" i]:not([style*="background:#16a34a" i]), html.dsu [style*="color: #16a34a" i]{ color:#15803d !important; }
html.dsu [style*="color:#22c55e" i], html.dsu [style*="color:#10b981" i]{ color:#15803d !important; }
html.dsu [style*="color:#f59e0b" i], html.dsu [style*="color:#ea580c" i]{ color:#c2410c !important; }
html.dsu [style*="color:var(--yellow)"]{ color:#b45309 !important; }
html.dsu .sc-sub[style*="217, 119, 6"]{ color:#b45309 !important; }
html.dsu .sc-sub[style*="22, 163, 74"]{ color:#15803d !important; }
html.dsu .cb:has(> #chartTurnos){ max-width:520px; margin:0 auto; }