/* ============================================================================
   Módulo Planificación — estilos (tokens regla 12-jun). Todo scopeado bajo
   #plRoot para no chocar con el resto del CRM. Copiado del mockup de referencia.
   ============================================================================ */
#plRoot{
  --pl-bg:#F4F5F7; --pl-card:#fff; --pl-borde:#E0E4EA; --pl-carbon:#2F3B47; --pl-gris:#6B7686;
  --pl-niebla:#E7EDF3; --pl-navy:#112A49; --pl-naranja:#DF6600;
  --pl-atraso:#D0453F; --pl-atraso-bg:#FBE3E3; --pl-atraso-tx:#8A4A46;
  --pl-riesgo:#F0A868; --pl-riesgo-tx:#A34E00; --pl-riesgo-bg:#FDEBD9;
  --pl-verde:#34A853; --pl-verde-tx:#1A7A50; --pl-terminada:#A9D8BC;
  --pl-neutro:#B9C7D4; --pl-neutro-bg:#EDF2F7; --pl-grupo:#E8EDF3; --pl-hoy:#FFF1E3;
  /* La letra del CRM es Archivo (var(--font)). Este módulo traía DM Sans
     propia y por eso se leía como otro producto: 84 textos con otra
     tipografía, medidos por audit/diseno.mjs el 2026-07-22. */
  font-family:var(--font); font-size:13px; color:var(--pl-carbon);
  background:var(--pl-bg); display:block;
}
#plRoot *{box-sizing:border-box}
#plRoot button,#plRoot input,#plRoot select,#plRoot textarea{font-family:inherit; font-size:13px; color:var(--pl-carbon)}
#plRoot button{cursor:pointer}
#plRoot button:focus-visible,#plRoot input:focus-visible,#plRoot select:focus-visible,#plRoot textarea:focus-visible{outline:2px solid var(--pl-naranja); outline-offset:2px}
@media(prefers-reduced-motion:reduce){ #plRoot *{transition:none!important; animation:none!important} }
#plRoot .pl-wrap{max-width:1120px; margin:0 auto}
#plRoot .top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
#plRoot .top h1{font-size:19px; font-weight:700; color:var(--pl-navy); letter-spacing:-.01em}
#plRoot .top .sub{font-size:12px; color:var(--pl-gris)}
#plRoot .seg{display:inline-flex; gap:2px; background:var(--pl-niebla); border-radius:10px; padding:3px; height:38px}
#plRoot .seg button{padding:0 16px; font-size:12px; font-weight:700; color:var(--pl-gris); border:none; background:none; border-radius:8px}
#plRoot .seg button.on{color:var(--pl-navy); background:var(--pl-card); box-shadow:0 1px 3px rgba(0,0,0,.08)}
#plRoot .top .segMod{margin-left:auto}

#plRoot .kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:14px}
@media(max-width:1000px){ #plRoot .kpis{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){ #plRoot .kpis{grid-template-columns:repeat(2,1fr)} }
/* KPI en columna: rótulo ARRIBA (chico) y número ABAJO (grande). Antes los dos
   spans iban "en línea" y el número se encimaba con el texto del rótulo. */
#plRoot .kpi{background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:11px; padding:12px 15px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:3px}
#plRoot .kpi.on{border-color:var(--pl-naranja); box-shadow:inset 0 0 0 1px var(--pl-naranja)}
#plRoot .kpi .l{display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris); line-height:1.2}
#plRoot .kpi .v{display:block; font-size:24px; font-weight:700; letter-spacing:-.02em; color:#2F3B47; line-height:1; font-variant-numeric:tabular-nums}
#plRoot .kpi.atr .v{color:var(--pl-atraso)} #plRoot .kpi.rgo .v{color:var(--pl-riesgo-tx)} #plRoot .kpi.trm .v{color:var(--pl-verde-tx)}

#plRoot .ctrl{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px}
#plRoot .cluster{display:flex; flex-direction:column; gap:4px; min-width:0}
#plRoot .cluster.grow{flex:1; min-width:200px}
#plRoot .cluster.empuje{margin-left:auto}
#plRoot .cluster.acciones{flex-direction:row; align-items:flex-end; gap:8px}
#plRoot .clab{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris)}
#plRoot .busca{display:flex; align-items:center; gap:8px; background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:9px; padding:0 12px; height:38px}
#plRoot .busca:focus-within{border-color:var(--pl-naranja)}
#plRoot .busca input{border:none; outline:none; flex:1; min-width:0; background:transparent}
#plRoot .sortbar{display:flex; gap:6px}
#plRoot .sbtn{height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--pl-borde); background:var(--pl-card); font-size:12px; font-weight:700; color:var(--pl-gris)}
#plRoot .sbtn.on{color:#2F3B47; background:var(--pl-niebla); border-color:#C5D1DC}
#plRoot .btn-p{height:38px; padding:0 16px; border-radius:9px; border:none; background:var(--pl-naranja); color:#fff; font-size:12.5px; font-weight:700}
#plRoot .ctrl .btn-g{height:38px; padding:0 14px; border-radius:9px; border:1px solid var(--pl-borde); background:var(--pl-card); font-size:12.5px; font-weight:700; color:var(--pl-carbon)}
#plRoot .ctrl .btn-g:hover{background:var(--pl-niebla)}
#plRoot .btn-p:hover{filter:brightness(.95)}
#plRoot .filtrando{display:none; align-items:center; gap:8px; margin-bottom:10px; font-size:12px; color:var(--pl-gris)}
#plRoot .filtrando.on{display:flex; flex-wrap:wrap}
#plRoot .chipf{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pl-naranja); color:var(--pl-riesgo-tx); background:var(--pl-riesgo-bg); border-radius:14px; padding:4px 10px; font-weight:700}
#plRoot .chipf button{border:none; background:none; color:inherit; font-weight:700; padding:0}
#plRoot .vertodo{border:none; background:none; color:var(--pl-naranja); font-weight:700; text-decoration:underline}

#plRoot .lista{background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:11px; overflow:hidden}
#plRoot .fila{position:relative; display:grid; grid-template-columns:var(--plc1,110px) var(--plc2,1.3fr) var(--plc3,1fr) var(--plc4,96px) var(--plc5,130px) auto; gap:10px; align-items:center; padding:11px 14px 11px 20px; border-bottom:1px solid var(--pl-bg); text-align:left; width:100%; background:none; border-left:none; border-right:none; border-top:none}
/* Encabezado de columnas con tiradores para ajustar el ancho (se recuerda) */
#plRoot .lhrow{display:grid; grid-template-columns:var(--plc1,110px) 0 var(--plc2,1.3fr) 0 var(--plc3,1fr) 0 var(--plc4,96px) 0 var(--plc5,130px) 0 auto; gap:10px; align-items:center; padding:8px 14px 8px 20px; border-bottom:1px solid var(--pl-borde); background:var(--pl-grupo); font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris); user-select:none}
#plRoot .lhrow [data-grip]{position:relative; width:0; height:100%; cursor:col-resize; touch-action:none}
#plRoot .lhrow [data-grip]::before{content:""; position:absolute; top:-8px; bottom:-8px; left:-8px; width:16px}
#plRoot .lhrow [data-grip]::after{content:""; position:absolute; top:2px; bottom:2px; left:-1px; width:2px; border-radius:2px; background:var(--pl-borde)}
#plRoot .lhrow [data-grip]:hover::after{background:var(--pl-naranja)}
#plRoot .fila:last-child{border-bottom:none}
#plRoot .fila:hover{background:#FAFBFC}
#plRoot .fila::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--pl-neutro)}
#plRoot .fila.atraso::before{background:var(--pl-atraso)} #plRoot .fila.riesgo::before{background:var(--pl-riesgo)} #plRoot .fila.term::before{background:var(--pl-verde)}
#plRoot .fila .of{font-weight:700; color:var(--pl-navy); font-size:12.5px}
#plRoot .fila .ed{display:block; font-size:10px; color:var(--pl-gris); font-weight:400}
#plRoot .fila .cli{font-weight:700; font-size:12.5px}
#plRoot .fila .ori{display:block; font-size:10.5px; color:var(--pl-gris); font-weight:400}
#plRoot .fila .prod{font-size:11.5px; color:var(--pl-gris); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#plRoot .fila .maqx{display:block; font-size:10.5px; color:var(--pl-carbon)}
#plRoot .est{font-size:10.5px; font-weight:700; border-radius:8px; padding:3px 8px; display:inline-block}
#plRoot .est.trabajo{background:var(--pl-neutro-bg); color:var(--pl-carbon)} #plRoot .est.atraso{background:var(--pl-atraso-bg); color:var(--pl-atraso-tx)}
#plRoot .est.riesgo{background:var(--pl-riesgo-bg); color:var(--pl-riesgo-tx)} #plRoot .est.term{background:var(--pl-terminada); color:#14532D}
#plRoot .salex{font-size:11px; color:var(--pl-gris)}
#plRoot .salex b{display:block; font-size:12.5px; color:var(--pl-navy)}
#plRoot .salex.hoy b{color:var(--pl-naranja)}
#plRoot .salex .dia{font-size:10px}
#plRoot .repil{font-size:10px; color:var(--pl-riesgo-tx); font-weight:700}
#plRoot .chv{display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 12px; border-radius:9px; border:1px solid var(--pl-borde); background:var(--pl-card); color:var(--pl-carbon); font-size:11.5px; font-weight:700; white-space:nowrap}
#plRoot .fila:hover .chv{background:var(--pl-niebla); border-color:#C5D1DC}
#plRoot .vacio{padding:36px 16px; text-align:center; color:var(--pl-gris); font-size:12.5px}
#plRoot .ghead{position:relative; background:var(--pl-grupo); color:var(--pl-navy); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:8px 14px 8px 20px; border-bottom:1px solid var(--pl-borde)}
#plRoot .ghead::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pl-naranja)}
#plRoot .ghead .gn{color:var(--pl-gris); font-weight:700; margin-left:4px}
@media(max-width:820px){
  #plRoot .fila{grid-template-columns:1fr auto !important; grid-template-rows:auto auto auto}
  #plRoot .lhrow{display:none}
  #plRoot .fila .prod{white-space:normal}
  #plRoot .fila .c-est,#plRoot .fila .c-sale{grid-column:1}
}

#plRoot .cal-nav{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:11px; padding:12px 14px}
#plRoot .nav-g{display:flex; gap:6px}
#plRoot .nav-b{width:38px; height:38px; border-radius:9px; border:1px solid var(--pl-borde); background:var(--pl-card); font-size:16px}
#plRoot .nav-b.hoy{width:auto; padding:0 14px; font-size:12.5px; font-weight:700}
#plRoot .nav-b:hover{background:var(--pl-niebla)}
#plRoot .nav-b:disabled{opacity:.4; cursor:default}
#plRoot .nav-rango{height:38px; display:flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--pl-carbon); background:var(--pl-niebla); border-radius:9px; padding:0 12px; white-space:nowrap}
#plRoot .ocioso-wrap:empty{display:none}
#plRoot .ocioso{background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:11px; padding:12px 14px; margin-bottom:12px}
#plRoot .ocioso .ocl{display:block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris); margin-bottom:8px}
#plRoot .occhips{display:flex; gap:8px; flex-wrap:wrap}
#plRoot .occhip{display:inline-flex; align-items:center; gap:6px; background:var(--pl-niebla); border:1px solid var(--pl-borde); border-radius:10px; padding:6px 11px; font-size:11.5px; color:var(--pl-carbon)}
#plRoot .occhip b{color:var(--pl-naranja); font-size:13px; font-variant-numeric:tabular-nums}
#plRoot .cal-card{background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:11px; overflow:hidden}
#plRoot .cal-scroll{overflow:auto; overscroll-behavior:contain; max-height:max(420px, calc(100vh - 350px))}
/* OJO: la app madre tiene un ".cal" global (tarjeta con overflow:hidden) que se
   cuela aquí y mataba el sticky de la banda de meses/días. Se neutraliza. */
#plRoot .cal{min-width:920px; position:relative; overflow:visible; background:transparent; border:none; border-radius:0; box-shadow:none}
#plRoot .g{display:grid; grid-template-columns:176px repeat(var(--pl-ndias,28),1fr)}
#plRoot .mrow{border-bottom:1px solid var(--pl-borde); position:sticky; top:0; z-index:5; background:var(--pl-card)}
#plRoot .mrow .mtx{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--pl-navy); padding:6px 10px; border-right:1px solid var(--pl-borde); white-space:nowrap; overflow:hidden; height:28px; box-sizing:border-box}
#plRoot .drow{border-bottom:1px solid var(--pl-borde); font-size:11.5px; font-weight:600; color:var(--pl-carbon); text-align:center; position:sticky; top:28px; z-index:5; background:var(--pl-card)}
#plRoot .drow .lab,#plRoot .mrow .lab{text-align:left; padding:6px 14px; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--pl-gris); background:var(--pl-card); position:sticky; left:0; z-index:6; border-right:1px solid var(--pl-borde)}
#plRoot .drow .d{padding:5px 1px 6px}
#plRoot .drow .dw{display:block; font-size:8.5px; font-weight:700; color:#98A2B0; line-height:1.2; letter-spacing:.4px}
#plRoot .drow .d.fin{color:#98A2B0; font-weight:500}
#plRoot .drow .d.hd span{display:inline-block; background:var(--pl-hoy); border:1px solid var(--pl-naranja); color:var(--pl-riesgo-tx); font-weight:700; border-radius:7px; padding:1px 5px}
#plRoot .lane{display:grid; grid-template-columns:176px 1fr; border-bottom:1px solid var(--pl-bg)}
#plRoot .lane:last-child{border-bottom:none}
#plRoot .lhead{padding:10px 12px 10px 14px; border-right:1px solid var(--pl-borde); background:var(--pl-card); position:sticky; left:0; z-index:3}
#plRoot .lhead::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pl-naranja)}
#plRoot .lhead .n{font-size:13px; font-weight:800; color:var(--pl-navy); letter-spacing:-.01em; line-height:1.25}
#plRoot .lhead .c{font-size:11px; color:var(--pl-gris); margin-top:2px}
#plRoot .lhead .emb{color:var(--pl-riesgo-tx); font-weight:700}
#plRoot .lbody{position:relative; padding:8px 0 10px; display:grid; grid-template-columns:repeat(var(--pl-ndias,28),1fr); grid-auto-rows:26px; row-gap:3px}
#plRoot .daybg{position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--pl-ndias,28),1fr); pointer-events:none}
#plRoot .daybg i{border-right:1px solid #FAFBFC}
#plRoot .daybg i.fin{background:#FAFBFC}
#plRoot .daybg i.hoy{background:var(--pl-hoy); border-left:2px solid var(--pl-naranja)}
/* Hoja 2: mantenimiento (paro que descuenta fecha), sin-producción y notas de máquina */
#plRoot .daybg i.mant{background:repeating-linear-gradient(-45deg,#FCEBEB,#FCEBEB 4px,#F8DEDE 4px,#F8DEDE 8px)}
#plRoot .daybg i.np{background:#F1F3F6}
#plRoot .daybg i.np.fin{background:#EDEFF3}
#plRoot .daybg i{position:relative}
#plRoot .daybg i .evtag{position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:#854F0B; opacity:.75}
#plRoot .bar{position:relative; z-index:1; border-radius:5px; font-size:11px; font-weight:700; padding:4px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:none; text-align:left; margin:0 1px}
#plRoot .bar.trabajo{background:var(--pl-neutro-bg); border-left:4px solid var(--pl-neutro); color:var(--pl-carbon); font-weight:600}
#plRoot .bar.atraso{background:var(--pl-atraso-bg); border-left:4px solid var(--pl-atraso); color:var(--pl-atraso-tx)}
#plRoot .bar.riesgo{background:var(--pl-riesgo-bg); border-left:4px solid var(--pl-riesgo); color:var(--pl-riesgo-tx)}
#plRoot .bar.term{background:var(--pl-terminada); color:#14532D}
#plRoot .leyenda{display:flex; gap:16px; font-size:11px; color:var(--pl-gris); margin-top:10px; flex-wrap:wrap}
#plRoot .leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:5px}

#plRoot .overlay{position:fixed; inset:0; background:rgba(17,42,73,.35); display:none; align-items:flex-start; justify-content:center; padding:24px 16px; z-index:120; overflow-y:auto}
#plRoot .overlay.on{display:flex}
#plRoot .modal{background:var(--pl-card); border-radius:14px; max-width:560px; width:100%; padding:22px 24px; box-shadow:0 12px 40px rgba(17,42,73,.18)}
#plRoot .modal h2{font-size:16px; font-weight:700; color:var(--pl-navy); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
#plRoot .lock{font-size:11px; font-weight:700; color:var(--pl-gris); background:var(--pl-niebla); border-radius:8px; padding:3px 9px}
#plRoot .mgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
@media(max-width:560px){ #plRoot .mgrid{grid-template-columns:1fr} }
#plRoot .campo{display:flex; flex-direction:column; gap:4px}
#plRoot .campo.full{grid-column:1 / -1}
#plRoot .campo input[type=text],#plRoot .campo input[type=number],#plRoot .campo input[type=date],#plRoot .campo select,#plRoot .campo textarea{height:38px; border:1px solid var(--pl-borde); border-radius:9px; padding:0 12px; background:var(--pl-card); width:100%}
#plRoot .campo textarea{height:auto; min-height:60px; padding:9px 12px; resize:vertical}
#plRoot .campo input:disabled,#plRoot .campo select:disabled,#plRoot .campo textarea:disabled{background:var(--pl-bg); color:var(--pl-gris)}
#plRoot .radios{display:flex; flex-direction:column; gap:6px}
#plRoot .radios label{display:flex; align-items:center; gap:8px; border:1px solid var(--pl-borde); border-radius:9px; padding:9px 12px; font-weight:500}
#plRoot .radios label.on{border-color:var(--pl-naranja); background:var(--pl-riesgo-bg)}
#plRoot .radios input{accent-color:var(--pl-naranja)}
#plRoot .checks label{display:inline-flex; align-items:center; gap:7px; margin-right:14px; height:38px}
#plRoot .checks input{accent-color:var(--pl-naranja); width:16px; height:16px}
#plRoot .amarra{background:var(--pl-niebla); border-radius:9px; padding:9px 12px; font-size:12px; color:var(--pl-carbon)}
#plRoot .amarra b{color:var(--pl-navy)}
#plRoot .lineas{border:1px solid var(--pl-borde); border-radius:9px; overflow:hidden}
#plRoot .linea{display:grid; grid-template-columns:1fr 130px 70px 30px; gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--pl-bg); font-size:12px}
#plRoot .linea:last-child{border-bottom:none}
#plRoot .linea{align-items:start}
#plRoot .linea select,#plRoot .linea input{height:34px; border:1px solid var(--pl-borde); border-radius:8px; padding:0 8px; width:100%}
#plRoot .l-pick{display:flex; flex-direction:column; gap:4px}
#plRoot .l-pick .l-buscar{height:30px; font-size:11.5px; background:var(--pl-bg)}
#plRoot .linea .l-ral,#plRoot .linea .l-cant{margin-top:34px}
#plRoot .linea .qx{border:none; background:none; color:var(--pl-atraso); font-weight:700; font-size:14px; margin-top:34px}
#plRoot .addlinea{border:none; background:none; color:var(--pl-naranja); font-weight:700; padding:10px 12px; text-align:left; width:100%}
#plRoot .form-acc{display:flex; gap:6px; flex-wrap:wrap; padding:0 2px}
#plRoot .derivado{background:var(--pl-bg); border-radius:9px; padding:10px 12px; font-size:12px; color:var(--pl-gris)}
#plRoot .derivado b{color:var(--pl-navy)}
#plRoot .macc{display:flex; gap:10px; margin-top:16px}
#plRoot .macc .btn-p{flex:1}
#plRoot .btn-g{flex:1; height:38px; border-radius:9px; border:1px solid var(--pl-borde); background:var(--pl-card); font-size:12.5px; font-weight:700}
#plRoot .btn-g:hover{background:var(--pl-niebla)}
#plRoot .btn-p:disabled{opacity:.45; cursor:default}
/* --- Ficha de orden: secciones y rastreador de tiempo --- */
#plRoot .fsec{position:relative; font-size:11.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--pl-navy); margin:18px 0 3px; padding:0 0 6px 12px; border-bottom:2px solid var(--pl-niebla)}
#plRoot .fsec::before{content:""; position:absolute; left:0; top:1px; bottom:7px; width:4px; border-radius:3px; background:var(--pl-naranja)}
/* Rastreador: tarjeta blanca moderna, riel gris y relleno verde Apple con
   remate redondeado y brillo sutil. El color solo cambia si hay problema. */
#plRoot .ftrack{background:var(--pl-card); border:1px solid var(--pl-borde); border-radius:12px; padding:13px 15px; margin-top:12px; box-shadow:0 1px 3px rgba(17,42,73,.05)}
#plRoot .ftrack .ft-lbl{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; font-weight:700; color:var(--pl-carbon)}
#plRoot .ftrack .ft-lbl b{font-size:15px; font-variant-numeric:tabular-nums; color:#248A3D}
#plRoot .ftrack .ft-bar{height:10px; background:#E9EBEE; border-radius:999px; overflow:hidden; margin:9px 0 7px; box-shadow:inset 0 1px 2px rgba(17,42,73,.08)}
#plRoot .ftrack .ft-bar i{display:block; height:100%; border-radius:999px; transition:width .35s ease;
  background:linear-gradient(180deg,#4CD964 0%,#34C759 55%,#2DB84F 100%)}
#plRoot .ftrack .ft-fechas{display:flex; justify-content:space-between; font-size:10.5px; color:var(--pl-gris)}
#plRoot .ftrack.atraso .ft-lbl{color:var(--pl-atraso-tx)}
#plRoot .ftrack.atraso .ft-lbl b{color:var(--pl-atraso)}
#plRoot .ftrack.atraso .ft-bar i{background:linear-gradient(180deg,#E4635D 0%,#D0453F 60%,#B93A35 100%)}
#plRoot .ftrack.riesgo .ft-lbl{color:var(--pl-riesgo-tx)}
#plRoot .ftrack.riesgo .ft-lbl b{color:var(--pl-riesgo-tx)}
#plRoot .ftrack.riesgo .ft-bar i{background:linear-gradient(180deg,#F5B87E 0%,#F0A868 60%,#E1954F 100%)}
/* Línea de tiempo de la orden: Cargada → Inicio → Salida */
#plRoot .ftl{position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0 6px; padding-top:4px}
#plRoot .ftl::before{content:""; position:absolute; top:9px; left:16.6%; right:16.6%; height:2px; background:var(--pl-niebla); border-radius:2px}
#plRoot .ftl-n{position:relative; text-align:center}
#plRoot .ftl-n i{display:block; width:11px; height:11px; border-radius:50%; background:var(--pl-navy); border:2.5px solid #fff; box-shadow:0 0 0 1.5px var(--pl-borde); margin:3px auto 7px}
#plRoot .ftl-n.fin-ok i{background:#34C759}
#plRoot .ftl-n.fin-mal i{background:var(--pl-atraso)}
#plRoot .ftl-k{display:block; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris)}
#plRoot .ftl-d{display:block; font-size:13px; font-weight:700; color:var(--pl-carbon); margin-top:1px}
#plRoot .ftl-h{display:block; font-size:10.5px; color:var(--pl-gris); margin-top:1px}
/* Pastilla de catálogo del producto */
#plRoot .cat-pill{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; border-radius:7px; padding:2px 8px; vertical-align:1px}
#plRoot .cat-pill.ok{background:#EAF6EF; color:#1A7A50}
#plRoot .cat-pill.esp{background:var(--pl-riesgo-bg); color:var(--pl-riesgo-tx)}
/* Observaciones de la orden */
#plRoot .fobs{display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:12.5px}
#plRoot .fobs .fobs-tx{flex:1; white-space:pre-wrap}
#plRoot .fobs .fobs-empty{flex:1; color:var(--pl-gris); font-style:italic}
#plRoot .fobs .fobs-btn{height:28px; padding:0 12px; font-size:11.5px; border-radius:8px; border:1px solid var(--pl-borde); background:var(--pl-card); font-weight:700; color:var(--pl-gris); flex-shrink:0}
#plRoot .fobs .fobs-btn:hover{background:var(--pl-niebla)}
#plRoot .fila-d{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--pl-bg); font-size:12.5px}
#plRoot .fila-d .k{color:var(--pl-gris); font-weight:700} #plRoot .fila-d .v{font-weight:400; text-align:right}
#plRoot .fila-d .v.warn{color:var(--pl-riesgo-tx)}
#plRoot .hist{margin-top:12px}
#plRoot .hist h3{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--pl-gris); margin-bottom:6px}
#plRoot .hitem{border-left:3px solid var(--pl-borde); padding:6px 0 6px 12px; margin-bottom:6px; font-size:11.5px}
#plRoot .hitem .hq{color:var(--pl-gris)}
#plRoot .hitem b{color:var(--pl-navy)}
#plRoot .err{color:var(--pl-atraso-tx); background:var(--pl-atraso-bg); border-radius:8px; padding:7px 10px; font-size:11.5px; font-weight:700; display:none; margin-top:8px}
#plRoot .err.on{display:block}
/* notas de modal, foto y sub-formularios */
#plRoot .modal-nota{font-size:12px; color:var(--pl-gris); margin-bottom:10px; line-height:1.45}
#plRoot .fnota{font-size:11.5px; color:var(--pl-gris); margin-top:4px}
#plRoot .modal h3.fsub{font-size:12.5px; font-weight:700; color:var(--pl-navy); margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--pl-borde)}
/* lista del catálogo de productos */
#plRoot .catlist{border:1px solid var(--pl-borde); border-radius:11px; overflow:hidden; max-height:46vh; overflow-y:auto}
#plRoot .catrow{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--pl-bg)}
#plRoot .catrow:last-child{border-bottom:none}
#plRoot .catrow.arch{opacity:.6}
#plRoot .catrow .ci{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
#plRoot .catrow .ct{font-size:12.5px; color:var(--pl-carbon)}
#plRoot .catrow .cn{font-size:12.5px; color:var(--pl-carbon); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#plRoot .catrow .cm{font-size:11px; color:var(--pl-gris)}
#plRoot .catrow .ca{display:flex; gap:6px; flex-shrink:0}
#plRoot .tag{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:middle}
#plRoot .tag.esp{background:var(--pl-riesgo-bg); color:var(--pl-riesgo-tx)}
#plRoot .tag.off{background:var(--pl-niebla); color:var(--pl-gris)}
#plRoot .mini{height:30px; padding:0 11px; border-radius:8px; border:1px solid var(--pl-borde); background:var(--pl-card); font-size:11.5px; font-weight:700; color:var(--pl-carbon)}
#plRoot .mini:hover{background:var(--pl-niebla)}
#plRoot .mini.danger{color:var(--pl-atraso-tx)}
#plRoot .vacio{padding:22px 16px; text-align:center; color:var(--pl-gris); font-size:12.5px}
#plRoot .cob{padding:12px 0 4px}
#plRoot .cbar{height:8px; background:var(--pl-niebla); border-radius:5px; overflow:hidden; margin:7px 0 6px}
#plRoot .cbar i{display:block; height:100%; background:var(--pl-naranja); border-radius:5px}
#plRoot .ctxt{font-size:12px; color:var(--pl-gris)}
#plRoot .ctxt b{color:var(--pl-navy)}
#plRoot .docs{padding-top:12px; display:flex; flex-direction:column; gap:7px}
#plRoot .docrow{display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:1px solid var(--pl-borde); background:var(--pl-card); border-radius:9px; padding:10px 13px; font-size:12.5px}
#plRoot .docrow:not(.off):hover{background:var(--pl-niebla)}
#plRoot .docrow .di{width:24px; height:24px; border-radius:7px; background:var(--pl-niebla); color:var(--pl-navy); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
#plRoot .docrow .dn{font-weight:700; color:var(--pl-navy); flex:1}
#plRoot .docrow .dm{display:block; font-size:11px; font-weight:400; color:var(--pl-gris); margin-top:1px}
#plRoot .docrow .dv{font-weight:700; color:var(--pl-naranja); font-size:12px}
#plRoot .docrow.off{color:var(--pl-gris); cursor:default}
#plRoot .docrow.subir{border-style:dashed}
#plRoot .dvisor{height:68vh; overflow:auto; background:var(--pl-niebla); border:1px solid var(--pl-borde); border-radius:9px; display:flex; align-items:flex-start; justify-content:center; padding:14px}
#plRoot .dvisor img{max-width:100%; transition:transform .15s; transform-origin:center top; box-shadow:0 4px 18px rgba(17,42,73,.15)}
#plRoot .dvisor iframe{width:100%; height:100%; border:none; border-radius:6px; background:#fff}
/* Móvil angosto (≤400px): segmentados a ancho completo para no desbordar. */
@media(max-width:400px){
  #plRoot .top{gap:8px}
  #plRoot .top .seg{width:100%}
  #plRoot .top .seg button{flex:1; padding:0 8px}
  #plRoot .top .segMod{margin-left:0}
}
.pl-snack{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#112A49; color:#fff; border-radius:10px; padding:10px 18px; font-size:12.5px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s; z-index:200; font-family:var(--font)}
.pl-snack.on{opacity:1}