/* estilos.css — todos los estilos de la app C.T. Antes vivían dentro de index.html. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;800&family=Exo+2:wght@500;600;700;800&display=swap');
:root{
--bg:#050508;
--card:#0E0E16;
--card-2:#121220;
--line:#1C1C2A;
--line-2:#3A3A4A;
--cyan:#00F0FF;
--magenta:#FF00C8;
--yellow:#FFD60A;
--text:#E8E8F0;
--muted:#757575;
--alert:#FF3D71;
--display:'Archivo Black','Segoe UI Black','Arial Black',sans-serif;
--ui:'Inter','Segoe UI',system-ui,sans-serif;
--mono:'IBM Plex Mono',Consolas,ui-monospace,'Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
background-image:
radial-gradient(900px 420px at 12% -8%, rgba(0,240,255,.10), transparent 60%),
radial-gradient(900px 420px at 88% -4%, rgba(255,0,200,.10), transparent 60%);
background-attachment:fixed;
color:var(--text);
font-family:var(--ui);
font-size:15px;
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:660px;margin:0 auto;padding:20px 16px 72px}
/* ---------- encabezado ---------- */
.top{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
padding-bottom:14px;margin-bottom:24px;position:relative;
}
.top::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
box-shadow:0 0 14px rgba(0,240,255,.45),0 0 22px rgba(255,0,200,.30);
}
.brand{
font-family:var(--display);font-size:40px;line-height:1;letter-spacing:0;text-transform:uppercase;
background:linear-gradient(90deg,var(--cyan) 5%,#7B7BFF 50%,var(--magenta) 95%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 12px rgba(0,240,255,.35));
}
.brand small{
display:block;margin-top:7px;font-family:var(--mono);font-size:10px;font-weight:400;
letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;
background:none;-webkit-text-fill-color:var(--muted);filter:none;
}
.who{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);text-align:center}
.who button{
display:inline-block;margin-left:10px;
font-family:var(--mono);font-size:10px;background:none;border:none;
color:var(--muted);text-decoration:underline;cursor:pointer;padding:0;letter-spacing:1px;
}
/* cabecera: en el inicio de sesión solo C.T; dentro, barra de 45 px */
.brand small{display:none}
body:not(.dentro) .top .who{display:none}
body.dentro .top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;text-align:left;gap:12px;min-height:45px;padding:0 0 7px;margin-bottom:14px}
body.dentro .brand{font-size:22px;line-height:1;padding:4px 0}
/* en el centro va la página donde está el usuario (o el producto que está haciendo); el nombre de usuario ya no se muestra */
body.dentro .topTitulo{text-align:center;min-width:0;line-height:1.05;padding-bottom:2px}
body.dentro .topTitulo b{display:block;font-family:var(--display);font-size:22px;letter-spacing:4px;text-transform:uppercase;background:linear-gradient(90deg,var(--cyan),#7B7BFF 60%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dentro .topTitulo small{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dentro .topDer{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
body:not(.dentro) .topTitulo,body:not(.dentro) .topDer{display:none}
body.dentro .pantallaTitulo{display:none}
body.dentro .pantallaTop .volverBtn{display:none}
body.dentro .pantallaTop{margin-bottom:10px}
.topVolverBtn{background:var(--card);border:1px solid var(--line-2);border-radius:10px;color:var(--cyan);font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 14px;cursor:pointer;white-space:nowrap;justify-self:start}
.topVolverBtn:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.16)}
body.dentro .who{display:none}
/* debajo del C.T va siempre el nombre de quien entró (desaparece junto con el C.T cuando la cabecera muestra VOLVER) */
body.dentro .brand .brandQuien{display:block;margin-top:3px;max-width:150px;font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:1.5px;color:var(--cyan);-webkit-text-fill-color:var(--cyan);background:none;filter:none;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){body.dentro .brand .brandQuien{font-size:8px;letter-spacing:1px;max-width:96px}}
@media (max-width:600px){body.dentro .top{gap:8px}body.dentro .topTitulo b{font-size:13px;letter-spacing:1.5px}body.dentro .topTitulo small{font-size:8px;letter-spacing:1.5px}}
/* ---------- etiquetas ---------- */
.eyebrow{
font-family:var(--ui);font-weight:800;text-transform:uppercase;
letter-spacing:2px;font-size:11px;color:var(--muted);
margin:0 0 10px;display:block;
}
/* ---------- login ---------- */
.gate{
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:26px 20px;margin-top:36px;text-align:center;
box-shadow:0 0 0 1px rgba(0,240,255,.05),0 18px 50px rgba(0,0,0,.6);
}
.gate h1{
font-family:var(--display);font-size:26px;text-transform:uppercase;margin:0 0 6px;letter-spacing:.5px;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gate p{margin:0 0 20px;font-size:13px;color:var(--muted)}
.gate input{text-align:center;letter-spacing:2px}
input[type=text],input[type=password],input[type=number],textarea,select{
width:100%;font-family:var(--mono);font-size:16px;color:var(--text);
background:#08080E;border:1px solid var(--line-2);border-radius:12px;padding:14px;
transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#4A4A58}
textarea{min-height:160px;resize:vertical;line-height:1.55}
#pedido{min-height:340px;overflow-y:auto;font-size:14px}
input:focus,textarea:focus,select:focus{
outline:none;border-color:var(--cyan);
box-shadow:0 0 0 3px rgba(0,240,255,.14),0 0 18px rgba(0,240,255,.18);
}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button{cursor:pointer}
.btn{
width:100%;font-family:var(--ui);font-weight:800;font-size:16px;
text-transform:uppercase;letter-spacing:1.5px;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
color:#05050A;border:none;border-radius:12px;
padding:16px;margin-top:14px;
box-shadow:0 0 20px rgba(0,240,255,.22),0 0 30px rgba(255,0,200,.16);
transition:transform .12s,box-shadow .15s,filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;filter:none}
.btn-ghost{
background:transparent;color:var(--cyan);border:1px solid var(--line-2);
box-shadow:none;font-size:14px;
}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,240,255,.16)}
/* ---------- menús desplegables ---------- */
.menus{display:flex;gap:9px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.menus select.menu{min-width:0;width:auto;flex:1 1 160px}
.icoBar{display:flex;gap:9px;align-items:center;flex:0 0 auto}
.icoToggle{display:none;position:relative;flex:0 0 auto;font-size:15px;line-height:1;padding:11px 13px}
.icoToggle .icoFlecha{display:inline-block;transition:transform .18s}
.icoToggle .dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--alert);box-shadow:0 0 8px rgba(255,61,113,.8);pointer-events:none}
.menus.abierta .icoToggle .icoFlecha{transform:rotate(90deg)}
/* celular: los iconos se esconden tras la flecha; al tocarla aparecen debajo del selector */
@media (max-width:600px){
.icoToggle{display:inline-flex}
.icoBar{display:none}
.menus.abierta .icoBar{display:flex;flex:1 1 100%;justify-content:flex-end}
}
select.menu option.divisor{color:#3A3A4A;font-size:9px}
select.menu{
width:100%;font-family:var(--ui);font-weight:800;font-size:12.5px;text-transform:uppercase;
letter-spacing:.5px;color:var(--text);
background-color:var(--card);border:1px solid var(--line-2);border-radius:12px;
padding:12px 26px 12px 10px;appearance:none;-webkit-appearance:none;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 9px center;
transition:border-color .15s,box-shadow .15s;
}
select.menu:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.14),0 0 18px rgba(0,240,255,.18)}
select.menu.activo{
border-color:var(--cyan);
box-shadow:0 0 0 1px rgba(0,240,255,.35),0 0 20px rgba(0,240,255,.20);
}
select.menu option{background:var(--card);color:var(--text);text-transform:uppercase}
.incluye{
font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--cyan);margin:0 0 20px;
}
/* ---------- motor ---------- */
.engines{display:flex;gap:9px;margin-bottom:24px;flex-wrap:wrap;justify-content:center}
.filaBtns{display:flex;gap:10px;align-items:stretch}
.filaBtns .btn{margin-top:14px;padding:12px 8px;font-size:14px}
.filaBtns #go{flex:1.7}
.filaBtns #limpiar{flex:1;font-size:11.5px;color:var(--muted)}
.filaBtns #limpiar:hover{color:var(--cyan);border-color:var(--cyan)}
.eng{
flex:0 1 auto;min-width:0;font-family:var(--mono);font-size:10px;letter-spacing:1px;
color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:9px;
padding:7px 13px;text-transform:uppercase;
transition:border-color .15s,box-shadow .15s,color .15s,background .15s;
}
.eng[aria-pressed=true]{
color:#05050A;font-weight:600;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
border-color:transparent;
box-shadow:0 0 18px rgba(0,240,255,.28);
}
.eng[disabled]{opacity:.3;cursor:not-allowed}
/* ---------- salida ---------- */
.slip{
background:var(--card);border:1px solid var(--line);border-radius:14px;
margin-top:24px;overflow:hidden;
box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.slip-head{
display:flex;justify-content:space-between;align-items:center;gap:10px;
background:var(--card-2);border-bottom:1px solid var(--line);
padding:11px 14px;
font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;
color:var(--cyan);
}
.slip-head button{
font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
color:#05050A;border:none;border-radius:8px;padding:7px 14px;
box-shadow:0 0 14px rgba(0,240,255,.22);
}
.slip pre{
margin:0;padding:18px 15px;font-family:var(--mono);font-size:13.5px;line-height:1.65;
white-space:pre-wrap;word-break:break-word;color:var(--text);
}
mark{
background:var(--alert);color:#fff;padding:1px 4px;border-radius:4px;font-weight:600;
box-shadow:0 0 14px rgba(255,61,113,.55);
cursor:pointer;
}
mark.editando{background:transparent;box-shadow:none;padding:0}
/* Dudas del motor: amarillo (ortografía que no corrigió) y naranja (fechas) hasta que la vendedora corrija o confirme */
mark.duda{background:#FFD60A;color:#111;box-shadow:0 0 12px rgba(255,214,10,.45);position:relative}
mark.duda.fecha{background:#FFA62B;box-shadow:0 0 12px rgba(255,166,43,.45)}
mark.duda.editando{background:transparent;box-shadow:none}
/* Panel de la duda: vertical, debajo de la palabra; la sugerencia arriba y los botones uno bajo otro */
.dudaBar{position:absolute;left:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:200px;max-width:320px;padding:8px;border:1px solid var(--cyan);border-radius:10px;background:#08080E;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 12px rgba(0,240,255,.18);font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1px;color:var(--text);white-space:normal;line-height:1.35;text-align:left}
.dudaInfo{color:var(--text);font-family:var(--mono);font-weight:400;letter-spacing:.5px;padding:2px 2px 6px;border-bottom:1px solid var(--line);word-break:break-word}
.dudaInfo.palabra{font:800 15px var(--mono);color:#fff;letter-spacing:1px;text-align:center;padding:4px 2px 8px}
.dudaBtn{background:var(--card);border:1px solid var(--line-2);border-radius:7px;color:var(--cyan);font:800 9.5px var(--ui);letter-spacing:1px;padding:7px 9px;cursor:pointer;text-align:left}
.dudaBtn:last-child{color:var(--muted);text-align:center}
.dudaBar.arriba{top:auto;bottom:calc(100% + 6px)}
.dudaBar.derecha{left:auto;right:0}
.dudaBtn.ok{border-color:var(--cyan)}
.dudaBtn:hover{border-color:var(--cyan)}
input.fEdit{
background:#08080E;border:1px solid var(--cyan);color:var(--text);
font-family:var(--mono);font-size:13px;padding:3px 8px;border-radius:6px;width:150px;
}
.hint{
font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--yellow); /* P2: en amarillo para que se note */
padding:7px 14px;border-bottom:1px solid var(--line);
}
.icoBtn{
background:var(--card);border:1px solid var(--line-2);border-radius:12px;
color:var(--cyan);padding:12px 13px;line-height:0;cursor:pointer;
}
.icoBtn:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.18)}
.slip-btns{display:flex;gap:8px;align-items:center}
.rBtn{
font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
background:transparent;color:var(--muted);border:1px solid var(--line-2);border-radius:8px;
padding:6px 10px;cursor:pointer;
}
.rBtn:hover{color:var(--alert);border-color:var(--alert)}
.histRow{
width:100%;display:grid;grid-template-columns:6px minmax(0,1fr) auto auto auto;gap:0 10px;align-items:center;
background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:9px 10px 9px 0;margin-top:6px;color:var(--text);cursor:pointer;text-align:left;
font-family:var(--ui);transition:border-color .15s,transform .1s;overflow:hidden;
}
.histRow:hover{border-color:var(--cyan)}
.histRow:active{transform:scale(.99)}
.histTira{width:6px;align-self:stretch;border-radius:14px 0 0 14px;background:var(--c,var(--cyan))}
.histTxt{min-width:0;display:flex;flex-direction:column}
.histCli{font-family:var(--display);font-size:14px;letter-spacing:.8px;text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:8px;min-width:0}
.histCli > span:not([class]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.histProd{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--c,var(--cyan));margin-top:3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histProd small{color:var(--muted);letter-spacing:.5px;font-size:10px}
.histCom{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px;white-space:normal;line-height:1.5;text-transform:none}
.histRepD{cursor:default}
.histFecha{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--text);letter-spacing:1px;white-space:nowrap}
.histQuienTag{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:2px 7px;border-radius:999px;border:1px solid var(--q,var(--cyan));color:var(--q,var(--cyan));flex:0 0 auto;font-weight:700}
.histVeces{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--text);flex:0 0 auto}
.histBorrada{color:var(--alert);font-family:var(--mono);font-size:9px;letter-spacing:1px;flex:0 0 auto}
/* ---------- pantallas independientes ---------- */
.pantallaTop{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pendFrame{display:block;width:100%;height:calc(100vh - 150px);min-height:620px;border:1px solid var(--line);border-radius:14px;background:#050508}
.volverBtn{
background:var(--card);border:1px solid var(--line-2);border-radius:10px;color:var(--cyan);
font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
padding:10px 14px;cursor:pointer;white-space:nowrap;
}
.volverBtn:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.16)}
.pantallaTitulo{
font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:1.5px;
background:linear-gradient(90deg,var(--cyan),var(--magenta));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.grupoFecha{
font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--muted);margin:20px 0 3px;
}
.grupoFecha:first-child{margin-top:6px}
.vacio{text-align:center;padding:38px 16px}
.vacio p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.vacio p.fuerte{
color:var(--text);font-family:var(--ui);font-weight:800;text-transform:uppercase;
letter-spacing:1.5px;font-size:12px;margin-bottom:8px;
}
@keyframes destelloAni{
0%,55%{box-shadow:0 0 0 2px var(--cyan),0 0 30px rgba(0,240,255,.5)}
100%{box-shadow:0 14px 40px rgba(0,0,0,.5)}
}
.destello{animation:destelloAni 1.6s ease}
.campoCode{position:relative}
.campoCode input{padding-right:48px}
.ojo{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
background:none;border:none;color:var(--muted);cursor:pointer;padding:8px;line-height:0;
}
.ojo:hover,.ojo.activo{color:var(--cyan)}
@keyframes girar{to{transform:rotate(360deg)}}
.btn.cargando::before{
content:'';display:inline-block;width:13px;height:13px;margin-right:9px;vertical-align:-2px;
border:2px solid rgba(5,5,10,.35);border-top-color:#05050A;border-radius:50%;
animation:girar .8s linear infinite;
}
.masWrap{position:relative}
.menuMas{
position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:172px;
background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:6px;
box-shadow:0 16px 44px rgba(0,0,0,.65);
}
.menuMas button{
width:100%;text-align:left;background:none;border:none;cursor:pointer;
color:var(--text);font-family:var(--ui);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:1px;
padding:10px 12px;border-radius:8px;
}
.menuMas button:hover{background:var(--card-2);color:var(--cyan)}
/* versión nueva: aviso chico abajo que no tapa nada ni obliga a actualizar */
#verAviso{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:999;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:7px 8px 7px 14px;background:rgba(10,10,18,.96);border:1px solid var(--cyan);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 14px rgba(0,240,255,.25);font-family:var(--ui);font-size:12px;letter-spacing:.5px;color:var(--text)}
#verAviso.hidden{display:none}
#verAviso .verAvisoTxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#verRecargar{font-family:var(--ui);font-weight:900;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;background:linear-gradient(90deg,var(--cyan),var(--magenta));color:#05050A;border:none;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
#verCerrar{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 6px;line-height:1}
#verCerrar:hover{color:var(--text)}
@media (max-width:600px){#verAviso{bottom:10px;font-size:11px;gap:8px;padding-left:12px}}
.dual{display:grid;gap:16px}
@media(min-width:640px){.dual.two{grid-template-columns:1fr 1fr}}
.note{font-size:12px;color:var(--muted);margin-top:10px}
.err{
border:1px solid var(--alert);border-radius:12px;
background:rgba(255,61,113,.08);color:#FF8FAC;
padding:13px;margin-top:16px;font-size:13px;
}
.hidden{display:none !important}
.load{
font-family:var(--ui);font-weight:800;text-transform:uppercase;letter-spacing:2.5px;
font-size:12px;color:var(--cyan);margin-top:20px;
}
@media (prefers-reduced-motion:no-preference){
.load::after{content:'';animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
}
button.slip-head{width:100%;border:none;cursor:pointer;text-align:left}
.statPeek{margin-left:10px;color:var(--text);font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.5px}
.statFlecha{color:var(--muted);font-size:13px}
.badge{display:inline-block;margin-left:8px;background:var(--alert);color:#fff;border-radius:9px;font-size:10px;font-weight:800;padding:1px 7px;font-family:var(--mono);vertical-align:1px}
.masWrap .dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--alert);box-shadow:0 0 8px rgba(255,61,113,.8);pointer-events:none}
.statBar{display:flex;align-items:center;gap:9px;margin:7px 0}
.statBar .nom{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--text);width:150px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statBar .pista{flex:1;height:13px;border-radius:7px;background:var(--line);overflow:hidden}
.statBar .pista i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.statBar .num{font-family:var(--mono);font-size:11px;color:var(--cyan);min-width:26px;text-align:right}
.sinDatos{margin:0;font-size:13px;color:var(--muted)}
.fCuerpo{padding:8px 10px 10px}
.fFila{display:flex;gap:5px;align-items:center;margin-top:5px}
.fFila > *{min-width:0}
.fFila input,.fFila select{flex:1}
.fFila .fCliente{flex:0 1 132px}
.fFila .fMedida{flex:0 1 104px}
.fFila .fAcomodo{flex:1 1 90px}
.fFila .fVoz{flex:0 1 calc(50% - 85px)}
.fFila .fNom{flex:0 1 165px}
.fMulti{position:relative;flex:1 1 110px;min-width:0}
.fMultiBox{width:100%;text-align:left;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);background-color:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:6px 22px 6px 9px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;appearance:none;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 9px center}
.fMultiBox.vacio{color:var(--text)}
.fMultiBox[aria-expanded=true]{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.14)}
.fMultiPanel{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:100%;width:max-content;max-width:min(280px,80vw);background:var(--card);border:1px solid var(--cyan);border-radius:10px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.fMultiOp{display:flex;align-items:center;gap:9px;padding:7px 8px;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text);cursor:pointer;border-radius:6px}
.fMultiOp:hover{background:var(--card-2)}
.fMultiOp input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--cyan);margin:0}
.fMultiPanel .fManual{margin-top:4px}
.fForm,.fForm .fCuerpo,.fBloque,.fAnexos{overflow:visible}
.fHead{cursor:pointer;user-select:none}
.fMultiFila{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 6px;border-top:1px solid var(--line)}
.fMultiFila:first-child{border-top:none}
.fMultiFila .fEtq{margin-top:0;flex:0 0 24px}
.fMultiFila select,.fMultiFila input{flex:1 1 110px;min-width:0}
.fMultiFila .fSeg{flex:0 0 70px}
.fMultiFila .fMultiOp{padding:5px 6px}
.fMultiPanel{max-width:min(420px,92vw)}
.fFila .fMulti.fProd,.fFila .fMulti.fMedidaCaja{flex:1 1 120px}
.fInfoCols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fSec{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:7px;border-top:1px solid var(--line)}
.fSec .fEtq{margin-top:0}
.fMini.fMasProd{font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:7px 9px}
.fInfoCols .fAnexos .fEtq{color:var(--bq)}
.fInfoCols .fCabTres{gap:4px}
.fInfoCols .fCabTres .fEtq{margin-left:4px;font-size:9.5px}
.fInfoCol .fEtqInfo,.fInfoCol .fAnexoTxt,.fInfoCol .fAsa{color:var(--bq)}
.fInfoCol input[type=text]{border-color:color-mix(in srgb,var(--bq) 45%,var(--line-2))}
.fInfoCol .fEtqInfo{flex:0 0 48px;font-size:9px}
.fDif{margin-top:10px}
.fDifTit{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--ui);font-weight:900;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bq)}
.fDifChecks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.fDifChecks .fToggle{flex:0 0 auto;margin:0;font-size:10.5px}
.fDifNada{margin-top:8px;font-family:var(--ui);font-size:11px;letter-spacing:.5px;color:var(--muted);text-transform:none}
.fMini.fAgregar{width:100%;margin-top:10px;padding:11px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-style:dashed}
.fDif .fTop .fEtq{margin-top:0}
.fFs{display:inline-flex;gap:3px;flex:0 0 auto}
.fF{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:.5px;padding:5px 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--card);color:var(--muted);cursor:pointer;line-height:1}
.fF[aria-pressed=true]{color:var(--fc);border-color:var(--fc)}
b.fF{cursor:default}
.fTodos{font-size:9.5px;letter-spacing:1px;padding:6px 8px;text-transform:uppercase}
.fTodos[aria-pressed=true]{color:#FF00C8;border-color:#FF00C8}
.fBloque.plegado{padding:5px 8px}
.fBarra{display:flex;align-items:center;gap:8px;cursor:pointer}
.fBarra .fEtq{margin-top:0}
.fBarra .fResumen{flex:1;min-width:0;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fHead .fFlecha{color:var(--cyan);font-size:13px;margin-left:6px}
.fForm.plegado{margin-top:14px}
.cargando{display:flex;align-items:center;gap:16px;padding:22px 20px}
.cargandoTxt{font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.cargandoTxt small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:1.5px;color:var(--muted)}
.spin{width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--cyan);animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.fFila .fUso{flex:0 1 96px}
.fFila .fUbic{flex:0 1 132px}
.fFila .fLogoTxt{flex:0 1 150px}
.fFila .fColor{flex:0 1 110px}
.fFila .fGiro{flex:0 1 124px}
.fFila .fGenero{flex:0 1 124px}
.fCal{position:relative;flex:0 0 auto;display:inline-block}
.fCal input[type=date]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;padding:0;margin:0;border:0;cursor:pointer}
.fTemFila .fToggle{flex:0 0 auto;margin-right:2px;gap:4px;color:var(--cyan);font-size:12.5px;letter-spacing:1.5px}
.fTemFila .fToggle input{width:20px;height:20px}
.fChips.fSub{margin-top:4px;padding-left:4px}
.fChips.fSub .fEtq{margin-top:0}
.fChips .fManual{flex:1 1 120px;min-width:0}
.fCabTres{flex-wrap:wrap}
.fCabTres .fEtq{margin-left:8px}
.fCabTres .fEtq:first-child{margin-left:0}
.fPersFila .fEtqInfo,.fExtraFila .fEtqInfo{flex:0 0 76px}
.fTemFila select:disabled,.fTemFila input:disabled{opacity:.4}
.fInfoCab{justify-content:space-between;margin-top:8px}
.fInfoLista{margin-top:2px}
.fInfoFila{display:flex;align-items:center;gap:5px;margin-top:4px}
.fInfoFila .fAsa,.fAnexoFila .fAsa,.fLogoFila .fAsa,.fPersFila .fAsa,.fExtraFila .fAsa{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:var(--cyan);font-size:14px;line-height:1;padding:8px 7px;flex:0 0 auto;letter-spacing:-1px;border:1px solid var(--line-2);border-radius:8px;background:var(--card)}
.fInfoFila .fAsa:active,.fAnexoFila .fAsa:active,.fLogoFila .fAsa:active,.fPersFila .fAsa:active,.fExtraFila .fAsa:active{cursor:grabbing}
.fInfoFila.arrastrando,.fAnexoFila.arrastrando,.fLogoFila.arrastrando,.fPersFila.arrastrando,.fExtraFila.arrastrando{opacity:.45}
.fPorQuien:placeholder-shown{border-color:#FFD400;box-shadow:0 0 7px rgba(255,212,0,.35)}
.fInfoFila .fEtqInfo{flex:0 0 56px;font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1.2px;color:var(--cyan)}
.fInfoFila input{flex:1;min-width:0}
.fInfoFila .fAnexoTxt{flex:1;min-width:0;font-family:var(--mono);font-size:12px;color:var(--text);padding:6px 9px;border:1px dashed var(--line-2);border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.repBarra{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 4px 12px}
.repBarra .fToggle{margin:0}
.repBarraIzq{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* capturas de evidencia en los reportes de diseño */
.rnCapFila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.rnCapPista{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.5px}
.rnCapturas{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.rnCap{position:relative}
.rnCap img{height:92px;max-width:160px;object-fit:cover;border-radius:10px;border:1px solid var(--line-2);display:block;cursor:zoom-in}
.rnCapQuitar{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--alert);background:#0A0A12;color:var(--alert);font-size:11px;cursor:pointer;line-height:1}
.repCapWrap{margin-top:8px}
.repCaps{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.repCapMini{max-height:220px;max-width:100%;border-radius:10px;border:1px solid var(--line-2);cursor:zoom-in}
.fotoOverlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.fotoOverlay img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.repBarra select.repFiltro{width:auto;min-width:150px;padding:6px 30px 6px 10px;font-size:11px}
/* reportes en dos columnas, compactos (5 por columna a la vista); la tarjeta abierta ocupa las dos */
.repGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.repGrid .slip{margin-top:0}
.repGrid .slip.abierto{grid-column:1 / -1}
.repGrid .slip-head{padding:8px 12px;font-size:11px;letter-spacing:1.2px}
.repGrid .repError{font-size:12px;padding-top:8px !important}
.repGrid .slip:not(.abierto) .repError{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:10px}
@media (max-width:760px){.repGrid{grid-template-columns:1fr}.repBarra{flex-wrap:wrap}}
.repQuien{display:flex;align-items:center;gap:10px}
.repResumen{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px 8px}
.repKpi{flex:1 1 90px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px}
.repKpi b{font-size:18px;color:var(--cyan);line-height:1.1}
.repKpi span{font-size:9.5px;letter-spacing:1.2px;color:var(--muted)}
.repBarra input.repBusca{width:auto;min-width:200px;padding:6px 10px;font-size:11px;letter-spacing:.5px}
.repAcc{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px 2px}
.repAcc .rBtn{font-size:10px;padding:5px 10px}
.repChk{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}
.fFila .fCant{flex:0 0 52px}
.fFila .fProd{flex:0 0 136px}
.fFila .fSeg{flex:0 0 80px}
.fFila .fTipo{flex:0 0 96px}
.fBloque{border:1px solid var(--line-2);border-radius:10px;padding:6px 8px 8px;margin-top:6px;background:var(--card-2)}
.fBloque.n2{--bq:#FF00C8;border-color:rgba(255,0,200,.55);background:rgba(255,0,200,.05)}
.fBloque.n3{--bq:#FFD400;border-color:rgba(255,212,0,.55);background:rgba(255,212,0,.05)}
.fBloque.n4{--bq:#2BFF88;border-color:rgba(43,255,136,.55);background:rgba(43,255,136,.05)}
.fBloque.n2 > .fTop .fEtq,.fBloque.n3 > .fTop .fEtq,.fBloque.n4 > .fTop .fEtq{color:var(--bq);font-size:12.5px}
.fBloque.n2 > .fTop .fMini.rojo,.fBloque.n3 > .fTop .fMini.rojo,.fBloque.n4 > .fTop .fMini.rojo{border-color:var(--bq)}
.fBloque.n2 input,.fBloque.n2 select,.fBloque.n2 .fMultiBox,.fBloque.n2 .fEtq,.fBloque.n2 .fEtqInfo,.fBloque.n2 .fToggle,.fBloque.n2 .eng,.fBloque.n2 .fMini,.fBloque.n2 .fAnexoTxt,.fBloque.n2 .fAsa,.fBloque.n2 .fMultiOp,
.fBloque.n3 input,.fBloque.n3 select,.fBloque.n3 .fMultiBox,.fBloque.n3 .fEtq,.fBloque.n3 .fEtqInfo,.fBloque.n3 .fToggle,.fBloque.n3 .eng,.fBloque.n3 .fMini,.fBloque.n3 .fAnexoTxt,.fBloque.n3 .fAsa,.fBloque.n3 .fMultiOp,
.fBloque.n4 input,.fBloque.n4 select,.fBloque.n4 .fMultiBox,.fBloque.n4 .fEtq,.fBloque.n4 .fEtqInfo,.fBloque.n4 .fToggle,.fBloque.n4 .eng,.fBloque.n4 .fMini,.fBloque.n4 .fAnexoTxt,.fBloque.n4 .fAsa,.fBloque.n4 .fMultiOp{color:var(--bq)}
.fBloque.n2 input::placeholder,.fBloque.n3 input::placeholder,.fBloque.n4 input::placeholder{color:var(--bq);opacity:.5}
.fBloque.n2 input[type=checkbox],.fBloque.n3 input[type=checkbox],.fBloque.n4 input[type=checkbox]{accent-color:var(--bq)}
.fBloque.n2 .eng[aria-pressed=true],.fBloque.n3 .eng[aria-pressed=true],.fBloque.n4 .eng[aria-pressed=true]{border-color:var(--bq)}
.fCuerpo > :first-child{margin-top:0}
.fEtq{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);white-space:nowrap;margin-top:6px}
.fFila .fEtq{margin-top:0;flex:0 0 auto}
.fAnexos{margin-top:4px}
.fChips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.fChips .eng{padding:5px 9px;font-size:9.5px}
.fMini{font-family:var(--ui);font-weight:800;font-size:12px;background:var(--card);border:1px solid var(--line-2);border-radius:8px;color:var(--cyan);padding:6px 10px;cursor:pointer;white-space:nowrap;flex:0 0 auto;line-height:1}
.fMini:hover{border-color:var(--cyan)}
.fMini.rojo{color:var(--alert)}
.fToggle{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);cursor:pointer;flex:1}
.fToggle input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--cyan)}
.fForm input[type=text],.fForm input[type=number],.fForm select,.fForm textarea{font-size:12px;padding:6px 9px;border-radius:8px}
/* Tal como escribe: los cuadros muestran mayúsculas y minúsculas reales; los menús y las pistas siguen en mayúsculas */
.fForm select,.fForm input::placeholder,.fForm textarea::placeholder{text-transform:uppercase}
/* ⇪ ACTIVASTE MINÚSCULAS: borde amarillo en el cuadro y etiquetita arriba de él; los dos duran 1.5 segundos y se difuminan */
.fForm input[type=text],.fForm textarea{transition:border-color .45s ease,box-shadow .45s ease}
.fForm input.fMinus,.fForm textarea.fMinus{border-color:var(--yellow)!important;box-shadow:0 0 0 1px rgba(255,214,10,.35)}
#avisoMinus{position:fixed;z-index:80;transform:translateY(calc(-100% - 3px));pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;background:var(--yellow);color:#111;font-family:var(--ui);font-weight:900;font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 0 10px rgba(255,214,10,.4)}
#avisoMinus.on{opacity:1;visibility:visible;transition:opacity .12s ease}
.fForm select.menu{padding:6px 22px 6px 9px;font-size:11px}
.fForm input.fComboInp{padding:6px 22px 6px 9px} /* la cajita que reemplaza a un desplegable (PERSONALIZADA / OTRO / OTRA) mide igual que él (Alexis, 2026-09-24) */
.fForm input::placeholder,.fForm textarea::placeholder{font-size:11px;letter-spacing:.3px}
@media (max-width:600px){.fFila .fProd{flex:0 0 100px}.fFila .fCant{flex:0 0 48px}.fTop .fMedida{flex:1 1 90px}.fFila .fSeg{flex:0 0 64px}.fTop,.fTemFila,.fAnexoFila,.fLogoFila{flex-wrap:wrap}.fTop .fCliente{flex:1 1 100%}.fTemFila > select,.fTemFila > input{flex:1 1 38%}.fFila .fAcomodo{flex:1 1 38%}.fAnexoFila .fTipo{flex:0 0 90px}.fAnexoFila .fNom{flex:1 1 120px}.fAnexoFila .fMulti{flex:1 1 38%}.fInfoFila{flex-wrap:wrap}.fInfoFila input[type=text]{flex:1 1 42%}.fInfoCols{grid-template-columns:1fr}.fLogoFila .fColor,.fLogoFila .fGiro,.fLogoFila .fGenero{flex:1 1 30%}.fLogoFila .fLogoTxt{flex:1 1 100%}}
.campoFalta{border-color:var(--alert) !important;box-shadow:0 0 0 3px rgba(255,61,113,.18) !important}
mark.marcaRep{background:rgba(255,214,10,.9);color:#111;padding:0 3px;border-radius:3px;box-shadow:none;font-weight:600;cursor:pointer}
#btnResaltar{
position:fixed;z-index:70;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
background:var(--yellow);color:#111;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;
box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.resumenMarcas{font-family:var(--mono);font-size:11px;color:var(--yellow);padding:0 14px 12px;text-align:center;white-space:pre-wrap}
.repSistema .slip-head span:first-child{color:var(--yellow)}
.statsGrid{display:grid;gap:16px}
/* lote 58: estadísticas compactas */
.statsCab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.statsTabs{margin:0;justify-content:flex-start}
#statsCuerpo select.statsSelAnt{width:auto!important;max-width:260px;min-width:210px;height:34px;padding:0 26px 0 10px;font-size:10.5px;letter-spacing:.5px}
#vistaStats .histCard{margin:0}
.statsResumen{margin-bottom:12px}
#vistaStats .statsSeis{grid-template-columns:repeat(6,minmax(0,1fr))}
.statsAcc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.statsAccBtn{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;color:var(--text);cursor:pointer;min-width:0;font-family:var(--ui)}
.statsAccBtn:hover,.statsAccBtn[aria-pressed=true]{border-color:var(--cyan)}
.statsAccBtn b{font-weight:800;font-size:10px;color:var(--cyan);letter-spacing:.6px;white-space:nowrap}
.statsAccBtn span{font-family:var(--mono);font-size:10px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.statsAccBtn i{font-style:normal;color:var(--muted)}
.statsDetalle{margin-bottom:12px!important}
.statsDetalle h3{justify-content:space-between}
.statsDos{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.statsDos > div{display:flex;flex-direction:column;gap:12px;min-width:0}
.statsTabla{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:10.5px}
.statsTabla td,.statsTabla th{padding:5px 6px;border-top:1px solid var(--line);text-align:left;white-space:nowrap}
.statsTabla th{font-size:8px;letter-spacing:2px;color:var(--muted);font-weight:400;border-top:0}
.statsTabla th.n,.statsTabla td.n,.statsTabla td.p{text-align:right}
.statsTabla td.n{color:var(--cyan);font-weight:700}
.statsTabla td.p{color:var(--muted)}
.statsTabla td.p.mal{color:var(--alert)}
.statsTabla td.b{width:120px}
.statsBarra{display:inline-block;width:110px;height:5px;background:var(--line);border-radius:3px;overflow:hidden;vertical-align:middle}
.statsBarra i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.statsMas{margin-top:8px;height:30px}
.statsAlertas{display:flex;flex-direction:column;gap:6px}
.statsAl{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:10.5px}
.statsAl > span:nth-child(2){flex:1;min-width:0}
@media(max-width:900px){#vistaStats .statsSeis{grid-template-columns:repeat(3,minmax(0,1fr))}.statsAcc{grid-template-columns:1fr 1fr}.statsDos{grid-template-columns:1fr}}
.statsGrid .slip{margin-top:0}
.repError{
text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--text);
font-weight:400;letter-spacing:.3px;text-transform:none;
padding:0 14px 12px;white-space:pre-wrap;word-break:break-word;
}
.repCols > div{padding:0 14px 14px}
.repCols pre{padding:6px 0 0}
.notaCols{display:grid;gap:16px}
.notaCols .slip{margin-top:0}
.notaBtns{text-align:center;margin-top:14px}
.notaBtns .btn{width:auto;display:inline-block;padding:12px 22px;font-size:13px;margin:6px 6px 0}
/* La linea neon que separa izquierda/derecha */
.neonLinea{
content:'';position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
background:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.75),0 0 24px rgba(0,240,255,.35);
}
@media(min-width:1000px){
.statsGrid{grid-template-columns:1fr 1fr;align-items:start}
.repCols{display:grid;grid-template-columns:1fr 1fr;column-gap:0}
.repCols > div:first-child{padding-right:22px}
.repCols > div + div{position:relative;padding-left:22px}
.repCols > div + div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.75),0 0 24px rgba(0,240,255,.35)}
.notaCols{grid-template-columns:1fr 1fr;column-gap:0;align-items:start}
.notaCols > div:first-child{padding-right:22px}
.notaCols > div + div{position:relative;padding-left:22px}
.notaCols > div + div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.75),0 0 24px rgba(0,240,255,.35)}
.dPanel + .dPanel{position:relative}
.dPanel + .dPanel::before{content:'';position:absolute;left:-9px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.75),0 0 24px rgba(0,240,255,.35)}
}
table.consumo{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
table.consumo td,table.consumo th{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left}
table.consumo th{
font-family:var(--ui);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;
font-size:10px;color:var(--muted);
}
table.consumo td:last-child{color:var(--cyan);font-weight:600}
.barra{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:10px 0 14px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
/* ---------- plataforma de diseño ---------- */
.dGrid{display:grid;gap:16px}
.dPanel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.dPanel h3{margin:0 0 14px;font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
.dZonaImg{
border:1.5px dashed var(--line-2);border-radius:12px;padding:16px;margin-top:12px;
text-align:center;color:var(--muted);font-size:11.5px;cursor:pointer;line-height:1.5;
transition:border-color .15s;
}
.dZonaImg:hover,.dZonaImg.arrastrando{border-color:var(--cyan);color:var(--cyan)}
.dZonaImg img{max-width:100%;max-height:110px;border-radius:8px;display:block;margin:0 auto}
.dZonaImg .quitar{display:block;margin-top:6px;color:var(--alert);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.dMini{flex:1;padding:14px 6px;margin-top:8px;font-family:var(--mono)}
.dImagenGrande{width:100%;border-radius:12px;display:block;border:1px solid var(--line)}
.dImgBtns{display:flex;gap:8px;margin-top:12px}
.dImgBtns .btn{margin-top:0;padding:11px 8px;font-size:12.5px}
.imgGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:6px}
.imgGrid .cel{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.imgGrid img{width:100%;border-radius:6px;display:block;cursor:pointer}
.imgGrid .pie{font-family:var(--mono);font-size:9px;color:var(--muted);margin:6px 0 4px;letter-spacing:.5px;text-transform:uppercase}
.imgGrid a{color:var(--cyan);font-size:10px;font-family:var(--ui);font-weight:800;text-transform:uppercase;letter-spacing:1px;text-decoration:none}
/* ---------- pantalla grande (laptop): usar todo el ancho ---------- */
@media(min-width:1000px){
.dGrid{grid-template-columns:330px minmax(0,1fr) 350px;align-items:start}
.wrap{max-width:none;padding-left:34px;padding-right:34px}
.gate{max-width:520px;margin:60px auto 0}
/* Dos mitades fijas: entrada a la izquierda, salida a la derecha. Nunca se mueven. */
#principal{display:grid;grid-template-columns:35fr 65fr;column-gap:0;align-items:start}
#principal.modoSrt{grid-template-columns:35fr 65fr}
#principal > *{grid-column:1;min-width:0;padding-right:24px}
#principal > #out{grid-column:2;grid-row:1 / span 20;min-width:0;padding-right:0;padding-left:24px;position:relative;align-self:stretch}
#principal > #admin{grid-column:1 / -1}
#out .slip:first-child{margin-top:0}
/* Espacio reservado para la nota antes de generar */
#out:empty::before{
content:'Aquí aparecerá tu nota';display:flex;align-items:center;justify-content:center;
min-height:340px;border:1.5px dashed var(--line-2);border-radius:14px;
font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
}
/* Constructor: letra y espaciado mayores arriba; INFO se queda compacta */
.fForm input[type=text],.fForm input[type=number],.fForm select,.fForm textarea{font-size:13.5px;padding:8px 10px}
.fForm select.menu{padding:8px 24px 8px 10px;font-size:12.5px}
.fForm input.fComboInp{padding:8px 24px 8px 10px}
.fMultiBox{font-size:12.5px;padding:8px 22px 8px 10px}
.fFila{margin-top:8px}
.fEtq{font-size:11.5px}
.fChips .eng{padding:7px 11px;font-size:10.5px}
.fToggle{font-size:11.5px}
.fMini{font-size:13px;padding:7px 11px}
.fTodos{font-size:10.5px}
.fSec:empty,.fSec .fEtq:empty{display:none}
.fSec{margin-top:12px;padding-top:8px}
.fInfo input[type=text]{font-size:12px;padding:6px 9px}
.fInfo .fFila{margin-top:6px}
.fInfoFila{margin-top:4px}
.fInfo .fMini{font-size:12px;padding:6px 10px}
.fInfo .fEtq{font-size:10.5px}
.fMini.fAdd{letter-spacing:1.2px;text-transform:uppercase;font-size:11px;padding:8px 12px}
.fCabTres{gap:12px}
.fCabTres .fAdd{font-size:12px;padding:9px 15px;letter-spacing:1.3px}
.fCabApretada{gap:6px 8px}
.fCabApretada .fAdd{font-size:9.5px;padding:6px 9px;letter-spacing:.6px}
.fCabApretada .fNLInline{margin-left:6px}
.fCabApretada .eng.fNoLleva{padding:6px 8px;font-size:9px;gap:4px}
.fFila .fQueEs{flex:0 1 150px}
.eng.fNoLleva{display:inline-flex;align-items:center;gap:6px;position:relative}
.eng.fNoLleva .fEmo{font-size:14px;line-height:1}
.eng.fNoLleva[aria-pressed=true]{color:var(--alert);border-color:var(--alert);background:rgba(255,70,90,.12);box-shadow:0 0 10px rgba(255,70,90,.25)}
.eng.fNoLleva[aria-pressed=true] .fTxt{text-decoration:line-through;text-decoration-thickness:2px}
.eng.fNoLleva[aria-pressed=true] .fEmo{filter:grayscale(1);opacity:.7}
.fMini.fMasProd{color:#FF00C8;border-color:#FF00C8}
.fSec{justify-content:center;gap:12px}
.fInfoCab{justify-content:flex-start;gap:8px}
.fElige{align-items:center;gap:6px;flex-wrap:wrap}
.fEligeBtn{font-size:11px;letter-spacing:1px}
.fParaTag{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:.5px;padding:5px 7px;border:1px solid;border-radius:6px;flex:0 0 auto;line-height:1}
.fDe .fEtq,.fDe .fEtqInfo,.fDe .fAsa,.fDe .fMini,.fDe .fMultiBox,.fDe .fToggle,.fDe .fAnexoTxt,.fDe input,.fDe select,.fDe label{color:var(--bq)}
.fDe input,.fDe select,.fDe .fMultiBox,.fDe .fMini,.fDe .fAsa,.fDe .fAnexoTxt{border-color:color-mix(in srgb,var(--bq) 55%,var(--line-2))}
.fDe input:focus,.fDe select.menu:focus,.fDe .fMultiBox[aria-expanded=true]{border-color:var(--bq);box-shadow:0 0 0 3px color-mix(in srgb,var(--bq) 18%,transparent)}
.fDe input::placeholder{color:var(--bq);opacity:.5}
.fDe input[type=checkbox],.fDe input[type=radio]{accent-color:var(--bq)}
.fDe .fMini.rojo{color:var(--alert);border-color:var(--line-2)}
.fDe .eng.fNoLleva{color:var(--bq);border-color:color-mix(in srgb,var(--bq) 55%,var(--line-2))}
.fDe .eng.fNoLleva[aria-pressed=true]{color:var(--alert);border-color:var(--alert)}
.fDe .fMultiPanel{border-color:var(--bq)}
.fSec .fEtq{color:var(--text)}
.fTodos,.fTodos[aria-pressed=true]{color:var(--muted);border-color:var(--line-2);background:transparent}
.fTodos:hover{color:var(--text);border-color:var(--muted)}
.fCabTres{justify-content:center}
.fCabTres.fBlanco .fAdd{color:var(--text);border-color:var(--line-2)}
.eng.fNoLleva{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 55%,var(--line-2))}
.eng.fNoLleva[aria-pressed=true]{color:var(--alert);border-color:var(--alert)}
.fColNL .fColTit{display:block;text-align:center;margin:0 0 4px;font-size:11.5px}
.fColNL .fChips{justify-content:center;margin-top:4px}
.fColsDiv{position:relative}
.fColsDiv::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,#00F0FF,#FF00C8);opacity:.8}
.fInfoCab.fColTitFila{justify-content:center;gap:8px}
.fInfoCols{gap:6px}
.fInfoCols .fInfoFila{gap:4px}
.fInfoCols .fInfoFila .fEtqInfo{flex:0 0 44px;font-size:9px;letter-spacing:.8px}
.fInfoCols .fInfoFila .fAsa{padding:6px 4px}
.fInfoCols .fInfoFila input[type=text]{padding:6px 7px}
/* Ajustes finos (lote 17) */
.fInfoCab{justify-content:flex-start;gap:8px;flex-wrap:wrap;row-gap:6px}
.fInfoCab .fEtq,.fInfoCab .fMini{flex:0 0 auto}
.fInfoCab.fColTitFila{justify-content:center}
.fFila .fNom,.fAnexoFila .fNom{flex:1 1 165px}
.fChips > .fEtq{font-size:10.5px;letter-spacing:1px;padding:9px 0;line-height:1.2;margin-top:0;align-self:center}
.fChips .eng.fNoLleva{flex:1 1 auto;justify-content:center}
.fColNL .fChips{margin-top:0}
.fTodos,.fTodos[aria-pressed=true]{color:var(--alert);border-color:var(--alert)}
.fTodos:hover{color:var(--alert);border-color:var(--alert);background:rgba(255,70,90,.1)}
.fElige .fEtq{color:var(--text)}
.fElige .fEligeBtn{flex:1 1 auto}
.fSecNL{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.fSecNLMuchos{grid-template-columns:1fr;justify-items:center}
.fSecNL .fColTit{margin:0;text-align:center}
.fSecNL + .fColsDiv{margin-top:4px}
.fSecNL + .fColsDiv::before{top:-8px}
/* letra un punto menor y un poco menos de aire (1 y 2+ flyers); INFO igual */
.fForm input[type=text],.fForm input[type=number],.fForm select,.fForm textarea{font-size:13px;padding:7px 10px}
.fForm select.menu{padding:7px 24px 7px 10px;font-size:12px}
.fForm input.fComboInp{padding:7px 24px 7px 10px}
.fMultiBox{font-size:12px;padding:7px 22px 7px 10px}
.fFila{margin-top:7px}
.fEtq{font-size:11px}
.fMini{font-size:12.5px;padding:6px 10px}
.fSec{margin-top:10px;padding-top:6px}
.fInfo input[type=text]{font-size:12px;padding:6px 9px}
.fInfo .fMini{font-size:12px;padding:6px 10px}
.fInfo .fEtq{font-size:10.5px}
.fInfoCols .fInfoFila input[type=text]{padding:6px 7px}
/* lote 18 */
.fFila .fCliente{flex:1.1 1 140px}
.fFila .fMedida{flex:1 1 150px}
.fFila .fLogoTxt{flex:1 1 200px}
.fFila .fColor{flex:0 1 125px}
.fFila .fGiro{flex:0 1 140px}
.fFila .fGenero{flex:0 1 140px}
textarea.fLogoTxt{min-height:34px;height:34px;resize:none;line-height:1.35;overflow:hidden;font-family:var(--mono)}
.fTodos,.fTodos[aria-pressed=true]{font-size:10px;padding:5px 9px;letter-spacing:1px}
.fMini.fAddInfo{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:7px 11px}
.fInfoCab.fColTitFila{justify-content:center}
/* lote 19 */
.fFila .fNom,.fAnexoFila .fNom{flex:1 1 120px}
.fMulti.fUso{flex:0 1 120px}
.fMulti.fUbic{flex:1 1 175px}
.fFila .fLogoTxt{flex:1 1 150px}
.fFila .fColor{flex:1 1 150px}
.fFila .fGiro{flex:1 1 160px}
.fFila .fGenero{flex:1 1 150px}
textarea.fLogoTxt::placeholder{font-size:10px;letter-spacing:.2px}
/* lote 20 */
.fForm .fMini.fAdd,.fForm .fMini.fAddInfo,.fCabTres.fBlanco .fAdd,.fDe .fMini.fAddInfo{color:var(--alert) !important;border-color:var(--alert)}
.fForm .fMini.fAdd:hover,.fForm .fMini.fAddInfo:hover{background:rgba(255,70,90,.1)}
textarea.fLogoTxt::placeholder{font-size:9px;letter-spacing:0}
.fFila .fLogoTxt{flex:1.4 1 170px}
.fFila .fColor{flex:1 1 118px}
.fFila .fGiro{flex:1 1 125px}
.fFila .fGiro.fChico{flex:0 1 96px}
.fFila .fGenero{flex:1 1 130px}
.fMultiTodos .fEtq{color:var(--text);flex:0 0 auto;min-width:24px}
.fMultiTodos{border-bottom:1px solid var(--line-2)}
.fColNL .eng.fNoLleva{padding:5px 7px;font-size:9.5px;gap:4px;letter-spacing:.6px}
.fColNL .eng.fNoLleva .fEmo{font-size:12px}
.fInfoCols .fAddInfo{font-size:10px;padding:5px 9px;letter-spacing:1px}
.fInfoCols .fInfoCab{margin-top:2px}
.fInfoCols .fInfoLista{margin-top:0}
.fInfoCols .fInfoLista .fInfoFila:first-child{margin-top:2px}
/* lote 21 */
.fInfoFila .fAsa{font-size:15px;letter-spacing:0;padding:5px 7px;line-height:1}
.fBloque > .fInfoCol .fInfoLista{margin-top:8px}
.fInfoCols .fInfoCab{margin-top:10px;margin-bottom:4px}
.fColNL .fChips{justify-content:center}
.fColNL .eng.fNoLleva{flex:0 0 auto}
.fColNL .fSalto{flex-basis:100%;height:0;margin:0;padding:0}
.fColsDiv::before{background:var(--line-2);opacity:1}
.fParaWrap{flex:0 0 auto}
.fParaTag{cursor:pointer;background:var(--card);font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:.5px;padding:5px 7px;border:1px solid;border-radius:6px;line-height:1}
.fParaTag[aria-expanded=true]{box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.fParaPanel{display:flex;gap:4px;padding:5px;min-width:0;width:max-content;left:auto;right:0}
.fCal.fCalDirecto input[type=date]{pointer-events:none;width:1px;height:1px;left:0;top:100%;opacity:0}
/* lote 22 */
.cargando{justify-content:center;text-align:center}
.fInfoCols > *{min-width:0}
.fRedesCaja{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:4px;flex-wrap:wrap;padding:3px 5px;border:1px solid color-mix(in srgb,var(--bq,var(--cyan)) 45%,var(--line-2));border-radius:8px;background:var(--card)}
.fRedesCaja .fRedesPills{flex-wrap:wrap!important}
.fInfoCols .fRedesCaja{gap:3px;padding:2px 4px}
.fInfoCols .fRedesCaja .eng{padding:4px 4px;font-size:8px;letter-spacing:.2px}
.fInfoCols .fRedesCaja .fIcoSel{flex:0 1 84px;min-width:64px;font-size:8.5px;padding-left:6px}
.fInfoCols .fRedesCaja .fMismoBtn{max-width:54px}
.fInfoCols .fRedesCaja .fMasOtro{padding:4px 5px}
.fInfoCols .fInfoItemImg.fFilaRedes{flex-wrap:nowrap!important}
.fInfoCol .fRedesCaja .fAnexoTxt{border:0;padding:0}
.fInfoCol .fDiraCab.fColTitFila{margin-top:0}
.fInfoCol .fDira{margin-top:0}
/* lote 24: IMAGEN y LOGO alineados como FLYER: lo que va a la izquierda de la caja mide lo mismo */
.fAlinL > .fIcoSel,.fAlinL > .fCompAgd,.fAlinL > .fTipoDira,.fAlinL > .fEtqInfo{flex:0 0 100px!important;width:100px;min-width:100px!important;box-sizing:border-box;margin:0}
.fAlinL > .fEtqInfo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fAlinL > .fCompAgd{text-align:center;padding-left:0!important;padding-right:0!important}
.fForm .fAlinL > .fIcoSel,.fForm .fAlinL > .fTipoDira{font-size:10px!important;padding-left:8px!important;padding-right:20px!important}
.fAlinL > .fAnexoTxt,.fAlinL > input[type=text]{flex:1 1 0;min-width:0}
.fRedesCaja{min-height:34px;box-sizing:border-box;gap:4px;padding:2px 5px;align-items:center;align-content:center}
.fRedesCaja .eng{flex:0 0 auto!important;height:26px;padding:0 8px!important;font-size:9px!important;letter-spacing:.5px!important;color:var(--text);border-color:var(--line-2);display:inline-flex;align-items:center;justify-content:center;opacity:1}
.fRedesCaja .fMismoBtn{max-width:none!important;overflow:visible;text-overflow:clip;white-space:nowrap}
.fRedesCaja .fRedOtro{height:26px;padding:0 7px;box-sizing:border-box}
.fRedesCaja .fMasOtro{padding:0 7px!important;font-size:12px!important}
.fInfoCols .fRedesCaja{min-height:30px;gap:3px;padding:1px 4px}
.fInfoCols .fRedesCaja .eng{height:23px;padding:0 4px!important;font-size:8px!important;letter-spacing:.2px!important}
.fInfoCols .fRedesCaja .fRedOtro{height:23px;padding:0 5px}
.fInfoCols .fAlinL > .fIcoSel,.fInfoCols .fAlinL > .fCompAgd,.fInfoCols .fAlinL > .fTipoDira,.fInfoCols .fAlinL > .fEtqInfo{flex:0 0 84px!important;width:84px;min-width:84px!important}
/* lote 25: boton REDES como AGD, redes con icono fuera de la caja, botones chicos, SIN REDES por logo */
.fAlinL > .fRedesWrap{flex:0 0 100px!important;width:100px;min-width:100px!important;box-sizing:border-box}
.fInfoCols .fAlinL > .fRedesWrap{flex:0 0 84px!important;width:84px;min-width:84px!important}
.fRedesWrap .fRedesBtn{width:100%;text-align:center;padding-left:0!important;padding-right:0!important;box-sizing:border-box;margin:0}
.fRedesWrap .fRedesBtn[aria-expanded=true]{box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.fRedesPanel{display:flex;gap:4px;padding:5px;left:0;right:auto;width:max-content;min-width:0}
.fRedIcoBtn{width:28px;height:28px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:0 0 auto!important}
.fRedIco{width:15px;height:15px;fill:currentColor;display:block}
.eng.fRedIcoBtn{color:var(--text);border-color:var(--line-2)}
.eng.fRedIcoBtn[aria-pressed=true]{color:#05050A}
.eng.fRedIcoBtn.fRedLlena[aria-pressed=true]{box-shadow:0 0 0 2px var(--bq,var(--cyan))}
.fEtqIco{display:inline-flex;align-items:center;gap:3px}
.fEtqIco .fRedIco{width:14px;height:14px}
.fInfoItemImg.fFilaRedes .fMismoBtn{color:var(--text);border-color:var(--line-2);max-width:none!important;overflow:visible}
.fInfoItemImg.fFilaRedes .fMasOtro{color:var(--text);border-color:var(--line-2)}
.fInfoCols .fRedIcoBtn{width:22px;height:22px}
.fInfoCols .fRedIcoBtn .fRedIco{width:12px;height:12px}
.fInfoCols .fFilaRedes .fMismoBtn{padding:4px 4px!important;font-size:8px!important}
.fInfoCols .fInfoItemImg.fFilaRedes{flex-wrap:wrap!important;row-gap:4px;gap:3px}
.fForm .fMini.fSep{font-size:10px;letter-spacing:1px;padding:5px 9px;text-transform:uppercase}
/* lote 26: REDES se despliega hacia abajo como la lista de ¿SUG?; LOGO con el espaciado de FLYER */
.fRedesPanel{display:flex;flex-direction:column;gap:2px;padding:4px;left:0;right:0;width:auto;min-width:100%;max-width:none}
.fRedesPanel .fMini{width:100%;text-align:left;border:0;border-radius:6px;padding:8px 10px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);background:transparent;opacity:1!important;box-shadow:none!important}
.fRedesPanel .fMini:hover{background:rgba(255,255,255,.08)}
.fRedesPanel .fMini[aria-pressed=true]{color:var(--bq,var(--cyan));background:rgba(255,255,255,.06)}
.fInfoCol .fDira{gap:0}
.fInfoCol .fDiraCab.fInfoCab{margin-top:10px;margin-bottom:2px;padding-bottom:0}
.fInfoCol .fDira .fInfoLista{margin-top:0}
.fInfoCol .fDira .fInfoLista .fDiraFila:first-child{margin-top:2px}
.fRedesMismas{flex:1 1 0;min-width:0;text-align:left;font-family:var(--mono);font-size:12px;color:var(--text);padding:6px 9px;border:1px dashed var(--line-2);border-radius:8px;background:transparent;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.fRedesMismas small{font-family:var(--ui);font-weight:800;font-size:8px;letter-spacing:.6px;color:var(--muted);margin-left:auto}
.fRedesMismas:hover{border-color:var(--bq,var(--cyan))}
.fInfoCols .fRedesMismas{font-size:11px;padding:5px 8px}
@media (max-width:600px){.fRedesMismas small{display:none}}
.fMini.fIgualA{font-size:9px!important;padding:4px 7px!important;letter-spacing:.5px}
.fInfoItemImg .fEtqIco{flex:0 0 auto!important;min-width:0!important;width:auto!important;padding:0 2px}
.fInfoItemImg.fFilaRedes .fMismoTxt{flex:1 1 140px;min-width:120px}
/* lote 28 */
.fLogoFilaV .fTipoLogoV3{flex:0 0 118px}
.fFilaFp .fSugSelV{flex:0 0 118px}
/* lote 27 */
.fPista.fPistaSrt{font-size:8.5px;letter-spacing:.4px;color:var(--muted);flex:1 1 auto;min-width:0}
@media (max-width:600px){.fFilaHist{flex-wrap:wrap}.fFilaHist input{flex:1 1 100%}.fTopAudio .fProdCajaA,.fTopAudio .fVozMaster{flex:1 1 45%;min-width:0}}
.fMarcWrap{flex:0 0 auto}
.fMarcWrap .fParaPanel{display:flex;flex-direction:column;gap:2px;padding:4px;left:auto;right:0;width:max-content;min-width:170px}
.fMarcWrap .fParaPanel .fMini{text-align:left;border:0;opacity:1!important;box-shadow:none!important;font-size:10px;letter-spacing:.5px;padding:7px 9px}
.fMarcWrap .fParaPanel .fMini:hover{background:rgba(255,255,255,.08)}
.fForm .fInfoCols .fAlinL > .fIcoSel,.fForm .fInfoCols .fAlinL > .fTipoDira{font-size:9px!important;padding-left:7px!important;padding-right:18px!important}
.fInfoFila > *{min-width:0}
.fInfoCols .fInfoFila input[type=text]{flex:1 1 0;width:auto}
/* lote 24 */
.fEligeBtn[aria-pressed=true],.fParaPanel .fMini[aria-pressed=true]{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px currentColor}
.fEligeBtn[aria-pressed=false],.fParaPanel .fMini[aria-pressed=false]{opacity:.6}
.fMini.fListo{color:var(--text);border-color:var(--text)}
.fMini.fListo:disabled{opacity:.35;cursor:default}
.fMultiBox .fPista{font-size:8.5px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
/* tarjeta P.: redes al ancho como el NO LLEVA del flyer */
.fRedesTarjeta .fRedesGrupo{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.fRedesTarjeta .fRedesGrupo .eng.fRed{flex:1 1 auto;justify-content:center;text-align:center;padding:6px 10px;font-size:9.5px;letter-spacing:.6px}
/* retro de producción: panel del administrador */
.prodResumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:12px}
/* tarjetas chicas de números (retro de producción) */
.histStat{background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.histStatTit{font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:1.5px;color:var(--muted)}
.histStatVal{font-family:var(--ui);font-weight:900;font-size:19px;letter-spacing:.5px;color:var(--cyan)}
.histStatPie{font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:1px;color:var(--muted)}
.prodFila{border-top:1px solid var(--line);padding:10px 14px;display:flex;flex-direction:column;gap:5px}
.prodMeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.8px;color:var(--muted)}
.prodMeta b{color:var(--cyan)}
.prodMeta .malo{color:#FF3D8A}
.prodTxt{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--text);white-space:pre-wrap}
.prodRetro{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap;border-left:2px solid var(--line-2);padding-left:10px}
.prodBien{margin-top:12px;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.8px;color:var(--muted)}
/* lote 31 ago: imagen en columnas, redes/comp a la mitad, OTRO, columnas V3D, AYV partido */
.fImgsFilaH{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:5px 8px;margin-top:5px}
.fImgsFilaH .fFila{margin-top:0}
.fRedesFila select.fRedesMitad{flex:0 1 50%;order:2}
.fRedesFila .fRedesGrupo{order:1}
.fFila .fCompMitad{flex:0 1 50%}
.fRedOtro{flex:0 1 64px;min-width:52px;transition:flex-basis .18s}
.fRedOtro:focus{flex-basis:150px}
.fRedesGrupo .fMismo{margin-left:auto;flex:0 0 auto}
/* lote 2 sep: imagen con ¿REDES? + COMPLEMENTOS en un renglón (las redes elegidas bajan a la línea de abajo) */
.fRedesFila.fRedesComp{flex-wrap:wrap}
.fRedesFila.fRedesComp select.fRedesMitad{order:1;flex:1 1 calc(50% - 5px)}
.fFila.fRedesComp .fCompMitad{order:2;flex:1 1 calc(50% - 5px)}
.fRedesFila.fRedesComp .fRedesGrupo{order:3;flex:1 1 100%}
.fRedesFila.fRedesComp .fRedesGrupo:empty{display:none}
.fSepPar{gap:10px}
/* imagen: R SOCIALES y COMP como renglones fijos de la INFO */
.fInfoFila.fInfoItemImg .fEtqInfo{flex:0 0 auto;min-width:56px;white-space:nowrap}
.fInfoCols .fInfoFila.fInfoItemImg .fEtqInfo{flex:0 0 auto;min-width:44px}
.fInfoItemImg.fFilaRedes{flex-wrap:wrap;row-gap:5px}
.fInfoItemImg .eng{padding:6px 9px;font-size:9.5px;letter-spacing:.6px;flex:0 0 auto}
.fInfoItemImg .fRedesToggle{display:inline-flex;gap:4px;padding:2px;border-radius:10px;flex:0 0 auto}
.fInfoItemImg .fRedesPills{flex-wrap:wrap;gap:4px}
.fInfoItemImg .fRedOtro{flex:0 1 64px;min-width:52px}
.fInfoItemImg .fRedOtro:focus{flex-basis:150px}
.fInfoItemImg .fMismoBtn{margin-left:2px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fInfoItemImg .fIcoSel{flex:0 1 104px;min-width:72px}
.fInfoItemImg .fRedesPills{flex:0 0 auto}
.fRedOtraPill{font-size:9.5px!important;letter-spacing:.5px}
.fEtqOtra{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1px;color:var(--cyan);flex:0 0 auto}
.fInfoCols .fFilaRedes .fIcoSel,.fInfoLados .fFilaRedes .fIcoSel{flex:0 1 92px;min-width:60px;font-size:9px}
/* COMP: la pastilla AGD pegada a la etiqueta */
.fInfoItemImg.fFilaComp .fEtqInfo{min-width:0;margin-right:1px}
.fInfoCols .fInfoItemImg.fFilaComp .fEtqInfo,.fInfoLados .fInfoItemImg.fFilaComp .fEtqInfo{min-width:0}
.fInfoItemImg .fCompAgd{margin-left:0}
/* logo: mismo patrón que imagen */
.fRedesLogoFila{margin-top:6px}
.fFilaColorL .fEtqInfo,.fFilaCompL .fEtqInfo{white-space:nowrap;flex:0 0 auto;min-width:56px}
.fDiraCab{margin-top:8px}
.fInfoCols .fDira .fEtq{font-size:10px}
.fInfoCols .fInfoFilaL input[type=text]{flex:1 1 0;width:auto}
.fPersFilaL .fEtqInfo,.fExtraFilaL .fEtqInfo{flex:0 0 auto;min-width:56px}
/* logo: cinco pastillas en un renglón, ¿SUG? compacto, agarradera fija */
.fCabTres.fCabCinco{gap:6px 8px}
.fCabTres.fCabCinco .fAdd{font-size:10.5px;padding:7px 10px;letter-spacing:.8px}
.fForm .fSugCaja{flex:0 0 auto;width:auto;min-width:0}
.fForm .fSugCaja .fMultiBox{white-space:nowrap;padding:7px 26px 7px 10px;font-size:10.5px;min-width:150px}
.fForm .fSugCaja .fMultiBox .fPista{font-size:8px;opacity:.7}
.fSugPanel{width:max-content}
.fAsa.fAsaFija{opacity:.35;cursor:default}
.fParaTag.fParaFija{cursor:default;opacity:.85}
.fNadaNL{font-family:var(--ui);font-size:9.5px;letter-spacing:1px;color:var(--muted);opacity:.7}
.fColTitMov{display:none}
.fColNL .fColTit.fColTitMov{display:none}
.fChipsGen{justify-content:center;margin-top:8px}
.fChipsGen .fEtq{flex-basis:100%;text-align:center;margin:0 0 2px}
.fInfoCabV{margin-top:8px}
.fInfoCabV .fEtq{flex:0 0 auto}
.fFantasma{visibility:hidden;pointer-events:none}
/* MONOGRAMA y VIDEO 3D: renglón de arriba con sus cajas en un mismo espacio (como el PRODUCTO de LOGO) */
.fForm .fProdSlotMono,.fForm .fProdSlotV3{display:flex;gap:6px;flex:2.2 1 300px;min-width:0}
.fForm .fProdSlotMono > *,.fForm .fProdSlotV3 > *{flex:1 1 0;min-width:0}
.fForm .fProdSlotMono .fProdMono{flex:1.3 1 0}
.fForm .fProdSlotMono .fSugSel{flex:0.8 1 0}
.fForm .fProdSlotV3 .fFmtV3{flex:1.2 1 0}
.fMedidaPanel .fMultiFila .fProdMono,.fMedidaPanel .fMultiFila .fFmtV3{flex:1.4 1 100px}
.fBloqueMono{border:1px solid var(--line);border-radius:10px;padding:6px 8px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.fBloqueMono.fDe{border-left:3px solid var(--bq)}
.fBloqueMono .fSec{margin-top:0}
.fBloqueMono .fColTitFila,.fDira .fColTitFila{padding:0 0 2px}
.fFilaArm{margin-top:6px}
/* ARMABLE IA: ESTILO solo del ancho de sus palabras; el espacio que sobra es para TEM */
.fFilaArm .fTemArm{flex:3 1 260px;min-width:120px}
.fFilaArm .fEstiloWrap{flex:0 0 172px;width:172px;min-width:0}
.fFilaArm .fEstiloWrap .fMultiBox{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fFilaArm .fEstiloWrap .fEstiloArmTxt{width:100%;box-sizing:border-box}
.fFilaArm .fSugEstilo{flex:0 0 118px;min-width:0}
.fLogoFilaV .fTipo{flex:0 1 150px}
.fLogoFilaV .fColLogo{flex:1 1 170px}
.fLogoFilaV .fNombre{flex:2 1 220px}
.fLogoFilaV .fSugSelV,.fPersFilaV .fSugSelV{flex:0 0 118px;min-width:0}
.fLogoFilaV .fColLogo.fColAncho{flex-basis:calc(170px + 118px + 5px)} /* con COLOR AGD ocupa también el lugar de ¿SUG? y nada se mueve */
.fMovSel{flex:0 1 120px}
.fLogoFilaV .fLogoTxt{flex:1 1 160px;min-width:120px}
.fLogoFilaV .fLogoNuevoTxt{flex:1 1 220px}
.fLogoFilaV .fGiroL,.fLogoFilaV .fColor{flex:0 1 130px}
.fPersFilaV .fTipoPers{flex:1 1 200px}
.fPersFilaV .fTipoPers.fPersMini{flex:0 0 auto;width:auto;min-width:0}
.fPersFilaV .fPersDesc{flex:1 1 200px;min-width:0}
.fLogoFilaV .fModoWrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:0 0 auto;min-width:0;align-self:center}
.fLogoFilaV .fModoWrap .fTipo{flex:0 0 auto;width:auto;height:auto;min-width:0}
.fLogoFilaV .fPistaNuevo{white-space:nowrap;font-size:9px;letter-spacing:.5px;color:var(--muted);padding-left:4px}
.fFondoFilaV .fTipo{flex:0 1 170px}
.fCompFilaV3 .fEtqInfo{flex:0 0 auto}
.fTextoFilaV .fTextoTxt{flex:1 1 220px}
.fSugSelV{flex:0 1 150px;min-width:110px}
.fExtraFilaV .fEtqInfo{flex:0 0 auto;min-width:56px}
.fExtraFilaV input[type=text]{flex:1 1 200px}
.fCancionPanel .fEtq{white-space:normal;line-height:1.4}
.prodChk{width:16px;height:16px;accent-color:var(--cyan);cursor:pointer;flex:0 0 auto}
.prodBarra{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;margin-top:12px;font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1px;color:var(--muted)}
.prodBarra .eng{padding:6px 10px;font-size:9.5px}
.prodBarra .eng.malo{color:var(--alert);border-color:var(--alert)}
.prodFila.sel{background:rgba(0,240,255,.05)}
/* retro de producción: acciones por reporte */
.prodAcc{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.prodAcc .eng{padding:6px 10px;font-size:9.5px}
.prodAcc .eng.malo{color:var(--alert);border-color:var(--alert)}
.prodAcc .eng.verde{color:#2BFF88;border-color:#2BFF88}
.prodResp{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--card)}
.prodResp textarea{width:100%;min-height:64px;background:#05050A;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:var(--mono);font-size:12.5px;resize:vertical}
.prodDest{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1px;color:var(--muted)}
.prodRespOk{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:#2BFF88;white-space:pre-wrap}
.notaFolioCaja{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px}
.notaFolioMeta{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
/* Reportes de diseño (Retro de producción, compartido Danae/Torres): lista a la izquierda, estadísticas a la derecha */
.retroRepWrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start;margin-top:12px}
.retroRepBarra{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.retroRepBarra select.prodSelF{width:auto;min-width:150px}
.retroRepCard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:10px;cursor:pointer;border-left:3px solid var(--c,var(--line-2))}
.retroRepCard:hover,.retroRepCard:focus-visible{border-color:var(--c,var(--cyan))}
.retroRepCard.pendiente{background:linear-gradient(180deg,rgba(255,61,113,.06),var(--card) 60%)}
.retroRepInfo{display:flex;flex-direction:column;gap:3px}
.retroRepInfo b{font:800 13px var(--ui);color:var(--text)}
.retroRepInfo span{font:11px var(--ui);color:var(--muted)}
.retroRepFecha{font-family:var(--mono)!important}
.retroRepEstado{align-self:flex-start;font:800 9.5px var(--ui);letter-spacing:1px;border-radius:999px;padding:3px 9px;border:1px solid var(--line-2);color:var(--muted)}
.retroRepEstado.al{color:var(--alert);border-color:var(--alert)}
.retroRepEstado.ok{color:#2BFF88;border-color:#2BFF88}
.retroRepAcc{margin-top:2px}
.retroRepStatsCard{position:sticky;top:12px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.retroRepStatsCard h3{margin:0 0 2px;font:900 10px var(--ui);letter-spacing:2px;color:var(--muted);text-transform:uppercase}
@media(max-width:900px){
.retroRepWrap{grid-template-columns:1fr}
.retroRepStatsCard{position:static}
.retroRepStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:600px){
.retroRepBarra select.prodSelF{flex:1 1 46%;min-width:0}
.retroRepStats{grid-template-columns:1fr}
}
/* notificaciones: papelera */
.pfNotifBtns{justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
.pfPapeleraNota{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1px;color:var(--muted);margin:0 0 10px}
.pfPapeleraPie{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--alert);margin-top:8px}
.bandejaItem.enPapelera{opacity:.7}
.fCancionElige{flex-wrap:wrap}
.fDira .fEtqDira{margin:6px 0 2px}
.fForm .fTop.fTopMono .fCliMitad,.fForm .fTop.fTopV3 .fCliMitad{flex:1 1 120px}
/* MONOGRAMA: ¿ES DE CATÁLOGO? junto al producto, ¿ORDEN? a la mitad y el tiempo por foto en el renglón de la foto */
.fForm .fProdSlotMono .fCatWrap{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.fForm .fCatWrap .fEtqCat{font-family:var(--ui);font-weight:800;font-size:8.5px;letter-spacing:.6px;color:#fff} /* M1: blanco para que se note */
.fForm .fCatWrap .fMini{padding:6px 6px;line-height:1;font-size:11px;min-width:26px}
.fForm .fCatWrap .fMini[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.25)}
.fForm .fCatWrap .fCatNoBtn[aria-pressed=true]{border-color:var(--alert);color:var(--alert);box-shadow:0 0 10px rgba(255,61,113,.25)}
.fForm .fProdSlotMono .fCatNum{flex:0 0 54px;min-width:54px;width:54px;text-align:center;padding-left:4px;padding-right:4px}
.fForm .fAnexoFila .fOrdenMitad{flex:0 1 104px;min-width:0}
.fForm .fAnexoFila .fDurFoto{flex:0 1 104px;min-width:0}
.fForm .fAnexoFila .fDurV{flex:0 1 132px;min-width:0}
.fForm .fFilaComo .fDondeDira{flex:0 1 132px;min-width:0}
.fForm .fFilaComo .fDondeTxt{flex:1 1 160px;min-width:0}
.fForm .fCabCinco .fNoLlevaCancion{padding:6px 9px;font-size:9.5px;gap:5px}
.fSugEscPanel{margin:6px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);display:flex;flex-direction:column;gap:5px}
.fSugEscPista{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.fSugEscGrupo{font-family:var(--ui);font-weight:900;font-size:11px;letter-spacing:1.5px;color:var(--cyan);margin:8px 0 4px}
.fSugEscFila{display:flex;align-items:flex-start;gap:8px;font-size:12px;cursor:pointer;line-height:1.35}
.fSugEscFila input{accent-color:var(--cyan);width:15px;height:15px;flex:0 0 15px;margin:2px 0 0}
.fSugEscAcc{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.fSugEscErr{color:#ff6b8a;font-size:11.5px;letter-spacing:.5px}
.fSugEscCargando{color:var(--muted);font-size:12px;letter-spacing:1px}
.fForm textarea.fEspecTxt{min-height:62px}
.fForm .fFilaEspec{align-items:flex-start}
.fForm .fFilaEspec .fEtq{margin-top:8px}
.fForm .fTop .fProdSlotMono{flex:5 1 470px}
/* MONOGRAMA: PRODUCTO y DURACIÓN son cajas de ancho fijo partidas en dos (¿CATÁLOGO? / ¿SUG? y tiempo), para que las demás cajas no se muevan */
.fForm .fProdSlotMono .fProdCat,.fForm .fProdSlotMono .fDurWrap{display:flex;gap:4px;align-items:center;min-width:0}
.fForm .fProdSlotMono .fProdCat{flex:1.3 1 0}
.fForm .fProdSlotMono > .fMedida{flex:.7 1 0} /* M2: MEDIDA más angosta y ese ancho pasa a DURACIÓN (tiempo + ¿SUG?) */
.fForm .fProdSlotMono .fDurWrap{flex:1.3 1 0}
.fForm .fProdCat > .fProdMono,.fForm .fDurWrap > .fDurMono{flex:1 1 0;min-width:0;width:auto}
.fForm .fProdCat .fCatWrap{flex:0 0 auto}
.fForm .fDurWrap .fSugSel{flex:0 0 96px;min-width:0;width:auto}
.fMedidaPanel .fMultiFila .fProdCat,.fMedidaPanel .fMultiFila .fDurWrap{display:flex;gap:4px;flex:1.4 1 100px;min-width:0}
/* M2 con dos productos: la caja MEDIDA más angosta y DURACIÓN más ancha */
.fForm .fTopMono > .fMulti.fCajaMedMono{flex:.7 1 90px}
.fForm .fTopMono > .fMulti.fCajaDurMono{flex:1.3 1 150px}
/* M5: TEM 1, TEM 2 y COLORES miden siempre lo mismo (también con PERSONALIZADA), como el renglón de VIDEO 3D (lote 57) */
.fForm .fFilaTemMono > .fVozCaja,.fForm .fFilaTemMono > .fTem1,.fForm .fFilaTemMono > .fTem2,.fForm .fFilaTemMono > .fCol{flex:1 1 30%;min-width:0;width:auto;box-sizing:border-box;height:33px} /* base igual para las tres (con base 0 el relleno del select las desigualaba) */
.fForm .fFilaTemMono > .fVozCaja > .fMultiBox{height:33px;box-sizing:border-box;width:100%}
.fForm .fFilaTemMono > .fAgd{flex:0 0 auto}
/* El DIRÁ se imprime tal cual: la caja muestra minúsculas si así se escribió */
.fForm textarea.fDiraTxt{text-transform:none}
.fForm .fFilaComo .fMasDira{flex:0 0 auto}
.fForm .fDiraFotos .fEtq{margin-top:0}
.fForm .fTop .fProdSlotV3{flex:3 1 380px}
.fForm .fProdSlotMono select{letter-spacing:.2px;font-size:11px;padding-left:8px}
@media (max-width:700px){.fAnexoFila .fNombre{flex:1 1 140px;min-width:120px}}
.fForm .fProdSlotV3 .fGiro{flex:1 1 0;min-width:0}
.fPersFilaV .fTipo{flex:1 1 200px}
.fCancionOps{flex-wrap:wrap}
.fCancionOps .fEtq{white-space:normal;line-height:1.4;flex:1 1 auto;min-width:0}
@media (max-width:700px){.fFilaMono{flex-wrap:wrap}.fForm .fTop .fMedidaCaja .fMultiBox{white-space:normal;line-height:1.3}}
.fLogoFilaV .fTrabajar{flex:0 0 auto}
.fLogoFila .fLogoLugarEtq{flex:0 0 auto;border-color:var(--yellow);color:var(--yellow)}
.fColFilaV .fIgualar{flex:0 0 auto;font-size:9px}
@media (max-width:700px){
.fForm .fTopMono,.fForm .fTopV3{flex-wrap:wrap}
.fForm .fProdSlotMono,.fForm .fProdSlotV3{flex:1 1 100%;flex-wrap:wrap}
.fForm .fProdSlotMono > *,.fForm .fProdSlotV3 > *{flex:1 1 45%}
.fForm .fProdSlotMono .fProdCat{flex:1 1 45%}
.fForm .fProdSlotMono .fDurWrap{flex:1 1 100%}
.fFilaArm{flex-wrap:wrap}
}
/* celular: letra de 16px en lo que se escribe o elige, para que el teléfono no haga zoom al tocarlo */
@media (max-width:600px){
input[type=text],input[type=number],input[type=date],input[type=search],input[type=tel],input[type=email],input:not([type]),select,textarea,.menu,.fForm input,.fForm select,.fForm textarea{font-size:16px !important}
}
/* boton del encabezado del constructor: microfono */
.fHead{position:relative}
.fHead.conBtns{padding-left:110px;padding-right:110px}
.fHeadBtns{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:5px;align-items:center}
.fHeadBtn{font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:.8px;color:var(--cyan);background:transparent;border:1px solid color-mix(in srgb,var(--cyan) 55%,var(--line-2));border-radius:999px;padding:4px 8px;cursor:pointer;white-space:nowrap;line-height:1}
.fHeadBtn:hover{background:rgba(0,240,255,.08)}
.fHeadBtn.fMicBtn{font-size:12px;padding:3px 8px}
.fHeadBtn.fMicBtn.activo{color:#ff3b6b;border-color:#ff3b6b;background:rgba(255,59,107,.12);animation:micPulso 1.2s ease-in-out infinite}
.fHeadBtn.fMicBtn .fMicTxt{font-size:9px;letter-spacing:.8px}
@keyframes micPulso{0%,100%{box-shadow:0 0 0 0 rgba(255,59,107,.45)}50%{box-shadow:0 0 0 6px rgba(255,59,107,0)}}
@media (max-width:700px){.fHead.conBtns{padding-left:14px;padding-right:96px;justify-content:flex-start!important}.fHeadBtn.fMicBtn .fMicTxt{display:none}}
/* panel del dictado */
.fVozPanel{padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(255,59,107,.05);display:flex;flex-direction:column;gap:5px}
.fVozTit{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1.2px;color:#ff3b6b}
.fVozPista{font-family:var(--ui);font-size:9.5px;letter-spacing:.5px;color:var(--muted);line-height:1.5}
.fVozOido{font-family:var(--mono);font-size:11.5px;color:var(--text);min-height:16px;white-space:pre-wrap}
.fVozOido i{color:var(--muted)}
.fVozPanel .fMini{align-self:flex-start}
/* aviso de fecha que ya paso */
.fInfoFila:has(.fAvisoFecha:not(.hidden)){flex-wrap:wrap}
.fAvisoFecha{flex:1 0 100%;font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:.8px;color:#ffb020;padding:2px 0 0 4px}
/* cuadro de dudas */
#out.dual{align-content:start}
.dudaBox{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.dudaFila{display:flex;gap:8px;align-items:center}
.dudaFila input{flex:1 1 auto;min-width:0;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:var(--ui);font-size:12px;color:var(--text)}
.dudaFila input::placeholder{font-size:10px;letter-spacing:.6px}
.dudaFila .btn.dudaBtn{width:auto;flex:0 0 auto;margin-top:0;padding:10px 14px;font-size:10px;letter-spacing:1px;border-radius:10px;box-shadow:none}
.dudaFila input{flex:1 1 60%;width:0}
.dudaBox,.dudaFila{min-width:0}
.dudaResp{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--text);white-space:pre-wrap;border-left:2px solid var(--cyan);padding-left:10px}
.dudaResp.mal{color:var(--alert);border-color:var(--alert)}
.dudaPie{font-family:var(--ui);font-size:9px;letter-spacing:.6px;color:var(--muted)}
.dudaBox .btn.dudaBuscar{width:auto;align-self:flex-start;margin-top:0;padding:10px 14px;font-size:10px;letter-spacing:1px;border-radius:10px;box-shadow:none}
.dudaOtra{background:none;border:none;padding:0;text-align:left;cursor:pointer;font-family:var(--ui);font-size:9px;letter-spacing:.6px;color:var(--cyan);text-decoration:underline}
.dudaOtra:disabled{opacity:.6;cursor:default}
.dudaListo{font-family:var(--ui);font-size:10px;letter-spacing:.6px;color:var(--cyan)}
.fMultiFila .fIgualTodos{font-size:12px;font-weight:800;padding:3px 8px;letter-spacing:0;margin-left:auto;flex:0 0 auto;line-height:1.1}
.fMedidaPanel .fMultiFila select,.fMedidaPanel .fMultiFila .fMedidaSlot{flex:1 1 80px;min-width:0}
.fMedidaPanel .fMultiFila .fMedidaSlot > *{flex:1 1 0;min-width:0}
.fMedidaPanel .fMultiFila .fProdLogo{flex:1.7 1 90px}
.fMultiFila .fIgualTodos + *{margin-left:0}
.fForm .fTop > .fMedida{flex:1 1 120px}
.fForm .fTop > .fProdCaja{flex:1 1 120px}
@media (max-width:700px){.fColTitMov{display:block}.fColNL .fColTit.fColTitMov{display:block}.fSecNL .fColTit{display:none}}
.fForm .fProdSlotL{display:flex;gap:6px;flex:1 1 120px;min-width:0}
.fDiraFila .fUbicL{flex:0 0 150px;min-width:0}
.fDiraFila input[type=text]{flex:1 1 0;min-width:60px}
.fInfoCols .fDiraFila .fUbicL{flex:0 0 90px;font-size:9.5px;padding-right:18px}
.fInfoCols .fDiraFila .fTipoDira{flex:0 0 90px;font-size:9.5px;padding-right:18px}
.fForm .fProdSlotL .fProdLogo{flex:1.4 1 0;min-width:0}
.fForm .fProdSlotL .fProfMitad{flex:1 1 0;min-width:0}
.fForm .fProdSlotLogo > .fMulti.fMedidaCaja{flex:1 1 0;min-width:0;width:auto}
.fForm .fProdSlotLogo > .fMulti.fMedidaCaja:first-child{flex:1.4 1 0}
.fForm .fProdSlotLogo .fMultiBox{width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* renglón recién agregado: contorno amarillo 3 s */
.fNueva{border-radius:10px;animation:fNuevaBrillo 2s ease-in forwards}
@keyframes fNuevaBrillo{0%,55%{box-shadow:0 0 0 2px var(--yellow),0 0 14px rgba(255,214,10,.55)}100%{box-shadow:0 0 0 0 transparent}}
.fColTitFila{margin-top:2px}
.fColTitFila .fEtq{font-size:11px;letter-spacing:1.5px}
.fInfoCols .fCabTres.fCabCinco .fAdd{font-size:10px;padding:6px 8px}
@media (max-width:600px){.fCabTres.fCabCinco .fAdd{font-size:9.5px;padding:6px 7px;letter-spacing:.5px}}
.fAdd .fPista{font-size:8px;letter-spacing:.3px;opacity:.75;text-transform:none;font-weight:600}
/* celular: las columnas de los multi se apilan y la fila de arriba se parte en renglones completos */
@media (max-width:700px){
.fInfoCols{grid-template-columns:1fr}
.fColsDiv::before{display:none}
.fSecNL{grid-template-columns:1fr;justify-items:center}
.fColNL .fColTit{display:block}
.fSecNL .fColTit{display:none}
.fForm .fTop .fCliMitad,.fForm .fTop .fCliente{flex:1 1 100%}
.fForm .fProdSlotL,.fForm .fTopImg .fMedidaSlot,.fFila .fMulti.fMedidaCaja{flex:1 1 100%}
.fInfoItemImg .fIcoSel,.fInfoCols .fFilaRedes .fIcoSel,.fInfoLados .fFilaRedes .fIcoSel{flex:0 0 96px;min-width:96px}
.fInfoItemImg .fMismoBtn{min-width:64px}
.fInfoCols .fInfoItemImg.fFilaRedes,.fInfoLados .fInfoItemImg.fFilaRedes{flex-wrap:wrap;row-gap:5px}
.fInfoCols .fFilaRedes .fRedesPills,.fInfoLados .fFilaRedes .fRedesPills{flex-wrap:wrap}
}
.fChips .eng.fNoLleva{flex:0 1 auto;padding:6px 10px}
.fChips.fChipsNL{justify-content:center}
.fInfoItemImg .fCompAgd{font-size:10.5px;padding:7px 12px;letter-spacing:1px;color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 70%,var(--line-2))}
.fInfoItemImg .fCompAgd[aria-pressed=true]{color:#fff}
.fDe .fCompAgd{color:var(--bq);border-color:color-mix(in srgb,var(--bq) 70%,var(--line-2))}
.fDe .fCompAgd[aria-pressed=true]{color:#fff}
/* multi-imagen: el renglón de redes cabe en una sola línea */
.fInfoCols .fInfoItemImg.fFilaRedes,.fInfoLados .fInfoItemImg.fFilaRedes{flex-wrap:nowrap;gap:3px}
.fInfoCols .fFilaRedes .fEtqInfo,.fInfoLados .fFilaRedes .fEtqInfo{min-width:0;font-size:9px;letter-spacing:.8px}
.fInfoCols .fFilaRedes .eng,.fInfoLados .fFilaRedes .eng{padding:5px 5px;font-size:8.5px;letter-spacing:.3px}
.fInfoCols .fFilaRedes .fRedesToggle,.fInfoLados .fFilaRedes .fRedesToggle{gap:2px;padding:1px}
.fInfoCols .fFilaRedes .fRedesPills,.fInfoLados .fFilaRedes .fRedesPills{gap:2px;flex-wrap:nowrap}
.fInfoCols .fFilaRedes .fRedOtro,.fInfoLados .fFilaRedes .fRedOtro{flex:0 1 46px;min-width:36px;padding:5px 5px;font-size:9px}
.fInfoCols .fFilaRedes .fRedOtro:focus,.fInfoLados .fFilaRedes .fRedOtro:focus{flex-basis:90px}
.fInfoCols .fFilaRedes .fMasOtro,.fInfoLados .fFilaRedes .fMasOtro{padding:5px 7px;font-size:11px;line-height:1}
@media (max-width:700px){
.fInfoCols .fInfoItemImg.fFilaRedes,.fInfoLados .fInfoItemImg.fFilaRedes{flex-wrap:wrap;row-gap:5px}
.fInfoCols .fFilaRedes .fRedesPills,.fInfoLados .fFilaRedes .fRedesPills{flex-wrap:wrap}
}
.fInfoItemImg .fRedUser{flex:1 1 120px}
.fInfoItemImg .fCompAgd{margin-left:2px}
.fMedidaPanel{min-width:320px;max-width:min(620px,92vw)}
.fMedidaPanel .fMedidaSlot > .fMedida{flex:1.3 1 130px;min-width:120px}
.fMedidaPanel .fMultiFila .fEtq{flex:0 0 38px}
.fMedidaPanel .fMedidaSlot{flex:1 1 240px}
.fFila .fAvSlot,.fMultiFila .fAvSlot{display:flex;gap:5px;flex:1 1 240px;min-width:0}
.fFila .fAvSlot > select.fAvSel,.fMultiFila .fAvSlot > select.fAvSel{flex:1 1 50%;min-width:0}
.fFila .fAvSlot > .fVozCaja,.fMultiFila .fAvSlot > .fVozCaja{flex:1 1 50%;min-width:0}
.fV3Cols{display:grid;grid-template-columns:repeat(var(--nv,3),minmax(0,1fr));gap:8px;margin-top:8px;align-items:start}
.fV3Col{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-left:3px solid var(--bq,#00F0FF);border-radius:10px;padding:8px}
.fV3Col > input,.fV3Col > select{width:100%;min-width:0}
.fV3Col .fV3ColTit{margin-top:0;color:var(--bq)}
.fV3Redes{display:flex;flex-direction:column;gap:5px}
@media (max-width:700px){ .fV3Cols{grid-template-columns:1fr} }
/* bandeja de retroalimentación de producción */
.icoBtn{position:relative}
.bandejaDot{position:absolute;top:-4px;right:-4px;background:#FF3D8A;color:#fff;font-family:var(--ui);font-weight:800;font-size:9px;border-radius:99px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.bandejaItem{padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.bandejaItem.leida{opacity:.55}
.bandejaCab{display:flex;justify-content:space-between;gap:10px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.5px}
.bandejaCab b{color:var(--cyan)}
.bandejaCab span{color:var(--muted)}
.bandejaTxt{font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--text)}
.bandejaItem .capOk{align-self:flex-end;margin-left:0}
/* capacitación */
.capTema{border-top:1px solid var(--line)}
.capTemaCab{display:flex;align-items:center;gap:12px;padding:13px 16px}
.capIco{font-size:17px;flex:0 0 auto}
.capTitulo{flex:1;min-width:0;font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text)}
.capProx{font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:1.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:4px 7px;flex:0 0 auto}
.capCuerpoTema{padding:0 16px 16px}
.capAudio{width:100%;margin-top:4px}
.capImg{max-width:100%;border-radius:12px;border:1px solid var(--line-2);margin-top:12px;display:block}
/* capacitación renovada: progreso verde, modo cine, quiz y confeti */
.capBarraGral{max-width:820px;margin:0 auto 14px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.capBarraTxt{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1px;color:var(--text)}
.capBarraTxt b{color:#2BFF88}
.capBarraPista{flex:1 1 160px;height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;min-width:120px}
.capBarraRelleno{height:100%;border-radius:99px;background:linear-gradient(90deg,#18c96c,#2BFF88);box-shadow:0 0 12px rgba(43,255,136,.5);transition:width .6s}
.capSeguir{font-family:var(--ui);font-weight:900;font-size:11px;letter-spacing:1px;background:rgba(43,255,136,.12);border:1px solid #2BFF88;color:#2BFF88;border-radius:10px;padding:9px 14px;cursor:pointer;flex:0 0 auto}
.capSeguir:hover{box-shadow:0 0 12px rgba(43,255,136,.4)}
.capCuadro{position:relative}
.capMiniPista{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.capMiniRelleno{height:100%;background:#2BFF88;border-radius:99px;box-shadow:0 0 8px rgba(43,255,136,.6);transition:width .5s}
.capCuadroNum{font-size:8.5px;letter-spacing:1.2px;color:var(--muted);font-family:var(--mono)}
.capCuadro.capLogrado{border-color:#2BFF88;color:#2BFF88;box-shadow:0 0 16px rgba(43,255,136,.25)}
.capCuadro.capLogrado .capCuadroNum{color:#2BFF88}
.capCuadro.capApagado{opacity:.42}
.capCuadro.capApagado:hover{border-color:var(--line-2)}
.capTrofeo{position:absolute;top:5px;right:8px;font-size:13px}
.capDur{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:3px 6px;flex:0 0 auto}
.capTema.capHecha .capTitulo{color:#2BFF88}
/* modo cine */
.capCineFondo{position:fixed;inset:0;background:rgba(2,6,12,.95);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}
.capCineCaja{width:min(1100px,100%);max-height:96vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.capCineCab{display:flex;align-items:center;gap:12px}
.capCineTit{flex:1;min-width:0;font-family:var(--ui);font-weight:900;font-size:14px;letter-spacing:1px;color:var(--text);text-transform:uppercase}
.capCineCerrar{font-family:var(--ui);font-weight:900;font-size:13px;background:transparent;border:1px solid var(--line-2);color:var(--muted);border-radius:10px;padding:8px 12px;cursor:pointer;flex:0 0 auto}
.capCineCerrar:hover{border-color:var(--alert);color:var(--alert)}
.capCineMedia{width:100%;max-height:72vh;border-radius:14px;background:#000;border:1px solid var(--line-2)}
audio.capCineMedia{max-height:none;background:transparent;border:none}
.capCinePie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.capCineHint{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1px;color:var(--muted)}
.capCinePie .capOk{margin-left:0;font-size:11px;padding:9px 14px}
/* quiz */
.capQuizZona{display:flex;flex-direction:column;gap:10px}
.capQuizNum{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1.5px;color:#2BFF88}
.capQuizPreg{font-family:var(--ui);font-weight:900;font-size:13.5px;letter-spacing:.5px;color:var(--text)}
.capQuizOp{text-align:left;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;font-family:var(--ui);font-weight:800;font-size:11.5px;letter-spacing:.8px;color:var(--text)}
.capQuizOp:hover{border-color:var(--cyan)}
.capQuizOp.mala{border-color:var(--alert);color:var(--alert);animation:capTiembla .3s}
.capQuizOp.buena{border-color:#2BFF88;color:#2BFF88;box-shadow:0 0 10px rgba(43,255,136,.35)}
.capQuizFin{font-family:var(--ui);font-weight:900;font-size:14px;color:#2BFF88;letter-spacing:1px}
@keyframes capTiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* confeti */
.capConfeti{position:fixed;inset:0;pointer-events:none;z-index:500;overflow:hidden}
.capConfeti i{position:absolute;top:-14px;width:8px;height:14px;border-radius:2px;animation:capCae linear forwards}
@keyframes capCae{to{transform:translateY(106vh) rotate(720deg);opacity:.9}}
/* capacitación en cuadrícula + estadísticas del historial */
.pantallaTitulo .tituloEmoji{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--cyan);color:var(--cyan)}
.capGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.capCuadro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:16px 10px;cursor:pointer;font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text);text-align:center}
.capCuadro small{font-size:8.5px;letter-spacing:1.2px;color:var(--muted)}
.capCuadro[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.2)}
.capCuadro:hover{border-color:var(--cyan)}
.capVacio{padding:18px 16px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.capDemos{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:15px 16px;margin-top:14px;cursor:pointer;text-align:left}
.capDemos:hover{border-color:var(--cyan)}
.histCols{display:flex;flex-direction:column}
.histIzq{max-width:640px;min-width:0}
.histBarra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.histBarra select.histSel{flex:1 1 150px;min-width:0;height:38px;padding:0 26px 0 10px;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.histCuenta{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);white-space:nowrap;margin-left:auto}
#histStats{display:flex;flex-direction:column;gap:12px;margin-top:16px;order:1}
.notaTiempo{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
.notaVersiones{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted)}
.notaVersiones button{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);background:var(--card);color:var(--cyan);cursor:pointer}
.notaVersiones button[aria-pressed=true]{border-color:var(--cyan);background:rgba(0,240,255,.08)}
.histDup{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);background:var(--card-2);display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--cyan);cursor:pointer;padding:0}
.histDup:hover{border-color:var(--cyan);background:rgba(0,240,255,.08)}
/* tarjetas de la derecha */
.histCard{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px}
.histCard h3{margin:0 0 10px;font-family:var(--ui);font-weight:900;font-size:10px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase}
.histTres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.histTres div{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;min-width:0}
.histTres b{display:block;font-family:var(--display);font-size:22px;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histTres small{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:var(--muted)}
.histPie{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:8px}
.histFilaC{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;min-width:0}
.histFilaC:first-of-type{border-top:0}
.histFilaC i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.histFilaC b{font-family:var(--ui);font-weight:900;letter-spacing:.5px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;font-size:11px}
.histFilaC .n{color:var(--muted);letter-spacing:1px;white-space:nowrap}
.histBar{flex:1 1 60px;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;min-width:40px}
.histBar i{display:block;height:100%;border-radius:0;width:var(--w);background:var(--c)}
.histPill{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;padding:3px 8px;border-radius:999px;border:1px solid;white-space:nowrap;flex:0 0 auto}
.histPill.al{color:var(--alert);border-color:rgba(255,59,92,.5)}
.histPill.ok{color:#39FF88;border-color:rgba(57,255,136,.5)}
.histPill.cy{color:var(--cyan);border-color:rgba(0,240,255,.5);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.histVer{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;padding:6px 10px;border-radius:8px;border:1px solid var(--cyan);color:var(--cyan);background:transparent;cursor:pointer;flex:0 0 auto}
.histNada{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.5px;line-height:1.6}
/* buscador: en el mes o en todos los meses */
.histBuscaFila{display:flex;gap:8px;align-items:center}
.histBuscaFila input{flex:1 1 auto;min-width:0;width:auto}
.histTodosBtn{flex:0 0 auto;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;padding:0 10px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);cursor:pointer;white-space:nowrap}
.histTodosBtn[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.18)}
/* selector para borrar varias notas */
.histBarra .histSelBtn{margin-left:auto}
.histBarra .histSelBtn + .histCuenta{margin-left:0}
.histSelBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border:1px solid var(--alert);border-radius:12px;background:rgba(255,59,92,.06)}
.histSelBar .histSelN{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--text);flex:1 1 auto}
.histSelBar .histTodosBtn.rojo{color:var(--alert);border-color:var(--alert)}
.histSelBar .histTodosBtn.rojo:disabled{opacity:.4;cursor:default}
.histCheck{width:40px;height:40px;border-radius:12px;border:2px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:20px;color:transparent;flex:0 0 auto}
.histRow.histSelOn{border-color:var(--alert);background:rgba(255,59,92,.06)}
.histRow.histSelOn .histCheck{border-color:var(--alert);background:var(--alert);color:#05050A}
@media (min-width:1000px){
.histCols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
#histStats{order:0;margin-top:0;position:sticky;top:12px}
}
@media (max-width:600px){.capGrid{grid-template-columns:1fr 1fr}}
.histDer{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.histFav{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:var(--line-2);cursor:pointer;padding:0}
.histFav:hover{color:var(--alert)}
.histFav.activa{color:var(--alert);border-color:rgba(255,59,92,.35);background:rgba(255,59,92,.08)}
/* lote 58: historial en un renglón por nota (copiar, duplicar, favorita), filtros y TU MES */
.histRow{grid-template-columns:6px minmax(0,1fr) auto auto auto auto;padding:6px 8px 6px 0;margin-top:5px;border-radius:11px}
.histTxt{flex-direction:row;align-items:center;gap:10px}
.histCli{font-size:12px;letter-spacing:.6px;flex:0 1 auto;min-width:0;max-width:48%}
.histProd{margin-top:0;flex:1 1 auto;font-size:10px;display:flex;align-items:center;gap:6px;min-width:0}
.histProd > small{overflow:hidden;text-overflow:ellipsis}
.histFecha{font-size:11px}
.histDup,.histCopiar{width:30px;height:30px;border-radius:9px;font-size:14px}
.histCopiar{border:1px solid var(--line-2);background:var(--card-2);display:inline-flex;align-items:center;justify-content:center;color:var(--cyan);cursor:pointer;padding:0}
.histCopiar:hover{border-color:var(--cyan);background:rgba(0,240,255,.08)}
.histFav,.histCheck{width:30px;height:30px;border-radius:9px;font-size:18px}
.histRepChip{font-size:8px;padding:2px 6px;letter-spacing:1px}
.histBarra select.histProdSel{flex:0 1 190px}
.histSeis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.histSeis div{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:7px 4px;text-align:center;min-width:0}
.histSeis b{display:block;font-family:var(--display);font-size:17px;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histSeis div.mg b{color:var(--magenta)}.histSeis div.ok b{color:#39FF88}
.histSeis small{font-family:var(--mono);font-size:7.5px;letter-spacing:1.2px;color:var(--muted)}
.histCard{padding:12px 14px}
.histCard h3{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.histCard h3 .histPill{font-weight:400;letter-spacing:1px}
.histFilaC{padding:5px 0}
.histNuevaNota{font-family:var(--mono);font-size:13px;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--cyan);cursor:pointer;flex:0 0 auto;padding:0}
.histNuevaNota:hover{border-color:var(--cyan)}
.grupoFecha{margin-top:10px}
/* retro de producción: tarjetas de tres renglones en dos columnas, barra con filtros, papelera de concluidos */
.prodGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;align-items:start}
.prodCard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.prodCard.sel{border-color:var(--cyan)}
.prodCab{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--muted);flex-wrap:wrap;min-width:0}
.prodCab b{font-family:var(--ui);font-weight:800;font-size:11px;color:var(--text);letter-spacing:.3px}
.prodFecha{margin-left:auto;white-space:nowrap}
.prodChip{font-family:var(--mono);font-size:8.5px;letter-spacing:1px;border:1px solid var(--c,var(--line-2));color:var(--c,var(--muted));border-radius:999px;padding:2px 7px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.prodEstado{font-family:var(--mono);font-size:8.5px;letter-spacing:1px;border:1px solid var(--line-2);border-radius:999px;padding:2px 7px;color:var(--muted);white-space:nowrap}
.prodEstado.al{color:var(--alert);border-color:var(--alert)}.prodEstado.am{color:var(--yellow);border-color:var(--yellow)}.prodEstado.ok{color:#39FF88;border-color:#39FF88}
.prodLinea2{font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.prodCard.abierta .prodLinea2{white-space:pre-wrap}
.prodDetalle{display:flex;flex-direction:column;gap:6px}
.prodCard .prodAcc{margin-top:2px}
.prodBusca{flex:1 1 200px;min-width:120px;height:30px;padding:0 10px;font-size:10px;letter-spacing:.5px}
.prodBarra select.prodSelF{width:auto;min-width:140px;height:30px;padding:0 26px 0 8px;font-size:9.5px;letter-spacing:.5px}
.prodResumen6{grid-template-columns:repeat(6,minmax(0,1fr))}
.prodResumen6 .histStat{padding:9px 10px}
.histStat.mg .histStatVal{color:var(--magenta)}.histStat.am .histStatVal{color:var(--yellow)}.histStat.ok .histStatVal{color:#39FF88}
.prodPapelera{font-family:var(--mono);font-size:9px;letter-spacing:.5px;color:var(--alert)}
@media(max-width:900px){.prodGrid{grid-template-columns:1fr}.prodResumen6{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* diseño: reportar con últimas notas, vista previa del folio y mis reportes */
.rnUltimas{width:100%;margin-top:6px}
.rnPreview{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px 9px;border-radius:8px;background:var(--card-2);font-family:var(--mono);font-size:10px;color:var(--muted)}
.rnPreview > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnPreview .eng{padding:4px 8px;font-size:9px}
.rnListas{display:flex;flex-direction:column;gap:12px;margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.rnLista .eyebrow{margin-bottom:4px}
.rnFila{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--text);min-width:0}
.rnFila:first-child{border-top:0}
.rnFilaTxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnFilaDer{flex:0 0 auto;display:flex;align-items:center}
.rnFlag{padding:3px 8px;font-size:10px}
/* motion */
.fFila .fCliente.fTercio{flex:0 1 145px}
.fAvFila{justify-content:center;margin-bottom:2px}
.fAvFila .eng{flex:1 1 auto;justify-content:center;font-size:10.5px}
.fFila .fVozCaja{flex:1 1 130px}
.fFila .fTiempo{flex:0 1 112px}
.fFila .fAnexoFlyer,.fFila .fCancion{flex:1 1 150px}
.fVoces{max-height:280px;overflow-y:auto;min-width:190px}
.fVozGrupo{font-family:var(--ui);font-weight:800;font-size:9.5px;letter-spacing:1.5px;color:var(--muted);cursor:pointer;padding:7px 8px 4px;user-select:none}
.fMultiFila .fVozCaja{flex:1 1 150px}
.fMultiFila .fAvSel{flex:0 1 130px}
/* motion: fila compacta */
.fFila .fAvSel{flex:0 1 96px}
.fTop.fTopMotion .fMedida{flex:0 1 118px}
.fFila .fTiempo{flex:0 1 92px}
.fFila .fVozCaja{flex:1 1 110px}
.fMultiBox:disabled{opacity:.45;cursor:default}
.fVozCaja .fPista{font-size:8px}
/* NO LLEVA compacto y sin cambio de tamaño al palomear */
.fChips .eng.fNoLleva{padding:6px 8px;font-size:9.5px;gap:5px;letter-spacing:.6px}
.eng.fNoLleva .fEmo{font-size:12px}
.eng.fNoLleva[aria-pressed=true]{font-weight:normal}
/* NO LLEVA: compacto y siempre en un renglon */
@media (min-width:700px){ .fForm .fChips{flex-wrap:nowrap} }
.fChips .eng.fNoLleva{padding:5px 5px;font-size:9px;gap:4px;letter-spacing:.4px;min-width:0}
.eng.fNoLleva .fEmo{font-size:11px}
.eng.fNoLleva .fTxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cancion del motion: reproductor horizontal */
.fCancionFila{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.fCancionFila .fFila{align-items:center}
.fPlayer{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;flex:1 1 auto;min-width:0}
.fPlayFila{align-items:center}
.fBarra{flex:1 1 120px;min-width:0;height:4px;-webkit-appearance:none;appearance:none;border-radius:3px;background:var(--line);outline:none}
.fBarra::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);cursor:pointer;border:none}
.fBarra::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--cyan);cursor:pointer;border:none}
.fPlayT,.fSegTxt,.fPlayNom{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.5px;white-space:nowrap}
.fSegTxt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fPlayNom{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.fPlayBtn{min-width:34px}
.fPlayFila .fStopBtn{min-width:34px}
.fPlayFila .fStopBtn:disabled{opacity:.4;cursor:default}
.fRecortar:not(:disabled){color:var(--alert);border-color:var(--alert)}
/* menu desplegable de + CANCION */
.fCancionMenu{position:relative;flex:0 0 auto;display:inline-flex}
.fCancionPanel{display:flex;flex-direction:column;gap:6px;padding:8px;min-width:190px}
.fCancionOp{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--cyan);background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 10px;text-align:left;cursor:pointer;text-transform:uppercase}
.fCancionOp:hover{border-color:var(--cyan)}
/* ¿para qué flyer va la canción?: la elegida se rellena con su color */
.fParaChip{color:var(--bq);border-color:var(--bq);opacity:.5}
.fParaChip[aria-pressed=true]{background:var(--bq);color:#05050A;opacity:1;box-shadow:0 0 10px var(--bq)}
.fDonde{flex:1 1 170px;min-width:120px}
/* reproductor: todo en un renglon (la barra cede espacio) */
@media (min-width:700px){ .fPlayFila{flex-wrap:nowrap} }
.fPlayFila .fBarra{flex:0 1 170px;min-width:40px}
.fPlayFila button{padding:6px 8px;font-size:9.5px;letter-spacing:.5px;white-space:nowrap;flex:0 0 auto}
.fPlayFila .fRecortar{padding:7px 12px;font-size:10px;letter-spacing:1px}
.fPlayFila .fPlayT{flex:0 0 auto}
/* lote 29: reproductor centrado con manijas arrastrables (inicio y fin del pedazo) */
.fPlayFila{flex-wrap:wrap;justify-content:center}
.fPlayFila .fEtq{flex:0 0 auto}
.fPlayFila .fEtqOk{color:#2BFF88}
.fRecBar{position:relative;flex:1 1 200px;min-width:120px;max-width:520px;height:46px;padding:0 9px;box-sizing:border-box;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.fRecIn{position:relative;height:100%}
.fRecTrack{position:absolute;left:0;right:0;top:20px;height:7px;border-radius:99px;background:var(--line-2)}
.fRecSel{position:absolute;top:20px;height:7px;border-radius:99px;background:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.5);pointer-events:none}
.fRecCur{position:absolute;top:14px;width:2px;height:19px;background:#fff;opacity:.7;pointer-events:none;transform:translateX(-50%)}
.fRecAsa{position:absolute;top:23.5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--cyan);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(0,240,255,.18);cursor:grab;touch-action:none;z-index:2;box-sizing:border-box}
.fRecAsa::before{content:'';position:absolute;inset:-11px;border-radius:50%}
.fRecAsa.arrastrando{cursor:grabbing;box-shadow:0 0 0 6px rgba(0,240,255,.32)}
.fRecAsa::after{content:attr(data-t);position:absolute;top:-21px;left:50%;transform:translateX(-50%);font:700 10px/1 var(--mono);color:var(--cyan);white-space:nowrap}
.fRecAsa[data-t='']::after{content:none}
.fRecHint{position:absolute;left:0;right:0;top:32px;text-align:center;font:700 8.5px var(--ui);letter-spacing:1px;color:var(--muted);white-space:nowrap;pointer-events:none}
.fRecHint.fRecDura{color:var(--cyan);font-size:9.5px}
.fRecBar.fRecListo .fRecAsa{cursor:default;pointer-events:none}
.fPlayFila .fRecortar:not(:disabled){color:var(--cyan);border-color:var(--cyan)}
.fPlayFila .fRecortar:disabled{opacity:.45;cursor:default}
.fPlayFila .fRecortar.fRecOk{color:#2BFF88 !important;border-color:#2BFF88 !important;opacity:1}
.fPlayFila .fMini.rojo{color:var(--alert) !important;border-color:var(--alert) !important}
@media (max-width:700px){.fPlayFila .fRecBar{flex:1 1 100%;max-width:none;order:5}.fPlayFila .fPlayT{order:6}.fPlayFila .fRecortar{order:7}.fPlayFila .fDonde{order:8;flex:1 1 100%}}
/* MOTION IA: ANEXO FLYER dentro del renglon de TEM */
@media (min-width:700px){
.fTemFila.fTemIA{flex-wrap:nowrap}
.fTemFila.fTemIA .fTem1,.fTemFila.fTemIA .fTem2,.fTemFila.fTemIA .fCol{flex:1 1 84px;min-width:0}
.fTemFila.fTemIA .fAcomodo{flex:0 1 120px;min-width:0}
.fTemFila.fTemIA .fAnexoFlyer{flex:0 1 150px;min-width:0;margin-left:auto}
}
.fConfirmar{color:#2BFF88 !important;border-color:#2BFF88 !important}
/* constructores de imagen y logo */
.fForm .fGiro{flex:1 1 150px;min-width:0}
.fRedesFila .eng.fRed{flex:0 0 auto;padding:6px 9px;font-size:9.5px}
.fRedesFila input{flex:1 1 90px;min-width:70px}
.fDiraTxt{width:100%;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:var(--mono);font-size:13px;letter-spacing:.5px;resize:vertical;min-height:44px}
.fDiraTxt:focus{outline:none;border-color:var(--cyan)}
.fPrincipalFila .eng.fPalabra{flex:0 0 auto;padding:5px 9px;font-size:9.5px;text-transform:none}
.fLogoSec{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:6px}
.fLogoSec + .fLogoSec,.fBloque .fLogoSec:nth-child(n+3){border-top:1px solid var(--line)}
.fDira{display:flex;flex-direction:column;gap:6px}
/* aviso de nota bloqueada */
.avisoNota{border:1px solid var(--alert);background:rgba(255,70,90,.08);border-radius:12px;padding:10px 14px;margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--text);display:flex;flex-direction:column;gap:8px}
.avisoNotaBtns{display:flex;gap:8px;flex-wrap:wrap}
.avisoNotaBtns button{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--cyan);cursor:pointer}
.avisoNotaBtns button.rojoAviso{color:var(--alert);border-color:var(--alert)}
/* inf audio */
.fCantAuto{flex:0 0 auto;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;color:var(--muted)}
.fFila .fCantNum{flex:0 0 92px}
.fVozBarra{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;margin:14px 0 8px;padding:4px 44px;border:1px solid rgba(255,43,214,.55);border-left:4px solid #FF2BD6;border-radius:10px;background:linear-gradient(90deg,rgba(255,43,214,.13),rgba(255,43,214,.02));cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.fVozBarra .fVozIco{font-size:16px}
.fVozBarraTit{font-family:var(--mono);font-size:15px;letter-spacing:2px;color:#FF2BD6;font-weight:700}
.fVozBarra .fMulti{flex:0 1 250px;touch-action:auto}
.fVozBarra .fVozBarraSel{flex:0 1 auto}
.fVozBarra .fVozBarraBtn{font-family:var(--mono);font-size:15px;letter-spacing:2px;color:#FF2BD6;font-weight:700;background:transparent;border:none;cursor:pointer;padding:2px 8px;width:auto}
.fVozBarra .fVozBarraBtn.vacio{opacity:.8}
.fVozBarra .fMini{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.fVozBloque.arrastrando{opacity:.65}
.fForm .fVozMaster{flex:1 1 200px;min-width:0;max-width:300px}
.fForm .fVozMaster .fMultiBox{width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fSampGen .fNum{display:none}
.fForm .fFalta{border-color:#FFD400 !important;box-shadow:0 0 0 1px #FFD400, 0 0 8px rgba(255,212,0,.35) !important}
.fForm .fProdLogo{flex:0 1 118px;min-width:0}
.fForm .fUsoCajaL{flex:0 1 150px;min-width:0}
.fForm .fUsoCajaL .fMultiBox{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fForm .fTipoDira{flex:0 1 150px;min-width:0}
.fForm .fRedLlena{background:#00F0FF !important;color:#05070d !important;font-weight:700}
.fForm .fInfoLados{display:flex;gap:14px;align-items:flex-start}
.fForm .fInfoLado{flex:1;min-width:0}
.fForm .fInfoRoItem{flex:1;text-align:left;font-family:var(--mono);font-size:12.5px;letter-spacing:1px;color:#eaf7ff;padding:8px 10px;border:1px dashed rgba(255,255,255,.18);border-radius:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fForm .fTiempoIA{display:flex;gap:6px;flex:0 1 240px;min-width:0}
.fForm .fEstiloIA{display:flex;gap:6px;flex:1;min-width:0}
.fForm .fEstiloIA .fEstiloCaja{flex:1;min-width:0;position:relative}
.fTemIA .fTem1Caja{flex:0 1 200px;min-width:120px}
.fTemIA input.fTem1{flex:0 1 200px;min-width:120px}
.fTemIA .fCol{flex:0 0 185px}
.fTemIA .fEstiloIA{flex:1 1 300px}
.fEscenas .fEscenaTxt{flex:1 1 auto;min-width:0}
.fEscenas .fEtqInfo{flex:0 0 auto;width:auto;min-width:0}
.fEscenas select.fSugSel{flex:0 0 auto;width:auto}
.fFila .fUsoImg{flex:0 0 220px}
/* imagen: primer renglón repartido parejo y medida que se parte por dentro */
.fForm .fTopImg .fCliMitad{flex:1 1 0;min-width:0}
.fForm .fTopImg .fGiroSel{flex:1 1 0;min-width:0}
.fForm .fTopImg .fMedidaSlot{flex:1 1 120px}
.fMedidaSlot{display:flex;gap:6px;min-width:0}
.fMedidaSlot > *{flex:1 1 0;min-width:0}
.fMedidaSlot > .fMedida{flex:1.3 1 0}
.fForm .fEstiloCaja .fMultiBox{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fForm .fColChica{flex:0 1 185px;min-width:0}
.fForm .fNombreEj{flex:0 1 150px;min-width:0}
.fForm .fRedesLogo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.fForm .fProdCajaA{flex:0 1 190px;min-width:0}
.fForm .fProdCajaA .fMultiBox{width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fProdOpA{cursor:pointer}
.fProdOpSub{padding-left:26px}
.fTelPron{margin-left:52px}
.fSampFila .fNum{font-size:16px;font-weight:700;color:var(--cyan);flex:0 0 52px}
.fTelPron .fEtqInfo{flex:0 0 24px}
.fVozCaja{flex:0 1 230px}
.fVozManualZona{display:flex;flex-direction:column;gap:6px;padding:4px 8px 8px}
.fVozManualFila{display:flex;gap:6px;align-items:center}
.fVozManualZona .fVozManual{margin:0;flex:1 1 auto;width:auto}
.fVozManualZona .fAdd{align-self:flex-start;font-size:10px;padding:5px 9px}
.fSampFila .fNum{flex:0 0 44px;text-align:right}
.fVozBloque{margin-top:6px}
.fCabTres .fNoLleva{flex:0 0 auto}
.fCabTres .fNLInline{margin-left:14px;flex:0 0 auto}
.fInfAudio{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;border:1px dashed rgba(255,43,214,.55);border-radius:12px;padding:10px 12px;background:rgba(255,43,214,.05)}
.fInfAudio > .fEtq{color:#FF2BD6}
.fInfAudioTxt{width:100%;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;resize:vertical;min-height:44px}
.fInfAudioTxt:focus{outline:none;border-color:var(--cyan)}
.fInfAudioGrande{min-height:96px}
.fVoces .fVozManual{margin:4px 8px;width:calc(100% - 16px);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:var(--mono);font-size:11.5px}
.fAvisoAgd{padding:6px 8px;color:#FFD400;white-space:normal}
.fCorrAudio{align-self:flex-start;letter-spacing:1.2px;text-transform:uppercase;font-size:11px;padding:8px 12px;color:var(--alert);border-color:var(--alert)}
.fCorrAudio:hover{background:rgba(255,70,90,.1)}
.fCorrAudio:disabled{opacity:.6;cursor:wait}
/* anexo flyer con ¿por quién? */
.fAF{display:inline-flex;gap:6px;flex:0 1 auto;min-width:0;align-items:center}
.fPorQuien{flex:0 1 120px;min-width:80px}
.fTemFila.fTemIA .fAF{margin-left:auto}
.fYaDiseno{color:#2BFF88 !important}
.fAFsolo{justify-content:center}
.fDurV{flex:0 1 120px;min-width:0}
/* recortador de video */
.fVideoRec{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:4px 0}
.fVideoPrev{width:100%;max-height:220px;border-radius:8px;background:#000}
/* aviso de nota bloqueada centrado sobre el recuadro */
.avisoNota{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:rgba(12,5,9,.88);border:1px solid var(--alert);border-radius:14px;padding:22px;z-index:6;font-size:12.5px}
.notaBloqueada{border-color:var(--alert) !important;box-shadow:0 0 16px rgba(255,70,90,.35) !important}
/* cancion completa / AGD: aviso centrado, grande y amarillo */
.fCancionAviso{justify-content:center;text-align:center;gap:8px}
.fCancionAviso .fEtqAviso{color:#FFD400 !important;font-size:13.5px;letter-spacing:1px;flex:0 1 auto !important}
.fCancionAviso .fDonde{flex:0 1 220px}
.fCancionYa{justify-content:space-between;align-items:center}
/* renglon del anexo VIDEO compacto */
.fFilaVid .fVidTag{flex:0 0 auto;color:var(--cyan);font-size:12px;letter-spacing:1.2px;padding:0 4px}
.fFilaVid .fUbic{flex:1 1 170px;min-width:0} /* el renglón del VIDEO llena el ancho como los demás anexos (Alexis, 2026-09-24) */
.fFilaVid .fUso{flex:1 1 160px;min-width:0}
.fFilaVid .fRecortadorBtn{color:var(--cyan);border-color:var(--cyan);flex:0 0 auto}
.fFilaVid .fDurV{flex:0 1 110px;min-width:0}
/* imagen v2 */
.fForm .fCliMitad{flex:0 1 170px;min-width:110px}
.fForm .fGiroSel{flex:0 1 130px;min-width:0}
.fForm .fSug{flex:0 1 130px;min-width:0}
.fForm select.fSug{flex:0 0 118px;min-width:0;width:auto}
.fRedesGrupo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 auto;min-width:0}
.fRedUser{flex:0 1 70px;min-width:56px;transition:flex-basis .18s}
.fRedUser:focus{flex-basis:190px}
.fRedUserMismo{flex:1 1 150px}
.fMismo{font-size:9.5px}
/* opción de un solo toque, sin cuadrito */
.fOpUnica{cursor:pointer;border:1px solid transparent;border-radius:7px;padding:4px 6px}
.fOpUnica[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}
/* respuestas de "¿YA TIENES EL FLYER HECHO?": amarillas y con sangría, para no confundirlas con M. FLYER IA */
.fOpUnica.fOpHecho{color:#FFD400;margin-left:14px}
.fOpUnica.fOpHecho[aria-pressed=true]{color:#FFD400;border-color:var(--cyan)}
/* palomita y tache en neón en los avisos de canción */
.fCancionAviso .fConfirmar{color:#2BFF88 !important;border-color:#2BFF88 !important;font-size:14px;padding:7px 13px;box-shadow:0 0 14px rgba(43,255,136,.65),inset 0 0 6px rgba(43,255,136,.25);text-shadow:0 0 9px rgba(43,255,136,.95)}
.fCancionAviso .fMini.rojo{color:var(--alert) !important;border-color:var(--alert) !important;font-size:14px;padding:7px 13px;box-shadow:0 0 14px rgba(255,70,90,.65),inset 0 0 6px rgba(255,70,90,.25);text-shadow:0 0 9px rgba(255,70,90,.95)}
/* logo v2 */
.fForm .fProfMitad{flex:0 1 88px;min-width:0}
.fDiraFila .fEtqDira{flex:0 0 76px;text-align:right}
.fDiraFila input{flex:1 1 auto;min-width:0}
.fPrinTxt{border-color:var(--cyan) !important}
.fForm .fUsoL{flex:0 1 130px;min-width:0}
.fLineaDiv{height:1px;margin:10px 0 4px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.fAFsolo{align-items:center}
.fPregFlyer{color:#FFD400 !important;font-size:11px;letter-spacing:1px}
.fPregOk{font-size:10px}
/* submenu de M. FLYER y TEM 1 por categorias */
.fProdWrap{flex:0 1 auto;display:inline-flex;position:relative;min-width:0}
.fPregPanel{display:flex;flex-direction:column;gap:7px;padding:10px;min-width:200px}
.fPregTit{color:#FFD400;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-align:center}
.fTem1Caja{flex:1 1 110px;min-width:0}
.fTem1Caja .fVozGrupo{cursor:pointer}
.fProdCaja{flex:0 1 130px;min-width:0}
/* menú ¿USUARIO? del renglón de redes: opciones en vertical bajo el botón */
.fUsuarioWrap{flex:0 0 auto;min-width:0}
.fUsuarioBtn{white-space:nowrap}
.fSoloIco{flex:0 0 auto;white-space:nowrap}
.fInfoCols .fSoloIco{padding:4px 5px!important;font-size:8px!important}
.fUsuarioPanel{min-width:170px}
/* ¿REDES I? y ¿USUARIO? se ven como una caja desplegable (igual que CON MOV): fondo oscuro, texto blanco y flechita para que se note que abren */
.fRedesWrap .fRedesBtn,.fUsuarioWrap .fRedesBtn{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);background-color:var(--card);border:1px solid var(--line-2);border-radius:8px;text-align:left;padding:6px 20px 6px 8px!important;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 6px center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fRedesWrap .fRedesBtn[aria-expanded=true],.fUsuarioWrap .fRedesBtn[aria-expanded=true]{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.14)}
.fUsuarioPanel .fMini{display:block;width:100%;text-align:left;margin:2px 0;white-space:nowrap}
/* varios M. FLYER: una sola fila; cada botón es una caja con un renglón por motion (M1, M2) y ⬇= para igualar */
.fPregFlyer{color:#FFD400}
.fForm .fTop > select.fProdSel{flex:0 1 130px;min-width:110px}
.fForm .fTop.fTopDos{flex-wrap:wrap}
.fForm .fTop.fTopDos > .fMulti{flex:1 1 118px;min-width:96px}
.fForm .fTop.fTopDos > .fMulti.fProd,.fForm .fTop.fTopDos > .fMulti.fVozDos{flex:1 1 130px}
.fMultiFila .fAvSel,.fMultiFila .fAnexoFlyer{flex:1 1 120px;min-width:0}
.fMultiFila .fVozCaja{flex:1 1 130px;min-width:0}
.fMulti.fVozDos > .fMultiPanel{min-width:270px}
/* cajas de dos M. FLYER: cada renglón en una sola línea; el desplegable del M1 se angosta para que con el ⬇= mida lo mismo que el del M2 */
.fCajaDos > .fMultiPanel{min-width:240px}
.fCajaDos > .fMultiPanel > .fMultiFila{flex-wrap:nowrap}
.fCajaDos > .fMultiPanel > .fMultiFila > select,.fCajaDos > .fMultiPanel > .fMultiFila > input,.fCajaDos > .fMultiPanel > .fMultiFila > .fMulti,.fCajaDos > .fMultiPanel > .fMultiFila > .fTiempoIA{flex:1 1 80px;min-width:60px}
.fCajaDos > .fMultiPanel > .fMultiFila > .fIgualTodos{margin-left:0}
.fAFsolo.fAFdos{flex-wrap:wrap}
.fAFsolo.fAFdos .fMulti.fAFCaja{flex:0 1 190px;min-width:130px}
.fPorQuienDos{flex:1 1 150px;min-width:110px;display:inline-flex}
.fPorQuienDos > input{flex:1 1 auto;min-width:0;width:100%}
@media (max-width:600px){.fAFsolo{flex-wrap:wrap}.fAFsolo .fAF{flex:1 1 100%;min-width:0}.fAFsolo .fAF > select.fAnexoFlyer{flex:1 1 140px;min-width:120px}.fAFsolo .fPorQuien{flex:1 1 100px;min-width:90px}.fAFsolo.fAFdos .fMulti.fAFCaja{flex:1 1 100%}.fAFsolo.fAFdos .fPorQuienDos{flex:1 1 45%;min-width:100px}}
.fGrupoActivo{color:var(--cyan)}
/* menú de PRODUCTO: la fila M. FLYER se ve como las demás opciones, no apagada */
.prodSel .fVozGrupo{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text);padding:7px 8px;border-radius:7px}
.prodSel .fVozGrupo.fGrupoActivo{color:var(--cyan)}
/* NO LLEVA en multiflyer: 3 arriba y 2 abajo */
.fForm .fColNL .fChips{flex-wrap:wrap}
/* capacitacion comprimida y progreso */
@media (min-width:900px){
#capCuerpo .slip,#capCuerpo .capDemos,#capCuerpo .capGrid{max-width:820px;margin-left:auto;margin-right:auto}
#capCuerpo .capDemos,#capCuerpo .capEquipoBtn{display:flex}
}
.capTemaCab{padding:9px 12px}
.capDemos{padding:11px 14px}
.capOk{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;flex:0 0 auto}
.capOk.hechoSi{color:#2BFF88;border-color:#2BFF88;box-shadow:0 0 10px rgba(43,255,136,.35)}
.capTemaCab .statFlecha,.capTemaCab .capProx{margin-left:10px}
/* capacitación: título centrado, barra baja, 7 cuadros, módulos + DEMOS + PDF, avance del equipo */
.pantallaTop.capTop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.pantallaTop.capTop .volverBtn{justify-self:start}
.pantallaTop.capTop .pantallaTitulo{text-align:center;justify-self:center}
.capEqBtn{justify-self:end;font-family:var(--ui);font-weight:900;font-size:10px;letter-spacing:1px;background:transparent;border:1px solid var(--cyan);color:var(--cyan);border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.capEqBtn{height:37px;padding:3px;display:inline-flex;gap:2px;align-items:center;justify-content:center;box-sizing:border-box}
.capSeg{padding:6px 10px;border-radius:8px;color:var(--muted);letter-spacing:1px;font-size:10px}
.capSeg.on{background:rgba(0,240,255,.15);color:var(--cyan)}
.capBarraGral{padding:7px 14px;margin-bottom:10px}
.capGrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:12px}
.capCuadro{padding:10px 6px;font-size:9.5px;letter-spacing:.6px;line-height:1.2;min-height:76px}
.capTres{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px;gap:10px;align-items:stretch}
.capBox{margin:0}
.slip-head.capHead{justify-content:center;text-align:center}
.capLado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px 10px;cursor:pointer;text-align:center;color:var(--text)}
.capLado:hover:not(:disabled){border-color:var(--cyan)}
.capLado:disabled{opacity:.55;cursor:default}
.capLado.capHecha{border-color:#2BFF88}
.capLadoIco{font-size:30px;line-height:1}
.capLadoTit{font-family:var(--ui);font-weight:900;font-size:12px;letter-spacing:2px}
.capLadoSub{font-family:var(--ui);font-weight:800;font-size:8.5px;letter-spacing:1.2px;color:var(--cyan)}
.capLado .capOk{margin-left:0}
.avBellTodas{border-color:var(--magenta)!important;color:var(--magenta)!important}
.avReset{border-color:var(--alert)!important;color:var(--alert)!important}
.avTabla.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px;grid-auto-flow:column;position:relative}
.avTabla.tres .avFila2{padding:8px 12px;height:49px}
.avTabla.tres .avCuad{width:16px;height:16px}
.avTabla.tres .avNom{font-size:16px}
.avTabla.tres::before,.avTabla.tres::after{content:'';position:absolute;top:6px;bottom:6px;width:1px;background:var(--line-2);opacity:.6}
.avTabla.tres::before{left:calc(33.333% - 9px)}
.avTabla.tres::after{left:calc(66.666% - 9px)}
.avFila2 .avCuad.sel{box-shadow:0 0 0 2px var(--c);opacity:1}
.avFila2 .avCuad.off{opacity:.6}
.avAcc{display:flex;gap:4px;justify-content:flex-end}
.avX{color:var(--alert)!important;border-color:rgba(255,59,92,.5)!important;font-size:12px!important;width:28px!important}
@media (max-width:1100px){.avTabla.tres{grid-template-columns:1fr 1fr;gap:0 32px;grid-auto-flow:row;grid-template-rows:none!important}.avTabla.tres::after{display:none}.avTabla.tres::before{left:calc(50% - 1px)}}
@media (max-width:700px){.avBarra .eng.avFiltro{display:none}.avEstSel{display:block;flex:1 1 40%}.avProdSel{flex:1 1 50%!important;width:auto!important}.avBusca{flex:1 1 120px!important}.avBellTodas,.avReset{width:40px;height:38px}.avTabla.tres{grid-template-columns:1fr;gap:0}.avTabla.tres::before{display:none}.avTabla.tres .avFila2{grid-template-columns:minmax(96px,1fr) auto auto;gap:6px;padding:7px 4px;height:44px}.avTabla.tres .avCuad{width:13px;height:13px;border-radius:3px}.avTabla.tres .avCuads{gap:3px}.avTabla.tres .avNom{font-size:12.5px}.avTabla.tres .avBell{width:32px;height:28px;font-size:12px}.avTabla.tres .avX{width:26px!important}.avLeyenda{gap:8px 12px;justify-content:flex-start;font-size:9px}.avBarra{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0}}
.avBusca{flex:1 1 200px;min-width:120px;height:38px;box-sizing:border-box;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:0 10px;font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.8px;color:var(--text)}
.avRecordarTodas{border-color:var(--magenta);color:var(--magenta)}
.avLista{display:flex;flex-direction:column}
.avFila{border-top:1px solid var(--line);padding:11px 14px;display:flex;flex-direction:column;gap:8px}
.avCab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.avCab b{font-family:var(--ui);font-weight:900;font-size:12px;color:var(--cyan);letter-spacing:.5px;min-width:110px}
.avPill{font-family:var(--ui);font-weight:800;font-size:8.5px;letter-spacing:1.2px;padding:3px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted)}
.avPill.ok{border-color:#2BFF88;color:#2BFF88}.avPill.regular{border-color:var(--yellow);color:var(--yellow)}.avPill.mal{border-color:var(--alert);color:var(--alert)}
.avNum{font-family:var(--mono);font-size:11px;color:var(--text)}
.avPista{flex:1 1 120px;min-width:80px;max-width:220px}
.avFecha{font-family:var(--ui);font-weight:800;font-size:8.5px;letter-spacing:1px;color:var(--muted)}
.avRecordar{margin-left:auto}
.avCuads{display:flex;gap:5px;flex-wrap:wrap}
.avCuad{width:22px;height:22px;border-radius:6px;border:1px solid var(--c,var(--line-2));background:transparent;opacity:.45;cursor:pointer}
.avCuad.hecho{background:var(--c,var(--cyan));opacity:1;box-shadow:0 0 8px var(--c,var(--cyan))}
@media (max-width:1000px){.capGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.capTres{grid-template-columns:1fr}.pantallaTop.capTop{grid-template-columns:auto 1fr;grid-auto-rows:auto}.pantallaTop.capTop .capEqBtn{grid-column:1 / -1;justify-self:stretch}}
@media (max-width:600px){.capGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* capacitación rediseñada: tablero, logros, riel de productos, pasos y recursos */
.capTablero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;margin-bottom:14px}
.capProgreso{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:10px 16px;display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center}
.capAnillo{width:110px;height:110px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px color-mix(in srgb,var(--c) 40%,transparent);flex:0 0 auto}
.capAnillo::after{content:'';position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.capAnillo span{position:relative;z-index:1;text-align:center;font-family:var(--ui);font-weight:900;line-height:1.05}
.capAnillo span b{display:block;font-size:19px;color:var(--c)}
.capAnillo span small{font-size:8px;letter-spacing:1.4px;color:var(--muted)}
.capAnillo:not(.grande){width:64px;height:64px}
.capAnillo:not(.grande)::after{inset:7px}
.capAnillo:not(.grande) span b{font-size:12px}
.capAnillo.grande{width:84px;height:84px}
.capAnillo.grande span b{font-size:16px}
.capProgTxt b{font-family:var(--ui);font-weight:900;font-size:13px;letter-spacing:.8px;color:var(--text)}
.capProgTxt p{margin:5px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted)}
.capProgTxt p i{font-style:normal;color:var(--cyan)}
.capLogros{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:10px 16px}
.capLogros h3{margin:0 0 10px;font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:2px;color:var(--muted)}
.capInsignias{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:184px;margin:0 auto}
.capLogros{display:flex;align-items:center;justify-content:center}
.capIns{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:19px;filter:grayscale(1);opacity:.35}
.capIns.on{filter:none;opacity:1;border-color:var(--yellow);box-shadow:0 0 12px rgba(255,214,10,.4)}
.capRiel{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:14px}
.capProd{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:11px 8px 9px;text-align:center;position:relative;overflow:hidden;cursor:pointer;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:5px}
.capProd::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.capProdEm{font-size:22px;line-height:1}
.capProdN{font-family:var(--ui);font-weight:900;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;line-height:1.25;min-height:24px;display:flex;align-items:center;justify-content:center}
.capProdB{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.capProdB i{display:block;height:100%;background:var(--c);box-shadow:0 0 8px var(--c)}
.capProd small{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.5px}
.capProd[aria-pressed=true]{border-color:var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 35%,transparent)}
.capProd:hover{border-color:var(--c)}
.capProd.off{opacity:.45}
.capProd.logrado .capProdEm::after{content:' 🏆';font-size:13px}
.capCuerpo2{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start}
.capRuta{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:16px 20px}
.capRuta h2{margin:0 0 12px;text-align:center;font-family:var(--ui);font-weight:900;font-size:13px;letter-spacing:3px;text-transform:uppercase}
.capRutaCab{display:flex;align-items:center;gap:14px;padding:0 0 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.capRutaCab .capAnillo:not(.grande){width:52px;height:52px}
.capRutaCab .capAnillo:not(.grande)::after{inset:6px}
.capRutaCab .capAnillo:not(.grande) span b{font-size:11px}
.capRutaTxt b{display:block;font-family:var(--ui);font-weight:900;font-size:16px;letter-spacing:3px;text-transform:uppercase}
.capRutaTxt small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:4px}
.capDudasCab{display:flex;align-items:center;gap:12px}
.capPaso{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 0;position:relative}
.capPasoT{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.capDurIn{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
.capPaso.off .capVer{opacity:.45}
.capPaso+.capPaso::before{content:'';position:absolute;left:21px;top:-16px;height:22px;border-left:2px dashed var(--line-2)}
.capNum{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:900;font-size:14px;color:var(--muted);background:var(--card-2)}
.capPaso.ok .capNum{border-color:#2BFF88;color:#2BFF88;box-shadow:0 0 12px rgba(43,255,136,.4)}
.capPaso.now .capNum{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 16px rgba(0,240,255,.5);animation:capLatido 1.6s ease-in-out infinite}
@keyframes capLatido{0%,100%{box-shadow:0 0 10px rgba(0,240,255,.35)}50%{box-shadow:0 0 22px rgba(0,240,255,.75)}}
.capPasoT{min-width:0}
.capPasoT b{display:block;font-family:var(--ui);font-weight:900;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--text)}
.capPasoT small{font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.capPaso.off .capPasoT b{color:#9a9aad}
.capPaso.off .capDur{color:#9a9aad;border-color:#4a4a5c}
.capVer{background:linear-gradient(90deg,var(--cyan),var(--magenta));color:#05050A;font-family:var(--ui);font-weight:900;font-size:10px;letter-spacing:1.2px;border:none;border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.capVer.otra,.capPaso.off .capVer{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.capVer.otra{border-color:#2BFF88;color:#2BFF88}
.capVer:disabled{opacity:.4;cursor:default}
.capOkPaso{margin-left:0}
.capRecursos{display:flex;flex-direction:column;gap:10px}
.capRec{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.capRecIc{font-size:28px;width:54px;height:54px;border-radius:13px;background:var(--card-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.capRecT{flex:1 1 120px;min-width:0}
.capRecT b{display:block;font-family:var(--ui);font-weight:900;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.capRecT small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:3px}
.capRecAcc{display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;align-items:center;flex:0 0 auto;margin-left:auto}
.capBtnRec{font-family:var(--ui);font-weight:900;font-size:9.5px;letter-spacing:1.2px;padding:8px 10px;border-radius:9px;border:1px solid var(--cyan);color:var(--cyan);background:transparent;cursor:pointer;white-space:nowrap}
.capBtnRec:disabled{border-color:var(--line-2);color:var(--muted);cursor:default}
.capBtnRec.verde{border-color:#2BFF88;color:#05050A;background:#2BFF88;align-self:flex-end}
.capRec .capOk{margin-left:0}
.capDudas{flex-direction:column;align-items:stretch}
/* el título de DUDAS O MEJORAS se parte en renglones y nunca ensancha la página (celular) */
.capDudas .capRecT{flex:1 1 auto;min-width:0;max-width:100%}
.capDudas .capDudasCab{min-width:0;max-width:100%}
.capDudas{min-width:0;max-width:100%}
.capRecT b{overflow-wrap:anywhere}
.capDudaTxt{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 10px;font-family:var(--mono);font-size:12px;color:var(--text)}
.capDudaLista{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.capDudaIt{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.capDudaP,.capDudaR{font-family:var(--mono);font-size:11px;line-height:1.45;padding:7px 9px;border-radius:9px;white-space:pre-wrap}
.capDudaP{background:var(--card-2);color:var(--text)}
.capDudaR{background:rgba(0,240,255,.07);color:var(--cyan);margin-left:14px}
.capDudaR.pend{color:var(--muted);background:transparent;border:1px dashed var(--line-2)}
@media (max-width:1000px){.capTablero{grid-template-columns:1fr}.capRiel{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px}.capRiel .capProd{flex:0 0 140px}.capCuerpo2{grid-template-columns:1fr}.capProgreso{grid-template-columns:84px 1fr}.capPaso{grid-template-columns:36px minmax(0,1fr) auto;row-gap:6px}.capPaso .capVer{grid-column:3;grid-row:1}.capPaso .capOkPaso{grid-column:2 / 4}}
.capEquipoPanel{margin-top:10px;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.capEquipoFila{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:6px}
.capEquipoFila b{color:var(--cyan);font-size:12px}
.capEquipoFila span{font-family:var(--mono);font-size:11px}
.capEquipoFila small{color:var(--muted);font-size:10px;flex-basis:100%}
.fForm .fFmtMitad{flex:0 1 130px;min-width:0}
.capVideo{width:100%;border-radius:10px;background:#000;max-height:420px}
/* VIDEO 3D multi: CLIENTE conserva su medida y la caja de formatos no se sale de la tarjeta */
.fForm .fTop.fTopV3 .fCliMitad.fCliMitad{flex:0 1 170px;min-width:110px}
/* ---------- CAPACITACIÓN (2026-09-09): progreso general, productos 4x2, módulos, recursos, demos y dudas; tipografía tecnológica ---------- */
#capCuerpo{--tec:'Inter','Segoe UI',Arial,system-ui,sans-serif}
.cap2Grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:16px;align-items:stretch}
.cap2Izq{display:flex;flex-direction:column;min-width:0}
.cap2Lado{display:flex;flex-direction:column;gap:16px;min-width:0}
.cap2Card{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:16px 18px;position:relative;font-family:var(--tec)}
.cap2Tit{display:flex;align-items:center;gap:12px;font-family:var(--tec);font-weight:700;font-size:17px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);min-width:0}
.cap2Tit > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap2Ico{width:24px;height:24px;color:var(--cyan);flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(0,240,255,.7))}
.cap2Prog{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:22px;margin-bottom:16px;border-color:rgba(0,240,255,.45);box-shadow:0 0 18px rgba(0,240,255,.12);padding:16px 22px}
.cap2ProgIco{width:36px;height:36px;filter:drop-shadow(0 0 8px rgba(0,240,255,.8))}
.cap2ProgT{display:flex;flex-direction:column;gap:10px;min-width:0}
.cap2ProgT b{font-weight:700;font-size:18px;letter-spacing:.5px;text-transform:uppercase}
.cap2Barra{height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cap2Barra i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);border-radius:99px;transition:width .4s}
.cap2Pct{font-weight:800;font-size:30px;color:var(--cyan);text-shadow:0 0 14px rgba(0,240,255,.6)}
.cap2BtnC{font-family:var(--tec);background:var(--cyan);color:#05050A;font-weight:800;font-size:13px;letter-spacing:.5px;border:none;border-radius:10px;padding:13px 18px;white-space:nowrap;box-shadow:0 0 18px rgba(0,240,255,.5);text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cap2BtnC:hover:not(:disabled){box-shadow:0 0 26px rgba(0,240,255,.75)}
.cap2BtnC:disabled{opacity:.55;cursor:default;box-shadow:none}
.cap2BtnC svg{width:15px;height:15px}
.cap2BtnS{font-family:var(--tec);font-weight:700;font-size:11px;letter-spacing:.5px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--cyan);color:var(--cyan);white-space:nowrap;background:transparent;text-transform:uppercase;cursor:pointer;box-shadow:0 0 10px rgba(0,240,255,.2)}
.cap2BtnS:hover:not(:disabled){background:rgba(0,240,255,.1)}
.cap2BtnS:disabled{border-color:var(--line-2);color:var(--muted);box-shadow:none;cursor:default}
.cap2Sec{display:flex;align-items:center;gap:12px;font-family:var(--tec);font-weight:700;font-size:17px;letter-spacing:.5px;margin:2px 0 12px}
.cap2Sec .cap2Ico{width:22px;height:22px}
.cap2Prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.cap2Prod{font-family:var(--tec);text-align:left;color:var(--text);background:linear-gradient(165deg,color-mix(in srgb,var(--c) 9%,var(--card)),var(--card) 62%);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:14px;padding:20px 18px 18px;display:flex;flex-direction:column;gap:18px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 22%,transparent);cursor:pointer;min-width:0}
.cap2Prod:hover{border-color:var(--c)}
.cap2Prod.sel{border-color:var(--c);box-shadow:0 0 26px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 22px color-mix(in srgb,var(--c) 10%,transparent)}
.cap2Prod.off{opacity:.5}
.cap2ProdFila{display:flex;align-items:center;gap:12px;min-width:0}
.cap2ProdFila .cap2Ico{width:36px;height:36px;color:var(--c);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 85%,transparent))}
.cap2ProdFila b{font-weight:700;font-size:14.5px;letter-spacing:.4px;text-transform:uppercase;flex:1;line-height:1.15;min-width:0}
.cap2Chev{color:var(--muted);font-size:22px;font-weight:600;line-height:1;flex:0 0 auto}
.cap2ProdBar{display:flex;align-items:center;gap:12px}
.cap2ProdBar > span{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.cap2ProdBar > span i{display:block;height:100%;background:var(--c);box-shadow:0 0 12px var(--c);border-radius:99px}
.cap2ProdBar small{font-weight:700;font-size:13.5px;color:var(--c);min-width:40px;text-align:right}
.cap2Prox{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted);border:1px dashed var(--line-2);border-radius:999px;padding:3px 8px;align-self:flex-start}
.cap2Mods{flex:1;display:flex;flex-direction:column}
.cap2Chip{margin-left:auto;font-weight:700;font-size:12px;letter-spacing:.5px;color:var(--c);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);border-radius:999px;padding:5px 12px;box-shadow:0 0 12px color-mix(in srgb,var(--c) 25%,transparent);flex:0 0 auto}
.cap2Vacio{flex:1;margin-top:14px;border:1px dashed var(--line-2);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;min-height:150px}
.cap2Vacio .cap2Ico{width:44px;height:44px;color:var(--line-2);filter:none}
.cap2ModLista{margin-top:8px}
.cap2Rec{display:flex;align-items:center;gap:14px;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:16px 16px;margin-top:12px;cursor:pointer}
.cap2Rec:hover{border-color:var(--c)}
.cap2Rec.off{opacity:.5;cursor:default}
.cap2Rec .cap2Ico{color:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent))}
.cap2Rec b{font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;flex:1}
.cap2Chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);background:transparent;color:#2BFF88;font-weight:800;font-size:12px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cap2Chk:hover{border-color:#2BFF88}
.cap2Chk.ok{border-color:#2BFF88;background:rgba(43,255,136,.15);box-shadow:0 0 12px rgba(43,255,136,.6)}
.cap2Demo{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) 38px;align-items:center;gap:14px;background:linear-gradient(100deg,color-mix(in srgb,var(--c) 20%,var(--card-2)),var(--card-2) 55%);color:var(--text);border:1px solid color-mix(in srgb,var(--c) 48%,var(--line));border-radius:12px;padding:10px 12px;margin-top:9px;cursor:pointer;font-family:var(--tec);text-align:left;box-shadow:inset 0 0 20px rgba(0,0,0,.22);transition:border-color .15s,transform .15s,box-shadow .15s}
.cap2Demo:hover{border-color:var(--c);transform:translateY(-1px);box-shadow:0 0 18px color-mix(in srgb,var(--c) 24%,transparent)}
.cap2Demo:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.cap2DemoIco{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 16%,#090911);border:1px solid color-mix(in srgb,var(--c) 65%,transparent)}
.cap2DemoIco .cap2Ico{width:28px;height:28px;color:var(--c);filter:drop-shadow(0 0 7px var(--c))}
.cap2Demo b{font-size:14px;letter-spacing:.8px;text-transform:uppercase;line-height:1.2}
.cap2DemoPlay{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c);color:#05050a;font-size:13px;padding-left:2px;box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}
.cap2Th{width:128px;height:48px;border-radius:9px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:radial-gradient(circle at 25% 35%,color-mix(in srgb,var(--c) 55%,transparent),#0a0a14 72%);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-size:10.5px;letter-spacing:.4px;color:var(--text);flex:0 0 auto;text-transform:uppercase;box-shadow:inset 0 0 18px rgba(0,0,0,.5);text-align:center;line-height:1.1;padding:0 6px}
.cap2Th i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);color:#000;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;flex:0 0 auto}
.cap2Demo .cap2BtnS{margin-left:auto}
@media (max-width:1000px){.cap2Grid{grid-template-columns:1fr}.cap2Prods{grid-template-columns:repeat(2,minmax(0,1fr))}.cap2Prog{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}.cap2Prog .cap2BtnC{grid-column:1 / -1;justify-self:stretch}.cap2Mods .cap2Vacio{min-height:110px}}
@media (max-width:600px){.cap2Prods{gap:10px}.cap2Prod{padding:14px 12px 12px;gap:12px}.cap2ProdFila .cap2Ico{width:28px;height:28px}.cap2ProdFila b{font-size:12px}.cap2Pct{font-size:22px}.cap2ProgT b{font-size:14px}.cap2Card{padding:14px 12px}.cap2Th{width:104px;height:44px;font-size:9px}}
/* VIDEO IA (2026-09-09): renglones como FLYER / ARMABLE IA, personaje con IA, + CANCIÓN */
.fForm .fFilaPersIA input[type=text]{flex:1 1 200px}
.fForm .fMejorarIA{white-space:nowrap;flex:0 0 auto}
/* Aviso corto de las ayudas con IA: termina tu nota primero (IGNORAR Y CONTINUAR) */
.fSugEscPanel.fAvisoIA{border-color:rgba(255,214,10,.45);gap:6px}
.fAvisoIATxt{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.8px;color:var(--yellow);line-height:1.35}
.fAvisoIAFalta{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--muted)}
.fSugPersTxt{font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--text)}
.fForm .fFilaEstVIA .fEstiloWrap{flex:1 1 180px}
.fForm .fFilaEstVIA .fGiro{flex:1 1 160px}
.fForm .fTopVIA .fCantNum{flex:0 0 90px}
.fForm .fFilaCancionVIA{flex-wrap:wrap}
.fForm .fFilaCancionVIA > select{flex:0 1 190px}
.fForm .fFilaCancionVIA .fCancionMenu{flex:0 0 auto}
/* VIDEO IA (2026-09-18): ¿NARRACIÓN? abajo de NO LLEVA con VOCES, EMOCIÓN y el texto; escenas sugeridas numeradas con casilla; ESTILO de hasta 2 */
.fForm .fFilaNarrVIA{flex-wrap:wrap;align-items:flex-start}
.fForm .fFilaNarrVIA > select{flex:0 1 170px}
.fForm .fFilaNarrVIA .fNarrEmocion{flex:0 1 190px}
.fForm .fFilaNarrVIA .fNarrTexto{flex:1 1 320px;width:auto;min-width:0;font-family:var(--mono);text-transform:none}
.fForm .fCabTres .fCancionMenu{flex:0 0 auto}
.fForm .fEscenasVIA .fEscVIAFila{align-items:flex-start}
.fForm .fEscenasVIA .fEscNum{flex:0 0 22px;color:var(--cyan);font-family:var(--ui);font-size:12px;text-align:right;margin-top:1px}
.fForm .fEstilosPanel .fSugEscPista{flex:1 1 100%;margin:0 0 2px}
.fForm .fEstilosPanel .fMini[disabled]{opacity:.35!important;cursor:not-allowed}
.fForm .fEstilosPanel .fMini[disabled]:hover{background:transparent}
.fForm .fEstilosPanel .fEstiloArmTxt{flex:1 1 100%;margin-top:4px}
@media (max-width:600px){.fForm .fFilaNarrVIA > select,.fForm .fFilaNarrVIA .fNarrEmocion{flex:1 1 45%}.fForm .fFilaNarrVIA .fNarrTexto{flex:1 1 100%}}
/* VIDEO IA: + SUGERIR ESCENAS CON IA en su fila abajo de HISTORIA; con APLICAR el panel se vuelve el botón ESCENAS USADAS (tocarlo lo vuelve a abrir) */
.fForm .fMini.fEscUsadas{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:9px 15px;letter-spacing:1.3px;text-transform:uppercase;color:var(--cyan);border-color:rgba(0,240,255,.55)}
.fForm .fMini.fEscUsadas:hover{background:rgba(0,240,255,.08)}
.fForm .fEscUsadas .fEscUsadasN{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cyan);color:var(--bg);font-size:11px;line-height:18px;text-align:center;letter-spacing:0}
/* VIDEO IA: + PERSONAJE vive en la fila de botones (2026-09-19); con 3 personajes o NO LLEVA PERSONAJE se ve apagado */
.fForm .fCabTres .fMasPers:disabled{opacity:.35;cursor:not-allowed}
@media (max-width:600px){.fForm .fFilaPersIA{flex-wrap:wrap}.fForm .fFilaPersIA input[type=text]{flex:1 1 100%}}
#principal.modoSrt #pedido::placeholder{text-align:center}
/* ---------- AVANCE DEL EQUIPO (2026-09-09): resumen, filtros, lista en dos columnas y herramientas ---------- */
.av2Kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 46px 2fr;gap:10px;margin-bottom:10px;font-family:var(--tec);align-items:stretch}
.av2KpiResumen,.av2KpiEstados{display:contents}
.av2Kpi{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:14px;min-width:0;text-align:left;color:var(--text);cursor:pointer;font-family:var(--tec)}
.av2Kpi:hover{border-color:var(--cyan)}
.av2Kpi[aria-pressed=true]{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,240,255,.3),0 0 14px rgba(0,240,255,.12)}
.av2Kpi .cap2Ico{width:28px;height:28px}
.av2Kpi small{display:block;font-weight:600;font-size:10.5px;letter-spacing:1.5px;color:var(--muted)}
.av2Kpi b{display:block;font-weight:800;font-size:22px;line-height:1.1;color:var(--text)}
.av2Kpi.curso .cap2Ico{color:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,214,10,.7))}
.av2Kpi.ok .cap2Ico{color:#2BFF88;filter:drop-shadow(0 0 6px rgba(43,255,136,.7))}
.av2Recordar{width:46px;min-height:50px;border-radius:14px;border:1px solid var(--cyan);background:var(--card);color:var(--cyan);font-size:20px;cursor:pointer;padding:0;box-shadow:0 0 12px rgba(0,240,255,.13)}
.av2Recordar:hover:not(:disabled){background:rgba(0,240,255,.1);box-shadow:0 0 18px rgba(0,240,255,.28)}
.av2Recordar:disabled{opacity:.35;cursor:default;box-shadow:none}
.av2Punto{width:26px;height:26px;border-radius:50%;background:#2a2a3a;border:3px solid #55556a;flex:0 0 auto}
.av2KpiBar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:8px;align-items:center}
.av2KpiBar small{grid-column:1 / 3}
.av2KpiBar b{grid-row:2;grid-column:2;font-size:22px}
.av2BarraG{grid-row:2;grid-column:1;height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.av2BarraG i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);border-radius:99px}
.av2Barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-family:var(--tec)}
.av2Sel{width:auto;flex:0 0 auto;min-width:200px;height:42px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:0 12px;font-family:var(--tec);font-weight:700;font-size:11.5px;letter-spacing:.5px;color:var(--text);text-transform:uppercase;max-width:100%}
.av2Busca{width:auto;flex:1 1 220px;min-width:160px;height:42px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:0 14px;font-family:var(--tec);font-weight:600;font-size:11.5px;letter-spacing:.5px;color:var(--text)}
.av2Act{font-family:var(--tec);font-weight:600;font-size:10px;letter-spacing:1.2px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.av2Act::before{content:'';width:8px;height:8px;border-radius:50%;background:#2BFF88;box-shadow:0 0 8px #2BFF88}
.av2RecTodas{padding:11px 16px;font-size:12px}
.av2Leyenda{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;margin:2px 0 8px;font-family:var(--tec);font-weight:600;font-size:10.5px;letter-spacing:1px;color:var(--text)}
.av2ProdFiltro{appearance:none;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;padding:3px 5px;margin:-3px -5px;cursor:pointer;white-space:nowrap}
.av2ProdFiltro:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 8%,transparent)}
.av2ProdFiltro[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--c) 35%,transparent)}
.av2ProdFiltro:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.av2Leyenda i{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:6px;background:var(--c);box-shadow:0 0 8px var(--c)}
.av2Lista{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:6px 20px;font-family:var(--tec)}
.av2Fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto minmax(0,1fr) auto auto;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:5px 10px;min-width:0}
.av2Cab,.av2Acciones{display:contents}
.av2Num{font-family:var(--mono);font-size:10px;color:var(--muted)}
.av2Nom{font-weight:800;font-size:13px;letter-spacing:.5px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.av2Fila.curso .av2Nom{color:var(--yellow)}.av2Fila.ok .av2Nom{color:#2BFF88}
.av2Pct{font-weight:800;font-size:14px;color:var(--text)}
.av2De{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.av2Cuads{display:flex;gap:5px}
.av2Cuad{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--c);opacity:.55;display:inline-block;font-style:normal}
.av2Cuad.hecho{background:var(--c);opacity:1;box-shadow:0 0 8px var(--c)}
.av2Cuad.parcial{opacity:1;background:linear-gradient(90deg,var(--c) 0 var(--p),transparent var(--p) 100%)}
.av2Cuad.off{border-style:dashed;opacity:.3}
.av2Ult{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.av2Fila .cap2BtnS{padding:6px 10px;font-size:9.5px}
.av2Mas{width:30px;height:25px;border-radius:9px;border:1px solid var(--line-2);background:var(--card-2);color:var(--text);font-size:15px;line-height:1;cursor:pointer;padding:0}
.av2Mas:hover:not(:disabled){border-color:var(--alert);color:var(--alert)}
.av2Mas:disabled{opacity:.35;cursor:default}
.av2Pie{margin-top:16px;display:flex;align-items:center;justify-content:flex-end;font-family:var(--tec)}
.av2Reset{font-family:var(--tec);font-weight:800;font-size:11.5px;letter-spacing:1px;padding:10px 16px;border-radius:10px;border:1.5px solid var(--alert);color:var(--alert);background:transparent;cursor:pointer;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.av2Reset .cap2Ico{width:18px;height:18px;color:var(--alert);filter:drop-shadow(0 0 6px rgba(255,61,113,.6))}
.av2Reset:hover:not(:disabled){background:rgba(255,61,113,.12)}
@media (max-width:1000px){.av2Kpis{grid-template-columns:1fr}.av2KpiResumen{display:grid;grid-template-columns:1fr 1fr;gap:10px}.av2KpiEstados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px;gap:10px}.av2KpiBar{grid-column:1 / -1}.av2Lista{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none!important}}
@media (max-width:600px){.av2Kpis{grid-template-columns:1fr;gap:8px}.av2KpiResumen{gap:8px}.av2KpiEstados{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px;gap:8px}.av2Recordar{width:42px;min-height:48px;font-size:18px}.av2Kpi{padding:9px 10px;gap:9px}.av2Kpi .cap2Ico,.av2Punto{width:24px;height:24px}.av2Kpi small{font-size:9.5px;letter-spacing:1px}.av2Kpi b{font-size:20px}.av2Fila{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:6px 9px}.av2Cab{display:grid;grid-template-columns:auto minmax(45px,1fr) auto auto auto;grid-template-areas:"num nom cuads pct de";align-items:center;gap:5px;width:100%;min-width:0}.av2Cab .av2Num{grid-area:num}.av2Cab .av2Nom{grid-area:nom;font-size:12px}.av2Cab .av2Cuads{grid-area:cuads;gap:3px}.av2Cab .av2Pct{grid-area:pct;font-size:13px}.av2Cab .av2De{grid-area:de;font-size:8.5px}.av2Cab .av2Cuad{width:11px;height:11px;border-radius:3px}.av2Acciones{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;width:100%}.av2Acciones .av2Ult{text-align:left;font-size:8.5px}.av2Fila .av2Rec{padding:5px 7px;font-size:8.5px;min-width:68px;max-width:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.av2Fila .av2Mas{width:28px;height:24px}}
.fForm .fTopV3 .fMedidaCaja .fMultiPanel.fMedidaPanel{left:auto;right:0;max-width:min(640px,90vw)}
/* Multi VIDEO 3D: las cajas FORMATO, DURACIÓN y MEDIDA miden siempre lo mismo, sin importar el texto que traigan */
.fForm .fProdSlotV3 > .fMulti.fMedidaCaja{flex:1 1 20%;min-width:0;width:auto}
/* lote 57: el constructor de VIDEO 3D no crece con varios videos (la columna ya no se dimensiona por el texto de las cajas) y los controles de arriba miden lo mismo */
#out.dual{grid-template-columns:minmax(0,1fr)}
#out.dual > .fForm{min-width:0;max-width:100%}
.fForm .fTopV3 .fProdSlotV3 > *{flex:1 1 20%;box-sizing:border-box;height:33px;min-width:0}
.fForm .fTopV3 .fProdSlotV3 > .fFmtV3{flex:1.2 1 20%}
.fForm .fTopV3 .fProdSlotV3 > .fMulti > .fMultiBox{height:33px;box-sizing:border-box}
.fForm .fTopV3 .fProdSlotV3 > input[type=text]{width:auto}
.fForm .fProdSlotV3 > .fMulti.fMedidaCaja .fMultiBox{width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fChipsGen .fEtq{display:block;width:100%;flex:0 0 100%;text-align:center;margin:0 0 4px}
@media (max-width:700px){
.fForm .fTopV3 .fMedidaCaja .fMultiPanel.fMedidaPanel{left:0;right:auto;max-width:92vw}
/* celular (punto 47): la fila de cajas ocupa todo el ancho y FORMATO, DURACIÓN, MEDIDA y GIRO van de dos en dos (dos renglones); la regla de lote 57 las dejaba en una sola línea */
.fForm .fTop .fProdSlotV3{flex:1 1 100%}
.fForm .fTopV3 .fProdSlotV3 > *,.fForm .fTopV3 .fProdSlotV3 > .fFmtV3{flex:1 1 45%}
}
/* lote 58 (2026-09-24, punto A): FLYER · MOTION: la fila de arriba mide siempre lo mismo (como VIDEO 3D, lote 57). Elegir PERSONALIZADA / OTRA,
una voz larga o un resumen largo (M1 30X50 CM · M2 NORMAL) no cambia el tamaño de ninguna caja ni manda + PRODUCTO al siguiente
renglón; el texto que no cabe se corta con puntos suspensivos */
@media (min-width:701px){
.fForm .fTop.fTopMotion,.fForm .fTop.fTopDos{flex-wrap:nowrap}
.fForm .fTop.fTopMotion > *,.fForm .fTop.fTopMotion > .fAvSlot > *,.fForm .fTop.fTopMotion > .fTiempoIA > *{box-sizing:border-box;height:33px;min-width:0;width:auto;margin:0}
.fForm .fTop.fTopMotion > .fCliente.fTercio{flex:0 0 140px}
.fForm .fTop.fTopMotion > .fMulti.fProdCaja,.fForm .fTop.fTopMotion > .fMulti.fProd{flex:0 0 130px}
.fForm .fTop.fTopMotion > .fAvSlot{display:flex;gap:5px;flex:1 1 250px}
.fForm .fTop.fTopMotion > .fAvSlot > select.fAvSel{flex:0 0 96px}
.fForm .fTop.fTopMotion > .fAvSlot > .fMulti.fVozCaja{flex:1 1 0}
.fForm .fTop.fTopMotion > .fMedida{flex:0 0 118px}
.fForm .fTop.fTopMotion > .fTiempo{flex:0 0 100px}
.fForm .fTop.fTopMotion > .fTiempoIA{display:flex;gap:6px;flex:0 0 230px}
.fForm .fTop.fTopMotion > .fTiempoIA > .fTiempo{flex:1 1 0}
.fForm .fTop.fTopMotion > .fTiempoIA > .fSugSel{flex:0 0 112px}
/* 2 M. FLYER: las cajas se reparten el ancho por igual (PRODUCTO y VOZ un poco más anchas); + PRODUCTO y ✕ M2 no bajan de renglón */
.fForm .fTop.fTopDos > .fCliente.fTercio{flex:0 0 120px}
.fForm .fTop.fTopDos > .fMulti{flex:1 1 0;min-width:0}
.fForm .fTop.fTopDos > .fMulti.fProd,.fForm .fTop.fTopDos > .fMulti.fVozDos{flex:1.25 1 0}
.fForm .fTop.fTopMotion > .fMasProd,.fForm .fTop.fTopMotion > .fMini.rojo,.fForm .fTop.fTopMotion > .fFantasma{flex:0 0 auto;white-space:nowrap;height:33px}
.fForm .fTop.fTopMotion input[type=text],.fForm .fTop.fTopMotion select.menu,.fForm .fTop.fTopMotion .fMultiBox{height:33px;box-sizing:border-box;padding-top:0;padding-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Historial aprobado: filtros combinables, selección y tarjetas C.T. */
#vistaHist .histTopLinea{display:flex;align-items:stretch;gap:20px;margin-bottom:20px;min-width:0}
#vistaHist #histModo{display:flex;gap:10px;flex:1 1 auto;margin:0;justify-content:flex-start;flex-wrap:wrap}
#vistaHist #histModo .eng{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--text);font:600 12px var(--ui);letter-spacing:.8px;white-space:nowrap}
#vistaHist #histModo .eng[aria-pressed=true]{background:linear-gradient(110deg,var(--cyan),#8880ff 56%,var(--magenta));border-color:transparent;color:#050508;box-shadow:0 0 18px #00f0ff26;font-weight:800}
#vistaHist .histIcono{width:20px;height:20px;flex:0 0 auto;vertical-align:middle}
#vistaHist .histBuscaFila{flex:1 1 370px;min-width:270px;gap:0;padding:0 6px 0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);align-self:flex-start;min-height:48px}
#vistaHist #histBuscar{border:0;background:transparent;box-shadow:none;font:13px var(--ui);padding:10px 0;height:46px}
#vistaHist .histIzq{max-width:none}
#vistaHist .histBarra{gap:8px;margin-bottom:14px}
#vistaHist .histBarra .histSel{flex:1 1 150px;max-width:240px;height:44px;border-radius:11px;background-color:var(--card);font:600 11px var(--ui);letter-spacing:0}
#vistaHist .histTodosBtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;color:var(--text);font:600 10px var(--ui);letter-spacing:.5px}
#vistaHist .histBarra .histSelBtn{margin-left:0;color:var(--cyan);border-color:var(--cyan)}
#vistaHist .histSelBar{margin:0 0 18px;padding:12px;gap:10px;border-color:var(--cyan);background:linear-gradient(110deg,#00f0ff09,transparent);color:var(--cyan)}
#vistaHist .histSelN{font:800 12px var(--ui);letter-spacing:1px;color:var(--cyan);line-height:1.6}
#vistaHist .histSelBar .rojo{color:var(--alert);border-color:var(--alert);font-weight:800}
#vistaHist .grupoFecha{margin:20px 0 10px;font:700 12px var(--ui);letter-spacing:2.5px;color:#a3abc6}
#vistaHist .histRow{grid-template-columns:5px minmax(0,1fr) auto auto;gap:14px;padding:12px 12px 12px 0;min-height:70px;margin:8px 0;border-color:var(--line-2);border-radius:13px}
#vistaHist .histRow.seleccionando{grid-template-columns:30px 5px minmax(0,1fr) auto;padding-left:14px}
#vistaHist .histRow.histSelOn{border-color:var(--cyan);background:#00f0ff09}
#vistaHist .histRow.histSelOn .histCheck{border-color:var(--cyan);background:var(--cyan);color:#050508}
#vistaHist .histTira{border-radius:5px;min-height:36px}
#vistaHist .histTxt{gap:16px;display:flex;min-width:0}
#vistaHist .histCli{max-width:55%;flex:1 1 40%;font:800 13px var(--ui);gap:9px;flex-wrap:wrap}
#vistaHist .histCli > span:not([class]){max-width:100%}
#vistaHist .histProd{flex:1 1 40%;display:flex;flex-wrap:wrap;gap:8px;border-left:1px solid var(--line-2);padding-left:16px;white-space:normal;font:600 12px var(--mono)}
#vistaHist .histProd > span:first-child{overflow-wrap:anywhere}
#vistaHist .histProd small{padding-left:8px;border-left:1px solid var(--line-2);font:11px var(--mono)}
#vistaHist .histVeces{font-size:11px;border-radius:9px;padding:4px 8px}
#vistaHist .histFecha{display:flex;align-items:center;gap:8px;font-size:11px}
#vistaHist .histFecha .histIcono{width:17px;height:17px}
#vistaHist .histAcciones{display:flex;gap:6px}
#vistaHist .histAcciones button{width:30px;height:32px;border-radius:8px}
#vistaHist .histAcciones .histIcono{width:16px;height:16px}
#vistaHist .histFav.activa .histIcono{fill:currentColor}
#vistaHist .histCheck{width:28px;height:28px;border-radius:6px}
#vistaHist .histRepD{grid-template-columns:5px minmax(0,1fr) auto}
#vistaHist .histRepD > span:empty{display:none}
#vistaHist .histCard{border-radius:14px;padding:14px;background:linear-gradient(130deg,#0b151d,var(--card) 65%)}
#vistaHist .histCard h3{font:700 11px var(--ui);letter-spacing:1.5px;color:#cbd4ee;margin-bottom:12px}
#vistaHist .histSeis{gap:8px}
#vistaHist .histSeis > div,#vistaHist .histSeis > button{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:5px 8px;min-width:0;padding:12px 6px;border:1px solid #0b586c;border-radius:11px;background:#031219;color:var(--cyan);text-align:center}
#vistaHist .histSeis > button{cursor:pointer}
#vistaHist .histSeis > button:hover,#vistaHist .histSeis > button[aria-pressed=true]{border-color:var(--cyan);background:#003440;box-shadow:0 0 12px #00f0ff15}
#vistaHist .histSeis > .mg{color:var(--magenta)}
#vistaHist .histSeis > .ok{color:#39ff88}
#vistaHist .histSeis b{font:800 23px var(--ui);color:inherit}
#vistaHist .histSeis small{grid-column:1 / -1;font:10px var(--mono);color:var(--text);letter-spacing:.5px}
#vistaHist .histFilaC{padding:10px 0;gap:9px}
#vistaHist .histProductoFiltro{cursor:pointer;border-radius:7px}
#vistaHist .histProductoFiltro:hover,#vistaHist .histProductoFiltro[aria-pressed=true]{background:#00f0ff0c;outline:1px solid #00f0ff50}
#vistaHist .histBar{height:9px}
#vistaHist .histPill{border-radius:8px;font-size:9px;letter-spacing:.5px}
#vistaHist .histPill.al{color:var(--yellow);border-color:var(--yellow)}
#vistaHist .histNuevaNota{width:auto;height:auto;padding:8px;font:700 10px var(--ui);border-color:var(--cyan);white-space:nowrap}
#vistaHist .histFilaC:has(.histNuevaNota){flex-wrap:wrap}
#vistaHist .histFilaC:has(.histNuevaNota) b{flex-basis:45%}
#vistaHist .histFilaC:has(.histNuevaNota) .histPill{max-width:60%;margin-right:auto}
#vistaHist .histVer{font:700 10px var(--ui);padding:8px 10px;letter-spacing:.5px}
#vistaHist .histNada{padding:8px 0}
#vistaHist :is(button,[role=button],[role=checkbox]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(min-width:1000px){
#vistaHist .histCols{grid-template-columns:minmax(0,1fr) minmax(310px,31%);gap:22px}
#vistaHist #histStats{position:static;top:auto;max-height:none;overflow:visible;padding:1px 4px 4px 1px}
}
@media(min-width:1000px) and (max-width:1350px){
#vistaHist #histModo .eng{padding:10px;font-size:10px;gap:6px}
#vistaHist .histTopLinea{gap:12px}
#vistaHist .histTxt{flex-direction:column;align-items:stretch;gap:5px}
#vistaHist .histCli{max-width:none}
#vistaHist .histProd{border-left:0;padding-left:0}
}
@media(max-width:999px){
#vistaHist .histTopLinea{flex-direction:column;gap:12px}
#vistaHist .histBuscaFila{flex:none;width:100%;min-width:0}
#vistaHist #histStats{position:static;max-height:none;overflow:visible;order:1;margin-top:20px}
}
@media(max-width:600px){
#vistaHist #histModo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
#vistaHist #histModo .eng{font-size:10px;padding:10px 8px;min-height:44px;gap:7px}
#vistaHist .histBuscaFila{padding-left:10px}
#vistaHist #histBuscar{font-size:12px}
#vistaHist .histBarra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#vistaHist .histBarra .histSel{grid-column:span 2;max-width:none;width:100%;height:42px;font-size:10px}
#vistaHist .histTodosBtn{font-size:9px;padding:0 4px;letter-spacing:0;gap:3px}
#vistaHist .histBarra .histIcono{width:14px;height:14px}
#vistaHist .histSelBar{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:10px;gap:6px}
#vistaHist .histSelN{grid-column:1 / -1;font-size:12px;padding-bottom:4px}
#vistaHist .histSelBar .histTodosBtn{height:38px}
#vistaHist .histRow{grid-template-columns:4px minmax(0,1fr) auto;gap:8px;min-height:90px;padding:10px 8px 10px 0}
#vistaHist .histRow.seleccionando{grid-template-columns:24px 4px minmax(0,1fr) auto;padding-left:9px}
#vistaHist .histCheck{width:23px;height:23px}
#vistaHist .histTxt{flex-direction:column;align-items:stretch;gap:8px;grid-row:1 / 3;grid-column:2}
#vistaHist .histTira{grid-row:1 / 3}
#vistaHist .histCli{max-width:none;font-size:12px;gap:6px}
#vistaHist .histProd{border:0;padding:0;font-size:10px;gap:5px}
#vistaHist .histProd small{font-size:9px}
#vistaHist .histFecha{grid-column:3;grid-row:1;justify-content:flex-end;font-size:9px;letter-spacing:0;gap:4px}
#vistaHist .histAcciones{grid-column:3;grid-row:2;justify-content:flex-end;gap:5px}
#vistaHist .histAcciones button{width:26px;height:28px}
#vistaHist .histRow.seleccionando .histCheck{grid-column:1;grid-row:1 / 3}
#vistaHist .histRow.seleccionando .histTira{grid-column:2}
#vistaHist .histRow.seleccionando .histTxt{grid-column:3}
#vistaHist .histRow.seleccionando .histFecha{grid-column:4;grid-row:1 / 3}
#vistaHist .histVeces{font-size:9px;padding:2px 5px}
#vistaHist .histCard h3{font-size:10px;letter-spacing:1px}
#vistaHist .histFilaC b{font-size:10px}
#vistaHist .histFilaC .n{font-size:9px;letter-spacing:0}
}
/* Segunda mejora de Historial: grupos compactos, personas y nota superpuesta. */
#vistaHist .histBuscaFila{padding:0 14px;position:relative}
#vistaHist .histBuscaFila:before{content:"";width:16px;height:16px;border:2px solid var(--cyan);border-radius:50%;margin-right:14px;flex:0 0 auto}
#vistaHist .histBuscaFila:after{content:"";position:absolute;left:29px;top:29px;width:8px;height:2px;background:var(--cyan);transform:rotate(45deg)}
#vistaHist .histDia{margin:12px 0 16px;min-width:0}
#vistaHist .histDiaCab{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 16px;border:1px solid var(--line-2);border-radius:11px;background:linear-gradient(110deg,#00212b70,var(--card));color:var(--text);font:750 12px var(--ui);letter-spacing:1px;text-align:left;cursor:pointer}
#vistaHist .histDiaCab[aria-expanded=true]{border-color:var(--cyan);color:var(--cyan)}
#vistaHist .histFlecha{margin-left:auto;font-size:24px;line-height:1}
#vistaHist .histDiaLista{padding:4px 0}
#vistaHist .histMasDia{display:block;width:100%;margin:8px 0 4px;padding:9px 14px;font-size:11px;letter-spacing:1px}
#vistaHist .histRow{min-height:40px;padding:5px 8px 5px 0;gap:10px;margin:5px 0;border-radius:9px;cursor:pointer}
#vistaHist .histTira{min-height:28px;border-radius:4px}
#vistaHist .histTxt{gap:10px;align-items:center}
#vistaHist .histCli{font-size:12px;flex-wrap:nowrap;gap:7px;max-width:52%}
#vistaHist .histProd{font-size:11px;padding-left:12px;gap:6px;align-items:center}
#vistaHist .histProd small{font-size:10px}
#vistaHist .histVeces{font-size:10px;padding:3px 6px}
#vistaHist .histRow .histQuienTag{font:600 11px var(--ui);border:0;background:none;border-radius:0;color:white;letter-spacing:0;padding:0 10px 0 0;flex:0 0 82px;border-right:1px solid var(--line-2)}
#vistaHist .histAcciones button{width:27px;height:28px}
#vistaHist .histFecha{font-size:10px;gap:5px}
#vistaHist .histFecha .histIcono{width:15px;height:15px}
#vistaHist .histCheck{width:24px;height:24px}
#vistaHist .histRow.seleccionando{grid-template-columns:24px 4px minmax(0,1fr) auto;padding-left:10px}
#vistaHist .histFiltroActivo,#vistaHist .histBarra button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px #00f0ff40;background-color:#00303b}
#vistaHist .histBarra .histSel{flex:1 1 165px;max-width:none}
#vistaHist #histPersonas{flex:1.2 1 190px;min-width:160px;position:relative;border:1px solid var(--line-2);border-radius:11px;background:var(--card)}
#histPersonas summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;min-height:42px;padding:8px 10px;font:600 10px var(--ui);list-style:none}
#histPersonas summary::-webkit-details-marker{display:none}
#histPersonas .histPersonasOpciones{position:absolute;top:100%;left:0;z-index:30;min-width:100%;width:250px;max-height:300px;overflow:auto;padding:8px;background:#0d111b;border:1px solid var(--cyan);border-radius:10px;box-shadow:0 12px 25px #0009}
#histPersonas label{display:flex;align-items:center;gap:10px;padding:9px 6px;font:12px var(--ui);cursor:pointer;white-space:nowrap}
#histPersonas input{width:16px;height:16px;accent-color:var(--magenta)}
#histPersonas .histPersonasOpciones button{width:100%;font-size:10px;padding:8px;border:1px solid var(--cyan);border-radius:7px;color:var(--cyan);background:none}
#histPersonas .histPersonasTags{display:flex;flex-wrap:wrap;gap:5px;padding:0 7px 6px}
#histPersonas .histPersonasTags:empty{display:none}
#histPersonas .histPersonasTags button{background:#ff00c815;border:1px solid var(--magenta);color:white;border-radius:6px;padding:3px 6px;font:10px var(--ui);cursor:pointer}
#vistaHist .histIndicadores{padding:10px}
#vistaHist .histSeis > div,#vistaHist .histSeis > button{padding:9px 5px}
#vistaHist .histVistaProductos{width:100%;max-width:100%;min-width:0;background:var(--card);color:var(--text);border:1px solid var(--line-2);border-radius:7px;font:700 10px var(--ui);padding:9px 5px;margin-bottom:5px;cursor:pointer}
#vistaHist .histFilaC:has(.histNuevaNota){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:7px 0}
#vistaHist .histFilaC:has(.histNuevaNota) b{font:650 11px var(--ui);min-width:0;overflow:hidden;text-overflow:ellipsis}
#vistaHist .histFilaC:has(.histNuevaNota) .histPill{grid-column:1;grid-row:2;max-width:100%;border:0;padding:0;font-size:9px;color:var(--muted)}
#vistaHist .histNuevaNota{grid-column:2;grid-row:1 / 3;font-size:8px;padding:8px 5px;max-width:135px;white-space:normal}
#vistaHist .histCuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#vistaHist .histCuatro > div{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px;border:1px solid #155266;border-radius:9px;background:#00151f;color:var(--cyan)}
#vistaHist .histCuatro b{font:800 22px var(--ui)}
#vistaHist .histCuatro small{font:9px var(--ui);color:var(--text)}
#vistaHist .histDestacados{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#vistaHist .histDestacados .histCard{padding:11px 9px}
#vistaHist .histDestacados h3{font-size:10px;line-height:1.6;letter-spacing:.5px;color:var(--cyan)}
#vistaHist .histDestacados .histFilaC{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:7px}
#vistaHist .histDestacados strong{color:var(--cyan);font:700 20px var(--ui)}
#vistaHist .histDestacados .histFilaC span{font:10px var(--ui);color:var(--muted)}
#vistaHist .histDestacados .histNada{font:9px var(--ui);line-height:1.6}
#vistaHist .histPersonaFiltro{cursor:pointer;border-radius:6px}
#vistaHist .histPersonaFiltro[aria-pressed=true]{background:#ff00c814;outline:1px solid var(--magenta)}
#vistaHist .histPersonaFiltro b{color:var(--text)}
#vistaHist .histProductosEquipo .histProductoFiltro[aria-pressed=true]{outline-color:var(--magenta);background:#ff00c814}
.histModalFondo{position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;padding:24px;background:#0009;backdrop-filter:blur(2px)}
.histModal{display:flex;flex-direction:column;width:min(1050px,100%);max-height:calc(100dvh - 48px);min-height:0;border:1px solid var(--cyan);border-radius:15px;box-shadow:0 0 40px #00f0ff18;background:#0c0e17;color:var(--text);overflow:hidden}
.histModalCab{display:flex;align-items:center;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.histModalCab h2{margin:0;flex:1;min-width:0;font:700 15px var(--ui);overflow-wrap:anywhere}
.histModal button{cursor:pointer}
.histModalCerrar{background:transparent;border:1px solid var(--cyan);border-radius:8px;color:var(--cyan);padding:9px 13px;white-space:nowrap;font:700 11px var(--ui)}
.histModalCuerpo{padding:16px;overflow:auto;overscroll-behavior:contain;min-height:0}
.histModalCuerpo[hidden]{display:none}
.histModal pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;max-width:100%;font:14px/1.7 var(--mono)}
.histModal .slip{margin:0}
.histModal .slip-head{flex-wrap:wrap;gap:10px}
.histModal .slip-btns{flex-wrap:wrap}
.histModal .slip-head button{min-height:36px}
.histModalVersiones{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.histModalVersiones button,.histReporteZonas button,.histReporteAcciones button{border:1px solid var(--line-2);border-radius:7px;padding:9px 12px;background:var(--card);color:var(--text);font:700 11px var(--ui)}
.histModalVersiones button[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}
.histReporteZonas{display:flex;gap:8px;margin:12px 0}
.histReporteZonas button[aria-pressed=true]{color:#111;border-color:var(--yellow);background:var(--yellow)}
.histReporteTextos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.histReporteTextos section{min-width:0;border:1px solid var(--line-2);border-radius:9px;padding:12px}
.histReporteTextos h4{font:700 11px var(--ui);color:var(--cyan);margin:0 0 7px}
.histReporteTextos pre{font-size:12px;max-height:260px;overflow:auto;user-select:text;cursor:text}
.histModalReporte > label{display:block;font:700 12px var(--ui);margin:16px 0 8px}
.histModalReporte textarea{display:block;width:100%;min-height:110px;margin-top:8px}
.histReporteAcciones{display:flex;flex-wrap:wrap;gap:10px}
.histReporteAcciones button:first-child{background:var(--cyan);color:#000}
.histReporteEstado{color:var(--cyan);font:12px var(--ui);min-height:16px}
.histReporteEstado.error{color:var(--alert)}
body:has(.histModalFondo) #btnResaltar{z-index:1700}
.histModal :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media(min-width:1000px) and (max-width:1350px){
#vistaHist .histRow{min-height:44px}
#vistaHist .histTxt{gap:3px}
#vistaHist .histCli{max-width:none}
#vistaHist .histProd{padding:0}
}
@media(max-width:999px){
#vistaHist .histTxt{flex-direction:column;align-items:stretch;gap:4px}
#vistaHist .histCli{max-width:none}
#vistaHist .histProd{padding:0;border:0}
}
@media(max-width:600px){
#vistaHist .histRow{min-height:60px;gap:7px;padding:5px 7px 5px 0}
#vistaHist .histCli{font-size:11px;gap:5px;flex-wrap:wrap}
#vistaHist .histProd{font-size:10px;gap:4px}
#vistaHist .histTira{min-height:34px}
#vistaHist .histDiaCab{padding:9px 10px;min-height:44px;font-size:11px}
#vistaHist .histRow .histQuienTag{font-size:10px;flex:0 1 auto}
#vistaHist #histPersonas{grid-column:1 / -1;min-width:0}
#vistaHist .histVistaProductos{font-size:12px!important;min-height:40px}
#vistaHist .histDestacados h3{font-size:9px}
.histModalFondo{padding:9px}
.histModal{max-height:calc(100dvh - 18px);border-radius:12px}
.histModalCab{padding:10px;gap:8px}
.histModalCab h2{font-size:12px}
.histModalCerrar{padding:10px 8px;font-size:10px}
.histModalCuerpo{padding:10px}
.histModal pre{font-size:13px;line-height:1.65}
.histReporteTextos{grid-template-columns:1fr}
.histReporteTextos pre{max-height:160px}
.histModal .slip-head{padding:10px}
}
/* Tercera mejora: navegación de estadísticas, columnas y filtros adaptables. */
.av2Kpi{padding-top:8px;padding-bottom:8px}
.av2KpiBar{row-gap:6px}
.av2Recordar{min-height:46px}
.av2Reset{padding-top:8px;padding-bottom:8px}
#vistaHist .histRow{padding-top:4px;padding-bottom:4px;min-height:38px}
#vistaHist .histDia{margin-bottom:12px}
#vistaHist.histEsEquipo .histCard{scroll-margin-top:18px;background:linear-gradient(125deg,#00151b50,#0b0d17);border-color:#375060}
#vistaHist.histEsEquipo .histCard h3{padding-bottom:9px;border-bottom:1px solid #254452;margin-bottom:6px}
#vistaHist.histEsEquipo .histCuatro > div:nth-child(odd){border-color:#a520b0}
#vistaHist.histEsEquipo .histCuatro > div:nth-child(3) .histIcono{color:var(--magenta)}
#vistaHist .histDestacados .histCard{border-color:var(--cyan)}
#vistaHist .histDestacados .histCard:nth-child(2){border-color:var(--magenta)}
#vistaHist .histDestacados h3{font-size:10px;letter-spacing:.2px}
#vistaHist .histRankingFila{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:center;gap:6px;padding:7px 0;font:11px var(--ui)}
#vistaHist .histRankingFila.reportes{grid-template-columns:15px minmax(0,1fr) auto minmax(45px,.8fr)}
#vistaHist .histRankingFila b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
#vistaHist .histRankingFila strong{font-size:13px}
#vistaHist .histPuesto,#vistaHist .histRankingFila.reportes strong{color:var(--yellow)}
#vistaHist .histRankingProducto{font-size:9px;color:#8eddeb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid var(--line-2);padding-left:6px}
#vistaHist .histExpandir{display:block;width:100%;padding:9px 4px 1px;border:0;border-top:1px solid #254452;background:none;color:var(--cyan);font:750 11px var(--ui);cursor:pointer}
#vistaHist .histGraficaColumnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--filas),auto);grid-auto-flow:column;column-gap:18px}
#vistaHist .histGraficaColumnas .histFilaC{display:grid;grid-template-columns:minmax(55px,.95fr) minmax(32px,1fr) 23px 9px;gap:6px;min-width:0;padding:7px 0}
#vistaHist .histGraficaColumnas .histFilaC > i{display:none}
#vistaHist .histGraficaColumnas .histFilaC b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10px var(--ui);color:var(--text)}
#vistaHist .histGraficaColumnas .histBar{width:100%;min-width:0;max-width:none;height:9px;background:#182936}
#vistaHist .histGraficaColumnas .histBar i{background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 7px #00eaff25}
#vistaHist .histGraficaColumnas .n{font-size:10px;white-space:nowrap;text-align:right}
#histPersonas .histPersonasOpciones{width:320px;max-width:calc(100vw - 40px);max-height:340px;left:auto;right:0}
#histPersonas .histPersonasColumnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--filas),auto);grid-auto-flow:column;margin-top:5px}
#histPersonas label{min-width:0;gap:7px;padding:8px 4px;white-space:normal;overflow-wrap:anywhere}
#histPersonas input{flex:0 0 16px}
@media(min-width:1000px){
#vistaHist.histEsEquipo .histCols{grid-template-columns:minmax(0,1fr) minmax(350px,33%);gap:18px}
}
@media(min-width:1000px) and (max-width:1350px){
#vistaHist .histDestacados{grid-template-columns:1fr}
#vistaHist .histRow{min-height:42px}
}
@media(max-width:999px){
#vistaHist.histEsEquipo .histBarra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#vistaHist.histEsEquipo .histBarra .histSel{grid-column:auto;width:100%;min-width:0;max-width:100%;height:44px;font-size:11px}
#vistaHist.histEsEquipo #histPersonas{grid-column:1 / -1;min-width:0}
#vistaHist.histEsEquipo #histReportesFiltro,#vistaHist.histEsEquipo #histSemana{width:100%;min-width:0;height:44px;grid-column:auto;font-size:12px;gap:9px}
#vistaHist .histDestacados{grid-template-columns:1fr}
#vistaHist .histGraficaColumnas{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
#vistaHist .histGraficaColumnas .histFilaC{grid-template-columns:minmax(100px,1fr) minmax(60px,1.4fr) 30px 12px;padding:9px 0}
#vistaHist .histGraficaColumnas .histFilaC b{font-size:11px}
#vistaHist .histCuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
#vistaHist .histRankingFila{padding:9px 0;font-size:12px}
#vistaHist .histRankingFila.reportes{grid-template-columns:20px minmax(0,1fr) auto minmax(70px,.9fr)}
#vistaHist .histRankingFila strong{font-size:16px}
#vistaHist .histRankingProducto{font-size:11px}
}
@media(max-width:600px){
.av2Kpi{padding-top:7px;padding-bottom:7px}
.av2Recordar{min-height:44px}
#vistaHist #histModo{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#vistaHist #histModo .eng{font-size:8px;padding:9px 3px;gap:4px;letter-spacing:0;white-space:normal}
#vistaHist #histModo .histIcono{width:14px;height:14px;flex-shrink:0}
#vistaHist .histRow{min-height:56px;padding-top:4px;padding-bottom:4px}
#vistaHist .histTira{min-height:32px}
#vistaHist .histCuatro > div{display:grid;grid-template-columns:auto auto;justify-content:center;gap:4px 12px;padding:12px 7px}
#vistaHist .histCuatro .histIcono{grid-row:1 / 3;align-self:center}
#vistaHist .histCuatro small{grid-column:2;text-align:center}
#vistaHist.histEsEquipo .histBarra .histSel{font-size:10px}
#vistaHist .histDestacados h3{font-size:11px}
}
#vistaHist .histProductosEquipo .histGraficaColumnas .histFilaC b{white-space:normal;overflow:visible;line-height:1.4}
@media(max-width:600px){#vistaHist.histEsEquipo .histBarra select.histSel{font-size:11px!important;padding-left:8px;padding-right:22px}}
/* Correcciones de filtros y selección: dimensiones estables y estados explícitos. */
#vistaHist.histEsEquipo .histBarra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto auto;align-items:start}
#vistaHist.histEsEquipo .histBarra .histSel{width:100%;min-width:0;height:44px}
#vistaHist #histPersonas{width:100%;min-width:0;height:44px;box-sizing:border-box}
#histPersonas summary{height:42px;min-height:0;box-sizing:border-box;white-space:nowrap;overflow:hidden}
#histPersonas summary .histIcono{flex:0 0 19px}
#histPersonas .histPersonasTexto{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
#histPersonas summary > span:last-child{flex-shrink:0}
#vistaHist .histDiaEncabezado{position:relative;display:flex;align-items:center;gap:9px}
#vistaHist .histCheckDia{flex:0 0 22px;width:22px;height:22px;accent-color:var(--cyan);cursor:pointer;margin:0 0 0 9px}
#vistaHist .histDiaEncabezado .histDiaCab{flex:1;min-width:0}
#vistaHist.histEsEquipo .histPersonaFiltro[aria-pressed=true],#vistaHist.histEsEquipo .histProductoFiltro[aria-pressed=true]{background:linear-gradient(90deg,#00edff27,#ff00c82d);outline:1px solid var(--cyan);box-shadow:0 0 8px #ff00c820}
#vistaHist.histEsEquipo .histPersonaFiltro[aria-pressed=true] b,#vistaHist.histEsEquipo .histProductoFiltro[aria-pressed=true] b{color:var(--cyan)}
#vistaHist .histRankingFila{grid-template-columns:minmax(0,1fr) auto}
#vistaHist .histRankingFila.reportes{grid-template-columns:minmax(0,1fr) auto minmax(45px,.8fr)}
#vistaHist,#vistaHist #histStats{overflow-anchor:none}
.histNotaDatos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:12px var(--ui);color:var(--muted);margin-bottom:12px}
.histEliminada,#vistaHist .histBorrada{display:inline-block;color:var(--alert);border:1px solid #ff3b5c70;border-radius:5px;padding:3px 6px;font:700 10px var(--ui)}
.histReporteRecibido{border:1px solid #00f0ff70;border-radius:10px;padding:16px;margin-top:16px;background:#06141d}
.histReporteRecibido h3{font:750 13px var(--ui);color:var(--cyan);margin:0 0 12px}
.histReporteRecibido dl{display:grid;grid-template-columns:155px minmax(0,1fr);gap:9px;margin:0 0 12px}
.histReporteRecibido dt{font:700 11px var(--ui);color:var(--muted)}
.histReporteRecibido dd{font:13px/1.6 var(--ui);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.histReporteRecibido button{cursor:pointer}
body:has(.histModalFondo) .fotoOverlay{z-index:1800}
@media(max-width:999px){
#vistaHist.histEsEquipo .histBarra{grid-template-columns:repeat(2,minmax(0,1fr))}
#vistaHist.histEsEquipo #histPersonas{grid-column:1 / -1}
#vistaHist .histRankingFila.reportes{grid-template-columns:minmax(0,1fr) auto minmax(70px,.9fr)}
}
@media(max-width:600px){
.histReporteRecibido{padding:11px}
.histReporteRecibido dl{grid-template-columns:1fr;gap:5px}
.histReporteRecibido dd{margin-bottom:7px}
#vistaHist .histDiaEncabezado .histDiaCab{padding-left:8px;font-size:10px}
}
/* Reportes recibidos: bandeja compacta y nota de solo lectura. */
#vistaHist .histRow.histReporteFila{display:grid;grid-template-columns:5px minmax(0,1fr) minmax(0,1fr) 18px;gap:14px;min-height:48px;margin:8px 0;padding:7px 12px 7px 0;cursor:pointer}
#vistaHist .histReporteFila .histTira{height:30px;min-height:30px;grid-row:auto}
.histReporteCliente,.histReporteProducto{min-width:0;overflow-wrap:anywhere;font:700 12px/1.5 var(--ui)}
.histReporteProducto{color:var(--c)}
#vistaHist .histReporteLeido{opacity:.55}
.histModalRecibido{width:min(850px,100%);box-shadow:0 0 32px #00f0ff15,0 0 24px #f000ff10}
.histModalRecibido .histModalCab{border-bottom:1px solid #ed00ff65}
.histModalRecibido .histNotaOriginal{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:none;overflow:visible;user-select:text;cursor:text;font:14px/1.7 var(--ui);color:var(--text)}
.histMarcarLeido{display:block;max-width:100%;margin:20px auto 0;padding:12px 22px;min-height:44px;border:1px solid var(--cyan);border-radius:9px;background:#00f0ff12;color:var(--cyan);font:800 12px var(--ui);cursor:pointer}
.histMarcarLeido:disabled{opacity:.5;cursor:wait}
.histErrorLectura{color:var(--alert);font:13px/1.5 var(--ui)}
.histErrorLectura:empty{display:none}
/* Reporte recibido: el reporte pesa más que la nota (comentario en magenta, retro en cian; nota abajo, oscura y secundaria) */
.histModalRecibido .histReporteRecibido{display:flex;flex-direction:column;gap:10px;padding:0;border:none;background:none;margin-top:0}
.histModalRecibido .histReporteRecibido + .histReporteRecibido{margin-top:14px}
.histRepBloque{border-radius:10px;padding:13px 15px;background:var(--card)}
.histRepBloque.mg{border:1px solid #ff00c855;border-left:3px solid var(--magenta)}
.histRepBloque.cy{border:1px solid #00f0ff55;border-left:3px solid var(--cyan)}
.histRepEtq{display:block;font:800 10px var(--ui);letter-spacing:1.5px;margin-bottom:6px}
.histRepBloque.mg .histRepEtq{color:var(--magenta)}
.histRepBloque.cy .histRepEtq{color:var(--cyan)}
.histRepTexto{margin:0;font:14px/1.6 var(--ui);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.histNotaOriginalCard{margin-top:18px;border:1px solid var(--line-2);border-radius:10px;padding:14px 15px;background:#05070d}
.histNotaOriginalCard .histNotaOriginal{opacity:.8}
@media(max-width:600px){
#vistaHist .histRow.histReporteFila{gap:8px;grid-template-columns:4px minmax(0,1fr) minmax(0,1fr) 12px;min-height:48px}
.histReporteCliente,.histReporteProducto{font-size:11px}
.histModalRecibido .histNotaOriginal{font-size:13px;line-height:1.65}
.histRepBloque{padding:11px 13px}
}
/* Botón REPORTES de la barra: se ilumina en rojo con el número de pendientes sin leer */
#histReportesFiltro{position:relative}
#histReportesFiltro.histRepPendiente{color:var(--alert);border-color:var(--alert);box-shadow:0 0 12px rgba(255,61,113,.22)}
.histRepBadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--alert);color:#fff;font:800 9px var(--mono);line-height:1;margin-left:2px}
.histRepBadge.hidden{display:none}
/* Historial: alertas, bandeja limpia, fechas, tiempos y detalle solicitado. */
#btnHist{position:relative}
#btnHist.histMainPendiente,#btnHistD.histMainPendiente{color:#ff244f;border-color:#ff244f;background:#2a0610;box-shadow:0 0 0 1px #ff244f55,0 0 18px #ff244f99}
#btnHist.histMainPendiente svg,#btnHistD.histMainPendiente svg{filter:drop-shadow(0 0 5px #ff244f)}
.histMainBadge{position:absolute;top:-7px;right:-7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border:2px solid #080810;border-radius:999px;background:#ff244f;color:#fff;font:900 9px var(--mono);line-height:1;box-sizing:border-box}
.histMainBadge.hidden{display:none}
#histReportesFiltro.histRepPendiente{color:#ff244f!important;border-color:#ff244f!important;background:#2a0610!important;box-shadow:0 0 0 1px #ff244f66,0 0 18px #ff244faa!important}
#histReportesFiltro.histRepPendiente .histIcono{filter:drop-shadow(0 0 5px #ff244f)}
#histReportesFiltro .histRepBadge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;margin:0;border:2px solid #080810;background:#ff244f;box-sizing:border-box;z-index:2}
#vistaHist .histDiaCab{position:relative;overflow:hidden;background:linear-gradient(105deg,#06202a 0%,#111522 62%,#23061d 100%);border-color:#17687a;box-shadow:inset 3px 0 0 var(--cyan),inset -3px 0 0 var(--magenta);font-weight:850;color:#e9faff}
#vistaHist .histDiaCab::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:1px;background:linear-gradient(90deg,var(--cyan),transparent 45%,var(--magenta));opacity:.8}
#vistaHist .histDiaCab[aria-expanded=true]{border-color:#00dce8;box-shadow:inset 3px 0 0 var(--cyan),inset -3px 0 0 var(--magenta),0 0 12px #00f0ff19}
#vistaHist .histDiaLista{padding-top:7px}
#vistaHist .histTxt{gap:6px}
#vistaHist .histCli{max-width:49%}
@media(min-width:601px) and (max-width:1350px){#vistaHist .histCli{max-width:none}}
#vistaHist .histProd{padding-left:8px}
#histPersonas .histPersonasOpciones{width:470px;max-height:none;overflow:visible}
#histPersonas .histPersonasColumnas{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--filas3),auto);grid-auto-flow:column}
#vistaHist.histEsEquipo .histCard > h3{justify-content:center;text-align:center}
#vistaHist .histRankingFila,#vistaHist .histRankingFila.reportes{grid-template-columns:minmax(0,1fr) auto}
#vistaHist .histTiempoFila{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 4px;border:0;border-bottom:1px solid #254452;background:transparent;color:var(--text);text-align:left;cursor:pointer}
#vistaHist .histTiempoFila:hover,#vistaHist .histTiempoFila:focus-visible{background:#00f0ff0c;color:var(--cyan)}
#vistaHist .histTiempoFila span{display:flex;flex-direction:column;gap:3px;min-width:0}
#vistaHist .histTiempoFila b,#vistaHist .histTiempoFila small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vistaHist .histTiempoFila b{font:700 11px var(--ui)}
#vistaHist .histTiempoFila small{font:10px var(--mono);color:var(--muted)}
#vistaHist .histTiempoFila strong{flex:0 0 auto;font:800 13px var(--mono);color:var(--cyan)}
#vistaHist .histSeis small{line-height:1.25;text-wrap:balance}
.histNotaModalCab{align-items:center;flex-wrap:wrap}
.histNotaIdentidad{display:flex;flex:1 1 300px;min-width:0;align-items:center;gap:10px;flex-wrap:wrap}
.histNotaIdentidad h2{flex:1 1 100%;font-size:14px}
.histNotaTiempo{font:750 10px var(--ui);letter-spacing:.7px;color:var(--cyan)}
.histNotaVersionSel{width:auto;max-width:130px;padding:5px 22px 5px 7px;border:1px solid var(--line-2);border-radius:7px;background:var(--card);color:var(--text);font:700 9px var(--ui)}
.histNotaCabAcciones{display:flex;align-items:center;gap:7px;margin-left:auto}
.histNotaCabAcciones button{min-height:34px;padding:7px 10px;border:1px solid var(--cyan);border-radius:7px;background:#00f0ff0c;color:var(--cyan);font:750 10px var(--ui)}
.histNotaSolo{margin:0}
.histNotaSolo pre{margin:0;min-height:120px;padding:2px;border:0;background:transparent;outline:none}
@media(max-width:600px){
#vistaHist .histTxt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:5px}
#vistaHist .histCli{max-width:none;min-width:0;flex-wrap:wrap}
#vistaHist .histProd{min-width:0;border-left:1px solid var(--line-2);padding-left:6px}
#histPersonas .histPersonasOpciones{width:min(390px,calc(100vw - 40px));max-height:none;overflow:visible}
#histPersonas .histPersonasColumnas{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--filas2),auto)}
.histNotaModalCab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.histNotaIdentidad{grid-column:1 / -1}
.histNotaCabAcciones{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0}
.histNotaModalCab .histModalCerrar{grid-column:2;grid-row:2}
.histNotaCabAcciones button{padding:7px 5px;font-size:8px}
}
@media(max-width:380px){#histPersonas .histPersonasColumnas{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
.histNotaCabAcciones[hidden]{display:none}
/* Nueve ajustes aprobados: indicadores completos, tarjetas compactas y lectura móvil. */
#vistaHist .histSeis > div,#vistaHist .histSeis > button{grid-template-columns:minmax(0,1fr);justify-items:center;container-type:inline-size}
#vistaHist .histKpiValor{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;max-width:100%;min-width:0}
#vistaHist .histKpiValor b{font-size:clamp(14px,22cqi,23px);overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums}
#vistaHist .histKpiValor .histIcono{width:18px;height:18px;flex-shrink:0}
#vistaHist .histSeis small,#vistaHist .histCuatro small{text-align:center;justify-self:center;width:100%;text-wrap:balance}
#vistaHist .histCuatro > div{min-width:0}
#vistaHist .histRankingFila{font-size:15px;padding:6px 0;gap:9px;min-height:30px}
#vistaHist .histRankingFila b{font-weight:750;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
#vistaHist .histRankingFila strong{font-size:18px;white-space:nowrap}
#vistaHist .histDestacados{align-items:start}
#vistaHist .histDestacados h3{font-size:11px;margin-bottom:7px}
#vistaHist.histEsEquipo .histQuienTag,#vistaHist.histEsEquipo .histPersonasTexto,#vistaHist.histEsEquipo .histPersonasColumnas label,#vistaHist.histEsEquipo .histPersonaFiltro b,#vistaHist.histEsEquipo .histRankingFila b{text-transform:uppercase}
#vistaHist .histProductoCorto{display:none}
@media(max-width:600px){
#vistaHist .histProd .histProductoCompleto{display:none}
#vistaHist .histProd .histProductoCorto{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#vistaHist .histProd{display:block}
#vistaHist .histProd small{display:none}
#vistaHist .histKpiValor{gap:4px}
#vistaHist .histKpiValor .histIcono{width:15px;height:15px}
#vistaHist .histSeis small{font-size:9px;letter-spacing:0;line-height:1.3}
}
/* Periodo compartido y grupos plegables del equipo. */
#vistaHist .histGrupoCabecera{display:grid;gap:9px;margin-bottom:10px}
#vistaHist.histEsEquipo .histGrupoCabecera h3{margin:0;padding:0;border:0;justify-content:center;text-align:center}
#vistaHist .histGrupoAlternar{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:7px 26px;border:0;background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer}
#vistaHist .histGrupoAlternar > span:first-child{flex:1}
#vistaHist .histGrupoFlecha{position:absolute;right:0;font-size:20px;color:var(--cyan);line-height:1}
#vistaHist .histGrupoCerrado .histGrupoFlecha{transform:rotate(180deg)}
#vistaHist .histGrupoCerrado .histGrupoCabecera{margin-bottom:0}
#vistaHist .histGrupoContenido[hidden]{display:none}
#vistaHist .histGrupoPeriodos{display:flex;gap:6px}
#vistaHist .histGrupoPeriodos button{flex:1;min-width:0;border:1px solid #155266;border-radius:7px;background:#00151f;color:var(--text);padding:9px 5px;font:700 11px var(--ui);cursor:pointer}
#vistaHist .histGrupoPeriodos button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:#00313c}
@media(max-width:600px){
#vistaHist .histCuatro > div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px}
#vistaHist .histCuatro b,#vistaHist .histCuatro small{width:100%;text-align:center}
#vistaHist .histCuatro b{white-space:nowrap;font-size:clamp(17px,5.5vw,22px)}
#vistaHist .histSeis > div,#vistaHist .histSeis > button{align-content:center;text-align:center}
#vistaHist .histKpiValor{width:100%;justify-content:center}
}
/* Historial: bandeja personal y filtros seleccionados. */
#chipReportesD{position:relative;padding-right:38px!important}#chipReportesD>.rpBadge{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0}#btnHistD{position:relative}#btnHistD>.rpBadge{position:absolute;right:-5px;top:-5px;margin:0}
.histEsPersonales .histCols{display:block}#vistaHist.histEsPersonales .histBuscaFila{visibility:hidden;pointer-events:none}
.histEsPersonales .histIzq{min-height:0!important}.rpLayout{display:grid;grid-template-columns:minmax(290px,.9fr) minmax(350px,1.1fr);gap:18px;margin-top:16px}
.rpIzquierda{min-width:0}.rpCard{min-width:0;background:linear-gradient(135deg,#091820,#0b0d16);border:1px solid #244552;border-radius:13px;padding:20px;color:var(--text)}
.rpCard h2{font-size:19px;letter-spacing:.04em;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #28414d}.rpFormulario{display:flex;flex-direction:column;gap:12px}
.rpFormulario label,.rpEtiqueta{font-size:12px;font-weight:700}.rpFormulario select,.rpFormulario textarea{width:100%;min-width:0;color:var(--text);background:#080d17;border:1px solid #61788a;border-radius:7px;padding:12px;font:inherit;font-size:14px}
.rpFormulario textarea{resize:vertical}.rpCategorias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.rpCategorias .eng{border-radius:24px;padding:9px 4px;font-size:11px;min-width:0}
.rpCard .eng[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);background:#06303b;box-shadow:0 0 9px #00dfff30}.rpAnonimo{display:flex;align-items:center;gap:16px;margin:7px 0}
.rpAnonimo input{appearance:none;width:43px;height:25px;border-radius:20px;background:#354651;border:1px solid #7894a4;position:relative;cursor:pointer;flex:none}.rpAnonimo input:before{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;background:#bbd4e6;border-radius:50%;transition:transform .15s}.rpAnonimo input:checked{background:#007487}.rpAnonimo input:checked:before{transform:translateX(17px)}
.rpContador{text-align:right;font-size:11px;color:var(--muted)}.rpAdjuntar{border-style:dashed!important;min-height:60px}.rpEnviar{margin-top:8px;min-height:48px}.rpNota{margin-top:16px}.rpNota summary{cursor:pointer;font-weight:700;font-size:12px;color:var(--cyan)}.rpNota #dRepNota{margin-top:14px;padding:0;border:0;background:none}.rpNota #dRepNota h3{display:none}
.rpTabs{display:flex;margin-bottom:12px;gap:0}.rpTabs .eng{flex:1;border-radius:6px;font-size:12px;min-width:0}.rpCaso{border:1px solid #29404c;border-left:6px solid var(--cyan);border-radius:9px;background:#07111a;padding:12px;margin-bottom:9px;overflow-wrap:anywhere}.rpSinLeer{border-left-color:#ff003b;background:linear-gradient(90deg,#230914,#0b111b)}.rpConcluido{border-left-color:#00ed86}.rpLeido{opacity:.65}
.rpCasoCab{display:flex;gap:10px;align-items:center}.rpCasoCab>div{flex:1;min-width:0}.rpCasoCab b{display:block;font-size:14px}.rpCasoCab small{display:block;color:var(--muted);font-size:11px}.rpCasoCab time{font-size:11px;color:var(--muted);flex:none}.rpAvatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#243039;border:1px solid #70808a;flex:none}
.rpExtracto{font-size:13px;line-height:1.5;margin:9px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rpCasoPie{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.rpCasoPie .eng{margin-left:auto;padding:7px 18px;color:var(--cyan)}.rpCategoria,.rpLectura,.rpSeguimiento{font-size:10px;border:1px solid #4d6575;border-radius:8px;padding:3px 7px}.rpLectura.pendiente{border-color:#ff003b;color:#fff;background:#ae002a}.rpSeguimiento{color:var(--cyan)}.rpSolicitud{display:block;color:var(--muted);margin-bottom:8px}
.rpComentarioCompleto{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.rpCapturasLectura img{max-width:100%;height:auto;display:block;margin-bottom:16px}.rpMarcarLeido{display:block;margin:24px auto 0}.rpBadge{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#ff003b;color:white;font-size:11px;margin-left:5px}.rpPendientes{background:#5d071e!important;border-color:#ff003b!important;box-shadow:0 0 12px #ff003b70!important;color:#fff!important}
.histFiltrosActivos{display:flex;align-items:center;gap:6px;min-height:38px;max-width:100%;overflow-x:auto;white-space:nowrap;margin:6px 0}.histFiltrosActivos>b{font-size:10px;color:var(--cyan);flex:none}.histEtiquetaFiltro{font:inherit;font-size:10px;border:1px solid var(--cyan);border-radius:6px;background:#0b1622;color:var(--text);padding:5px 8px;flex:none;cursor:pointer}.histFiltrosActivos.vacia{visibility:hidden}
.histFilaC[aria-pressed=true],.histPersonaFiltro[aria-pressed=true]{background:linear-gradient(100deg,#00dcff20,#ff00dc20);border-radius:6px;outline:1px solid var(--cyan);box-shadow:inset -2px 0 var(--magenta)}
.histFilaC[aria-pressed=true]>b:before,.histPersonaFiltro[aria-pressed=true]>b:before{content:'✓ ';color:var(--cyan)}
.rpAdminTabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}.rpAdminTabs .eng{font-size:12px}.rpAdminGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rpAdminAcc{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media(max-width:700px){.rpLayout{grid-template-columns:minmax(0,1fr);gap:14px}.rpCard{padding:14px}.rpCasoCab time{font-size:10px;max-width:100px;text-align:right}.rpAdminGrid{grid-template-columns:minmax(0,1fr)}.histEsPersonales #histModo .eng{min-width:0;margin:0}.rpCasoPie{gap:5px}.rpCasoPie .eng{padding:7px 12px}}
/* Tipografía compacta de los nuevos paneles, sin heredar los botones del constructor. */
.rpLayout{align-items:start}.rpCard{font-family:var(--ui)}.rpCard .eng{font:600 12px var(--ui);letter-spacing:.2px;color:var(--text);min-height:34px}.rpCard .rpAdjuntar{min-height:64px}.rpFormulario textarea{height:120px;min-height:110px}.rpEnviar{background:var(--cyan);font:800 15px var(--ui);letter-spacing:.5px}.rpBandeja{min-height:260px}.rpCategorias .eng{padding:8px 5px}.rpMarcarLeido{font-family:var(--ui)}
@media(max-width:700px){.rpFormulario{gap:10px}.rpCard .eng{font-size:11px}.rpCard h2{margin-bottom:8px}.rpFormulario label,.rpEtiqueta{font-size:12px}}
/* Avisos: prioridades iguales en administración y recepción. */
.av-verde{--av-color:#16ed95;--av-fondo:#07211b}
.av-amarillo{--av-color:#ffda35;--av-fondo:#25200d}
.av-rojo{--av-color:#ff476c;--av-fondo:#290e18}
.avPanel{margin:16px 0 26px;color:#f0f3fa;text-align:left}
.avColumnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.avColumnas>section{min-width:0;background:#0b0d16;border:1px solid #253e4a;border-radius:13px;padding:12px}
.avPanel h3{text-align:center;color:#00edff;font-size:15px;letter-spacing:.06em;margin:2px 0 14px}
.avTarjeta{border:1px solid var(--av-color);border-radius:11px;background:#0d1018;margin:9px 0;overflow:visible}
.avEncabezado{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px;padding:12px 38px 10px 12px;cursor:pointer;list-style:none}
.avEncabezado::-webkit-details-marker{display:none}
.avEncabezado>strong{text-align:center;grid-column:1/-1;font-size:14px;padding:0 8px;overflow-wrap:anywhere}
.avPrioridad{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--av-color);display:inline-flex;align-items:center;gap:5px}
.avPrioridad:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--av-color);flex-shrink:0}
.avEstado{grid-column:1/-1;font-size:9px;color:#b8c3ce;line-height:1.5;text-align:center}
.avFlecha{position:absolute;right:15px;bottom:8px;font-size:18px;color:#00edff}
.avTarjeta[open] .avFlecha{transform:rotate(180deg)}
.avBoton{background:#070e16;border:1px solid #00dcea;color:#00eafa;padding:9px 10px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer;min-height:36px;white-space:normal}
.avBoton:disabled{opacity:.5;cursor:default}
.avBoton:focus-visible,.avPanel summary:focus-visible{outline:2px solid #ff00e5;outline-offset:3px}
.avLapiz{position:absolute;right:5px;top:4px;border:0;padding:2px;font-size:20px;min-height:28px;width:28px;background:none}
.avCuerpo{padding:0 10px 10px}
.avMensaje{background:var(--av-fondo);border-left:2px solid var(--av-color);padding:10px;font-size:12px;line-height:1.65;margin:0 0 10px;overflow-wrap:anywhere}
.avAcciones{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.avAcciones>.avSelector{flex:1;min-width:100px}
.avSelector{border:1px solid #304858;border-radius:8px;background:#080e18;min-width:0}
.avSelector>summary{font-size:11px;font-weight:800;padding:10px;cursor:pointer;color:#00edff;min-height:36px;box-sizing:border-box}
.avOpciones,.avDestinos{padding:10px;max-height:340px;overflow-y:auto}
.avOpciones{min-width:0}
.avPersonas{display:grid;gap:8px}
.avPersonas label,.avGrupo{display:flex;gap:8px;align-items:center;font-size:12px;line-height:1.4;min-width:0}
.avPanel input[type=checkbox]{width:17px;height:17px;min-width:17px;margin:0;accent-color:#ff00d8}
.avPersonas label span{overflow-wrap:anywhere}
.avSeleccionados{font-size:10px;line-height:1.5;color:#b8c3ce;overflow-wrap:anywhere}
.avCampo{display:grid;gap:6px;margin:10px 0;font-size:11px;color:#bfc9d8}
.avCampo input,.avCampo textarea,.avCampo select{box-sizing:border-box;min-width:0;width:100%;background:#080c15;color:#f3f5fa;border:1px solid #385161;border-radius:8px;padding:10px;font:inherit;font-size:13px}
.avCampo textarea{min-height:100px;resize:vertical;line-height:1.5}
.avGrupo{margin-bottom:10px;color:#00edff;font-weight:700}
.avPreview{border:1px solid var(--av-color);background:var(--av-fondo);padding:12px;margin:12px 0;border-radius:10px;display:grid;gap:8px;overflow-wrap:anywhere}
.avPreview strong{font-size:14px}.avPreview p{font-size:12px;white-space:pre-wrap;margin:0;line-height:1.6}.avPreview small{font-size:10px;line-height:1.5;color:#c2c9d4}
.avPendiente{display:block;font-size:10px;line-height:1.6;color:#bfc7d4;margin:10px 0 0}
.avResultado{font-size:12px;color:#00eafa;min-height:20px;line-height:1.5}.avError{color:#ff758e}
.avRegistro{margin-top:12px;border:1px solid #304251;border-radius:12px;padding:14px}
.avLog{border-left:3px solid var(--av-color);background:#0a0f19;border-radius:7px;padding:10px;margin:8px 0;overflow-wrap:anywhere}
.avLog summary{cursor:pointer;font-size:12px;line-height:1.6}.avLog p{font-size:11px;line-height:1.7;margin:8px 0}
.avRecibido{border-color:var(--av-color)!important;background:var(--av-fondo)!important}
.avRecibido>.avPrioridad{margin:10px 14px 0}
@media(max-width:900px){.avColumnas{grid-template-columns:1fr}.avReserva{min-height:70px}.avPanel h3{font-size:14px}.avPersonalizado{scroll-margin-top:20px}.avBoton{min-height:40px}.avCampo input,.avCampo textarea,.avCampo select{font-size:16px}.avPersonas{grid-template-columns:repeat(2,minmax(0,1fr))}.avOpciones .avPersonas{grid-template-columns:1fr}}
/* Ajustes de Historial y reportes: controles estables y lectura limpia. */
#chipReportesD{padding-right:18px!important}#chipReportesD>.rpBadge{right:3px;top:3px;transform:none;min-width:15px;height:15px;font-size:9px}
#vistaHist.histEsPersonales .histBuscaFila{display:flex!important}
.rpNota #dRepNota{max-width:none}
.rpBandeja>h2{text-align:center}.rpDestGrupo{border:1px solid #304451;border-radius:8px;padding:9px;margin:6px 0}.rpDestGrupo summary,.rpDestGrupo h3{font-size:12px;color:var(--cyan);font-weight:700;cursor:pointer;margin:0 0 8px}
.rpDestGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 7px}.rpDestGrid label{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;line-height:1.4}.rpDestGrid span{overflow-wrap:anywhere}.rpDestGrid input{width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--magenta)}
.rpFormulario #rpRazon{height:65px;min-height:65px}#rnSinFolioBox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}#rnSinFolioBox label{display:grid;gap:6px}#rnSinFolioBox select{width:100%;min-width:0}
#repTabs .eng{border:1px solid var(--line);background:var(--card);color:var(--text);box-shadow:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--ui)}#repTabs .eng[aria-pressed=true]{background:#062932;border-color:var(--cyan);outline:1px solid var(--cyan);outline-offset:2px}#repTabs .rpAdminNumero{background:#263740;border-radius:10px;padding:2px 6px;min-width:20px;font-size:11px}#repTabs .eng.rpAdminPendiente,#miReportes.rpAdminPendiente{border-color:#fd2856;background:#350b18;color:#fff;box-shadow:0 0 7px #fd285633}#repTabs .rpAdminPendiente .rpAdminNumero{background:#e80037}#repTabs .eng.rpAdminPendiente[aria-pressed=true]{background:#76152f;outline-color:#ff6b91}
#vistaReportes .repGrid>.slip,#vistaReportes .prodCard,.rpAdminGrid .rpCaso{box-shadow:none;background:#0b0e16;border:1px solid #344250;border-left:3px solid #cf2750}#vistaReportes .repError{font-size:13px;line-height:1.6;text-align:left;padding:10px 14px!important}#vistaReportes .resumenMarcas{display:none}
.rpGptModal{width:min(1500px,96vw);max-width:96vw;height:90dvh;display:flex;flex-direction:column}.rpGptModal>.histModalCuerpo{flex:1;min-height:0;overflow:auto}.rpGptModal .repCols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rpGptModal .repCols pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:none;font-size:13px;line-height:1.6}.rpGptModal .repAcc{flex-wrap:wrap}
@media(max-width:700px){#vistaHist #histModo .eng{white-space:nowrap;font-size:8px;letter-spacing:0;gap:3px}#vistaHist #chipReportesD{padding:9px 3px!important}.rpDestGrid label{font-size:10px;gap:4px}.rpGptModal .repCols{grid-template-columns:minmax(0,1fr)}#rnSinFolioBox{grid-template-columns:minmax(0,1fr)}}
#vistaHist .histTopLinea{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr)}
#vistaHist #histModo{min-width:0}#vistaHist #histModo .eng{flex:1 1 0;min-width:0}
@media(max-width:900px){#vistaHist .histTopLinea{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){#vistaHist #histModo .histIcono{display:none}}
@media(max-width:900px){#vistaHist.histEsPersonales .histBuscaFila{display:none!important}}
/* Interior de Mis reportes: no modifica la cabecera ni otras vistas de Historial. */
.rpLayout{align-items:stretch;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr)}
.rpIzquierda{display:flex;flex-direction:column;gap:14px}.rpIzquierda>.rpNota{margin:0;padding:14px 16px}
.rpNota>summary,.rpDestGrupo>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.rpNota>summary::-webkit-details-marker,.rpDestGrupo>summary::-webkit-details-marker,.rnSelector>summary::-webkit-details-marker{display:none}
.rpNota>summary:after,.rpDestGrupo>summary:after,.rnSelector>summary:after{content:'⌄';color:var(--cyan);font-size:18px;line-height:1}
.rpNota[open]>summary:after,.rpDestGrupo[open]>summary:after,.rnSelector[open]>summary:after{content:'⌃'}
.rpNota>summary{font:700 15px var(--ui);color:var(--text);padding-left:10px;border-left:3px solid var(--cyan)}
.rpNota #dRepNota{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.rpNota .rnPrimeraFila{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
.rpNota #rnFolio,.rpNota #rnComentario{width:100%;min-width:0;background:#0b1721;border:1px solid #456372;border-radius:6px;color:var(--text);font:13px var(--ui);padding:9px 10px}
.rpNota #rnFolio{height:36px}.rpNota #rnFolio:disabled{opacity:.4}.rpNota #rnComentario{height:68px;min-height:58px;resize:vertical}
.rpNota .rnSinFolioOpcion{font:600 10px var(--ui);display:flex;align-items:center;gap:6px;white-space:nowrap}
.rpNota input[type=checkbox],.rpNota input[type=radio]{width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--cyan)}
.rpNota .eyebrow{font:600 11px var(--ui);letter-spacing:.5px}.rpNota .rnCapFila{margin:0;gap:10px;align-items:center}
.rpNota .rnCapturas{margin:0;gap:8px}.rpNota .rnCap img{height:40px;max-width:78px;border-radius:5px}
.rpNota #rnEnviar{margin-left:auto;color:var(--cyan);border-color:var(--cyan);font-size:11px;min-height:34px;padding:7px 12px}
.rpNota #rnSinFolioBox{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.rnSelector{min-width:0;position:relative}.rnSelector>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;border:1px solid #456372;border-radius:6px;background:#0b1721;padding:9px 10px;font:12px var(--ui);overflow-wrap:anywhere}
.rnOpciones{position:absolute;z-index:15;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:7px;border:1px solid var(--cyan);border-radius:6px;background:#0a1620;box-shadow:0 8px 18px #0009;max-height:260px;overflow-y:auto}
.rnSelector .rnOpciones{width:min(330px,calc(100vw - 64px));min-width:100%;right:auto}#rnProductoMenu .rnOpciones{right:0;left:auto}
.rpNota #rnSinFolioBox .rnOpciones label{display:flex;align-items:center;gap:5px;padding:7px 3px;min-width:0;font:11px var(--ui);overflow-wrap:normal;cursor:pointer}.rnOpciones label:has(:checked){background:#064652;border-radius:4px}
#rnCoincidencias{font:11px var(--ui);color:var(--text)}#rnCoincidencias>b{display:block;letter-spacing:.5px;margin-bottom:7px}.rnResultados{display:grid;gap:5px;max-height:205px;overflow-y:auto}
.rnResultados label{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #365564;border-radius:6px;padding:8px;cursor:pointer}.rnResultados label:has(:checked){border-color:var(--cyan);background:#06303b}.rnResultados label>span{min-width:0}.rnResultados small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.rpIzquierda>.rpFormulario{padding:16px;gap:12px}.rpFormulario>h2{margin:0;font-size:16px;padding-bottom:10px}
.rpFormCampos{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px}.rpFormTexto{display:flex;flex-direction:column;gap:7px;min-width:0}
.rpFormPara>.rpEtiqueta{display:block;margin-bottom:8px}.rpFormPara .rpDestGrupo{margin:0 0 7px;padding:10px;background:#0b1721}.rpFormPara .rpDestGrupo[open]>.rpDestGrid{padding-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rpFormPara .rpDestGrid label{font-size:11px}.rpFormTexto #rpRazon{height:94px;min-height:80px;font-size:12px;padding:9px}.rpFormTexto #rpComentario{height:60px;min-height:52px;font-size:12px;padding:9px}
.rpFormTexto .rpAnonimo{gap:8px;font-size:10px;margin:0}.rpFormTexto .rpAnonimo input{width:35px;height:21px}.rpFormTexto .rpAnonimo input:before{width:13px;height:13px}.rpFormTexto .rpAnonimo input:checked:before{transform:translateX(13px)}
.rpFormAcciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.rpFormAcciones .rpAdjuntar{min-height:34px;border-style:solid!important;color:var(--cyan);border-color:var(--cyan);padding:7px 10px;font-size:11px}
.rpFormAcciones .rpEnviar{min-height:34px;margin:0 0 0 auto;background:#081720;color:var(--cyan);border-color:var(--cyan);padding:7px 10px;font-size:11px}.rpFormAcciones .rnCapturas{margin:0}.rpFormAcciones .rnCap img{height:40px;max-width:70px}#rpMensaje:empty{display:none}
.rpBandeja .rpCaso{padding:10px 12px;border:1px solid var(--cyan);border-radius:8px;margin-bottom:8px}.rpBandeja .rpSinLeer{border-color:#ff1753}.rpBandeja .rpConcluido{border-color:#00ed86;background:#08201c}.rpBandeja .rpLeido{opacity:1}
.rpBandeja .rpCasoCab{gap:8px}.rpBandeja .rpCasoCab time{font-size:10px}.rpBandeja .rpExtracto{margin:6px 0;font-size:12px;-webkit-line-clamp:1}.rpBandeja .rpCasoPie .rpCategoria{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;padding-left:0;color:var(--muted)}
.rpBandeja .rpCasoPie .rpSeguimiento{border-color:#267185;color:var(--cyan);margin-left:4px}.rpBandeja .rpConcluido .rpSeguimiento{border-color:#00ed86;color:#00ed86}.rpBandeja .rpCasoPie .eng{min-height:28px;padding:4px 10px;font-size:10px}
@media(max-width:1150px){.rpFormCampos{grid-template-columns:minmax(0,1fr)}.rpFormPara .rpDestGrupo[open]>.rpDestGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.rpLayout{grid-template-columns:minmax(0,1fr)}.rpIzquierda>.rpNota,.rpIzquierda>.rpFormulario{padding:12px}.rpNota>summary{font-size:13px}.rpBandeja{padding:12px}.rpBandeja .rpCasoCab time{max-width:108px}.rnOpciones{grid-template-columns:repeat(2,minmax(0,1fr))}.rpFormTexto #rpRazon{height:138px}}
@media(max-width:380px){.rpNota .rnPrimeraFila{grid-template-columns:minmax(0,1fr);gap:8px}.rpNota #rnSinFolioBox{grid-template-columns:minmax(0,1fr)}.rpFormPara .rpDestGrupo[open]>.rpDestGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.rpBandeja .rpCasoCab{flex-wrap:wrap}.rpBandeja .rpCasoCab time{max-width:none;margin-left:43px}.rnOpciones{grid-template-columns:minmax(0,1fr)}}
/* Diseño aprobado: acentos cian, destinatarios flotantes y evidencia sin saltos. */
.rpLayout>.rpBandeja,.rpIzquierda>.rpCard{background:linear-gradient(135deg,#091820,#0b0d16 65%);border-color:#244552}
.rpNota>summary{border-left-color:var(--cyan)}
.rpLayout .rpBandeja>h2{color:var(--text);border-bottom-color:#28414d}
.rpLayout .rpTabs button[aria-pressed=true]{border-color:var(--cyan);background:#06303b;color:var(--cyan);box-shadow:0 0 10px #00dfff22}
.rpFormCab{display:flex;align-items:center;gap:12px;min-width:0;border-bottom:1px solid #28414d;padding-bottom:10px}
.rpFormulario .rpFormCab>h2{flex-shrink:0;margin:0;padding:0;border:0;font-size:16px;color:var(--text)}
#rpSeleccionados{display:flex;gap:5px;align-items:center;min-width:0;min-height:30px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#267185 transparent}
.rpElegido{flex-shrink:0;border:1px solid var(--cyan);background:#06303b;color:var(--cyan);border-radius:6px;padding:5px 7px;font:600 10px var(--ui);cursor:pointer;white-space:nowrap}
.rpFormPara .rpDestGrupo{background:#0b1721;border-color:#304451;padding:0;position:relative}
.rpFormPara .rpDestGrupo>summary{padding:11px 10px;margin:0;color:var(--cyan);min-height:40px}
.rpFormPara .rpDestGrupo>summary:after{color:var(--cyan)}
.rpFormPara .rpDestGrupo[open]{border-color:var(--cyan)}
.rpFormPara .rpDestGrupo[open]>.rpDestGrid{position:fixed;z-index:90;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:9px;box-sizing:border-box;background:#0a1620;border:1px solid var(--cyan);border-radius:8px;box-shadow:0 8px 28px #000b;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#267185 #0a1620}
.rpDestCol{display:flex;flex-direction:column;min-width:0;gap:3px}
.rpFormPara .rpDestGrid label{min-height:34px;padding:6px 4px;border-radius:4px;font:600 11px var(--ui);color:var(--text);cursor:pointer}
.rpFormPara .rpDestGrid label:has(:checked){background:#064652;color:#fff}
.rpFormPara .rpDestGrid input{accent-color:var(--cyan)}
.rpFormPara .rpDestGrid>small{grid-column:1/-1;font-size:10px;color:var(--muted)}
.rpFormTexto #rpRazon{height:72px;min-height:72px;font:12px/1.45 var(--ui);background:#080d17;border-color:#456372}
.rpFormTexto #rpComentario{height:126px;min-height:126px;font:13px/1.5 var(--ui);background:#080d17;border-color:#456372}
.rpFormTexto .rpAnonimo{justify-content:center;min-height:30px;text-align:center;color:#c5d8e6}
.rpFormTexto textarea::placeholder,.rpNota #rnComentario::placeholder{color:#9bacbe;opacity:1}
.rpNota #rnFolio,.rpNota #rnComentario{background:#0b1721;border-color:#456372}
.rpLayout textarea:focus,.rpLayout input:focus-visible,.rpLayout summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.rpNota input[type=checkbox],.rpNota input[type=radio]{accent-color:var(--cyan)}
.rpLayout .rpFormAcciones,.rpNota .rnCapFila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-height:52px}
.rpLayout .rnCapturas{height:52px;min-height:52px;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;overflow:hidden}
.rpLayout .rnCap{flex:0 1 66px;min-width:0;height:44px}
.rpLayout .rnCap img{display:block;width:100%;height:44px;object-fit:cover;border:1px solid #267185;border-radius:5px}
.rpLayout .rnCapQuitar{top:1px;right:1px;width:18px;height:18px;padding:0;line-height:16px;background:#06303b;border-color:var(--cyan);color:white}
.rpLayout .rpEnviar,.rpNota #rnEnviar{border:1px solid var(--cyan);color:var(--cyan);background:#081720;box-shadow:0 0 8px #00dfff1c}
.rpLayout .rpEnviar:hover,.rpNota #rnEnviar:hover{background:#064652}
.rpBandeja .rpCaso:not(.rpSinLeer):not(.rpConcluido):not(.rpCasoAnonimo){border-color:var(--cyan);background:#091820}
@media(max-width:760px){.rpFormTexto #rpRazon{height:78px;min-height:78px}.rpFormTexto #rpComentario{height:140px;min-height:140px}.rpFormTexto textarea,.rpNota #rnComentario,.rpNota #rnFolio{font-size:16px}.rpLayout .rpEnviar,.rpNota #rnEnviar{font-size:10px;padding:8px;min-height:38px}.rpFormCab{gap:8px}.rpFormPara .rpDestGrid label{min-height:38px}}
/* Anonimato visible únicamente en REPORTA; cian con acentos magenta discretos. */
.rpIzquierda>.rpFormulario{border-top-color:#a53799}
.rpFormulario .rpFormCab{border-bottom-color:#683360}
.rpFormPara{min-width:0}
.rpFormPara .rpAnonimo{justify-content:center;gap:8px;min-height:34px;margin:12px 0 0;font-size:10px;text-align:center;cursor:pointer}
.rpFormPara .rpAnonimo input{width:35px;height:21px}
.rpFormPara .rpAnonimo input:before{width:13px;height:13px}
.rpFormPara .rpAnonimo input:checked:before{transform:translateX(13px)}
.rpEstadoAnonimo{display:block;min-height:22px;text-align:center;font:700 10px/22px var(--ui);color:#ff72e8}
.rpIzquierda>.rpFormulario.rpEsAnonimo{border-color:var(--magenta);background:linear-gradient(135deg,#221022,#0b0d16 75%);box-shadow:0 0 14px #ff00d828}
.rpEsAnonimo .rpAnonimo{color:#ff72e8}
.rpEsAnonimo .rpAnonimo input:checked{background:var(--magenta);border-color:#ff72e8;box-shadow:0 0 9px #ff00d855}
.rpFormPara .rpDestGrid label:has(:disabled){opacity:.65;cursor:default}
.rpLayout #rnFolio::placeholder,.rpLayout #rnComentario::placeholder,.rpLayout #rpRazon::placeholder,.rpLayout #rpComentario::placeholder{color:#9bacbe;opacity:.45}
.rpNota #rnFolio:disabled{opacity:1;color:var(--muted)}
/* Confirmación dentro del botón, sin aumentar la altura de los formularios. */
.rpLayout .rpEnviar,.rpNota #rnEnviar{width:150px;height:38px;white-space:nowrap;padding:7px 6px;font-size:10px}
.rpLayout .eng.reporteEnviado{background:#093622;border-color:#2bff88;color:#2bff88;opacity:1;box-shadow:0 0 8px #2bff8833}
.rpNota #dRepNota>.rnCapFila{margin-top:auto}
#rnPersonaMenu .rnOpciones{grid-template-columns:repeat(2,minmax(0,1fr))}
.rnPersonasCol{display:flex;flex-direction:column;min-width:0;gap:3px}
.histModalCab.histCabSinFolio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;flex-wrap:nowrap;gap:14px}
.histCabSinFolio .histNotaIdentidad{grid-column:auto;min-width:0}
.histCabSinFolio .histModalCerrar{grid-column:3;grid-row:1}
.histAvisoSinFolio{color:#ff3b60;font:700 11px/1.5 var(--ui);text-align:center;overflow-wrap:anywhere}
@media(max-width:650px){.histModalCab.histCabSinFolio{grid-template-columns:minmax(0,1fr) auto;gap:8px}.histCabSinFolio .histModalCerrar{grid-column:2}.histAvisoSinFolio{grid-column:1/-1;grid-row:2;text-align:left;font-size:10px}}
@media(min-width:1000px){
.rpIzquierda{gap:10px}.rpIzquierda>.rpNota,.rpIzquierda>.rpFormulario{padding:10px 14px}
.rpIzquierda>.rpFormulario{gap:8px}.rpFormCab{padding-bottom:6px}
.rpNota #dRepNota{margin-top:8px;gap:7px}.rpNota #rnComentario{height:58px;min-height:58px}
.rpFormPara .rpDestGrupo>summary{min-height:34px;padding:8px 10px}
.rpFormPara .rpDestGrupo{margin-bottom:5px}.rpFormPara .rpAnonimo{margin-top:7px;min-height:28px}
.rpEstadoAnonimo{min-height:18px;line-height:18px}
.rpFormTexto #rpRazon{height:55px;min-height:55px}.rpFormTexto #rpComentario{height:100px;min-height:100px}
.rpBandeja{padding:14px}.rpBandeja>h2{margin-bottom:12px;padding-bottom:10px}
}
/* Mis reportes: controles estables y tarjetas compactas. */
.rpNota #rnEnviar.reporteEnviado,.rpLayout .rpEnviar.reporteEnviado{background:#093622;border-color:#2bff88;color:#2bff88;opacity:1;box-shadow:0 0 8px #2bff8833;transition:none}
.rpNota #rnPreview,.rpNota #rnPreview>span{color:#fff;opacity:1;font-size:12px;line-height:1.5}
.rpNota .rnPrimeraFila{grid-template-columns:minmax(0,1fr) 118px;gap:10px}
.rpNota .rnSinFolioOpcion{font-size:12px;min-height:36px;justify-content:center;cursor:pointer}
.rpNota #rnSinFolio{width:19px;height:19px;min-width:19px}
.rpLayout textarea{resize:none!important}
.rpFormPara .rpAnonimo{width:100%;box-sizing:border-box;min-height:38px;padding:7px 8px;border:1px solid #456372;border-radius:6px;background:#0b1721;font-size:10px}
.rpEsAnonimo .rpAnonimo{border-color:var(--magenta);background:#301126}
.rpNota>summary{box-sizing:border-box;width:100%;min-height:40px;padding:8px 10px;cursor:pointer}
.rpNota>summary:after{font-size:24px;padding:0 2px}
.repCapWrap>.eng{color:var(--cyan);border:1px solid var(--cyan);background:#06303b;font-weight:700;opacity:1;box-shadow:0 0 8px #00dfff30}
.repCapWrap>.eng:hover{color:#fff;background:#085466}
.rpBandeja .rpCaso{padding:8px 10px;margin-bottom:6px;cursor:pointer}
.rpBandeja .rpCaso:hover,.rpBandeja .rpCaso:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.rpBandeja .rpAvatar{width:26px;height:26px;font-size:12px}
.rpBandeja .rpCasoCab b{font-size:12px;line-height:1.3}
.rpBandeja .rpExtracto{margin:4px 0;font-size:12px;line-height:1.35}
.rpBandeja .rpCasoPie{flex-wrap:nowrap;gap:6px;min-height:22px}
.rpBandeja .rpCasoPie .rpCategoria{flex:1;min-width:0;font-size:10px}
.rpBandeja .rpLectura,.rpBandeja .rpSeguimiento{flex:none;white-space:nowrap;font-size:9px;padding:2px 5px}
.rpLectura.leido{color:#2bff88;border-color:#2bff88;background:#093622}
.rpBandeja .rpCaso.rpCasoAnonimo,.rpAdminGrid .rpCaso.rpCasoAnonimo{border-color:var(--magenta);background:linear-gradient(110deg,#251025,#10121c)}
.rpCasoAnonimo .rpAvatar{color:#ff83ed;border-color:#d637be;background:#36142f}
.rpBandeja .rpCasoAnonimo:hover,.rpBandeja .rpCasoAnonimo:focus-visible{outline-color:var(--magenta)}
.histModal.rpModalAnonimo{border-color:var(--magenta);background:linear-gradient(140deg,#211020,#0b0d16 70%)}
.rpModalAnonimo .histModalCab{border-bottom-color:var(--magenta)}
.rpModalAnonimo .histModalCab h2{color:#ff83ed}
.rpModalAnonimo .histRepBloque{border-color:#803574}
.rpDetalleEstado{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.histModalCuerpo .rpComentarioCompleto{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:380px){.rpBandeja .rpCasoCab{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 7px}.rpBandeja .rpCasoCab time{grid-column:2;margin:0;text-align:left;font-size:9px}.rpBandeja .rpCasoPie{flex-wrap:wrap}.rpBandeja .rpCasoPie .rpCategoria{flex-basis:100%}}
/* Reportes: filas de una línea y detalle administrativo con nota a la derecha. */
.rpBandeja .rpCaso.rpCasoLinea{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;min-height:52px}
.rpLineaTexto{display:flex;align-items:center;gap:9px;min-width:0;font:12px var(--ui)}
.rpLineaNombre{max-width:32%;flex:0 1 auto}.rpLineaProducto{max-width:28%;color:#c0cddd;flex:0 1 auto}
.rpLineaComentario{flex:1;min-width:0;color:var(--text)}
.rpLineaTexto>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rpLineaMeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.rpLineaMeta time{font:10px var(--ui);color:#aeb9c9;white-space:nowrap}
.rpBandeja .rpLineaMeta .rpCasoPie{justify-content:flex-end;min-height:0;flex-wrap:nowrap;gap:4px}
.retroRepTarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.retroRepTarjetas .retroRepCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin:0;padding:8px 10px;min-height:56px;border-radius:8px}
.retroRepTarjetas .retroRepInfo{flex-direction:row;align-items:center;gap:8px;min-width:0}
.retroRepTarjetas .retroRepInfo b{font-size:11px;max-width:32%;flex:0 1 auto}
.retroRepTarjetas .retroRepInfo .retroRepProducto{font-size:10px;max-width:27%;color:#c0cddd;flex:0 1 auto}
.retroRepTarjetas .retroRepInfo .retroRepComentario{flex:1;color:var(--text);font-size:11px}
.retroRepTarjetas .retroRepInfo>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retroRepMeta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.retroRepMeta .retroRepFecha{font-size:9px;color:#aeb9c9;white-space:nowrap}
.retroRepTarjetas .retroRepAcc{flex-wrap:nowrap;gap:5px;margin:0;align-items:center}
.retroRepTarjetas .retroRepAcc .eng{font-size:9px;padding:4px 6px;min-height:26px;white-space:nowrap}
.retroRepTarjetas .retroRepEstado{font-size:8px;letter-spacing:0;padding:3px 5px;align-self:center;white-space:nowrap}
.reporteNotaAdmin.conFolio{width:min(1220px,96vw);max-width:96vw}
.reporteNotaAdmin.conFolio .histModalCuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.reporteNotaAdmin .histReporteRecibido{min-width:0}
.reporteNotaAdmin.conFolio .histNotaOriginalCard{min-width:0;margin:0;border:0;border-left:1px solid #456372;border-radius:0;padding:0 0 0 22px;background:none;align-self:stretch}
.reporteNotaAdmin .histRepBloque{margin-bottom:12px}
.reporteAdminCapturas{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.reporteCapturaAbrir{padding:4px;border:1px solid var(--cyan);border-radius:6px;background:#081720;cursor:pointer;max-width:46%}
.reporteAdminCapturas img{display:block;width:100%;max-width:180px;max-height:160px;object-fit:contain}
@media(max-width:900px){.retroRepTarjetas{grid-template-columns:minmax(0,1fr)}.reporteNotaAdmin.conFolio .histModalCuerpo{grid-template-columns:minmax(0,1fr);gap:16px}.reporteNotaAdmin.conFolio .histNotaOriginalCard{border-left:0;border-top:1px solid #456372;padding:16px 0 0}}
@media(max-width:500px){.rpBandeja .rpCaso.rpCasoLinea{gap:7px;padding:7px}.rpLineaTexto{font-size:10px;gap:6px}.rpLineaMeta time{font-size:8px}.rpBandeja .rpLineaMeta .rpLectura,.rpBandeja .rpLineaMeta .rpSeguimiento{font-size:8px}.retroRepTarjetas .retroRepCard{grid-template-columns:minmax(0,1fr);gap:5px}.retroRepMeta{flex-direction:row;justify-content:space-between;align-items:center}.retroRepTarjetas .retroRepInfo{min-height:18px}}
/* Bandejas administrativas: una fila compacta, sin filtros de producto/estado. */
.rpCompactGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.rpCompactGrid[hidden]{display:none}
.rpCompactRow{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font:12px var(--ui)}
.rpCompactRow:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.rpCompactAnonimo{background:linear-gradient(110deg,#211021,#0d1019);border-color:#79205d}
.rpCompactText{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.rpCompactNombre{font:inherit;font-weight:750;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpCompactMensaje{flex:1;min-width:0;padding-left:9px;border-left:1px solid #455360;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpProductoColor{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:10px 0 0 10px}
.rpCompactMeta{display:flex;align-items:center;gap:5px;flex-shrink:0}
.rpCompactMeta time{font:10px var(--ui);color:#bcc9d8;white-space:nowrap;margin-right:4px}
.rpCompactControl{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:66px;height:29px;padding:0;border:1px solid #257180;border-radius:7px;background:#0b111c;color:var(--cyan);font:10px var(--ui);white-space:nowrap}
button.rpCompactControl{cursor:pointer}
button.rpCompactControl.rpCampana{font-size:16px}
.rpCompactControl.leido{color:#00fa94;border-color:#00d987}.rpCompactControl.pendiente{color:#ff245f;border-color:#ff245f}
.rpCompactCheck{accent-color:var(--magenta);flex:0 0 15px}
.rpArchivoAcc{display:flex;gap:10px;margin:12px 0}.rpArchivoFiltros{margin-bottom:12px}
.rpSeleccionAcc #rpSeleccionarAdmin{color:var(--cyan);border-color:var(--cyan)}
.rpSeleccionAcc #rpSeleccionarAdmin[aria-pressed=true]{color:#ff245f;border-color:#ff245f}
.rpSeleccionAcc{flex-wrap:wrap;align-items:center;justify-content:flex-start}
.histModalCab .rpConcluirDetalle{color:#00fa94;border-color:#00d987;font-size:14px;padding:7px 13px}
/* Reportar una nota sin marcar nada en amarillo: aviso con CONTINUAR SIN SELECCIONAR o REGRESAR Y MARCAR */
.avisoSinMarcas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:640px;margin:8px auto;padding:10px;border:1px solid var(--yellow);border-radius:10px;background:#ffd60a12}
.avisoSinMarcasTxt{width:100%;color:var(--yellow);font:700 12px var(--ui);letter-spacing:.5px}
.avisoSinMarcas .btn{width:auto;margin:0;padding:9px 14px;font-size:11px}
.avisoSinMarcas .btn.volver{background:transparent;border:1px solid var(--yellow);color:var(--yellow)}
/* REPORTA EL CONSTRUCTOR: la pista en amarillo y más grande; la nota de salida y las dudas plegadas a una barra */
.repPista{border:none;padding:0 0 12px;color:var(--yellow);font:800 13px var(--ui);letter-spacing:.8px;text-align:center}
.slip.plegado > :not(.slip-head){display:none}.slip.plegado .slip-btns{display:none}.slip-head.plegable{cursor:pointer;user-select:none}
.slip-head .fFlecha{color:var(--cyan);font-size:13px;margin-left:6px}
.dudaBox.plegado > :not(.dudaCab){display:none}.dudaTitulo.dudaPlegable{cursor:pointer;user-select:none}.dudaTitulo .fFlecha{color:var(--cyan);font-size:13px;margin-left:6px}
/* Panel de reportes: ✓ para concluir, REVISAR y ENVIAR RESPUESTA llamativos, capturas en la respuesta */
.rpCompactControl.rpConcluirFila{font-size:15px;padding:2px 10px;line-height:1.2}
.rpRevisarBtn,.rpResponderEnviar{background:var(--cyan)!important;color:#05050A!important;border-color:var(--cyan)!important;font-weight:800!important;letter-spacing:1px;box-shadow:0 0 14px rgba(0,240,255,.35)}
.rpRespCapturas{margin-top:8px}.rpRespCapsPega{margin:6px 0}
.bandejaCapturas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.bandejaCapturas img{max-width:160px;max-height:120px;border-radius:8px;border:1px solid var(--line-2);cursor:zoom-in}
.bandejaCapturaGrande{max-width:100%;max-height:75vh;display:block;margin:0 auto}
/* M. FLYER IA: menú de + ESCENAS */
.fEscWrap{position:relative;display:inline-block}
.fEscMenu{position:absolute;left:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;gap:4px;min-width:200px;padding:6px;border:1px solid var(--cyan);border-radius:10px;background:#0c0e17;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.fEscMenu .fEscOp{text-align:left;width:100%}
.rpSeleccionCuenta{color:#bcc9d8;font:11px var(--ui)}
.rpSeleccionAcc .eng{font:600 11px var(--ui);color:var(--cyan);border-color:#257180;padding:8px 10px}
.rpSeleccionAcc .rpLoteConcluir{color:#00fa94;border-color:#00d987}.rpSeleccionAcc .rpLoteEliminar{color:#ff245f;border-color:#ff245f}
.rpArchivoDia{margin:12px 0}.rpArchivoDia>.histDiaCab{width:100%;margin-bottom:9px;text-align:left;padding:12px 15px;border:1px solid var(--line-2);border-radius:11px;background:linear-gradient(105deg,#06202a,#111522 62%,#23061d);color:var(--text);font:750 12px var(--ui);letter-spacing:1px;cursor:pointer;box-shadow:inset 3px 0 0 var(--cyan),inset -3px 0 0 var(--magenta)}
.rpArchivoDia>.histDiaCab[aria-expanded=true]{border-color:var(--cyan);color:var(--cyan)}
.rpDetalleAdmin{width:min(1200px,96vw)}.rpDetalleAdmin.conFolio .histModalCuerpo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rpDetalleTexto{min-width:0}.rpDetalleAdmin .rpDetalleNota{min-width:0;border:0;border-left:1px solid #496575;border-radius:0;padding-left:22px;background:none}
.rpDetalleAdmin .repCols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.rpDetalleAdmin .repCols>*{min-width:0}.rpDetalleAdmin p{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:1400px){.rpCompactRow{gap:7px;padding:8px}.rpCompactMeta{gap:3px}.rpCompactControl{width:57px;font-size:9px}.rpCompactMeta time{font-size:9px}.rpCompactText{gap:6px}.rpCompactMensaje{padding-left:6px}}
@media(max-width:1050px){.rpCompactGrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.rpCompactRow{flex-wrap:wrap;gap:5px}.rpCompactText{flex-basis:85%}.rpCompactMeta{margin-left:auto}.rpCompactControl{width:64px;height:30px}.rpDetalleAdmin.conFolio .histModalCuerpo,.rpDetalleAdmin .repCols{grid-template-columns:minmax(0,1fr)}.rpDetalleAdmin .rpDetalleNota{border-left:0;border-top:1px solid #496575;padding:16px 0 0}}
/* Reportes: lectura clara y navegación compacta sin cambiar los permisos. */
.rpCompactRow{font-size:13px}
.rpCompactMeta time{font:11px var(--ui);color:#d2dce8}
.rpCompactControl{width:72px;height:32px;font:600 11px var(--ui)}
.rpCompactControl.rpSoloLectura{width:94px;font-size:10px}
.rpEstadoRespuesta{max-width:114px;color:#00fa94;font:600 10px var(--ui);line-height:1.3;text-align:center}
.rpEstadoRespuesta.pendiente{color:#ffd60a}
.rpAdminError{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:12px}
.rpDetalleIdentidad{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 20px;border-bottom:1px solid var(--line);color:var(--text);font:600 12px var(--ui)}
/* Encabezado de una duda: DUDA DE · con los colores del renglón de identidad; la hora junto a la ✓ */
.histModalCab h2.rpDudaTitulo{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.histModalCab h2.rpDudaTitulo .cian{color:var(--cyan);border-left:1px solid #455360;padding-left:14px}
.histModalCab .rpHoraDetalle{color:var(--muted);font:600 11px var(--ui);white-space:nowrap}
.rpDetalleIdentidad>span+span{border-left:1px solid #455360;padding-left:16px;color:var(--cyan)}
.rpDetalleAviso{flex-basis:100%;margin:0;color:#bcc9d8;font:12px var(--ui);line-height:1.5}
@media(min-width:1051px) and (max-width:1400px){.rpCompactRow{gap:7px}.rpCompactControl{width:64px;font-size:11px}.rpCompactMeta time{max-width:65px;white-space:normal;line-height:1.3}.rpCompactText{gap:6px}}
@media(max-width:600px){
#repTabs.rpAdminTabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;gap:6px}
#repTabs.rpAdminTabs>button{flex:0 0 auto;min-height:44px}
.rpCompactRow{padding:9px 10px;gap:5px}
.rpCompactText{flex-basis:85%}
.rpCompactMeta{gap:5px;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.rpCompactControl{width:68px;height:44px;font-size:11px}
.rpCompactMeta time{font-size:11px;margin-right:2px}
.rpSeleccionAcc{flex-wrap:nowrap;overflow-x:auto;gap:6px;max-width:100%;padding-bottom:5px}
.rpSeleccionAcc>.eng{flex:0 0 auto;min-height:44px}
.rpDetalleIdentidad{padding:10px 14px;font-size:11px}
}
/* ================= HERRAMIENTAS (ventas): CONTEXTO a la izquierda, SALIDA a la derecha ================= */
select.menu option.divisor.herr{color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:2px}
body.enHerr #principal > *:not(.menus):not(#herr){display:none!important}
#herr{margin-top:4px;min-width:0}
@media(min-width:1000px){#principal > #herr{grid-column:1 / -1;padding-right:0}}
.hzCols{display:grid;gap:18px;align-items:start;min-width:0}
@media(min-width:1000px){.hzCols{grid-template-columns:35fr 65fr}}
.hzCol{min-width:0}
.hzCard{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:16px 18px 18px;box-shadow:0 14px 40px rgba(0,0,0,.45);min-width:0}
.hzCard + .hzCard{margin-top:16px}
.hzHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.hzHead h2{margin:0;font-family:var(--display);font-size:22px;letter-spacing:.5px;text-transform:uppercase;color:var(--text)}
.hzHeadDer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hzLbl{display:block;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin:14px 0 6px}
.hzLbl:first-child{margin-top:0}
.hzLbl small{font-weight:600;color:var(--muted);letter-spacing:.5px;margin-left:6px}
.hzPills{display:flex;flex-wrap:wrap;gap:8px}
.hzPill{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--text);background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;cursor:pointer;flex:1 1 auto;text-align:center;min-width:0;transition:border-color .15s,background .15s,color .15s}
.hzPill:hover{border-color:var(--cyan)}
.hzPill[aria-pressed=true]{background:var(--cyan);color:#05050A;border-color:var(--cyan);box-shadow:0 0 14px rgba(0,240,255,.35)}
.hzPill.ico{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;flex:1 1 90px}
.hzPill svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.hzTxt{width:100%;margin-top:6px;font-family:var(--mono);font-size:13px;text-transform:uppercase;padding:11px 12px}
textarea.hzTxt{min-height:78px;line-height:1.5}
.hzTxt::placeholder{text-transform:uppercase;font-size:11.5px}
.hzFilaCampos{display:flex;gap:8px;align-items:flex-start}
.hzFilaCampos > *{min-width:0}
.hzBtn.btn{margin-top:16px;padding:14px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.hzBtn.btn.cian{background:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.3)}
.hzBtn.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzMini{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--line-2);border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,color .15s,background .15s}
.hzMini:hover{border-color:var(--cyan);color:var(--cyan)}
.hzMini.cian{background:var(--cyan);color:#05050A;border-color:var(--cyan);font-weight:900}
.hzMini.cian:hover{color:#05050A;filter:brightness(1.08)}
.hzMini.magenta{background:var(--magenta);color:#fff;border-color:var(--magenta);font-weight:900}
.hzMini.rojo{color:var(--alert);border-color:rgba(255,61,113,.5)}
.hzMini[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.25)}
.hzMini[disabled]{opacity:.4;cursor:not-allowed}
.hzMini svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzMini svg.relleno{fill:currentColor;stroke:none}
.hzZona{border:1.5px dashed var(--line-2);border-radius:12px;padding:18px 12px;text-align:center;color:var(--muted);cursor:pointer;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;line-height:1.6;transition:border-color .15s,color .15s;margin-top:6px}
.hzZona:hover,.hzZona.arrastrando{border-color:var(--cyan);color:var(--cyan)}
.hzZona small{display:block;font-weight:600;font-size:9.5px;letter-spacing:.5px;opacity:.8}
.hzThumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.hzThumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:#000;cursor:pointer}
.hzThumb img,.hzThumb video{width:100%;height:100%;object-fit:cover;display:block}
.hzThumb.blanco img{object-fit:contain;background:#fff}
.hzThumb .x{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(5,5,10,.85);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hzThumb.sel{outline:2px solid var(--cyan)}
.hzThumb .pie{position:absolute;left:0;right:0;bottom:0;background:rgba(5,5,10,.75);color:#fff;font-family:var(--mono);font-size:9px;padding:3px 6px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzPrev{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#000;margin-top:8px}
.hzPrev img,.hzPrev video{width:100%;display:block;max-height:420px;object-fit:contain;background:#000}
.hzPrev .hzCambiar{position:absolute;top:8px;right:8px;background:rgba(5,5,10,.85)}
.hzVacio{display:flex;align-items:center;justify-content:center;min-height:220px;border:1.5px dashed var(--line-2);border-radius:14px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-align:center;padding:20px;line-height:1.7}
.hzBloque{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px}
.hzBloque:first-child{margin-top:0}
.hzBloque.cian{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,240,255,.25)}
.hzBloque.punteado{border-style:dashed}
.hzBloqueCab{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.hzBloqueCab h4{margin:0;flex:1;font-family:var(--ui);font-weight:900;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);min-width:0}
.hzBloqueCab svg{width:26px;height:26px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hzTexto{font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word;min-height:24px;outline:none;border-radius:8px;padding:4px 6px;border:1px solid transparent}
.hzTexto.editando{background:#08080E;border-color:var(--cyan)}
.hzTexto.grande{font-size:16px;line-height:1.6}
.hzAcc{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px;align-items:center}
.hzAcc.izq{justify-content:flex-start}
.hzColores{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:8px}
.hzColor{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;width:66px;background:transparent;border:0;padding:0}
.hzColor i{width:44px;height:44px;border-radius:50%;border:2px solid var(--line-2);display:block;box-shadow:0 0 12px rgba(0,0,0,.4)}
.hzColor small{font-family:var(--ui);font-weight:800;font-size:8.5px;letter-spacing:.5px;text-transform:uppercase;text-align:center;color:var(--text);line-height:1.2}
.hzEstado{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.hzPillEstado{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--ui);font-weight:900;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.hzPillEstado.enviada{background:rgba(255,214,10,.15);color:var(--yellow);border:1px solid rgba(255,214,10,.5)}
.hzPillEstado.trabajo{background:rgba(0,240,255,.12);color:var(--cyan);border:1px solid rgba(0,240,255,.5)}
.hzLista{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hzFila{display:flex;align-items:center;gap:10px;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:0}
.hzFila:hover{border-color:var(--cyan)}
.hzFila.sel{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,240,255,.3)}
.hzFila .ico{font-size:18px;flex:0 0 auto;color:var(--cyan);width:24px;text-align:center}
.hzFila .nom{flex:1;min-width:0;font-family:var(--mono);font-size:12px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzFila .sub{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hzFila .dur{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
.hzFila img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#000}
.hzFila .mini{flex:0 0 auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:4px}
.hzFila .mini:hover{color:var(--alert)}
.hzDetalle{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:-2px 0 8px;white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.5}
.hzMsg{margin-top:10px;font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--yellow);line-height:1.5}
.hzMsg.mal{color:var(--alert)}
.hzMsg.ok{color:#2BFF88}
.hzTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hzTab{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text);background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;cursor:pointer;flex:1 1 auto;text-align:center}
.hzTab[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.25)}
.hzPregunta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px}
.hzPregunta .q{font-family:var(--mono);font-size:13px;text-transform:uppercase;line-height:1.45;padding-top:6px}
.hzPregunta textarea{min-height:64px;margin:0}
@media(max-width:600px){.hzPregunta{grid-template-columns:1fr}}
.hzComparar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hzComparar .tit{font-family:var(--ui);font-weight:900;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hzComparar .tit.cian{color:var(--cyan)}
.hzComparar img,.hzComparar canvas{width:100%;display:block;border-radius:10px;border:1px solid var(--line-2);background:#000}
.hzCuadros,.hzComparar canvas.hzCuadros{background-color:#cfcfcf;background-image:linear-gradient(45deg,#9a9a9a 25%,transparent 25%),linear-gradient(-45deg,#9a9a9a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#9a9a9a 75%),linear-gradient(-45deg,transparent 75%,#9a9a9a 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
@media(max-width:600px){.hzComparar{grid-template-columns:1fr}}
.hzCheck{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;padding:6px 0}
.hzCheck i{width:22px;height:22px;border-radius:50%;background:var(--cyan);color:#05050A;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:12px;flex:0 0 auto}
.hzChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hzChip{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--cyan);background:transparent;border:1px solid rgba(0,240,255,.4);border-radius:999px;padding:5px 10px;cursor:pointer}
.hzChip:hover{background:rgba(0,240,255,.1)}
.hzImgGrande{width:100%;display:block;border-radius:12px;border:1px solid var(--line-2);background:#000;max-height:70vh;object-fit:contain}
.hzCargando{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);text-align:center;line-height:1.7}
.hzCargando i{width:34px;height:34px;border:3px solid rgba(0,240,255,.2);border-top-color:var(--cyan);border-radius:50%;animation:hzGiro 1s linear infinite}
@keyframes hzGiro{to{transform:rotate(360deg)}}
.hzSep{border:0;border-top:1px solid var(--line);margin:14px 0}
.hzNota{font-family:var(--ui);font-weight:600;font-size:11px;color:var(--muted);line-height:1.6;margin-top:8px}
.hzPasos{margin:8px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hzPasos li{display:flex;gap:10px;align-items:flex-start;font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--text)}
.hzPasos li b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--cyan);color:#05050A;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
/* recortador */
.hzOnda{position:relative;height:55px;background:var(--card-2);border:1px solid var(--line);border-radius:12px;margin-top:10px;overflow:hidden;touch-action:none;user-select:none}
.hzOnda canvas{width:100%;height:100%;display:block}
.hzAsa{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);cursor:ew-resize}
.hzAsa::before{content:attr(data-etq);position:absolute;top:3px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#05050A;font-family:var(--ui);font-weight:900;font-size:8.5px;letter-spacing:.5px;padding:2px 7px;border-radius:5px;white-space:nowrap}
.hzAsa::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--cyan)}
.hzAsa.fin::before{top:auto;bottom:4px}
.hzAsa.fin::after{bottom:auto;top:-1px}
.hzTiempos{display:flex;flex-direction:column;align-items:center;margin-top:10px;gap:2px}
.hzTiempos b{font-family:var(--mono);font-size:26px;letter-spacing:1px;font-weight:600}
.hzTiempos small{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.hzMedia{width:100%;border-radius:12px;background:#000;display:block;max-height:360px}
audio.hzMedia{max-height:none}
.hzAudioCover{height:130px;border-radius:12px;background:linear-gradient(135deg,#0E0E16,#1a1030);display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--cyan);margin-bottom:8px}
/* fondo */
.hzRetoque{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.hzRango{flex:1 1 140px;accent-color:var(--cyan);min-width:120px}
.hzRangoEtq{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hzLienzoFondo{position:relative;touch-action:none;user-select:none}
.hzLienzoFondo canvas{cursor:crosshair}
/* maniquí */
.hzMani{margin-top:10px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);touch-action:none;user-select:none}
.hzMani canvas{width:100%;display:block;cursor:grab}
/* acomodo */
.hzLienzoWrap{overflow:auto;background:#151522;border:1px solid var(--line-2);border-radius:12px;padding:16px;margin-top:10px}
.hzLienzoWrap.arrastrando{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,240,255,.35) inset}
/* acomodo: COLOR y FONDO en un renglón, un círculo por cada uno que abre el selector de color */
.hzColorFila{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:14px}
.hzColorUno{display:flex;align-items:center;gap:10px}
.hzSwatchUno{position:relative;overflow:hidden;width:34px;height:34px;border-color:var(--cyan)}
.hzSwatchUno input[type=color]{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer;border:0;padding:0}
.hzColorFila .hzFotoFondo{margin-left:auto}
.hzExtra{margin-top:14px;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card-2)}
.hzExtra .hzTxt{width:100%;margin-top:6px}
.hzAvisoSil{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding:10px 12px;border:1px solid var(--cyan);border-radius:10px;background:rgba(0,240,255,.08);font:700 11px var(--ui);color:var(--cyan);letter-spacing:.5px}
.hzAvisoSil span{flex:1;min-width:200px}
.hzCapa .fle{display:flex;flex-direction:column;gap:0}
.hzCapa .fle button{font-size:9px;padding:0 4px;line-height:1.1}
.hzCapa button.borrar{color:#ff245f}.hzCapa button:disabled{opacity:.3;cursor:default}
.hzLienzoWrap .canvas-container{margin:0 auto}
.hzCapas{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.hzCapa{display:flex;align-items:center;gap:8px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;cursor:pointer}
.hzCapa.sel{border-color:var(--cyan)}
.hzCapa.arrastrando{opacity:.4}
.hzCapa .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzCapa button{background:transparent;border:0;color:var(--cyan);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1}
.hzCapa button.off{color:var(--muted)}
.hzCapa button svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzCapa .asa{color:var(--muted);cursor:grab;font-size:14px}
.hzSwatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
.hzSwatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0}
.hzSwatch.sel{border-color:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.5)}
.hzBarra{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.hzBarra .grupo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
select.menu.hzSel{width:auto;padding:8px 26px 8px 10px;font-size:11px}
.hzGridTools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hzGridTools .hzPill{flex:none}
@media(max-width:600px){.hzHead h2{font-size:18px}.hzThumbs{grid-template-columns:repeat(3,1fr)}.hzCard{padding:14px}}
/* PREGUNTAR (2026-09-13): conversación apilada, ✕ para cerrarla, botón encendido y etiquetas de DUDAS */
.dudaBox{position:relative}
.dudaBox.conHilo{padding-top:14px}
.dudaCerrar{position:absolute;top:7px;right:9px;width:24px;height:24px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--line-2);border-radius:7px;color:var(--muted);font-size:11px;line-height:1;cursor:pointer}
.dudaCerrar:hover,.dudaCerrar:focus-visible{color:var(--text);border-color:var(--cyan);outline:none}
.dudaHilo{display:flex;flex-direction:column;gap:8px;max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.dudaPreg{align-self:flex-end;max-width:88%;background:var(--card-2);border:1px solid var(--line-2);border-radius:10px 10px 3px 10px;padding:7px 11px;font-family:var(--ui);font-size:11.5px;letter-spacing:.3px;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.dudaHilo .dudaResp{align-self:stretch}
.dudaResp.nada,.dudaResp.pensando{color:var(--muted);border-color:var(--line-2);font-size:10.5px}
.dudaResp.pensando{animation:dudaLatido 1.2s ease-in-out infinite}
@keyframes dudaLatido{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.dudaResp.pensando{animation:none}}
.dudaHilo .dudaOtra,.dudaHilo .dudaListo{align-self:flex-start}
.dudaFila .btn.dudaBtn{color:var(--cyan);border:1px solid var(--cyan);background:rgba(0,240,255,.10);font-weight:800;text-shadow:0 0 8px rgba(0,240,255,.55);box-shadow:0 0 0 1px rgba(0,240,255,.25),0 0 14px rgba(0,240,255,.35)}
.dudaFila .btn.dudaBtn:hover:not(:disabled),.dudaFila .btn.dudaBtn:focus-visible{background:rgba(0,240,255,.18);box-shadow:0 0 0 1px rgba(0,240,255,.5),0 0 22px rgba(0,240,255,.6);outline:none}
.dudaFila .btn.dudaBtn:disabled{opacity:.75;cursor:default}
/* Dudas del constructor: conversación con identidad y acciones separadas. */
.dudaBox{padding:14px 16px;gap:14px;background:linear-gradient(120deg,#0a1118,var(--card) 65%);grid-column:1/-1}
.dudaCab{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-2);padding-bottom:12px}
.dudaTitulo{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.dudaTitulo h2{margin:0;color:var(--text);font:800 15px var(--ui);letter-spacing:.5px;background:none;-webkit-text-fill-color:currentColor;filter:none}
.dudaIcono{display:inline-flex;flex:0 0 auto;width:20px;height:20px}.dudaIcono svg{width:100%;height:100%}
.dudaTitulo>.dudaIcono{color:var(--cyan);width:25px;height:25px}
.dudaProducto{padding-left:12px;border-left:1px solid var(--line-2);color:#a2adc2;font:650 11px var(--ui)}
.dudaBox .dudaCerrar{position:static;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;height:36px;padding:0 11px;flex-shrink:0;border:1px solid var(--alert);background:#130d17;color:#f8e7ed;font:700 11px var(--ui);border-radius:9px;white-space:nowrap}
.dudaCerrar .dudaIcono{color:var(--alert);width:17px;height:17px}.dudaCerrar:disabled{opacity:.4;cursor:default}
.dudaBox .dudaCerrar:focus-visible,.dudaOtra:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.dudaHilo{gap:14px;max-height:min(55vh,440px);padding:2px 4px 2px 0}
.dudaMensaje{display:flex;align-items:flex-start;gap:10px;min-width:0;max-width:94%}
.dudaUsuario{align-self:flex-end;flex-direction:row-reverse}.dudaAsistente{align-self:flex-start}
.dudaAvatar{width:42px;height:42px;border:2px solid var(--cyan);border-radius:50%;background:#000;flex:0 0 42px;overflow:hidden;display:grid;place-items:center;color:var(--magenta);font:800 18px var(--ui);margin-top:20px}
.dudaAvatar img{width:100%;height:100%;object-fit:cover}.dudaAvatarIA img{object-fit:contain}
.dudaAvatarUsuario{border-color:var(--magenta);background:#181020}
.dudaContenido{display:flex;flex-direction:column;gap:6px;min-width:0}.dudaAutor{font:750 10px var(--ui);letter-spacing:.6px;color:var(--cyan)}
.dudaUsuario .dudaAutor{align-self:flex-end;color:var(--magenta)}
.dudaBox .dudaPreg,.dudaBox .dudaResp{margin:0;max-width:100%;padding:10px 13px;border:1px solid #16768b;border-radius:11px;background:#0d1620;font:14px/1.55 var(--ui);letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere}
.dudaBox .dudaPreg{background:#19101d;border-color:#a92478;border-radius:11px 11px 3px 11px}
.dudaBox .dudaResp.nada,.dudaBox .dudaResp.pensando{color:#b7c4d8}.dudaBox .dudaResp.mal{color:var(--alert);border-color:var(--alert)}
.dudaAlternativa{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-left:52px;color:#aeb9cc;font:12px var(--ui)}
.dudaBox .dudaOtra{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #718098;border-radius:8px;background:#10141f;color:#d4ddef;font:700 10px var(--ui);text-decoration:none;letter-spacing:.3px}
.dudaOtra .dudaIcono{width:16px;height:16px}.dudaHilo .dudaListo{margin-left:52px;font:11px/1.5 var(--ui);color:var(--green)}
.dudaFila{border-top:1px solid var(--line-2);padding-top:12px;gap:10px}
.dudaFila input{min-height:42px;padding:10px 12px;font:14px var(--ui);text-transform:none}
.dudaFila input::placeholder{font:13px var(--ui);letter-spacing:0;color:#7f8ba2;opacity:.75}
.dudaFila .btn.dudaBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;font:800 11px var(--ui);padding:10px 14px;text-shadow:none;box-shadow:0 0 12px #00f0ff20}
@media(max-width:600px){.dudaBox,.dudaBox.conHilo{padding:12px 10px;gap:12px}.dudaCab{align-items:flex-start;gap:8px}.dudaTitulo{gap:6px}.dudaTitulo h2{font-size:11px;max-width:140px}.dudaTitulo>.dudaIcono{width:19px;height:19px}.dudaProducto{flex-basis:100%;padding-left:25px;border:0;font-size:10px}.dudaBox .dudaCerrar{font-size:9px;padding:0 7px;height:34px;gap:5px}.dudaMensaje{max-width:100%;gap:7px}.dudaAvatar{width:32px;height:32px;flex-basis:32px}.dudaBox .dudaPreg,.dudaBox .dudaResp{font-size:13px;padding:9px 10px}.dudaAlternativa,.dudaHilo .dudaListo{margin-left:39px}.dudaAlternativa{gap:8px;font-size:11px}.dudaFila{gap:7px}.dudaFila input{font-size:16px;padding:9px}.dudaFila input::placeholder{font-size:12px}.dudaFila .btn.dudaBtn{font-size:9px;padding:9px}.dudaFila .dudaBtn .dudaIcono{width:16px;height:16px}}
.rpEtiquetaDuda{flex:0 0 auto;display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font:800 9.5px var(--ui);letter-spacing:.6px;white-space:nowrap}
.rpEtiquetaDuda.nosirvio{color:var(--alert);background:rgba(255,61,113,.12);border:1px solid rgba(255,61,113,.45)}
.rpEtiquetaDuda.nosupo{color:var(--yellow);background:rgba(255,214,10,.10);border:1px solid rgba(255,214,10,.45)}
.rpDetalleTexto>.rpEtiquetaDuda{margin-bottom:10px}
.rpResponderDuda textarea{width:100%;min-height:70px;box-sizing:border-box;background:var(--card-2);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;color:var(--text);font:12px var(--ui);resize:vertical}
.rpResponderDuda .rpResponderEnviar{margin-top:8px}
/* VIDEO 3D · INTRO (2026-09-15, Alexis): todo en el renglón de arriba (CLIENTE, FORMATO, DURACIÓN, MEDIDA y GIRO).
La caja FORMATO es un poco más ancha en todos los formatos; con INTRO se parte a la mitad sin mover las demás:
el producto y, a su derecha, ¿CATÁLOGO? (paloma / tache) o NO. + NOMBRE */
@media (min-width:1301px){
/* ancho fijo (el mismo con EPS que con INTRO), así elegir INTRO o responder el ¿CATÁLOGO? no mueve nada */
.fForm .fTopV3 .fProdSlotV3 > .fFmtV3{flex:0 0 calc((100% - 18px) * .38)}
.fForm .fTopV3 .fProdSlotV3 > :not(.fFmtV3){flex:1 1 0}
}
.fForm .fFmtCatV3{display:flex;gap:3px;align-items:center;min-width:0}
.fForm .fTopV3 .fProdSlotV3 > .fFmtCatV3 > *{height:33px;box-sizing:border-box}
.fForm .fFmtCatV3 > .fFmtSelV3{flex:1 1 0;min-width:0;width:auto}
.fForm .fFmtCatV3 .fCatWrap{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}
.fForm .fFmtCatV3 .fCatWrap .fEtqCat{font-size:7px;letter-spacing:.2px}
.fForm .fFmtCatV3 .fCatWrap .fMini{min-width:19px;padding:5px 2px;font-size:10px}
.fForm .fFmtCatV3.conNumV3 > .fFmtSelV3{flex:0 1 44%}
.fForm .fFmtCatV3 .fCatNum{flex:0 0 38px;width:38px;min-width:38px;padding-left:2px;padding-right:2px;text-align:center}
.fForm .fFmtCatV3 .fNomIntroV3{flex:1 1 0;min-width:0;width:auto}
.fMedidaPanel .fMultiFila .fFmtCatV3{flex:2 1 220px}
/* Pantallas angostas (no cabe en una línea): el FORMATO partido queda arriba y DURACIÓN, MEDIDA y GIRO bajan; nada se encima */
@media (max-width:1300px){
.fForm .fTopV3.fTopIntroV3{align-items:flex-start}
.fForm .fTopV3 .fProdSlotV3.fSlotIntroV3{flex-wrap:wrap;row-gap:6px}
.fForm .fTopV3 .fProdSlotV3.fSlotIntroV3 > .fFmtCatV3{flex:1 1 100%}
.fForm .fTopV3 .fProdSlotV3.fSlotIntroV3 > :not(.fFmtCatV3){flex:1 1 0;min-width:80px}
.fForm .fFmtCatV3 .fCatWrap .fEtqCat{font-size:8.5px;letter-spacing:.6px}
.fForm .fFmtCatV3 .fCatWrap .fMini{min-width:26px;padding:6px 6px;font-size:11px}
.fForm .fFmtCatV3 .fCatNum{flex:0 0 54px;width:54px;min-width:54px}
}
@media (max-width:700px){.fForm .fTopV3 .fProdSlotV3.fSlotIntroV3 > :not(.fFmtCatV3){flex:1 1 45%}}
/* ================= CELULAR · FLYER - MOTION (2026-09-15, Alexis) =================
Solo en celular (hasta 700px) y solo con FLYER - MOTION elegido (#principal.movilOrden); escritorio y demás productos no cambian.
Orden: selector → constructor → GENERAR | BORRAR TODO → nota compacta con VER COMPLETA → nota generada → PREGUNTAR.
Solo cambia el lugar y el tamaño de las cosas; ningún botón cambia de función. */
.verNotaCompleta{display:none}
@media (max-width:700px){
/* orden de la página: #out se abre para que el constructor quede arriba de GENERAR y lo generado abajo */
#principal.movilOrden{display:flex;flex-direction:column;gap:10px}
#principal.movilOrden > #out{display:contents}
#principal.movilOrden > .menus{order:1;margin:0}
#principal.movilOrden > #incluye,#principal.movilOrden > #inLabel{order:2;margin:0}
#principal.movilOrden #out > *{order:8;margin-top:0}
#principal.movilOrden #out > .fForm{order:3}
#principal.movilOrden > .filaBtns{order:4;margin:0;gap:8px}
#principal.movilOrden > #load,#principal.movilOrden > #err{order:5;margin:0}
#principal.movilOrden > #pedido{order:6}
#principal.movilOrden > .verNotaCompleta{order:7}
#principal.movilOrden #out > .dudaBox{order:9}
#principal.movilOrden > #vUpZona,#principal.movilOrden > #extraSrt,#principal.movilOrden > #herr{order:10}
/* GENERAR es la acción principal (68 %); BORRAR TODO ocupa el resto */
#principal.movilOrden > .filaBtns .btn{margin-top:0;min-height:48px}
#principal.movilOrden > .filaBtns #go{flex:0 0 calc(68% - 4px)}
#principal.movilOrden > .filaBtns #limpiar{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;font-size:10.5px;letter-spacing:.6px}
/* la nota: cuadro compacto de alto fijo (no empuja nada mientras se llena); VER COMPLETA la muestra entera, tal cual */
#principal.movilOrden > #pedido{height:180px!important;min-height:0!important;max-height:none!important;margin:0;resize:none}
#principal.movilOrden > #pedido.notaAbierta{height:var(--notaAlto,180px)!important;overflow-y:hidden}
#principal.movilOrden > .verNotaCompleta{display:block;align-self:center;margin-top:-4px;min-height:40px;padding:10px 22px;font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer}
#principal.movilOrden > .verNotaCompleta:hover{border-color:var(--cyan)}
/* nota generada: FLYER - MOTION 1 con REPORTAR en el primer renglón; DESCARGAR | COPIAR abajo */
#principal.movilOrden #out > .slip[data-texto] > .slip-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;padding:10px 12px}
#principal.movilOrden #out > .slip[data-texto] > .slip-head > span{grid-column:1;grid-row:1;min-width:0}
#principal.movilOrden #out > .slip[data-texto] .slip-btns{display:contents}
#principal.movilOrden #out > .slip[data-texto] .slip-btns > .rBtn{grid-column:2;grid-row:1;justify-self:end;min-height:34px;padding:6px 14px}
#principal.movilOrden #out > .slip[data-texto] .slip-btns > button:not(.rBtn){width:100%;min-height:40px}
/* de aquí para abajo, solo FLYER - MOTION: el acomodo de adentro de su constructor */
/* constructor: menos relleno por dentro; todo queda en una misma cuadrícula */
#principal.jobFlyer .fForm .fCuerpo{padding:6px}
#principal.jobFlyer .fForm .fBloque{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:6px;padding:8px;margin-top:0}
#principal.jobFlyer .fForm .fBloque > *{order:20;flex:1 1 100%;min-width:0}
#principal.jobFlyer .fForm .fBloque > .fLineaDiv{order:30}
#principal.jobFlyer .fForm .fBloque > .fTemFila ~ :not(.fTemFila),
#principal.jobFlyer .fForm .fBloque > .fLineaDiv ~ *{order:40}
#principal.jobFlyer .fForm .fBloque > .fSec{margin-top:10px;padding-top:4px}
/* primera parte: CLIENTE completo · PRODUCTO | MEDIDA · en motion ¿AYV? | TIEMPO y la VOZ abajo */
#principal.jobFlyer .fForm .fBloque > .fTop,
#principal.jobFlyer .fForm .fTop > .fAvSlot{display:contents}
#principal.jobFlyer .fForm .fTop > *,
#principal.jobFlyer .fForm .fTop > .fAvSlot > *{order:10;flex:1 1 calc(50% - 3px);min-width:0;margin:6px 0 0}
#principal.jobFlyer .fForm .fTop > .fCliente{flex-basis:100%;margin-top:0}
#principal.jobFlyer .fForm .fTop > .fAvSlot > *,
#principal.jobFlyer .fForm .fTop > .fTiempo,
#principal.jobFlyer .fForm .fTop > .fTiempoIA,
#principal.jobFlyer .fForm .fTop > .fAvCaja,
#principal.jobFlyer .fForm .fTop > .fTiempoCaja{order:11}
#principal.jobFlyer .fForm .fTop > .fAvSlot > .fVozCaja,
#principal.jobFlyer .fForm .fTop > .fVozCaja{order:12;flex-basis:100%}
#principal.jobFlyer .fForm .fTop > .fTiempoIA{flex-basis:100%;display:flex;gap:6px}
#principal.jobFlyer .fForm .fTop > .fTiempoIA > *{flex:1 1 0;min-width:0}
/* + PRODUCTO (y ✕ F2) centrado debajo de COLORES | ACOMODO */
#principal.jobFlyer .fForm .fTop > .fMasProd,
#principal.jobFlyer .fForm .fTop > .fMini.rojo{order:30;flex:0 0 auto;margin-top:10px;min-height:36px;padding:8px 16px}
#principal.jobFlyer .fForm .fTop > .fFantasma{display:none}
/* AGD | TEM 1 | TEM 2 y abajo COLORES | ACOMODO */
#principal.jobFlyer .fForm .fBloque > .fTemFila{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
#principal.jobFlyer .fForm .fTemFila > *{flex:1 1 calc(50% - 3px);min-width:0;margin:0}
#principal.jobFlyer .fForm .fTemFila > .fEtq,
#principal.jobFlyer .fForm .fTemFila > .fAgd{flex:0 0 auto}
#principal.jobFlyer .fForm .fTemFila > .fAgd{height:40px;padding:0 2px}
#principal.jobFlyer .fForm .fTemFila > .fTem1Caja,
#principal.jobFlyer .fForm .fTemFila > .fTem1,
#principal.jobFlyer .fForm .fTemFila > .fTem2{flex:1 1 30%}
/* primera parte: botones y cajas del mismo tamaño; toda la caja se toca y conserva su flecha */
#principal.jobFlyer .fForm .fTop > input,
#principal.jobFlyer .fForm .fTop > select,
#principal.jobFlyer .fForm .fTop > .fMulti > .fMultiBox,
#principal.jobFlyer .fForm .fTop > .fAvSlot > select,
#principal.jobFlyer .fForm .fTop > .fAvSlot > .fMulti > .fMultiBox,
#principal.jobFlyer .fForm .fTop > .fTiempoIA > select,
#principal.jobFlyer .fForm .fTemFila > input,
#principal.jobFlyer .fForm .fTemFila > select,
#principal.jobFlyer .fForm .fTemFila > .fMulti > .fMultiBox{height:40px;box-sizing:border-box;padding:0 22px 0 9px;font-size:16px;letter-spacing:0;border-radius:9px;background-position:right 8px center}
#principal.jobFlyer .fForm .fTop > input,
#principal.jobFlyer .fForm .fTemFila > input{padding:0 10px}
/* + ANEXOS | + LOGO SENCILLO · + PERSONAJE | + EXTRAS: cuadrícula de dos, todos iguales */
/* (si quedan nones, el último va solo, centrado y del mismo ancho; en motion + CANCION va al final para conservar las parejas) */
#principal.jobFlyer .fForm .fAnexos > .fCabTres{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px}
#principal.jobFlyer .fForm .fCabTres > *{order:1;min-width:0;margin:0}
#principal.jobFlyer .fForm .fCabTres > .fEtq:not(.fNLInline){order:0;flex:0 0 100%;text-align:center}
#principal.jobFlyer .fForm .fCabTres > .fAdd,
#principal.jobFlyer .fForm .fCabTres > .fCancionMenu{flex:0 0 calc(50% - 4px)}
#principal.jobFlyer .fForm .fCabTres > .fCancionMenu{order:2}
#principal.jobFlyer .fForm .fCabTres > .fAdd,
#principal.jobFlyer .fForm .fCabTres > .fMulti > .fAdd{width:100%;min-height:40px;padding:8px 6px;font-size:12px;letter-spacing:1px;text-align:center;overflow:hidden;text-overflow:ellipsis}
/* con el flyer ya hecho, su NO LLEVA va en un renglón aparte, debajo de los botones */
#principal.jobFlyer .fForm .fCabTres:has(> .fNLInline)::after{content:'';order:3;flex:0 0 100%;height:0}
#principal.jobFlyer .fForm .fCabTres > .fNLInline,
#principal.jobFlyer .fForm .fCabTres > .fNoLleva{order:4;flex:0 0 auto;margin:0}
#principal.jobFlyer .fForm .fCabTres > .fNoLleva{min-height:34px;padding:6px 10px;font-size:10px;letter-spacing:.6px}
/* INF AUDIO: su título y el botón de corrección no se salen de su cuadro */
#principal.jobFlyer .fForm .fInfAudio .fMini{white-space:normal;max-width:100%;line-height:1.3;text-align:center}
#principal.jobFlyer .fForm .fInfAudio .fEtq{white-space:normal;line-height:1.4}
/* renglón de anexo: TIPO y NOMBRE arriba; USO, UBICACIÓN y ✕ abajo (sin un renglón solo para la ✕) */
#principal.jobFlyer .fForm .fAnexoFila > .fUso,
#principal.jobFlyer .fForm .fAnexoFila > .fUbic{flex:1 1 calc(50% - 24px)}
/* NO LLEVA: etiquetas compactas; la que no cabe baja completa al siguiente renglón */
#principal.jobFlyer .fForm .fChipsNL{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:8px}
#principal.jobFlyer .fForm .fChipsNL > .fEtq{flex:0 0 auto;margin:0}
#principal.jobFlyer .fForm .fChipsNL > .eng.fNoLleva{flex:0 0 auto;min-width:0;min-height:34px;padding:6px 10px;font-size:10px;letter-spacing:.6px;gap:5px}
#principal.jobFlyer .fForm .fChipsNL > .eng.fNoLleva .fTxt{overflow:visible;text-overflow:clip}
/* INFO: el nombre del campo más angosto para darle más espacio al cuadro de texto */
#principal.jobFlyer .fForm .fInfoCab{margin-top:8px}
#principal.jobFlyer .fForm .fInfoCab .fAddInfo{min-height:36px}
#principal.jobFlyer .fForm .fInfoFila{gap:5px;margin-top:6px}
#principal.jobFlyer .fForm .fInfoFila > .fEtqInfo{flex:0 0 44px;font-size:9.5px;letter-spacing:.4px}
#principal.jobFlyer .fForm .fInfoFila > input[type=text]{flex:1 1 0;min-width:0;height:40px}
/* las listas que se abren no se salen de la pantalla */
#principal.jobFlyer .fForm .fMultiPanel{max-width:calc(100vw - 32px)}
#principal.jobFlyer .fForm .fTop > .fMedidaCaja > .fMultiPanel,
#principal.jobFlyer .fForm .fTop > .fTiempoCaja > .fMultiPanel{left:auto;right:0}
}
/* selector de arriba: el botón de los iconos a la derecha; los iconos salen en un cuadro flotante que no mueve nada */
@media (max-width:600px){
#principal.movilOrden > .menus{position:relative;z-index:20;flex-wrap:nowrap}
#principal.movilOrden > .menus > select.menu{order:1;flex:1 1 0;min-width:0}
#principal.movilOrden > .menus > .icoToggle{order:2;align-self:stretch;min-width:46px;justify-content:center;align-items:center}
#principal.movilOrden > .menus > .icoBar{order:3}
#principal.movilOrden > .menus.abierta > .icoBar{position:absolute;top:calc(100% + 6px);right:0;z-index:45;flex:none;justify-content:flex-end;gap:8px;padding:8px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.65)}
}
/* ================= ORTOGRAFÍA (2026-09-15, Alexis) =================
Nota recién generada: lo que el motor corrigió solo se pinta de verde 3 segundos y se desvanece. */
.slip pre .corregido{border-radius:4px;animation:corregidoVerde 3.6s ease-out forwards}
@keyframes corregidoVerde{
0%,83%{background-color:rgba(43,255,136,.30);box-shadow:0 0 0 1px rgba(43,255,136,.75),0 0 12px rgba(43,255,136,.35);color:#EFFFF5}
100%{background-color:transparent;box-shadow:none}
}
/* ================= VID IA MUSICAL (2026-09-15, Alexis) =================
CLIENTE; a su derecha MEDIDA, DURACIÓN y ESTILO de VIDEO IA. Desde 2026-09-19 DURACIÓN y ESTILO son cajas partidas:
al elegirlas, el botón queda a la izquierda y su ¿SUG? a la derecha (ya no debajo). */
.fForm .fTopMusical{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.55fr) minmax(0,1.55fr);gap:5px;align-items:center}
.fForm .fTopMusical > *{min-width:0;width:100%;margin:0}
.fForm .fTopMusical > .fCliente{grid-column:1;grid-row:1}
.fForm .fTopMusical > .fMedida{grid-column:2;grid-row:1}
.fForm .fTopMusical > .fDurWrapMus{grid-column:3;grid-row:1}
.fForm .fTopMusical > .fEstWrapMus{grid-column:4;grid-row:1}
.fForm .fPartidaMus{display:flex;gap:4px;align-items:center;min-width:0}
.fForm .fPartidaMus > *{flex:1 1 0;min-width:0;width:auto;margin:0}
.fForm .fPartidaMus > .fMulti{display:block}
.fForm .fPartidaMus.fConSug > select.fSug,.fForm .fPartidaMus.fConSug > select.fSugSelV{flex:1 1 0;padding-left:6px;letter-spacing:.2px}
.fForm .fEstiloMus .fMultiBox{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fForm .fEstiloMus > .fMultiPanel{left:auto;right:0}
@media (max-width:700px){
.fForm .fTopMusical{grid-template-columns:repeat(2,minmax(0,1fr))}
.fForm .fTopMusical > .fDurWrapMus{grid-column:1 / -1;grid-row:2}
.fForm .fTopMusical > .fEstWrapMus{grid-column:1 / -1;grid-row:3}
}
/* APLICAR del SRT (2026-09-19): verde; mientras crea las escenas, late */
.fForm .fAplicarSrt{flex:0 0 auto}
.fForm .fAplicarSrt.fVerde{color:#2BFF88;border-color:#2BFF88;box-shadow:0 0 10px rgba(43,255,136,.3)}
.fForm .fAplicarSrt.fCreandoEsc,.fForm .fAplicarSrt.fCreandoEsc:disabled{opacity:1;cursor:progress;animation:latidoEscMus 1.3s ease-in-out infinite}
@keyframes latidoEscMus{0%,100%{box-shadow:0 0 4px rgba(43,255,136,.2)}50%{box-shadow:0 0 16px rgba(43,255,136,.75)}}
@media (prefers-reduced-motion:reduce){.fForm .fAplicarSrt.fCreandoEsc{animation:none}}
.fPista.fPistaSrt.fPistaErr{color:#ff6b8a;font-size:12px;letter-spacing:.3px;font-weight:800;white-space:normal} /* punto 68: el error se lee */
/* Panel de REPORTES (Alexis, 2026-09-21): ✓ angosta, SELECCIONAR y FILTRAR en el renglón de pestañas,
textos de ENTRADA/SALIDA más chicos, cuadros separados y bloques de un renglón */
.rpCompactControl.rpConcluirFila{width:38px;padding:0}
#repTabs.rpAdminTabs{align-items:center}
#repTabs .rpSeleccionAcc{margin:0 0 0 auto;flex-wrap:nowrap;gap:6px;align-items:center}
.rpFiltroWrap{position:relative}
#repTabs .rpFiltroBtn{min-height:0;height:28px;padding:0 12px;font:700 10px var(--ui);letter-spacing:.6px;color:var(--cyan);border:1px solid var(--cyan);background:linear-gradient(180deg,#0b1f26,#071318);border-radius:9px;box-shadow:0 0 0 1px #00f0ff22,0 0 10px #00f0ff33;white-space:nowrap}
#repTabs .rpFiltroBtn:hover{background:#00f0ff1a;box-shadow:0 0 0 1px #00f0ff44,0 0 14px #00f0ff55}
#repTabs .rpFiltroBtn.activo{background:#00f0ff22;color:#fff;box-shadow:0 0 0 1px var(--cyan),0 0 14px #00f0ff66}
.rpFiltroMenu{border-color:var(--cyan)!important;box-shadow:0 0 0 1px #00f0ff22,0 10px 28px #000c!important}
.rpFiltroOp input{accent-color:var(--cyan)}
#repTabs .rpSeleccionAcc .rpLoteConcluir{color:#00fa94;border-color:#00d987;box-shadow:0 0 8px #00fa9433}
#repTabs .rpSeleccionAcc .rpLoteEliminar{color:#ff245f;border-color:#ff245f;box-shadow:0 0 8px #ff245f33}
.rpFiltroMenu{position:fixed;z-index:60;display:flex;flex-direction:column;gap:2px;min-width:150px;padding:8px;background:var(--card);border:1px solid #257180;border-radius:10px;box-shadow:0 8px 24px #0009}
.rpFiltroMenu[hidden]{display:none}
.rpFiltroOp{display:flex;align-items:center;gap:8px;padding:6px 6px;font:600 12px var(--ui);color:var(--text);cursor:pointer;border-radius:6px}
.rpFiltroOp:hover{background:#00f0ff12}
.rpFiltroMenu .rpFiltroTodos{margin-top:4px;font:600 10px var(--ui);color:var(--cyan);border-color:#257180;padding:5px 8px}
.rpDetalleTexto{display:flex;flex-direction:column;gap:14px}
.rpDetalleAdmin .repCols{gap:22px}
.rpDetalleAdmin .repCols .rpComentarioCompleto{font-size:12px;line-height:1.45}
.histRepBloque.rpBloqueLinea{display:block}
.histRepBloque.rpBloqueLinea .histRepEtq{display:inline;margin:0 8px 0 0;font:800 13px var(--ui);letter-spacing:.5px}
.histModalCuerpo .histRepBloque.rpBloqueLinea .rpComentarioCompleto{display:inline;margin:0;font-size:13px;line-height:1.55}
.histModalRecibido .histModalCuerpo{display:flex;flex-direction:column;gap:12px}
@media(max-width:700px){#repTabs .rpSeleccionAcc{margin-left:0}}
/* Lote 2026-09-21 (noche): panel de REPORTES y MIS REPORTES */
#chipReportesD.rpPendientes{color:#ff244f;border-color:#ff244f;box-shadow:0 0 0 1px #ff244f55,0 0 12px #ff244f77}
.rpContextoIA{min-height:70px;height:70px}
.rpDetalleAdmin.rpDetalleCorto{width:min(760px,96vw)}
.rpCompactRow.rpCompactAnonimo{border:1px solid var(--magenta);background:linear-gradient(110deg,#3a1238,#171021);box-shadow:inset 3px 0 0 var(--magenta),0 0 10px #ff00c833}
.rpCompactRow.rpCompactAnonimo .rpCompactNombre{color:#ff83ed}
button.rpAvisarBtn{cursor:pointer}button.rpAvisarBtn:hover{background:#ff245f22}
.rpBandeja .rpCasoCab .rpQuienLinea b{display:inline}
.rpBandeja .rpCasoCab .rpCasoHora{display:inline;margin-left:8px;font-size:10px;color:var(--muted);white-space:nowrap}
.rpBandeja .rpCasoCab .rpLecturaCab{margin-left:auto;flex:none;white-space:nowrap;font-size:9px;padding:2px 6px}
.rpBandeja .rpCasoGpt .rpLineaNombre{max-width:40%}
@media(max-width:380px){.rpBandeja .rpCasoCab .rpCasoHora{display:block;margin:0}}
/* CREA TU ACOMODO (Alexis, 2026-09-21): varios lienzos, historial, mover, duplicar, pincel y capas arrastrables */
.hzEspacios{display:flex;flex-direction:column;gap:26px}
.hzEspacio+.hzEspacio{padding-top:22px;border-top:1px dashed var(--line-2)}
.hzMover{display:flex;gap:6px;margin-top:6px}.hzMover .hzMini{min-width:38px;justify-content:center;padding:6px 8px;font-size:13px}
.hzHistorial{margin-top:12px;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card-2)}
.hzHistLista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.hzHistItem{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.hzHistItem.sel{border-color:var(--cyan)}
.hzHistItem img{width:100%;height:110px;object-fit:contain;background:#fff;border-radius:6px;display:block}
.hzHistTxt{font:700 10px var(--ui);letter-spacing:.5px;color:var(--muted)}
.hzHistItem .hzAcc{margin-top:0;gap:6px}.hzHistItem .hzMini{padding:5px 8px;font-size:10px}
.hzCapa[draggable=true]{cursor:grab}.hzCapa.destino{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.hzCapa button.duplicar{color:var(--cyan)}
.hzGridTools .hzPill.sel{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.35)}
@media(max-width:600px){.hzHistLista{grid-template-columns:minmax(0,1fr)}}
/* Panel de REPORTES (Alexis, 2026-09-21, noche): botones fijos, S. TODOS verde, ✓ de concluido, celular en un renglón */
#repTabs .rpSeleccionAcc .eng{box-sizing:border-box;justify-content:center;text-align:center}
#repTabs .rpSeleccionAcc #rpSeleccionarAdmin{min-width:118px}
#repTabs .rpSeleccionAcc .rpLoteTodos{min-width:104px;color:#00fa94;border-color:#00d987;box-shadow:0 0 8px #00fa9433}
#repTabs .rpSeleccionAcc .rpLoteConcluir{min-width:72px}
#repTabs .rpSeleccionAcc .rpLoteEliminar{min-width:126px}
#repTabs .rpSeleccionAcc .rpLoteAvisar{min-width:112px}
.rpCompactControl.rpConcluidoFila{width:38px;padding:0;font-size:15px;line-height:1.2}
.rpCompactGrid{gap:9px 44px}
.rpDetalleAdmin.conFolio .histModalCuerpo{gap:28px}
@media(max-width:600px){
.rpCompactRow{flex-wrap:nowrap;padding:6px 8px;gap:6px;min-height:0}
.rpCompactText{flex:1;min-width:0;flex-basis:auto;gap:5px}
.rpCompactNombre{max-width:38%}
.rpCompactMensaje{padding-left:5px;font-size:11px}
.rpCompactMeta{flex-wrap:nowrap;margin-left:0;gap:4px}
.rpCompactMeta time{display:none}
.rpCompactControl{width:54px;height:34px;font-size:9.5px}
.rpCompactControl.rpConcluirFila,.rpCompactControl.rpConcluidoFila{width:34px}
.rpEstadoRespuesta{max-width:70px;font-size:8.5px}
.rpCompactGrid{gap:6px}
}
/* MIS NOTAS → REPORTES: el CONCLUIDO cabe dentro del renglón (antes brincaba a otro renglón) */
#vistaHist .histRow.histReporteFila{position:relative}
#vistaHist .histRow.histReporteFila .rpSeguimiento{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;white-space:nowrap;font:700 9px var(--ui);letter-spacing:.5px;padding:3px 7px;border:1px solid #00d987;border-radius:7px;color:#00fa94;background:#093622}
#vistaHist .histRow.histReporteFila:has(.rpSeguimiento) .histReporteProducto{padding-right:96px}
@media(max-width:700px){#vistaHist .histRow.histReporteFila .rpSeguimiento{right:24px;font-size:8px;padding:2px 5px}#vistaHist .histRow.histReporteFila:has(.rpSeguimiento) .histReporteProducto{padding-right:80px}}
/* Retroalimentación: marca de agua corta; NOTAS con ENTRADA | SALIDA abajo; barra de selección en celular */
.retroAviso{display:block;margin-top:6px;font:italic 500 9.5px var(--ui);letter-spacing:.3px;color:var(--muted);opacity:.85}
.histReporteRecibido .rpBloqueLinea .histRepTexto{display:inline;margin:0;font-size:13px;line-height:1.55}
.histRepCols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.histRepCols>div{padding:12px 14px}.histRepCols .histNotaOriginal{margin:6px 0 0;padding:0;font-size:11.5px}
@media(max-width:760px){.histRepCols{grid-template-columns:minmax(0,1fr)}}
.rpSelCel{display:flex;justify-content:flex-start;align-items:center;gap:6px;margin:-4px 0 12px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;scrollbar-width:thin}
.rpSelCel .eng,.rpSelCel .eng[aria-pressed=true]{flex:0 0 auto;min-height:40px;font:600 11px var(--ui);color:var(--cyan);background:var(--card);border:1px solid #257180;box-shadow:none;box-sizing:border-box;justify-content:center}
.rpSelCel .eng{padding:6px 8px;font-size:10px;letter-spacing:.2px}.rpSelCel{gap:5px}
.rpSelCel #rpSeleccionarAdmin{min-width:96px}.rpSelCel #rpSeleccionarAdmin[aria-pressed=true]{color:#ff245f;border-color:#ff245f}
.rpSelCel .rpLoteTodos{min-width:86px;color:#00fa94;border-color:#00d987}.rpSelCel .rpLoteConcluir{min-width:56px;color:#00fa94;border-color:#00d987}.rpSelCel .rpLoteEliminar{min-width:100px;color:#ff245f;border-color:#ff245f}.rpSelCel .rpLoteAvisar{min-width:88px}
.rpSelCel .rpFiltroBtn{min-height:0;height:28px;padding:0 12px;font:700 10px var(--ui);color:var(--cyan);border:1px solid var(--cyan);border-radius:9px;background:linear-gradient(180deg,#0b1f26,#071318)}
/* MIS REPORTES → RECIBIDOS en un renglón (Alexis, 2026-09-21): bajito, sin hora, CONCLUIDO junto a LEÍDO / SIN LEER */
.rpBandeja .rpCaso.rpCasoRecibido{min-height:40px;padding:6px 10px;gap:8px}
.rpBandeja .rpCasoRecibido .rpLineaMeta{flex-direction:row;align-items:center;gap:4px}
.rpBandeja .rpCasoRecibido .rpLineaMeta .rpCasoPie{flex-wrap:nowrap;gap:4px;min-height:0}
.rpBandeja .rpCasoRecibido .rpLineaNombre{max-width:36%}
.rpBandeja .rpCasoRecibido .rpLectura,.rpBandeja .rpCasoRecibido .rpSeguimiento{margin:0;font-size:9px;padding:2px 6px}
.rpBandeja .rpCasoRecibido.rpSinLeer{border-color:#ff245f}
@media(max-width:500px){.rpBandeja .rpCaso.rpCasoRecibido{min-height:36px;padding:5px 8px;gap:6px}.rpBandeja .rpCasoRecibido .rpLineaNombre{max-width:34%}.rpBandeja .rpCasoRecibido .rpLectura,.rpBandeja .rpCasoRecibido .rpSeguimiento{font-size:8px;padding:2px 4px}}
/* Renglones de reportes (Alexis, 2026-09-21): el texto se corta antes para dejar aire antes del día, LEÍDO, CONCLUIDO o la ✓ */
.rpCompactMensaje{padding-right:22px}
.rpCompactText{margin-right:6px}
.rpBandeja .rpLineaComentario{padding-right:22px}
.rpBandeja .rpCasoRecibido .rpLineaTexto,.rpBandeja .rpCasoLinea .rpLineaTexto{margin-right:6px}
#vistaHist .histReporteFila .histReporteCliente{padding-right:14px}
#vistaHist .histReporteFila .histReporteProducto{padding-right:18px}
@media(max-width:600px){.rpCompactMensaje{padding-right:12px}.rpBandeja .rpLineaComentario{padding-right:12px}}
/* Lote celular (Alexis, 2026-09-21): renglones de MIS NOTAS → REPORTES en una línea, cabecera de REPORTE RECIBIDO con hora,
solo el tache para cerrar en celular, marca de agua en un renglón centrada y aviso de versión con botón largo */
.histReporteCliente,.histReporteProducto{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#vistaHist .histRow.histReporteFila{height:48px;min-height:48px;max-height:48px;align-items:center}
@media(max-width:700px){#vistaHist .histRow.histReporteFila{height:44px;min-height:44px;max-height:44px}}
.histModalRecibido .histNotaModalCab{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.histModalRecibido .histNotaIdentidad{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.histModalRecibido .histNotaIdentidad h2{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.histModalRecibido .histNotaTiempo{flex:none;color:var(--muted);font:600 11px var(--ui);white-space:nowrap}
.histModalRecibido .histNotaCabAcciones{display:none}
.histModalRecibido .histNotaModalCab .histModalCerrar{grid-column:auto;grid-row:auto;flex:none;margin-left:auto}
.retroAviso{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
#verAviso{flex-wrap:wrap;justify-content:center;gap:8px 10px;width:min(560px,calc(100vw - 24px));max-width:none;border-radius:16px;padding:9px 10px 10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 18px rgba(0,240,255,.55),0 0 40px rgba(255,0,200,.3);border-color:var(--cyan)}
#verAviso .verAvisoTxt{flex:1;min-width:0}
#verRecargar{flex-basis:100%;width:100%;order:3;padding:11px 14px;font-size:12px;letter-spacing:2px;border-radius:12px;box-shadow:0 0 16px rgba(0,240,255,.7),0 0 30px rgba(255,0,200,.45);animation:verBrillo 1.6s ease-in-out infinite alternate}
@keyframes verBrillo{from{box-shadow:0 0 12px rgba(0,240,255,.55),0 0 24px rgba(255,0,200,.3)}to{box-shadow:0 0 22px rgba(0,240,255,.95),0 0 44px rgba(255,0,200,.6)}}
@media(max-width:600px){
.histModalCerrar:not(.rpConcluirDetalle){font-size:0;padding:8px 11px;min-width:40px}
.histModalCerrar:not(.rpConcluirDetalle)::before{content:'✕';font-size:16px;line-height:1}
.histModalRecibido .histNotaIdentidad{gap:8px}.histModalRecibido .histNotaIdentidad h2{font-size:12px}.histModalRecibido .histNotaTiempo{font-size:10px}
.retroAviso{font-size:7.2px;letter-spacing:0}
}
/* CREA TU ACOMODO v3 (Alexis, 2026-09-21): panel angosto, barra flotante en el lienzo, barra sobre lo elegido, paleta propia,
zoom abajo a la derecha, capas con miniatura, tiras de historial y plantillas */
.hzAcCols{grid-template-columns:290px minmax(0,1fr);transition:grid-template-columns .2s}
.hzAcCols.hzPanelOculto{grid-template-columns:0 minmax(0,1fr)}
.hzAcCols.hzPanelOculto .hzIzq{overflow:hidden;width:0;padding:0;opacity:0;pointer-events:none}
.hzAcPanel .hzLbl.hzAcCentro{display:block;text-align:center}
.hzAcMedidas{justify-content:center}
.hzAcFondo{margin-top:12px;gap:10px}
.hzAcFondo .hzFotoFondo{margin-left:0}
.hzAcAcciones{margin-top:14px;gap:6px}
.hzAcAcciones .hzMini{padding:6px 9px;font-size:10px}
.hzAcCardLienzo .hzBody{padding:0}
.hzLienzoCaja{position:relative;min-height:600px;background:#0a0d14;border-radius:14px;overflow:hidden;padding:14px 14px 14px 60px}
.hzLienzoCaja .hzLienzoWrap{position:relative;margin:0 auto}
.hzGridLienzo{position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.06) 1px,transparent 1px);background-size:60px 60px}
.hzLienzoWrap .canvas-container{position:relative;z-index:2;box-shadow:0 10px 30px #000a}
.hzBarraFlot{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px;background:rgba(10,13,20,.94);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 6px 18px #0009}
.hzFlotBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--cyan);cursor:pointer}
.hzFlotBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzFlotBtn:hover{background:#00f0ff14;border-color:#257180}
.hzFlotBtn.sel{background:#00f0ff22;border-color:var(--cyan)}
.hzFlotBtn.rojo{color:#ff245f}.hzFlotBtn:disabled{opacity:.3;cursor:default}
.hzFlotBtn.conMenu::after{content:"";position:absolute;right:4px;bottom:4px;border:3px solid transparent;border-top-color:currentColor;border-right-color:currentColor;transform:rotate(45deg);opacity:.7}
.hzFlotSep{width:22px;height:1px;background:var(--line-2);margin:2px 0}
.hzFlotMenu{position:absolute;left:40px;top:0;min-width:200px;display:flex;flex-direction:column;gap:2px;padding:6px;background:rgba(10,13,20,.98);border:1px solid #257180;border-radius:10px;box-shadow:0 8px 24px #000b;z-index:6}
.hzFlotMenu.hidden{display:none}
.hzFlotOp{text-align:left;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);font:700 11px var(--ui);letter-spacing:.5px;cursor:pointer}
.hzFlotOp:hover{background:#00f0ff14;color:var(--cyan)}
.hzBarraSel{position:absolute;left:66px;right:14px;margin:0 auto;top:10px;justify-content:center;z-index:5;display:flex;align-items:center;gap:4px;padding:5px 6px;background:rgba(10,13,20,.96);border:1px solid var(--cyan);border-radius:10px;box-shadow:0 0 0 1px #00f0ff22,0 8px 22px #000b;width:max-content;max-width:calc(100% - 80px);flex-wrap:wrap;white-space:nowrap}
.hzBarraSel.hidden{display:none}
.hzSelBtn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--cyan);font:700 11px var(--ui);letter-spacing:.4px;cursor:pointer}
.hzSelBtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzSelBtn:hover{background:#00f0ff14;border-color:#257180}.hzSelBtn.sel{background:#00f0ff22;border-color:var(--cyan)}.hzSelBtn.rojo{color:#ff245f}.hzSelBtn.cian{background:var(--cyan);color:#05050A}
.hzSelBtn.txt{font-size:10px}
.hzSelSep{width:1px;height:20px;background:var(--line-2);margin:0 2px}
.hzSelEtq{font:800 9px var(--ui);letter-spacing:1px;color:var(--muted);padding:0 4px}
.hzSelSwatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);cursor:pointer;padding:0}
.hzSelInp{height:28px;padding:0 8px;border:1px solid var(--line-2);border-radius:7px;background:#05050A;color:var(--text);font:600 11px var(--ui);width:150px}
.hzSelRango{width:110px;accent-color:var(--cyan)}
.hzAvisoSil{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;margin:0;max-width:calc(100% - 320px);justify-content:center}
.hzZoomCaja{position:absolute;right:12px;bottom:10px;z-index:5;display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(10,13,20,.94);border:1px solid var(--line-2);border-radius:12px}
.hzZoomRango{width:120px;accent-color:var(--cyan)}
.hzZoomBtn{height:28px;padding:0 9px;border-radius:8px;border:1px solid #257180;background:transparent;color:var(--cyan);font:700 10px var(--ui);letter-spacing:.6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.hzZoomBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.hzZoomBtn.cian{background:var(--cyan);color:#05050A;border-color:var(--cyan)}
.hzPanelToggle{position:absolute;left:0;top:10px;z-index:5;width:18px;height:34px;border:1px solid var(--line-2);border-left:0;border-radius:0 9px 9px 0;background:rgba(10,13,20,.94);color:var(--cyan);font-size:16px;cursor:pointer;padding:0}
.hzCapa{padding:5px 8px;gap:6px;border-left:3px solid var(--line-2)}
.hzCapa-texto{border-left-color:var(--cyan)}.hzCapa-foto{border-left-color:#00fa94}.hzCapa-fondo{border-left-color:#2ECC40}.hzCapa-forma{border-left-color:#ff245f}.hzCapa-logo{border-left-color:#FFD60A}.hzCapa-trazo{border-left-color:var(--magenta)}
.hzCapaMini{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.hzCapa .nom{font-size:11px}
.hzTira{margin-top:10px;padding:10px;border:1px solid var(--line-2);border-radius:12px;background:var(--card-2)}
.hzTiraLista{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 4px;scrollbar-width:thin}
.hzTiraItem{position:relative;flex:0 0 96px;display:flex;flex-direction:column;gap:4px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--card);cursor:pointer}
.hzTiraItem.sel{border-color:var(--cyan)}.hzTiraItem:hover{border-color:#257180}
.hzTiraItem img{width:100%;height:72px;object-fit:contain;background:#fff;border-radius:5px;display:block}
.hzTiraTxt{font:700 8.5px var(--ui);letter-spacing:.4px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hzTiraAcc{position:absolute;right:3px;top:3px;display:flex;gap:2px}
.hzTiraBtn{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);background:rgba(10,13,20,.9);color:var(--cyan);font-size:10px;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.hzTiraBtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.hzTiraBtn.rojo{color:#ff245f}
@media(max-width:900px){.hzAcCols{grid-template-columns:minmax(0,1fr)}.hzPanelToggle{display:none}.hzLienzoCaja{padding:56px 6px 58px}.hzAvisoSil{max-width:calc(100% - 12px);top:54px}.hzBarraFlot{gap:2px}.hzFlotBtn{width:30px;height:30px}}
/* Paleta propia compartida (2026-09-22): cuadro de saturación/luz + tono + colores rápidos, en oscuro */
.hzPaleta{position:fixed;z-index:80;width:262px;padding:10px;background:#0b0f18;border:1px solid var(--cyan);border-radius:12px;box-shadow:0 0 0 1px #00f0ff22,0 14px 34px #000c;display:flex;flex-direction:column;gap:8px}
.hzPaletaSV{position:relative;width:100%;height:150px;border-radius:8px;cursor:crosshair;touch-action:none;border:1px solid #1f2a36}
.hzPaletaPunto{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}
.hzPaleta .hzRangoTono{width:100%;height:10px;border-radius:5px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);-webkit-appearance:none;appearance:none}
.hzPaleta .hzRangoTono::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #05050A}
.hzPaletaRapidos{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;align-items:center}
.hzPaletaC{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid #1f2a36;cursor:pointer;padding:0}
.hzPaletaC:hover{transform:scale(1.15)}
.hzPaletaPrev{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--cyan);display:block}
.hzPaletaListo{height:28px;border-radius:8px;border:1px solid var(--cyan);background:var(--cyan);color:#05050A;font:800 10px var(--ui);letter-spacing:1px;cursor:pointer}
/* PERSONAJE v2 (Alexis, 2026-09-22): fotos en 3 espacios fijos, estilo con muestra, colores con lápiz, salida limpia */
.hzPersFotos{border:1.5px dashed var(--line-2);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.hzPersFotos.arrastrando{border-color:var(--cyan);background:#00f0ff0d}
.hzPersFotosCab{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 10px var(--ui);letter-spacing:1px;color:var(--muted)}
.hzPersFotosCab label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text);font-weight:700;letter-spacing:.5px}
.hzPersFotosCab input{accent-color:var(--cyan)}
.hzPersSlots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hzPersSlot{position:relative;aspect-ratio:2/1;border-radius:10px;border:1px dashed var(--line-2);background:#05050A;display:flex;align-items:center;justify-content:center;color:var(--muted);font:800 22px var(--ui);cursor:pointer;overflow:hidden}
.hzPersSlot:hover{border-color:var(--cyan);color:var(--cyan)}
.hzPersSlot img{width:100%;height:100%;object-fit:cover;display:block}
.hzPersSlot .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:11px;cursor:pointer;padding:0}
.hzPersFotos.sinFotos .hzPersSlots{opacity:.35;pointer-events:none}
.hzPersEstilos{margin-top:10px}
.hzPersEstilos .hzPill{display:inline-flex;align-items:center;gap:7px}
.hzPersEstilos .hzPill i{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.hzPersEstilos .hzPill.sel i{box-shadow:0 0 6px #fff8}
.hzPersCab{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:800 10px var(--ui);letter-spacing:1px;color:var(--muted);margin-bottom:8px}
.hzPersCab b{color:var(--cyan);font-weight:800}
.hzColor{position:relative}
.hzColor i{position:relative}
.hzColor .lapiz{position:absolute;right:8px;top:0;width:20px;height:20px;border-radius:50%;background:#05050A;border:1px solid var(--cyan);display:flex;align-items:center;justify-content:center;pointer-events:none}
.hzColor .lapiz svg{width:11px;height:11px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hzPersAcc{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.hzPersMias{margin-top:16px}
.hzPersMias .hzFila{padding:7px 10px;gap:8px}
.hzPersMias .hzFila img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.hzPersMias .hzFila .nom{font-size:11px}
.hzPillEstado.entregado{background:rgba(0,250,148,.12);color:#00fa94;border:1px solid rgba(0,250,148,.5)}
.hzPillEstado.gris{background:rgba(160,170,190,.12);color:#bcc9d8;border:1px solid rgba(160,170,190,.4)}
.hzPersEntregar{background:#00fa94!important;color:#05050A!important;border-color:#00fa94!important;font-weight:900!important}
/* ACOMODO v4 (Alexis, 2026-09-22): fondo sin texto, botones en dos renglones, tiras anchas, barra vertical, siluetas */
.hzAcFondo{display:flex;align-items:center;gap:10px;margin-top:12px}
.hzAcFondo .hzMini.hzFotoFondo{padding:6px 10px;margin:0;display:inline-flex;align-items:center;gap:6px}
.hzAcFondo .hzMini.hzFotoFondo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.hzAcAcciones .hzMini{flex:1 1 0;justify-content:center;text-align:center}
.hzAcAcciones + .hzAcAcciones{margin-top:6px}
.hzAcTiras{margin-top:12px}
.hzAcTiras .hzTira{margin-top:0}
.hzAcTiras .hzTira.hidden{display:none}
.hzAcTiras .hzTiraLista{flex-wrap:wrap;overflow:visible}
.hzAcTiras .hzTiraItem{flex:0 0 140px}
.hzAcTiras .hzTiraItem img{height:100px}
.hzSelMenuWrap{position:relative}
.hzSelMenu{position:absolute;left:0;top:34px;min-width:170px;display:flex;flex-direction:column;gap:2px;padding:6px;background:rgba(10,13,20,.98);border:1px solid #257180;border-radius:10px;box-shadow:0 8px 24px #000b;z-index:7}
.hzSelMenu.hidden{display:none}
/* Aviso de versión: RECARGA LA PÁGINA y el ✕ a su derecha, en un solo renglón (Alexis, 2026-09-22) */
#verAviso{flex-wrap:nowrap}
#verAviso #verRecargar{flex:1 1 auto;width:auto;order:0}
#verAviso #verCerrar{order:1;flex:0 0 auto;font-size:16px;padding:4px 8px}
/* PERSONAJE v3 (2026-09-22): aviso en el botón, MIS SOLICITUDES centrado, renglones EN TRABAJO del panel de diseño */
.hzBtn.hzBtnAlerta{background:#ff245f!important;color:#fff!important;border-color:#ff245f!important;box-shadow:0 0 18px rgba(255,36,95,.6)!important;animation:hzAlertaTiembla .35s ease}
@keyframes hzAlertaTiembla{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.hzLbl.hzLblCentro{display:block;text-align:center}
.hzFila.hzPersTrab{cursor:default;padding:7px 10px}
.hzFila.hzPersTrab .nom{font-size:11px;white-space:normal}
.hzFila.hzPersTrab .hzMini{padding:5px 9px;font-size:9.5px;flex:0 0 auto}
/* LOGO O FOTO A PNG v2 (2026-09-22): tarjeta izquierda a 3/4, retoque arriba a la derecha, borrador con tamaño y cursor, descargas centradas */
@media(min-width:1000px){.hzCols.hzFondoCols{grid-template-columns:20fr 80fr}}
.hzRetoqueEtq{margin:0 4px 0 0;font-size:9.5px;color:var(--muted)}
.hzGomaWrap{position:relative;display:inline-flex}
.hzGomaPop{position:absolute;right:0;top:36px;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(10,13,20,.98);border:1px solid var(--cyan);border-radius:12px;box-shadow:0 8px 24px #000b;white-space:nowrap}
.hzGomaPop.hidden{display:none}
.hzGomaPop .hzRango{width:150px;min-width:150px}
.hzGomaCursor{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000;pointer-events:none;z-index:3}
.hzGomaCursor.hidden{display:none}
.hzLienzoFondo canvas{cursor:none}
.hzFondoAcc{justify-content:center;margin-top:14px}
.hzFondoNota{text-align:center}
/* ACOMODO v5 (Alexis, 2026-09-22): lienzo lo más grande posible, zoom y descarga en la barra, pantalla completa, barra arrastrable */
.hzAcCardLienzo{padding:0;border:0;background:transparent;box-shadow:none}
.hzFlotBtn.cian{color:#05050A;background:var(--cyan);border-color:var(--cyan)}
.hzFlotMenu.hzFlotZoom{flex-direction:row;align-items:center;gap:8px;min-width:0;padding:8px 10px;top:-4px}
.hzFlotZoom .hzZoomRango{width:130px;accent-color:var(--cyan)}
.hzSelGrip{cursor:grab;color:var(--muted);font-size:13px;letter-spacing:-3px;padding:0 6px 0 2px;user-select:none;touch-action:none}
.hzSelGrip:active{cursor:grabbing}
.hzSelMenuInp{width:210px;margin:4px;height:30px}
.hzSelInp{width:120px}
body.hzAcFull #topBar{display:none!important}
body.hzAcFull .wrap{max-width:none;padding:6px 8px 8px}
body.hzAcFull #herr{margin-top:0}
body.hzAcFull .hzAcCols{gap:10px}
/* ACOMODO v6 (Alexis, 2026-09-22): barra de lo elegido en el renglón de arriba, pincel con círculo y tamaño, menús junto a la barra */
#hzAcBarraTop{display:flex;flex:1 1 auto;min-width:0}
#hzAcBarraTop.hidden{display:none}
#hzAcBarraTop .hzBarraSel{position:relative;left:auto;right:auto;top:auto;margin:0;flex:1 1 auto;justify-content:flex-start;max-width:none;padding:4px 6px}
#hzAcBarraTop .hzBarraSel.hidden{display:none}
.hzFlotMenu{top:0}
.hzFlotZoom .hzZoomBtn.ico{width:30px;padding:0}
.hzFlotZoom .hzZoomBtn.ico svg{width:16px;height:16px}
.hzPincelCursor{border-color:#fff;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000}
.hzPincelCursor.goma{border-style:dashed;border-color:#ff245f}
.hzLienzoWrap .canvas-container.pincel{cursor:none}
.hzSelMenu.cargando input{opacity:.6}
body.hzAcFull .menus > *:not(#hzAcBarraTop){display:none!important}
body.hzAcFull .menus{margin-bottom:6px}
/* RECORTADOR v2 (Alexis, 2026-09-22) */
@media(min-width:1000px){.hzCols.hzRecCols{grid-template-columns:26fr 74fr}}
.hzFila .mini.hzQuitarX{color:#ff245f;padding:2px 4px}
.hzFila .mini.hzQuitarX svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.hzMediaCaja{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin-bottom:10px}
.hzMediaCaja .hzMedia{width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0}
audio.hzMedia{display:none}
.hzAsa::before{font-size:8px;padding:1px 5px;top:2px}
.hzAsa::after{width:10px;height:10px}
.hzAsa.fin::before{bottom:2px}
.hzCursorRep{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;box-shadow:0 0 6px #fff}
.hzCursorRep.hidden{display:none}
.hzMini.hzMarca{border-color:#FFD60A;color:#FFD60A}
.hzMini.hzPlay{padding:7px 12px}
.hzMini.hzPlay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* Con la barra de ACOMODO a la vista, el renglón de arriba no se parte: el selector deja de crecer */
.menus:has(#hzAcBarraTop:not(.hidden)){flex-wrap:nowrap;width:100%;align-self:stretch;grid-column:1 / -1}
#hzAcBarraTop{flex:1 1 0}
.menus:has(#hzAcBarraTop:not(.hidden)) select.menu{flex:0 0 auto;width:auto;max-width:230px}
/* Sin recorte: el menú desplegable de PERSONAJE (lista vertical) se veía cortado por el overflow (Alexis, 2026-09-22); si no cabe, la barra se parte en dos renglones */
#hzAcBarraTop .hzBarraSel{overflow:visible;flex-wrap:wrap}
#hzAcBarraTop .hzSelMenu{z-index:70}
/* LOGO O FOTO A PNG v3 (2026-09-22): ELIMINAR TODO chico y rojo; RELLENAR junto a BORRAR; cursor verde al rellenar */
.hzMini.hzFondoTodo{padding:4px 8px;font-size:9px;letter-spacing:.8px;color:#ff245f;border-color:#ff245f}
.hzMini.hzFondoTodo:hover{background:rgba(255,36,95,.12);color:#ff245f}
.hzGomaCursor.rellenar{border-color:#00fa94;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,0 0 8px #00fa94}
.hzMini:disabled{opacity:.4;cursor:not-allowed}
/* LOGO O FOTO A PNG v4: el botón QUITAR FONDO a la mitad (Alexis, 2026-09-22) */
.hzBtn.hzBtnMitad{padding:8px 12px;font-size:11px;letter-spacing:1.2px;min-height:0;width:auto;max-width:60%;margin-left:auto;margin-right:auto;display:flex}
/* ACOMODO v7 (Alexis, 2026-09-22): barra de lo elegido dentro del lienzo (arriba, pegada, sin tapar), barra de herramientas
siempre debajo de la flecha, AJUSTAR centrado, DIBUJAR en neón */
.hzLienzoCaja{padding:8px 14px 14px 60px}
.hzAcBarraIn{position:relative;z-index:6;min-height:40px;display:flex;align-items:flex-start;margin:0 0 2px 0}
.hzLienzoCaja .hzLienzoWrap{margin:0 auto;padding:4px 16px 16px}
.hzAcBarraIn .hzBarraSel{position:relative;left:auto;right:auto;top:auto;margin:0;width:max-content;max-width:100%;padding:4px 6px;overflow:visible;flex-wrap:wrap;justify-content:flex-start}
.hzAcBarraIn .hzSelMenu{z-index:70}
.hzBarraFlot{top:50px;transform:none}
.hzFlotZoom .hzZoomBtn.ico{justify-content:center}
.hzFlotOp.neon{font-size:13px;padding:10px 12px;margin:2px 0;color:#FF00C8;text-shadow:0 0 6px #FF00C8,0 0 16px #FF00C8;border:1px solid #FF00C8;box-shadow:0 0 10px rgba(255,0,200,.7),inset 0 0 8px rgba(255,0,200,.25)}
.hzFlotOp.neon:hover{background:rgba(255,0,200,.15);color:#fff}
body.hzAcFull .menus{display:none!important}
/* RECORTADOR v3 (Alexis, 2026-09-22): ARCHIVOS al 20 %, portadas, video a 3/4, botón de descargar todos a 3/4, PLAY · SOLO AUDIO · DESCARGAR */
@media(min-width:1000px){.hzCols.hzRecCols{grid-template-columns:20fr 80fr}}
.hzRecMini{width:36px;height:36px;border-radius:7px;object-fit:cover;flex:0 0 auto;background:#0E0E16;border:1px solid var(--line-2)}
.hzRecMini.video{width:54px;height:31px}
.hzFila .hzRecMini{width:36px;height:36px}.hzFila .hzRecMini.video{width:54px;height:31px}
.hzAudioCover{padding:0;overflow:hidden}
.hzAudioCover img{height:100%;width:auto;max-width:100%;object-fit:cover;border-radius:12px;display:block}
.hzMediaCaja{width:75%;margin:0 auto 10px}
.hzBtn.btn.hzBtnTresCuartos{padding:10px;font-size:11px;letter-spacing:1.2px;min-height:0;width:75%;margin-left:auto;margin-right:auto}
.hzRecAcc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:stretch}
.hzRecAcc > :first-child{justify-self:start}.hzRecAcc > :nth-child(2){justify-self:center}.hzRecAcc > :last-child{justify-self:end}
/* ACOMODO v8 (Alexis, 2026-09-22): DIBUJAR normal (sin neón) */
.hzFlotOp.neon{font-size:11px;padding:8px 10px;margin:0;color:var(--text);text-shadow:none;border:0;box-shadow:none}
/* RECORTADOR v4 y LOGO O FOTO A PNG (Alexis, 2026-09-22): la zona punteada de subir archivos a la mitad; hasta 5 recortes con tache */
.hzTool[data-tool=fondo] .hzZona,.hzTool[data-tool=recortador] .hzZona{padding:8px 10px;font-size:9px;line-height:1.35}
.hzTool[data-tool=fondo] .hzZona small,.hzTool[data-tool=recortador] .hzZona small{font-size:8px}
.hzTabs{flex-wrap:wrap}
.hzTab.hzTabRec{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hzTabX{color:#ff245f;font-weight:900;font-size:13px;line-height:1;padding:0 2px;cursor:pointer}
.hzTabX:hover{text-shadow:0 0 6px #ff245f}
/* ACOMODO v10 (Alexis, 2026-09-23): barra centrada, pantalla completa con lugar para la barra, letrero blanco, Aa + deslizable,
alineado del texto, nombre de capa ahí mismo */
.hzAcBarraIn{justify-content:center}
body.hzAcFull .hzLienzoCaja{min-height:0}
.hzSelEtq.blanco{color:#fff;opacity:1;font-size:10px}
.hzSelAa{font:900 14px var(--ui);color:var(--cyan);padding:0 2px 0 6px;line-height:1}
.hzSelRango.hzSelFuente{width:90px}
.hzSelCaret{font-size:9px;margin-left:3px}
.hzSelMenu .hzFlotOp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;vertical-align:-2px;margin-right:6px}
.hzSelMenu .hzFlotOp.sel{color:var(--cyan)}
.hzCapaNom{height:24px;padding:0 6px;border:1px solid var(--cyan);border-radius:6px;background:#05050A;color:var(--text);font:600 11px var(--ui);width:120px;min-width:0;flex:1 1 auto}
/* RECORTADOR v5 (Alexis, 2026-09-23): pantalla del video a 3/4 de alto (la imagen la llena), pestañas RECORTE a la mitad con el tache
como pestañita en la esquina, DESCARGAR TODOS a la mitad y centrado (solo con 2 archivos o más) */
.hzMediaCaja{aspect-ratio:64/27}
.hzTabs{gap:6px;margin-bottom:8px}
.hzTabs .hzTab{padding:4px 9px;font-size:9px;letter-spacing:.5px;border-radius:7px;flex:0 1 auto;min-width:0;line-height:1.2}
.hzTab.hzTabRec{position:relative;padding-right:18px;gap:0;overflow:visible}
.hzTabX{position:absolute;right:-1px;top:-1px;font-size:8px;line-height:1;padding:2px 4px;border:1px solid #ff245f;border-radius:0 7px 0 6px;background:rgba(10,13,20,.96);color:#ff245f}
.hzTabX:hover{background:#ff245f;color:#fff;text-shadow:none}
.hzBtn.btn.hzBtnMitadRec{padding:4px 10px;font-size:9.5px;letter-spacing:1px;min-height:0;width:38%;margin:10px auto 0;gap:6px}
.hzBtn.btn.hzBtnMitadRec svg{width:13px;height:13px}
/* ACOMODO v10b (Alexis, 2026-09-23): lápiz para el nombre de la capa */
.hzCapa button.lapiz{color:var(--cyan);font-size:13px}
.hzCapa .hzCapaNom{margin-right:2px}
/* RECORTADOR v6 (Alexis, 2026-09-23): DESCARGAR TODOS un poco más alto; el video completo, sin recorte ni zoom */
.hzBtn.btn.hzBtnMitadRec{padding:8px 12px}
.hzMediaCaja .hzMedia{object-fit:contain}
/* RECORTADOR v7 (Alexis, 2026-09-23): DESCARGAR TODOS igual que DESCARGAR RECORTE; pantalla a todo lo ancho y un cuarto más alta;
pestañas RECORTE al doble y centradas abajo de la pantalla */
.hzBtn.btn.hzBtnMitadRec{width:auto;min-width:0;padding:9px 14px;font-size:10.5px;letter-spacing:1px;font-weight:900;border-radius:10px;margin:12px auto 0;background:var(--cyan);color:#05050A;border:1px solid var(--cyan);box-shadow:none;gap:7px}
.hzBtn.btn.hzBtnMitadRec svg{width:15px;height:15px}
.hzMediaCaja{width:100%;aspect-ratio:64/34}
.hzTabs{justify-content:center}
.hzTabs .hzTab{padding:10px 18px;font-size:11px;letter-spacing:.8px;border-radius:9px;line-height:1.2}
.hzTab.hzTabRec{padding-right:28px}
.hzTabX{font-size:10px;padding:3px 6px;border-radius:0 9px 0 7px}
/* EDITADAS (Alexis, 2026-09-23): etiqueta amarilla en el historial del equipo y detalle en dos columnas con lo cambiado resaltado */
#vistaHist .histBorrada.histEditadaTag{color:var(--yellow);border-color:#ffd60a70}
.histEditCols{margin-top:0}
.histEditCols .histEditCol{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.histEditCols h4{margin:0 0 8px;font:800 10px var(--ui);letter-spacing:1px;color:var(--cyan)}
.histEditCols .histDifEdit h4{color:var(--yellow)}
.histEditCols pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:11.5px;line-height:1.45;background:transparent;border:0;padding:0}
.histEditCols mark.histDif{color:inherit;border-radius:3px;padding:0 2px}
.histEditCols .histDifOrig mark.histDif{background:rgba(255,36,95,.32);text-decoration:line-through}
.histEditCols .histDifEdit mark.histDif{background:rgba(255,214,10,.38)}
/* SILUETAS (Alexis, 2026-09-23): botón junto al círculo de color (solo Torres y Danae) y cuadrícula en filas y columnas */
.hzAcFondo .hzMini.hzBtnSiluetas{margin-left:auto;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.hzAcFondo .hzMini.hzBtnSiluetas svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.hzSilGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:8px 2px 4px}
.hzSilItem{position:relative;display:flex;flex-direction:column;gap:3px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.hzSilItem .hzSilImg{display:block;width:100%;height:78px;background:#fff;border-radius:5px;overflow:hidden}
.hzSilItem .hzSilImg img{width:100%;height:100%;object-fit:contain;display:block;background:transparent;filter:brightness(0)} /* negras: el filtro solo pinta el dibujo, el fondo blanco va en la caja (Alexis, 2026-09-23) */
.hzSilNom.editable{cursor:text;border-bottom:1px dashed #257180}
.hzSilInp{width:100%;box-sizing:border-box;font:800 9px var(--ui);letter-spacing:.5px;text-align:center;text-transform:uppercase;background:var(--card-2);color:var(--text);border:1px solid var(--cyan);border-radius:5px;padding:2px 4px;outline:none}
.hzSilItem.oculta img{opacity:.25}
.hzSilNom{font:800 9px var(--ui);letter-spacing:.5px;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hzSilExtra{font:600 7.5px var(--ui);letter-spacing:.3px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:10px}
.hzSilAcc{display:flex;gap:4px;justify-content:center;margin-top:2px}
.hzSilAcc .hzTiraBtn{width:auto;min-width:24px;height:22px;padding:0 7px;font-size:10px}
/* EXPORTAR A LIENZO (Alexis, 2026-09-23): botón junto al micrófono del constructor */
.fHeadBtn.fLienzoBtn{color:#FF00C8;border-color:#ff00c880;font-size:9px;letter-spacing:1px;padding:4px 9px}
.fHeadBtn.fLienzoBtn:hover{background:rgba(255,0,200,.1)}
/* 2026-09-24 (Alexis): cajas apagadas (VOZ A ELEGIR sin AUDIO Y VIDEO), + CANCION marcado, ¿POR QUIÉN? dentro del panel PRODUCTO, instrucciones del audio */
.fForm .fApagada{opacity:.45}
.fForm .fApagada .fMultiBox{cursor:default}
.fForm .fAdd.fCancionOn{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,240,255,.25)}
.fForm .fProdCaja .fPorQuienPanel{display:block;width:calc(100% - 12px);margin:4px 6px 6px;box-sizing:border-box}
.fForm .fInfAudioTxt::placeholder{text-transform:none;white-space:pre-line;font-size:11.5px;line-height:1.5;letter-spacing:.2px}
.fInfAudioGrande{min-height:120px}
/* 2026-09-24 (Alexis, puntos 141 y 143): tarjeta de 2 lados · tache por lado en COMP / REDES y selector LADO del logo sencillo */
.fForm .fTacheLado{flex:0 0 auto;margin-left:auto}
.fForm .fTacheLado[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan)}
.fForm .fLadoSin .fEtqSinLado{flex:1 1 auto;width:auto;min-width:0;color:var(--muted);letter-spacing:1px}
.fForm .fLogoFila .fLadoSel,.fForm .fPersFila .fLadoSel{flex:0 1 118px;min-width:90px}
/* 2026-09-24 (Alexis): en M. FLYER (HECHO AQUÍ / EXTERNO / SIN FLYER) y M. FLYER IA el botón ¿AYV? y VOZ A ELEGIR se leen completos
(miden lo que mide su texto, sin puntos suspensivos) y el renglón de arriba SIEMPRE es uno solo: las demás cajas ceden un poco de ancho,
nada baja de renglón, y un texto largo en un cuadro de texto tampoco mueve nada */
@media (min-width:701px){
.fForm .fTop.fTopMotion,.fForm .fTop.fTopDos{flex-wrap:nowrap}
.fForm .fTop.fTopMotion > .fAvSlot{flex:1 1 auto;min-width:auto} /* nunca más angosto que sus dos cajas */
.fForm .fTop.fTopMotion > .fAvSlot > select.fAvSel{flex:0 1 110px;width:110px;min-width:104px} /* AUDIO Y VIDEO cabe en 110 px con letra de 11 px */
/* la caja de voz mide su texto; en pantallas angostas el texto se acomoda en dos líneas dentro de la misma caja (misma altura) antes que desbordar o bajar */
.fForm .fTop.fTopMotion > .fAvSlot > .fMulti.fVozCaja{flex:1 1 210px;min-width:176px}
.fForm .fTop.fTopMotion > .fAvSlot > .fMulti.fVozCaja > .fMultiBox{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:clip;white-space:normal;line-height:1.15;padding-top:2px;padding-bottom:2px;display:flex;align-items:center;font-size:11.5px}
.fForm .fTop.fTopMotion > .fCliente.fTercio{flex:0 1 140px;min-width:70px}
.fForm .fTop.fTopMotion > .fMulti.fProdCaja,.fForm .fTop.fTopMotion > .fMulti.fProd{flex:0 1 130px;min-width:88px}
.fForm .fTop.fTopMotion > .fMedida{flex:0 1 118px;min-width:66px}
.fForm .fTop.fTopMotion > .fTiempo{flex:0 1 100px;min-width:66px}
.fForm .fTop.fTopMotion > .fFantasma{flex:0 1 auto;min-width:0 !important;width:auto;overflow:hidden;padding-left:0;padding-right:0;border-left-width:0;border-right-width:0} /* el hueco invisible del ✕ cede todo su ancho antes que nadie */
.fForm .fTop.fTopMotion > .fTiempoIA{flex:0 1 230px;min-width:160px}
.fForm .fTop.fTopDos > .fMulti.fVozDos{flex:1.25 1 210px;min-width:176px}
.fForm .fTop.fTopDos > .fMulti.fVozDos > .fMultiBox{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:clip;white-space:normal;line-height:1.15;padding-top:2px;padding-bottom:2px;display:flex;align-items:center;font-size:11.5px}
}
/* pantallas medianas (hasta 1500 px): las cajas del renglón de arriba de M. FLYER usan letra 11 px y menos relleno, para que 30 SEG, M. FLYER y
AUDIO Y VIDEO se lean aunque la caja de voz ocupe su espacio; todo sigue en un renglón */
@media (min-width:701px) and (max-width:1500px){
.fForm .fTop.fTopMotion select.menu,.fForm .fTop.fTopMotion .fMultiBox{font-size:11px;padding-left:7px;padding-right:18px;background-position:right 5px center}
.fForm .fTop.fTopMotion input[type=text]{font-size:11px;padding-left:7px;padding-right:7px}
.fForm .fTop.fTopMotion > .fCliente.fTercio{min-width:64px}
.fForm .fTop.fTopMotion > .fMulti.fProdCaja,.fForm .fTop.fTopMotion > .fMulti.fProd{min-width:80px}
.fForm .fTop.fTopMotion > .fMedida,.fForm .fTop.fTopMotion > .fTiempo{min-width:72px}
.fForm .fTop.fTopMotion > .fTiempoIA{min-width:160px}
.fForm .fTop.fTopMotion > .fTiempoIA > .fSugSel{flex:0 1 112px;min-width:80px}
.fForm .fTop.fTopMotion > .fTiempoIA > .fTiempo{min-width:72px}
.fForm .fTop.fTopMotion > .fAvSlot > select.fAvSel{min-width:104px}
/* el hueco invisible del ✕ no ocupa nada en pantallas medianas (ni su separación) */
.fForm .fTop.fTopMotion > .fFantasma{flex:0 0 0px !important;width:0 !important;min-width:0 !important;padding:0 !important;border:0 !important;margin-left:-5px}
}
/* Lote 46 (Alexis, 2026-09-24 noche): 3) dentro de una caja con renglones (M1/M2, MEDIDA de varios) las casillas de voz no se estiran:
HOMBRE / MUJER / PERSONALIZADA quedan pegadas a la izquierda como en un solo M. FLYER */
.fMultiFila .fMultiOp input{flex:0 0 auto;width:16px}
.fMultiFila .fVoces .fMultiOp{justify-content:flex-start}
/* 6) el botón del recortador de video (M. FLYER y MONOGRAMA) en cian, con tijerita */
.fForm .fRecortadorBtn{color:var(--cyan);border-color:var(--cyan);white-space:nowrap}
/* 2) varios M. FLYER: la caja PRODUCTO se abre más ancha para que en cada renglón quepan FLYER / M. FLYER, ¿FLYER HECHO? y ¿POR QUIÉN? en frente */
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel{max-width:min(600px,92vw)}
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel .fMultiFila{flex-wrap:nowrap}
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel .fAF{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel .fAF > select.fAnexoFlyer{flex:0 1 128px;min-width:110px}
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel .fAF > input.fPorQuien{flex:1 1 130px;min-width:110px}
.fForm .fTop.fTopDos > .fMulti.fProd > .fMultiPanel .fMultiOp{white-space:nowrap}
@media (min-width:701px){
/* 4) con 2 M. FLYER las cajas de arriba miden lo mismo que con un solo motion (antes ¿AYV?, MEDIDA y TIEMPO se encogían a nada) */
.fForm .fTop.fTopDos > .fMulti.fAvCaja{flex:0 1 110px;min-width:104px}
.fForm .fTop.fTopDos > .fMulti.fVozDos{flex:1 1 210px;min-width:176px}
.fForm .fTop.fTopDos > .fMulti.fMedidaCaja{flex:0 1 118px;min-width:66px}
.fForm .fTop.fTopDos > .fMulti.fTiempoCaja{flex:0 1 100px;min-width:66px}
}
@media (min-width:701px) and (max-width:1500px){
.fForm .fTop.fTopDos > .fMulti.fMedidaCaja,.fForm .fTop.fTopDos > .fMulti.fTiempoCaja{min-width:72px}
}
@media (min-width:701px) and (max-width:1500px){
/* 4) con 2 M. FLYER el ✕ M2 ocupa lugar: la caja de voz y CLIENTE ceden un poco más para que a 1280 px todo siga en un renglón */
.fForm .fTop.fTopDos > .fMulti.fVozDos{min-width:146px}
.fForm .fTop.fTopDos > .fCliente.fTercio{min-width:60px}
}