/* ===== Reset & Tokens ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --black:#0a0a0a; --gray-dark:#1a1a1a; --gray-mid:#2a2a2a; --gray-light:#3a3a3a;
  --txt:#ffffff; --muted:#cbd5e1;

  --po:#f59e0b; --ok:#22c55e; --info:#475569; --warning:#f59e0b;
  --danger:#dc2626; --danger-alt:#b91c1c; --outline:#3a3a3a;

  --chip:#14b8a6; --chip-on:#fde047;
  --chip-shadow: 0 0 0 8px #fde04733, 0 8px 22px #fde04766;

  --rd-lg:1rem; --rd-md:.75rem; --rd-sm:.5rem;
  --sh-1:0 6px 18px #00000080; --sh-2:0 8px 24px #000000aa;
}
html,body{ height:100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background:
    linear-gradient(135deg, var(--gray-dark) 25%, var(--black) 25%, var(--black) 50%, var(--gray-dark) 50%, var(--gray-dark) 75%, var(--black) 75%, var(--black)) 0 0/40px 40px,
    linear-gradient(45deg, var(--gray-light) 25%, transparent 25%) 0 0/40px 40px,
    var(--black);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ===== Topbar Branding ===== */
.topbar{ position: sticky; top: 0; z-index: 10; background: #111111cc; border-bottom: 1px solid #333; }
.brand{ display:flex; align-items:center; gap:.75rem; padding:.5rem 1rem; }
.brand__logo{ height:34px; width:auto; border-radius:.5rem; box-shadow: 0 2px 8px #000000aa; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__text strong{ color:#fff; }
.brand__text span{ font-size:.8rem; opacity:.8; color:#ccc; }

/* ===== Layout 2 columnas ===== */
.layout-2{
  flex:1;
  display:grid;
  grid-template-columns: 420px minmax(0,1fr);
  gap:1rem;
  padding:1rem;
}
@media (max-width:1200px){
  .layout-2{ grid-template-columns: 1fr; }
}

/* ===== Sidebar izquierda ===== */
.sidebar-left{
  background:#101010cc;
  border-radius: var(--rd-lg);
  padding: .6rem .8rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.sidebar-left details{ background:#111111cc; border-radius: var(--rd-md); padding:.5rem 1rem; }
summary{ font-weight:900; cursor:pointer; padding:.6rem 0; color:#fff; }
summary::before{ content:"▾ "; color:var(--ok); }

.bloque-info{ padding:.5rem 0 .25rem; }
.muted{ color:var(--muted); font-size:.9rem; }

/* ===== Formularios base ===== */
.form{ display:flex; flex-direction:column; gap:.75rem; margin-top:.5rem; }
label{ font-size:.92rem; }
input, select{
  padding:.6rem .8rem; border-radius:.75rem; border:1px solid #333; background:#222; color:#fff; outline:none;
}
input::placeholder{ color:#777; }
.ayuda{ font-size:.78rem; opacity:.75; }

/* ===== Main Center ===== */
.main-center{ display:flex; flex-direction:column; gap:1rem; }
.acciones-centrales .btn{ width:100%; }

/* Cartas y Estado */
.card{ background: #1f1f1f; border-radius: var(--rd-lg); padding:1rem; box-shadow: var(--sh-1); }
.estado-maquina{ text-align:center; }
.estado-maquina h1{ font-size:2rem; margin-bottom:.4rem; }
.estado-maquina p{ font-size:.95rem; opacity:.9; }

/* Botón P.O. */
.btn{
  padding:1rem; border:none; border-radius:1rem; font-weight:800; cursor:pointer;
  transition: transform .15s, opacity .15s, box-shadow .15s; font-size:1rem; box-shadow:var(--sh-1); color:#111;
}
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); opacity:.95; }
.btn-po{ background:var(--po); }

/* ===== Hero del Operario ===== */
.operario-hero{
  position: relative;
  border-radius: var(--rd-lg);
  min-height: 220px;
  background: #202020 center/cover no-repeat;
  box-shadow: var(--sh-1);
  overflow: hidden;
  background-image: url('img/operarios/default.jpg'); /* fallback */
}
.operario-hero__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, #00000055, #00000099); }
.operario-hero__content{
  position: relative; z-index: 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; height:100%; padding:1rem; color:#fff; text-shadow: 0 2px 6px #0008;
}
.operario-hero__tag{
  display:inline-block; font-weight:900; letter-spacing:.5px;
  background:#00000066; border:1px solid #ffffff33; border-radius:999px;
  padding:.25rem .6rem; margin-bottom:.4rem;
}
.operario-hero h2{ font-size:1.6rem; line-height:1.1; }
.operario-hero__sub{ opacity:.9; margin-top:.25rem; }

/* ===== Mapeo de imágenes por operario ===== */
/* Cuando body[data-operario="XYZ"] esté seteado, cambiamos el fondo del hero */
[data-operario="002"] #operario-hero{
  background-image:url('https://https://producciondw.neocities.org/CONTADOR%20DIGITAL/053.jpeg');
}

/* ===== Reloj activo + Contador ===== */
.reloj h2{ font-size:1rem; margin-bottom:.4rem; text-align:center; }
.reloj p{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:1px; text-align:center; }
.reloj.activo p{ font-size:3rem; line-height:1; }
.reloj.contador p{ font-size:2rem; }

/* ===== Chips máquinas ===== */
.chips-wrap{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:.75rem; margin-top:.75rem; }
.chip-input{ position:absolute; left:-9999px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:110px; height:46px; padding:0 .75rem;
  border-radius:999px; background:#14b8a6; color:#000; font-weight:900;
  cursor:pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.chip:hover, .chip:focus-visible{ transform: translateY(-2px); box-shadow: var(--sh-2); outline: 2px solid #1fd8c9aa; outline-offset: 2px; }
.chip-input:checked + .chip{ background: var(--chip-on); color:#000; box-shadow: var(--chip-shadow); }

/* ===== Botones Herramientas ===== */
.acciones{ display:flex; flex-direction:column; gap:.6rem; margin-top:.5rem; }
.btn-accent{ background: var(--ok); color:#000; border:none; padding:.9rem; border-radius:.8rem; font-weight:900; box-shadow:var(--sh-1); }
.btn-danger{ background: var(--danger); color:#fff; border:none; padding:.9rem; border-radius:.8rem; font-weight:900; box-shadow:var(--sh-1); }
.btn-secundario{ background:#333; border:none; padding:.9rem; border-radius:.8rem; color:#fff; font-weight:800; }
.btn-outline{ background:transparent; color:#fff; border:2px solid var(--outline); padding:.85rem; border-radius:.8rem; font-weight:800; }
.btn-info{ background: var(--info); color:#fff; border:none; padding:.9rem; border-radius:.8rem; font-weight:800; }
.btn-warning{ background: var(--warning); color:#1a1200; border:none; padding:.9rem; border-radius:.8rem; font-weight:900; }
.btn-danger-alt{ background: var(--danger-alt); color:#fff; border:none; padding:.9rem; border-radius:.8rem; font-weight:900; }

/* ===== Tabla de pedidos ===== */
.tabla-wrapper{
  background:#121212; border:1px solid #2c2c2c; border-radius:.5rem;
  overflow:auto; max-height: 360px;
  box-shadow: inset 0 0 0 1px #00000066;
}
.tabla-pedidos{ width:100%; border-collapse: separate; border-spacing:0; min-width: 720px; }
.tabla-pedidos thead th{
  position: sticky; top: 0; z-index:1;
  background:#1e1e1e; color:#fff; text-align:left; font-size:.85rem; letter-spacing:.2px;
  padding:.6rem .8rem; border-bottom:1px solid #2c2c2c;
}
.tabla-pedidos tbody td{ padding:.55rem .8rem; border-bottom:1px solid #262626; font-size:.92rem; }
.tabla-pedidos tbody tr:nth-child(even){ background:#151515; }
.tabla-pedidos tbody tr:hover{ background:#1a1a1a; }
.tabla-pedidos th[data-col="opr"], .tabla-pedidos td:nth-child(1){ width:110px; font-family: ui-monospace, Consolas, monospace; }
.tabla-pedidos th[data-col="cant"], .tabla-pedidos td:nth-child(2){ width:110px; text-align:right; }
.tabla-pedidos th[data-col="desc"], .tabla-pedidos td:nth-child(3){ min-width:240px; max-width:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tabla-pedidos th[data-col="proc"], .tabla-pedidos td:nth-child(4){ width:110px; }
.tabla-pedidos th[data-col="pers"], .tabla-pedidos td:nth-child(5){ width:150px; }
.tabla-pedidos th[data-col="cuno"], .tabla-pedidos td:nth-child(6){ width:140px; font-family: ui-monospace, Consolas, monospace; }

/* ===== Footer ===== */
.footer{ text-align:center; padding:.6rem; font-size:.78rem; opacity:.7; color:#ccc; }