/* ══ ESTILO COMÚN ═══════════════════════════════════════════════════════
   Salió del <style> del optimizador el 2026-09-04, sin cambiarle una
   línea. Lo comparten todos los módulos: es lo que hace que /logistica se
   vea como la misma aplicación y no como un primo lejano.
   ═══════════════════════════════════════════════════════════════════════ */

  :root{
    --bg: #14181f;
    --bg-panel: #1c222c;
    --bg-card: #202836;
    --line: #2c3542;
    --line-soft: #232b37;
    --paper: #eef1e9;
    --paper-dim: #cfd6c9;
    --amber: #c98a3a;
    --amber-soft: #7a5a2e;
    --text: #e8ebe4;
    --text-dim: #8b93a1;
    --piece: #e7d9b8;
    --waste: #3a4353;
    --piece-edge: #b8935a;
    --ok: #7fae6f;
    --err: #c2604f;
  }
  *{box-sizing:border-box;}
  /* ── Que Android no le meta mano al tamaño de la letra ──────────────────
     Chrome y el WebView de Android tienen "font boosting": cuando creen que
     una página no está hecha para celular, inflan la letra por su cuenta.
     El resultado son títulos gigantes que se parten palabra por palabra y
     una columna que se ve mucho más angosta de lo que es. Con esto se les
     dice que la página ya está resuelta y que no la toquen.
     Y overflow-wrap para que una palabra larga (un SKU, un modelo con
     medidas pegadas) no obligue a la caja a ser más ancha que la pantalla. */
  html{
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body, .panel, .corte-card, .sub, h1, h2, h3, td, th, button{
    overflow-wrap:break-word;
    word-break:normal;
  }
  .wrap{min-width:0;}
  body{
    margin:0;
    background:
      linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0/28px 28px,
      var(--bg);
    color:var(--text);
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    padding: 32px 20px 80px;
  }
  .wrap{max-width:1040px;margin:0 auto;}
  header{margin-bottom:28px;}
  .eyebrow{
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--amber);margin-bottom:8px;
  }
  h1{font-size:26px;margin:0 0 6px;font-weight:600;letter-spacing:-0.01em;}
  .sub{color:var(--text-dim);font-size:14px;max-width:620px;line-height:1.5;}

  .tabnav{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:22px 0 24px;}
  .tabnav button{
    flex:1;background:var(--bg-panel);border:none;border-right:1px solid var(--line);
    color:var(--text-dim);font-family:inherit;font-size:13px;font-weight:600;
    padding:14px 10px;cursor:pointer;letter-spacing:.02em;
  }
  .tabnav button:last-child{border-right:none;}
  .tabnav button.active{background:var(--bg-card);color:var(--paper);}
  .tabnav button:hover:not(.active){color:var(--text);}
  .tab-page{display:none;}
  .tab-page.active{display:block;}

  .panel{
    background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;
    padding:22px;margin-bottom:20px;
  }
  .panel h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 16px;font-weight:600;}

  .actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
  button.primary, button.ghost{
    font-family:inherit;font-size:13px;font-weight:600;border-radius:6px;padding:10px 18px;
    cursor:pointer;letter-spacing:.02em;
  }
  button.primary{background:var(--amber);border:1px solid var(--amber);color:#1a140a;}
  button.primary:hover{background:#dd9a45;}
  button.ghost{background:transparent;border:1px solid var(--line);color:var(--text);}
  button.ghost:hover{border-color:var(--text-dim);}

  .note{font-size:11px;color:var(--text-dim);margin-top:10px;line-height:1.5;}

  .item-btn-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
  .item-btn{
    background:var(--bg-panel);border:2px solid var(--line);border-radius:10px;
    padding:20px 26px;cursor:pointer;color:var(--text);font-family:inherit;
    font-size:18px;font-weight:700;min-width:140px;text-align:center;
  }
  /* Las puertas a otro módulo son <a> con pinta de botón. El display va
     aquí y no en línea, porque aplicarPermisos limpia el style.display. */
  a.item-btn{display:inline-block;text-decoration:none;}
  .item-btn:hover{border-color:var(--amber);}
  .item-btn.active{border-color:var(--amber);background:var(--bg-card);color:var(--amber);}

  .home-categoria{margin-bottom:20px;}
  /* ── Las cuatro áreas del panel principal ──────────────────────────────
     Antes todo colgaba de una sola lista de quince desplegables y había que
     scrollear medio panel para hallar cualquier cosa. Ahora primero se
     escoge el área y adentro está lo mismo de siempre.                   */
  .home-areas{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:16px; margin-bottom:8px;
  }
  .area-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:5px;
    background:var(--bg-panel); border:1.5px solid var(--line); border-radius:14px;
    color:var(--text); font-family:inherit; font-size:21px; font-weight:700;
    padding:24px 22px; cursor:pointer; text-align:left; line-height:1.25;
    transition:border-color .12s ease, transform .12s ease, background .12s ease;
  }
  .area-btn:hover{border-color:var(--amber); background:var(--bg-card); transform:translateY(-2px);}
  .area-btn .area-ico{font-size:34px; line-height:1;}
  .area-btn .area-sub{
    font-size:12.5px; font-weight:400; color:var(--text-dim); line-height:1.45;
  }
  @media (max-width:560px){
    .home-areas{grid-template-columns:1fr; gap:12px;}
    .area-btn{padding:18px 16px; font-size:19px;}
    .area-btn .area-ico{font-size:28px;}
  }
  .home-categoria-titulo{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    background:none;border:none;border-bottom:1px solid var(--line);
    font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--amber);padding:10px 4px 12px;margin-bottom:0;cursor:pointer;
    font-family:inherit;
  }
  .home-categoria-titulo:hover{color:var(--paper);}
  .home-categoria-chevron{font-size:16px;transition:transform .15s ease;}
  .home-categoria-titulo.collapsed .home-categoria-chevron{transform:rotate(-90deg);}
  .home-categoria-body{padding-top:16px;}
  .home-categoria-body.collapsed{display:none !important;}
  /* Subcategorías (por ahora dentro de Ingeniería): mismo comportamiento que
     una categoría — se pliegan solas al volver a Inicio y se esconden si el rol
     no puede ver ninguno de sus botones — pero con un título más discreto para
     que se lea como lo que es: un nivel de adentro.                          */
  .home-subcategoria{margin:0 0 6px;padding-left:6px;border-left:2px solid var(--line);}
  .home-subcategoria:last-child{margin-bottom:0;}
  .home-categoria-titulo.home-sub{
    font-size:13px;letter-spacing:.04em;text-transform:none;
    color:var(--text-dim);border-bottom:1px dashed var(--line);
    padding:9px 4px 10px;
  }
  .home-categoria-titulo.home-sub:hover{color:var(--amber);}
  .home-categoria-body.home-sub-body{padding-top:12px;padding-bottom:10px;}

  /* ── Sub-subcategorías en lista ────────────────────────────────────────
     Cuando lo de adentro son muchas pantallas de la misma familia, un muro
     de botones grandes se lee peor que una lista: la lista se recorre de un
     vistazo y agrupa sin gritar. */
  .home-lista{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;}
  .home-lista-grupo{
    font-size:11.5px;font-weight:700;color:var(--text-dim);letter-spacing:.05em;
    text-transform:uppercase;margin:12px 0 3px;
  }
  .home-lista-grupo:first-child{margin-top:2px;}
  .home-lista button{
    background:transparent;border:none;border-left:2px solid var(--line);
    color:var(--text);font-family:inherit;font-size:14px;font-weight:600;
    text-align:left;padding:9px 14px;cursor:pointer;border-radius:0 6px 6px 0;
  }
  .home-lista button:hover{background:var(--bg-card);border-left-color:var(--amber);color:var(--amber);}
  .manual-big{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--amber);}

  .paso-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .paso-chip{
    background:var(--bg-card);border:1.5px solid var(--amber);border-radius:8px;
    padding:10px 18px;font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--amber);font-size:14px;
  }
  .paso-chip.empaque{border-color:#7fae6f;color:#7fae6f;}
  .paso-arrow{color:var(--text-dim);font-size:18px;}

  .cma-paso{
    background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
    padding:20px;margin-bottom:20px;
  }
  .cma-paso-num{
    display:inline-block;background:var(--amber);color:#1a140a;font-weight:800;
    border-radius:50%;width:36px;height:36px;line-height:36px;text-align:center;
    font-size:18px;margin-bottom:12px;
  }
  .cma-paso-texto{font-size:19px;line-height:1.5;margin-bottom:14px;color:var(--paper);}
  .cma-variable{
    display:inline-block;background:#3d2b2e;border:1.5px solid var(--amber);border-radius:8px;
    padding:10px 16px;font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--amber);
    font-size:20px;margin-bottom:16px;
  }
  .cma-nav-btns{display:flex;gap:12px;margin-top:20px;}
  .cma-nav-btns .primary, .cma-nav-btns .ghost{flex:1;padding:18px;font-size:17px;}

  .cma-paso.alerta{border:2px solid var(--err);background:#3a1c1c;}
  .cma-paso.alerta .cma-paso-num{background:var(--err);color:#fff;}
  .cma-paso.alerta .cma-paso-texto{font-weight:700;}

  .model-chip{
    display:inline-flex;align-items:stretch;border:2px solid var(--line);border-radius:10px;overflow:hidden;
  }
  .model-chip .load{
    background:var(--bg-panel);border:none;padding:14px 20px;cursor:pointer;color:var(--text);
    font-family:inherit;font-size:16px;font-weight:700;
  }
  .model-chip .load:hover{color:var(--amber);}
  .model-chip .del{
    background:var(--bg-panel);border:none;border-left:1px solid var(--line);padding:14px 14px;
    cursor:pointer;color:var(--text-dim);font-size:16px;
  }
  .model-chip .del:hover{color:var(--err);}

  .row{
    display:flex;flex-wrap:wrap;gap:10px;align-items:end;
    padding-bottom:10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px;
  }
  .row .field{flex:1 1 160px;}
  .row .field.narrow{flex:0 0 92px;}
  .field label{display:block;font-size:10px;color:var(--text-dim);margin-bottom:5px;letter-spacing:.03em;}
  .field input, .field select{
    width:100%;background:var(--bg-card);border:1px solid var(--line);border-radius:6px;
    color:var(--text);padding:9px 10px;font-size:14px;font-family:'IBM Plex Mono',monospace;
  }
  .field input:focus, .field select:focus{outline:none;border-color:var(--amber);}
  .rm{
    background:none;border:1px solid var(--line);border-radius:6px;color:var(--text-dim);
    height:36px;width:36px;cursor:pointer;font-size:16px;line-height:1;
  }
  .rm:hover{border-color:var(--err);color:var(--err);}

  .color-row{
    display:grid;grid-template-columns: 1fr 170px 130px 34px;
    gap:10px;align-items:end;margin-bottom:10px;
  }
  @media (max-width: 760px){
    .color-row{grid-template-columns: 1fr 1fr 34px;}
    .color-row .oc-canal-f{grid-column:1 / -2;}
  }

  .corte-card{
    background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;
  }
  .corte-head{
    padding:14px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  }
  .corte-head .name{font-size:17px;font-weight:700;color:var(--paper);}
  .corte-head .dims{font-family:'IBM Plex Mono',monospace;font-size:18px;color:var(--amber);font-weight:700;}
  .corte-body{padding:14px 20px;}
  .corte-table{width:100%;border-collapse:collapse;font-size:13px;}
  .corte-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);padding:6px 8px;border-bottom:1px solid var(--line);font-weight:600;}
  .corte-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);font-family:'IBM Plex Mono',monospace;color:var(--paper);}
  .merge-tag{color:var(--ok);font-size:12px;font-weight:600;margin-top:6px;}
  .enchap-card{
    background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;
  }
  .enchap-head{padding:14px 20px;border-bottom:1px solid var(--line);}
  .enchap-head .name{font-size:17px;font-weight:700;color:var(--paper);}
  .enchap-body{padding:16px 20px;}

  /* ===== Modelo de corte: ocupa TODA la pantalla, sin scroll ===== */
  /* Se saca del flujo de la pagina (position:fixed) para que no herede el
     ancho maximo ni los margenes del contenedor de la app. */
  #modeloCorteView, #armador3dView{
    position:fixed; inset:0; z-index:9000; background:var(--bg);
    display:none; flex-direction:column;
  }
  #modeloCorteView.abierto, #armador3dView.abierto{display:flex;}
  #armador3dBarra{
    display:flex; align-items:center; gap:12px;
    padding:8px 12px; border-bottom:1px solid var(--line);
    background:var(--bg-panel); flex:0 0 auto;
  }
  #armador3dBarra button{margin:0;}
  #armador3dTitulo{font-weight:700;font-size:15px;color:#8fb0d9;}
  #armador3dFrame{
    flex:1 1 auto; width:100%; height:100%;
    border:0; display:block; background:#0f1216; min-height:0;
  }
  body.modelador-abierto{overflow:hidden;}
  #modeloCorteBarra{
    display:flex; align-items:center; gap:12px;
    padding:8px 12px; border-bottom:1px solid var(--line);
    background:var(--bg-panel); flex:0 0 auto;
  }
  #modeloCorteBarra button{margin:0;}
  #modeloCorteTitulo{font-weight:700;font-size:15px;color:var(--amber);}
  #modeloCorteFrame{
    flex:1 1 auto; width:100%; height:100%;
    border:0; display:block; background:#0f1216; min-height:0;
  }

  /* ===== Ventanas flotantes ===== */
  /* Toda ventana emergente que se arma con JS lleva la clase .modal-flotante.
     Antes cada una necesitaba su propia regla por id, y a la que se le
     olvidaba se pintaba como un bloque más: se iba hasta el fondo de la
     página y se quedaba ahí aunque cambiaras de pantalla. Con esta clase
     ya no hace falta acordarse.                                            */
  .modal-flotante{
    position:fixed; inset:0; z-index:9550; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  .modal-flotante > .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:720px; width:100%; padding:18px 20px;
  }
  .modal-flotante h2{font-size:18px;margin:0 0 4px;}

  /* ===== Cierre de turno ===== */
  #planItemModal{
    position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.72);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #planItemModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:900px; width:100%; padding:18px 20px;
  }
  #planItemModal h2{font-size:18px;margin:0 0 4px;}
  #planItemModal tr.paso-actual td{background:rgba(212,160,74,.14);}
  #partirOrdenModal{
    position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.72);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #partirOrdenModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:720px; width:100%; padding:18px 20px;
  }
  #partirOrdenModal h2{font-size:18px;margin:0 0 4px;}
  #loginView{
    position:fixed; inset:0; z-index:99999; background:#0f1216;
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  #loginView .login-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
    padding:34px 30px; max-width:420px; width:100%; text-align:center;
  }
  #fotoTarimaModal{
    position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #fotoTarimaModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:640px; width:100%; padding:18px 20px;
  }
  #fotoTarimaModal h2{font-size:18px;margin:0 0 4px;}
  #fotoTarimaModal .ft-prev img{max-width:150px;border-radius:8px;border:1px solid var(--line);margin:6px 6px 0 0;}
  #pausaTarimaModal{
    position:fixed; inset:0; z-index:9560; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #pausaTarimaModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:560px; width:100%; padding:18px 20px;
  }
  #pausaTarimaModal h2{font-size:18px;margin:0 0 4px;}
  /* Tareas de ingeniería: sin estas reglas la ventana se pintaba como un
     bloque más y se iba hasta el fondo de la página. */
  #tareaIngModal, #tiposIngModal{
    position:fixed; inset:0; z-index:9570; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #tareaIngModal .ct-caja, #tiposIngModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:660px; width:100%; padding:18px 20px;
  }
  #tareaIngModal h2, #tiposIngModal h2{font-size:18px;margin:0 0 4px;}
  #mantModal{
    position:fixed; inset:0; z-index:9550; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #mantModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:640px; width:100%; padding:18px 20px;
  }
  #mantModal h2{font-size:18px;margin:0 0 4px;}
  #agruparTarimaModal{
    position:fixed; inset:0; z-index:9550; background:rgba(0,0,0,.75);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #agruparTarimaModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:820px; width:100%; padding:18px 20px;
  }
  #agruparTarimaModal h2{font-size:18px;margin:0 0 4px;}
  #agruparTarimaModal .ag-fila{
    display:flex; align-items:center; gap:10px; padding:7px 10px; margin-bottom:5px;
    border:1px solid var(--line); border-radius:8px; background:var(--bg-card);
  }
  #agruparTarimaModal .ag-grupo{
    border:2px solid #8fb0d9; border-radius:10px; padding:10px 12px; margin-bottom:10px;
    background:rgba(143,176,217,.07);
  }
  #cierreEmpaqueModal{
    position:fixed; inset:0; z-index:9550; background:rgba(0,0,0,.72);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #cierreEmpaqueModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:560px; width:100%; padding:18px 20px;
  }
  #cierreEmpaqueModal h2{font-size:18px;margin:0 0 4px;}
  #cierreTurnoModal, #nuevoReclamoModal, #motivoPausaModal{
    position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.72);
    display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px;
  }
  #cierreTurnoModal .ct-caja, #nuevoReclamoModal .ct-caja, #motivoPausaModal .ct-caja{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:12px;
    max-width:860px; width:100%; padding:18px 20px;
  }
  #nuevoReclamoModal .ct-caja{max-width:620px;}
  #motivoPausaModal .ct-caja{max-width:560px;}
  #cierreTurnoModal h2, #nuevoReclamoModal h2, #motivoPausaModal h2{font-size:18px;margin:0 0 4px;}
  #cierreTurnoModal .ct-bloque{
    border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px;
    background:var(--bg-card);
  }
  #cierreTurnoModal .ct-sec{font-weight:700;color:var(--text);margin:16px 0 8px;font-size:14px;}

  /* ===== Plan de la orden: tabla ancha con scroll horizontal ===== */
  .plan-orden-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .plan-orden-scroll .plan-orden-tabla{min-width:max-content;}
  .plan-orden-tabla th, .plan-orden-tabla td{white-space:nowrap;}
  /* La columna del proceso se queda fija al deslizar */
  .plan-orden-tabla th:first-child, .plan-orden-tabla td:first-child{
    position:sticky; left:0; z-index:3; background:var(--bg-panel);
    box-shadow:2px 0 0 0 var(--line);
    width:132px; min-width:132px; max-width:132px; white-space:normal; overflow:hidden;
  }
  /* Un solo turno para todos los colores del renglón: cabe en la columna fija */
  .plan-turno-fila{
    display:block; width:100%; max-width:120px; box-sizing:border-box;
    font-size:10.5px; padding:2px 4px; margin-top:4px;
  }
  .plan-orden-scroll::-webkit-scrollbar{height:10px;}
  .plan-orden-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
  .plan-orden-scroll::-webkit-scrollbar-track{background:transparent;}

  /* ===== Plan del día: tarjetas compactas y arrastrables ===== */
  .pcola{
    display:flex;align-items:center;gap:8px;
    background:var(--bg-panel);border:1px solid var(--line);border-left:4px solid var(--line);
    border-radius:8px;padding:7px 10px;margin-bottom:6px;
    font-size:13px;color:var(--paper);
    transition:background .12s,border-color .12s,transform .12s;
  }
  .pcola:hover{background:var(--bg-card);border-color:var(--amber);}
  .pcola.pausado{border-left-color:#5a7db0;}
  .pcola .pgrip{
    cursor:grab;color:var(--text-dim);font-size:16px;line-height:1;padding:2px 4px;
    border-radius:4px;user-select:none;flex:0 0 auto;
  }
  .pcola .pgrip:hover{color:var(--amber);background:rgba(255,255,255,.06);}
  .pcola .pgrip:active{cursor:grabbing;}
  .pcola .pnum{
    flex:0 0 auto;min-width:22px;height:22px;border-radius:50%;
    background:var(--line);color:var(--paper);font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .pcola .pmain{flex:1 1 auto;min-width:0;line-height:1.3;}
  .pcola .pmain .pl1{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pcola .pmain .pl2{display:block;font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pcola .pdur{
    flex:0 0 auto;font-family:'IBM Plex Mono',monospace;font-size:13px;
    font-weight:700;color:var(--amber);white-space:nowrap;
  }
  .pcola .pbtns{display:flex;gap:2px;flex:0 0 auto;}
  .pcola .pbtns button{
    background:transparent;border:1px solid var(--line);color:var(--text-dim);
    border-radius:5px;width:26px;height:26px;font-size:12px;cursor:pointer;padding:0;line-height:1;
  }
  .pcola .pbtns button:hover{border-color:var(--amber);color:var(--amber);}
  .pcola .pbtns button.pdel:hover{border-color:var(--err);color:var(--err);}
  /* Un botón CON TEXTO dentro de .pbtns. Los de arriba miden 26x26 porque son
     de ícono; con una palabra adentro el ancho fijo parte el texto en
     vertical (se veía "R E C I B I R"). Éste se mide por su contenido. */
  .pcola .pbtns button.ptxt{
    width:auto;height:auto;padding:7px 14px;font-size:13px;
    font-weight:700;white-space:nowrap;line-height:1.15;
  }
  .pcola .pbtns button.ptxt.primary{background:var(--amber);border-color:var(--amber);color:#1a140a;}
  .pcola .pbtns button.ptxt.primary:hover{background:#dd9a45;border-color:#dd9a45;color:#1a140a;}

  /* Mientras arrastras */
  .pcola.dragging{opacity:.35;transform:scale(.98);border-style:dashed;}
  /* Seleccionadas con la casilla: se mueven todas juntas al arrastrar */
  .pcola.marcada{outline:2px solid #5a7db0;outline-offset:-2px;background:rgba(90,125,176,.12);}
  /* Bloque que todavía no está cortado: no se puede trabajar */
  .pcola.sincortar{border-left-color:var(--err);background:rgba(194,96,79,.08);}
  /* Modo supervisor: se esconde todo lo que no es "ver mi plan" */
  body.modo-supervisor #backFromPlanesCola,
  body.modo-supervisor .solo-admin{display:none!important;}
  body.modo-supervisor.sup-con-turno #backFromPlanesCola{display:inline-block!important;}
  /* Un rol de piso con MÁS DE UN proceso (el de Enchapado, que también lleva
     Limpieza Chapeado) necesita poder brincar entre sus planes. Sin esto se
     quedaba encerrado en el primero que abriera. */
  body.modo-supervisor.sup-multi #backFromPlanesCola{display:inline-block!important;}
  /* ── TURNO APAGADO = MODO VISITA ────────────────────────────────────────
     Con el turno apagado se puede ver todo y no se puede mover nada. No se
     esconden los botones (esconderlos haría creer que no existen): se dejan
     a la vista, apagados, para que se entienda que lo que falta es prender
     el turno. Se salvan los que llevan .visita-ok — prender el turno,
     imprimir, y los de navegación.                                        */
  body.turno-apagado #planesColaList button:not(.visita-ok),
  body.turno-apagado #planesColaList select:not(.visita-ok),
  body.turno-apagado #planesColaList input:not(.visita-ok){
    pointer-events:none!important; opacity:.38!important; filter:grayscale(.6);
  }
  body.turno-apagado #planesColaList .pcola{opacity:.86;}
  #cintaVisita{
    position:sticky; top:0; z-index:60; margin:0 0 12px;
    background:var(--amber); color:#1a1a1a; font-weight:700;
    padding:9px 14px; border-radius:9px; display:flex; align-items:center;
    gap:12px; flex-wrap:wrap; box-shadow:0 3px 12px rgba(0,0,0,.25);
  }
  #cintaVisita button{
    background:#1a1a1a; color:var(--amber); border:none; border-radius:8px;
    padding:8px 14px; font-weight:700; cursor:pointer; font-size:13px;
  }
  /* Mismo ITEM citado en otro proceso el MISMO turno */
  .pcola.choque{border-left-color:#e0913a;background:rgba(224,145,58,.10);}
  /* Bloque sin tiempo: se deja ver el motivo en dos renglones */
  .pcola.sintiempo .pl2, .pcola.intermedia .pl2{white-space:normal;overflow:visible;text-overflow:clip;}
  .pcola.intermedia{border-left-color:var(--amber);}
  .pcola.sintiempo .pdur{color:var(--err);font-size:11px;}
  .pcola.desfasado{border-left-color:#e0913a;}
  .pcola.marcada .pnum{background:#5a7db0;}
  /* Dónde va a caer: línea gruesa arriba/abajo de la tarjeta destino */
  .pcola.drop-before{box-shadow:0 -3px 0 0 var(--amber);}
  .pcola.drop-after{box-shadow:0 3px 0 0 var(--amber);}
  /* Grupo de tarima: se ve como una sola línea hasta que lo despliegas */
  .pgrupo .pgrupo-grip{
    cursor:grab;color:#8fb0d9;font-size:16px;line-height:1;padding:2px 4px;
    border-radius:4px;user-select:none;
  }
  .pgrupo .pgrupo-grip:active{cursor:grabbing;}
  .pgrupo.dragging{opacity:.35;border-style:dashed;}
  .pgrupo.drop-before{box-shadow:0 -3px 0 0 var(--amber);}
  .pgrupo.drop-after{box-shadow:0 3px 0 0 var(--amber);}
  .pgrupo:not(.abierto):hover{background:rgba(143,176,217,.13)!important;}
  /* El plan lo reparte solo la app desde "Plan por proceso": desde el plan del
     día ya no se mueve nada de lugar. */
  .plan-mover{display:none!important;}
  /* ── LA PANTALLA DEL PISO ───────────────────────────────────────────────
     El operador entra por Operadores → Ver procesos, escoge su turno y ve
     esto: su plan, tres botones y sus órdenes. Nada de casillas, asas ni
     flechas de acomodar — él no planea, ejecuta. */
  body.piso-simple .solo-admin{display:none!important;}
  body.piso-simple #planesColaList .pcola-sel,
  body.piso-simple #planesColaList .pgrip{display:none!important;}
  body.piso-simple #planesColaList button{font-size:14px;}
  .pgrupo-head{display:flex;flex-direction:column;gap:8px;}
  .pgrupo-titulo{display:flex;align-items:flex-start;gap:8px;min-width:0;}
  .pgrupo-sello{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;}
  /* Los tres botones que de verdad se usan: grandes y del mismo tamaño. */
  .pgrupo-acciones{display:flex;gap:6px;}
  .pgrupo-acciones button{
    flex:1 1 0;min-width:0;font-size:13px;font-weight:700;padding:11px 4px;
    border-radius:8px;white-space:nowrap;
  }
  .pgrupo-acciones .pgrupo-iniciar{border-color:var(--amber);color:var(--amber);background:rgba(212,160,74,.10);}
  .pgrupo-acciones .pgrupo-terminar,
  .pgrupo-acciones .pgrupo-est-ok{border-color:#7fae6f;color:#7fae6f;background:rgba(127,174,111,.10);}
  .pgrupo-acciones .pgrupo-pausar,
  .pgrupo-acciones .pgrupo-est-pausa{border-color:#8fb0d9;color:#8fb0d9;background:rgba(143,176,217,.10);}
  /* En pantalla de celular el plan del día se aprieta todavía más. */
  @media (max-width: 640px){
    #planesColaList .pgrupo{padding:7px 6px;}
    .pgrupo-acciones button{font-size:12px;padding:12px 2px;}
    .pgrupo-titulo{gap:6px;flex-wrap:wrap;}
    .pgrupo-info{flex:1 1 0!important;}
    .pgrupo-sello{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;}
    .pgrupo-sello .pdur{font-size:15px!important;}
    #planesColaList .pcola{flex-wrap:wrap;}
    #planesColaList .pcola .pbtns{flex-wrap:wrap;}
    #planesColaList .pcola .pbtns button{padding:9px 11px;font-size:13px;}
    #planesColaList .pcola .pmain .pl1,
    #planesColaList .pcola .pmain .pl2{white-space:normal;overflow:visible;text-overflow:clip;}
  }
  /* Turno resaltado cuando arrastras encima */
  .planes-turno.drop-target{border-color:var(--amber)!important;border-style:solid!important;background:rgba(212,160,74,.07);}
  body.pcola-dragging .planes-turno{border-color:var(--text-dim);}
  /* ── Pancracio: la burbuja que flota y su panelito ─────────────────────
     Es el mismo Pancracio del módulo Personal. Comparte navegador, así que
     comparte la llave: no hay que volverla a pegar. Aquí lo que cambia es
     lo que VE — el contexto de la pantalla en la que estés parado.       */
  #pxBurbuja{
    position:fixed;right:20px;bottom:20px;z-index:900;
    width:58px;height:58px;border-radius:50%;
    background:var(--amber);border:1px solid var(--amber);color:#1a140a;
    font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45);padding:0;
    transition:transform .12s ease;font-family:inherit;
  }
  #pxBurbuja:hover{background:#dd9a45;transform:scale(1.06);}
  #pxBurbuja.escondida{display:none;}
  #pxPanel{
    position:fixed;right:20px;bottom:20px;z-index:901;
    width:400px;max-width:calc(100vw - 32px);
    height:min(580px, calc(100vh - 40px));
    background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 14px 44px rgba(0,0,0,.55);
    display:none;flex-direction:column;overflow:hidden;
  }
  #pxPanel.abierto{display:flex;}
  #pxCabeza{
    display:flex;align-items:center;gap:9px;padding:11px 13px;
    border-bottom:1px solid var(--line);background:var(--bg-card);flex:0 0 auto;
  }
  #pxCabeza .nom{font-size:13.5px;font-weight:600;flex:1 1 auto;color:var(--text);}
  #pxCabeza .mini{font-size:11px;color:var(--text-dim);font-weight:400;}
  #pxCabeza button{
    background:transparent;border:1px solid var(--line);color:var(--text-dim);
    border-radius:6px;padding:4px 9px;font-size:13px;cursor:pointer;font-family:inherit;
  }
  #pxCabeza button:hover{border-color:var(--amber);color:var(--text);}
  #pxChat{flex:1 1 auto;overflow-y:auto;padding:13px;font-size:13px;line-height:1.5;}
  #pxChat .px-quien{font-weight:700;font-size:11.5px;margin-bottom:2px;}
  #pxChat .px-msg{margin-bottom:12px;white-space:pre-wrap;color:var(--text);}
  #pxPie{
    flex:0 0 auto;border-top:1px solid var(--line);padding:9px 10px;
    display:flex;gap:7px;align-items:flex-end;background:var(--bg-card);
  }
  #pxEntrada{
    flex:1 1 auto;min-height:38px;max-height:120px;resize:none;font-size:13px;
    background:var(--bg);color:var(--text);border:1px solid var(--line);
    border-radius:6px;padding:8px 10px;font-family:inherit;
  }
  #pxEntrada:focus{outline:none;border-color:var(--amber);}
  #pxPie button{padding:8px 11px;font-size:13px;flex:0 0 auto;border-radius:6px;
    cursor:pointer;font-family:inherit;font-weight:600;}
  #pxSugerencias{flex:0 0 auto;padding:0 10px 8px;display:flex;gap:6px;flex-wrap:wrap;}
  #pxSugerencias button{
    background:transparent;border:1px solid var(--line);color:var(--text-dim);
    border-radius:20px;padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:inherit;
  }
  #pxSugerencias button:hover{border-color:var(--amber);color:var(--text);}
  @media (max-width:560px){
    #pxPanel{right:10px;left:10px;bottom:10px;width:auto;height:min(72vh, calc(100vh - 20px));}
    #pxBurbuja{right:14px;bottom:14px;}
  }