/* Diseño de COMPU de Sellala (LABORATORIO, P4 "evo-compu", 27-oct). Solo se carga con SELLALA_LAB_PUNTOS=1, después de
   panel-diseno.css. NADA de este archivo se aplica por debajo de 900 px: el celu queda igual.
   Maqueta aprobable: diseno/rediseno-compu/compu.html. Prueba: node qa/evo-compu.mjs <carpeta-fuera>.

   Piezas reutilizables (para pantallas nuevas en la compu):
   · --ec-panel ............ ancho del panel fijo de la derecha (caja y ficha). --ec-borde: su margen con la ventana.
   · html.ec-compu ......... ≥900 px.   html.ec-ancho: ≥1100 px (trabajo en dos paneles).
   · html.ec-v-<vista> ..... la vista visible (ec-v-hoy, ec-v-sellar, ec-v-clientes...).
   · html.ec-panel ......... hay un panel fijo a la derecha: .main deja su lugar (padding-right).
   · .ec-espera ............ panel de la derecha mientras no hay nada elegido (tarjeta azul fantasma + texto).
   · .ec-cartas/.ec-carta .. tarjetas de color de Hoy en fila (mismas .dz-carta del celu: .am amarillo, .sa salmón, .me menta).
   · .ec-caja .............. botón grande naranja "Abrir la caja" con la tecla C.
   · .ec-cupon (en .pxf.ec-lado) el monto y el teclado como cupón blanco con corte de tijera (como la Caja C del celu).
   · La tarjeta azul del cliente es la de la Ficha B: .dzb-tarjeta (panel-diseno.css); en la caja, .pxf-ficha toma ese look.
   Colores: tokens --dz-* de panel-diseno.css (papel, lima, sello naranja, cobalto, amarillo #FFE27A, menta #BFEBD8, salmón #FFC9B3). */

:root{--ec-panel:clamp(400px,27vw,500px);--ec-borde:16px;--ec-amarillo:#FFE27A;--ec-menta:#BFEBD8;--ec-salmon:#FFC9B3}

/* ============================================================ 1. panel fijo a la derecha (caja y clientes) */
@media (min-width:1100px){
  html.ec-panel .main{padding-right:calc(var(--ec-panel) + var(--ec-borde) + 32px)}
  html.ec-panel .cont{max-width:1240px;margin:0}
  .ec-espera{position:fixed;z-index:20;top:var(--ec-borde);right:var(--ec-borde);bottom:var(--ec-borde);width:var(--ec-panel);display:flex;flex-direction:column;gap:14px;pointer-events:none}
  .ec-espera[hidden]{display:none}
  .ec-espera-tarjeta{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:22px 24px 26px;background:var(--dz-cob);color:#fff;opacity:.92;box-shadow:0 14px 30px -10px rgba(35,64,224,.4)}
  .ec-espera-tarjeta::before{content:"";position:absolute;z-index:-1;right:-50px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
  .ec-espera-tarjeta .r1{display:flex;justify-content:space-between;gap:12px;font:700 12px/1.2 var(--texto);text-transform:uppercase;letter-spacing:.08em;opacity:.78}
  .ec-espera-tarjeta b{display:block;margin-top:26px;font:800 30px/1.1 var(--display);letter-spacing:-.025em}
  .ec-espera-tarjeta small{display:block;margin-top:8px;font:500 15px/1.4 var(--texto);opacity:.85;max-width:320px}
  .ec-espera-cupon{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 26px 20px;border-radius:30px;background:var(--dz-sup);box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.04)}
  .ec-espera-cupon .ic{width:52px;height:52px;border-radius:50%;background:var(--dz-hundido);display:grid;place-items:center;color:var(--dz-tinta2)}
  .ec-espera-cupon .ic svg{width:26px;height:26px}
  .ec-espera-cupon>b{font:700 19px/1.25 var(--texto);margin-top:4px}
  .ec-espera-cupon p{font-size:15px;line-height:1.45;color:var(--dz-gris);max-width:340px}
  .ec-espera-teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:auto;padding-top:22px;border-top:2px dashed rgba(21,22,28,.12)}
  .ec-espera-teclas i{height:clamp(40px,6vh,56px);border-radius:16px;background:var(--dz-papel);font:500 20px/clamp(40px,6vh,56px) var(--texto);font-style:normal;color:#B9BCC4}
  .ec-espera-blq{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ec-espera-blq i{height:96px;border-radius:22px;opacity:.55}
  .ec-espera-blq .c0{background:var(--ec-amarillo)}.ec-espera-blq .c1{background:var(--ec-menta)}.ec-espera-blq .c2{background:var(--ec-salmon)}.ec-espera-blq .c3{background:var(--dz-lima)}
  html.ec-ficha .ec-espera-cli,html.ec-flujo #ecEsperaCaja{visibility:hidden}
}

/* ============================================================ 2. Hoy */
@media (min-width:900px){
  .ec-hoy{display:flex;flex-direction:column;gap:0;min-width:0}
  .ec-hoy-cab{padding:0 4px}
  .ec-hoy .dz-saludo{margin:8px 0 0;font-size:44px}
  .ec-hoy-a{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:20px;margin-top:26px;align-items:stretch}
  .ec-hoy .dz-heroe.dz-lima{margin:0;padding:30px 34px 28px;border-radius:36px;display:flex;flex-direction:column;justify-content:center;min-height:240px}
  .ec-hoy .dz-heroe.dz-lima::after{width:280px;height:280px;right:-70px;top:-70px}
  .ec-hoy .dz-lima .dz-heroe-rot{font-size:16px}
  .ec-hoy .dz-lima .dz-heroe-num b{font-size:clamp(60px,6.2vw,104px)}
  .ec-hoy .dz-lima .dz-heroe-num .dz-suf{font-size:26px}
  .ec-hoy .dz-lima-chips{margin-top:18px}
  .ec-hoy .dz-lima-chips span{font-size:14px;padding:9px 13px}
  .ec-caja{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;min-width:0;border:0;border-radius:36px;padding:26px 28px 22px;background:var(--dz-sello);color:#fff;text-align:left;cursor:pointer;
    box-shadow:0 1px 2px rgba(196,60,10,.25),0 16px 36px rgba(242,86,28,.3);transition:transform 180ms cubic-bezier(.3,.7,.4,1),box-shadow .2s ease}
  .ec-caja:active{transform:scale(.98)}
  @media (hover:hover){.ec-caja:hover{box-shadow:0 1px 2px rgba(196,60,10,.25),0 20px 40px rgba(242,86,28,.38)}}
  .ec-caja:focus-visible{outline:3px solid var(--dz-tinta);outline-offset:3px}
  .ec-caja .ic{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
  .ec-caja .ic svg{width:28px;height:28px}
  .ec-caja .t b{display:block;font:700 26px/1.15 var(--texto);letter-spacing:-.01em}
  .ec-caja .t small{display:block;margin-top:4px;font:500 15px/1.35 var(--texto)}
  .ec-caja .pie{display:flex;align-items:center;justify-content:space-between;width:100%;font:600 13px/1 var(--texto);opacity:.95}
  .ec-caja .dz-tecla{min-width:30px;height:30px;border-radius:8px;font-size:14px;line-height:30px}
  /* las tarjetas de color, en fila */
  .ec-cartas{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px;margin-top:20px}
  .ec-hoy .dz-carta.ec-carta{position:relative;top:auto;left:auto;right:auto;height:auto;min-height:204px;padding:22px 24px;border-radius:30px;transform:none;box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,0 10px 24px rgba(21,22,28,.08)}
  .ec-carta .dz-carta-t{flex-wrap:wrap;gap:6px 12px}
  .ec-carta .dz-carta-t b{font-size:17px;white-space:nowrap}
  .ec-carta .dz-carta-t .n{font-size:clamp(26px,2.2vw,36px)}
  .ec-carta p{font-size:14.5px;max-width:360px;margin:auto 0 14px;padding-top:14px}
  .ec-carta .dz-btn{height:40px;padding:0 18px;font-size:14px}
  .ec-hoy-b{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:20px;margin-top:36px;align-items:start}
  .ec-hoy-act .dz-sec-cab{margin:0 4px 10px}
  .ec-hoy-act .dz-sec-cab h2{font:600 21px/1.2 var(--texto)}
  .ec-hoy-lado{display:flex;flex-direction:column;gap:16px}
  .ec-hoy-lado .dz-sug{margin:0}
  .ec-hoy-lado .dz-sec-cab.chico{margin:0 4px -6px}
  .ec-hoy-lado .dz-sec-cab.chico h2{font:600 14px/1.2 var(--texto);color:var(--dz-gris)}
}
@media (min-width:900px) and (max-width:1279px){
  .ec-hoy-a,.ec-hoy-b{grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr)}
  .ec-cartas{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr));gap:14px}
  .ec-hoy .dz-carta.ec-carta{padding:20px;min-height:196px}
  .ec-carta .dz-carta-t .n{font-size:28px}
  .ec-hoy .dz-saludo{font-size:38px}
}

/* ============================================================ 3. Caja: buscar a la izquierda, cobrar a la derecha */
@media (min-width:1100px){
  html.ec-panel #v-sellar.px-caja:not([hidden]){max-width:none!important;margin:0;display:block!important}
  html.ec-panel #v-sellar.px-caja .cabv h1{font-size:40px}
  /* recientes como tickets (Caja C del celu), en grilla */
  html.ec-panel .pxv-chips.pxv-tks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:0;padding:4px 0 8px;background:none;box-shadow:none;border-radius:0}
  html.ec-panel .pxv-tk{min-height:76px;border-radius:22px;transition:transform 160ms cubic-bezier(.3,.7,.4,1),box-shadow .15s ease}
  @media (hover:hover){html.ec-panel .pxv-tk:hover{box-shadow:0 1px 2px rgba(21,22,28,.08),0 10px 24px -8px rgba(21,22,28,.2)}}
  html.ec-panel .pxv-tk.ec-sel{box-shadow:0 0 0 2px var(--dz-tinta)}
  html.ec-panel .pxv-tk-n{width:100px}
  html.ec-panel .pxv-tk::before,html.ec-panel .pxv-tk::after{right:91px}
  html.ec-panel .pxv-tk.premio .pxv-tk-n{border-radius:0 22px 22px 0}
  html.ec-panel #v-sellar.px-caja #listaSellar>li.fila.ec-act{background:#FFF1EA}

  /* el cobro (panel-puntos.js, #pxFlujo en modo lado) queda fijo a la derecha, sin velo */
  html.dz .pxf.ec-lado{inset:var(--ec-borde) var(--ec-borde) var(--ec-borde) auto;width:var(--ec-panel);z-index:40}
  html.dz .pxf.ec-lado .pxf-velo{display:none}
  html.dz .pxf.ec-lado .pxf-marco{inset:0;width:auto;height:auto;background:transparent;border-radius:0;box-shadow:none;overflow:visible;transform:translateX(16px);opacity:0;transition:transform 420ms var(--spring-smooth,cubic-bezier(.32,.72,0,1)),opacity .2s ease-out}
  html.dz .pxf.ec-lado.ver .pxf-marco{transform:none;opacity:1}
  html.dz .pxf.ec-lado .pxf-barra{display:none}
  html.dz .pxf.ec-lado .pxf-p{top:0;left:0;right:0;bottom:0;max-width:none;margin:0;padding:0}
  html.dz .pxf.ec-lado .pxf-monto{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;align-content:normal;overflow-y:auto;scrollbar-width:none}
  html.dz .pxf.ec-lado .pxf-monto>*{width:auto;max-width:none;align-self:stretch;margin-left:0;margin-right:0}
  html.dz .pxf.ec-lado .pxf-monto::-webkit-scrollbar{display:none}
  html.dz .pxf.ec-lado .pxf-monto .pxf-cab{display:none}
  /* la tarjeta del cliente: azul como la Ficha B */
  html.dz .pxf.ec-lado .pxf-ficha{position:relative;overflow:hidden;isolation:isolate;flex:none;border-radius:30px;padding:20px 22px 20px;background:var(--dz-cob);color:#fff;box-shadow:0 14px 30px -10px rgba(35,64,224,.45)}
  html.dz .pxf.ec-lado .pxf-ficha::before{content:"";position:absolute;z-index:-1;right:-50px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
  html.dz .pxf.ec-lado .pxf-ficha-cab .av{width:44px;height:44px;font-size:14px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
  html.dz .pxf.ec-lado .pxf-ficha-t b{font:700 19px/1.25 var(--texto);color:#fff}
  html.dz .pxf.ec-lado .pxf-ficha-t small{color:rgba(255,255,255,.78)}
  html.dz .pxf.ec-lado .pxf-cambiar{background:rgba(255,255,255,.16);color:#fff;height:36px}
  @media (hover:hover){html.dz .pxf.ec-lado .pxf-cambiar:hover{background:rgba(255,255,255,.26)}}
  html.dz .pxf.ec-lado .pxf-cambiar:focus-visible{outline:2px solid #fff;outline-offset:2px}
  html.dz .pxf.ec-lado .pxf-ficha-anillo{gap:18px;margin-top:18px}
  html.dz .pxf.ec-lado .pxf-mini{width:104px;height:104px}
  html.dz .pxf.ec-lado .pxf-mini .pista{stroke:rgba(255,255,255,.2)}
  html.dz .pxf.ec-lado .pxf-mini .arco{stroke:var(--dz-lima)}
  html.dz .pxf.ec-lado .pxf-mini b{font-size:26px;color:#fff}
  html.dz .pxf.ec-lado .pxf-mini small{color:rgba(255,255,255,.8)}
  html.dz .pxf.ec-lado .pxf-ficha-anillo p{font-size:15px;color:rgba(255,255,255,.9)}
  html.dz .pxf.ec-lado .pxf-ficha-anillo p b{color:#fff}
  html.dz .pxf.ec-lado .pxf-sellos.izq{margin-top:16px;gap:6px}
  html.dz .pxf.ec-lado .pxf-sellos.izq i{width:24px;height:24px;transform:none;background:transparent;border:2px dashed rgba(255,255,255,.45);box-shadow:none;color:var(--dz-tinta)}
  html.dz .pxf.ec-lado .pxf-sellos.izq i.on{border:0;background:var(--dz-lima)}
  html.dz .pxf.ec-lado .pxf-sellos.izq i svg{width:14px;height:14px}
  html.dz .pxf.ec-lado .pxf-ficha-regla{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
  /* el monto y el teclado: un cupón blanco con corte de tijera (Caja C) */
  html.dz .pxf.ec-lado .pxf-monto .pxf-centro{flex:none;margin-top:14px;padding:18px 18px 14px;gap:8px;background:var(--dz-sup);border-radius:30px 30px 0 0;box-shadow:0 1px 2px rgba(21,22,28,.06)}
  html.dz .pxf.ec-lado .pxf-rot{font:600 12px/1 var(--texto);text-transform:uppercase;letter-spacing:.08em;color:var(--dz-gris)}
  html.dz .pxf.ec-lado .pxf-num{height:72px;font-size:clamp(34px,calc(var(--ec-panel) / (var(--n,2) * .78)),62px)}
  html.dz .pxf.ec-lado .pxf-monto .pxf-teclado{position:relative;flex:1 0 auto;align-content:center;margin:0;padding:14px 12px 12px;gap:2px;background:var(--dz-sup);border-radius:0 0 30px 30px;box-shadow:0 4px 12px rgba(21,22,28,.04)}
  html.dz .pxf.ec-lado .pxf-monto .pxf-teclado::before{content:"";position:absolute;top:0;left:20px;right:20px;height:2px;background:repeating-linear-gradient(90deg,rgba(21,22,28,.18) 0 8px,transparent 8px 14px)}
  html.dz .pxf.ec-lado .pxf-monto .pxf-teclado::after{content:"";position:absolute;top:-13px;left:-13px;right:-13px;height:26px;pointer-events:none;
    background:radial-gradient(circle at 13px 13px,var(--dz-papel) 12.5px,transparent 13px) left/26px 26px no-repeat,radial-gradient(circle at 13px 13px,var(--dz-papel) 12.5px,transparent 13px) right/26px 26px no-repeat}
  html.dz .pxf.ec-lado .pxf-tecla{height:clamp(44px,7vh,76px);background:transparent;box-shadow:none;border-radius:16px;font-size:24px}
  @media (hover:hover){html.dz .pxf.ec-lado .pxf-tecla:hover{background:var(--dz-papel)}}
  html.dz .pxf.ec-lado .pxf-tecla:active{background:var(--dz-hundido)}
  html.dz .pxf.ec-lado .pxf-monto .pxf-pie{flex:none;position:sticky;bottom:0;z-index:2;padding:14px 0 0;background:linear-gradient(to bottom,rgba(244,245,240,0),var(--dz-papel) 14px)}
  html.dz .pxf.ec-lado .pxf-atajos{margin-top:10px}
  /* pantallas bajas (1280 x 800): la tarjeta se achica para que el botón de cobrar entre sin bajar */
  @media (max-height:920px){
    html.dz .pxf.ec-lado .pxf-ficha{padding:16px 18px}
    html.dz .pxf.ec-lado .pxf-ficha-anillo{margin-top:12px}
    html.dz .pxf.ec-lado .pxf-mini{width:80px;height:80px}
    html.dz .pxf.ec-lado .pxf-mini b{font-size:21px}
    html.dz .pxf.ec-lado .pxf-sellos.izq{margin-top:10px}
    html.dz .pxf.ec-lado .pxf-sellos.izq i{width:20px;height:20px}
    html.dz .pxf.ec-lado .pxf-ficha-regla{display:none}
    html.dz .pxf.ec-lado .pxf-monto .pxf-centro{margin-top:10px;padding:12px 16px 10px;gap:4px}
    html.dz .pxf.ec-lado .pxf-num{height:58px}
    html.dz .pxf.ec-lado .pxf-atajos{display:none}
  }
  /* el "Listo" también queda en el panel */
  html.dz .pxf.ec-lado .pxf-listo{border-radius:30px;padding:24px 22px;background:var(--dz-papel)}
}

/* ============================================================ 4. Clientes: lista + ficha al costado */
@media (min-width:1100px){
  /* la lista del celu (una superficie, filas con línea fina, etiquetas de color) en vez de la tabla */
  html.ec-panel #v-clientes .tabla-wrap{display:none}
  html.ec-panel #v-clientes .cards-cli{display:flex}
  html.ec-panel #cardsCli>li.fila{padding:14px 16px 14px 18px;cursor:pointer}
  @media (hover:hover){html.ec-panel #cardsCli>li.fila:hover{background:#FAFAF7}html.ec-panel #cardsCli>li.dz-ap:hover{background:#E6EAFC}}
  html.ec-panel #cardsCli>li.fila.ec-act{background:#FFF1EA;box-shadow:inset 3px 0 0 var(--dz-sello)}
  html.ec-panel #cardsCli .quien{cursor:pointer}
  /* la barra de filtros de siempre: el orden más angosto y, si no entran los filtros, se desvanecen a la derecha (se deslizan) */
  html.ec-panel #v-clientes .fila-ctl{flex-wrap:nowrap}
  html.ec-panel #v-clientes .fila-ctl .buscador{min-width:0}
  html.ec-panel #v-clientes #ordenCli{flex:0 0 clamp(212px,13vw,240px);min-width:0;width:auto}
  html.ec-panel #v-clientes #filtrosCli.ec-corta{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
  /* la ficha queda abierta al costado, sin velo: se puede tocar otro cliente de la lista */
  html.ec-ficha #capa>.velo{background:transparent;pointer-events:none}
  html.ec-ficha #capa>.hoja{top:var(--ec-borde);right:var(--ec-borde);bottom:var(--ec-borde);width:var(--ec-panel);z-index:35;border-radius:30px;box-shadow:0 0 0 .5px rgba(21,22,28,.08),0 18px 44px -16px rgba(21,22,28,.24)}
  html.ec-ficha #capa>.hoja .agarre{display:none}
}

/* ============================================================ 5. Ficha B en la compu (inspector y panel al costado) */
@media (min-width:900px){
  .hoja.dzB #fPuntos,.hoja.dzB #fStats,.hoja.dzB #dzFichaExtra{display:none}
  .hoja.dzB #fSellos:not(:has(.tope)){display:none}
  .hoja.dzB #fSellos>:not(.tope){display:none}
  .hoja.dzB .cab-hoja{padding:16px 16px 14px 18px;gap:12px}
  .hoja.dzB .cuerpo{gap:12px}
  .hoja.dzB .dzb-tarjeta{border-radius:30px;padding:20px 22px 22px}
  .hoja.dzB .dzb-pts b{font-size:56px}
  .hoja.dzB .dzb-b{height:52px}
  @media (hover:hover){.hoja.dzB .dzb-b.nar:hover{background:#F04D12}.hoja.dzB .dzb-b.bla:hover{box-shadow:0 1px 2px rgba(21,22,28,.08),0 8px 20px -8px rgba(21,22,28,.2)}}
}