/* Parametros 76. Los filtros de arriba son fotos y no botones de texto:
   se reconoce antes el acrilico espejado por la foto que por el nombre. */

/* La cabecera queda pegada arriba, debajo de la barra negra, y muestra el
   camino completo. Los margenes negativos la estiran hasta los bordes del
   contenido: si no, al pasar el contenido por detras se veria asomar por los
   costados. El fondo tiene que ser opaco por el mismo motivo. */
.pcab{position:sticky;top:var(--hdr);z-index:40;background:var(--paper);
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 -30px 20px;padding:11px 30px 12px;border-bottom:1px solid var(--line)}
.pcab .k{font-size:13px;color:var(--mut);flex:none}
.pcab b{font-size:14px;font-weight:600;max-width:38ch;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.pw{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
color:var(--mut);border:1px solid var(--line2);padding:2px 7px;border-radius:3px;flex:none}
.pcambiar{margin-left:auto;font-size:12.5px;color:var(--mut);cursor:pointer;
border-bottom:1px solid var(--line2);flex:none}
.pcambiar:hover{color:var(--red);border-bottom-color:var(--red)}

/* El cuadrito de la maquina, al pie del menu: cuando el cliente esta mirando
   numeros para cargar en el laser, tiene que poder confirmar de un vistazo
   para que maquina son. Es un boton: abre la ficha completa. */
.sidemq{display:flex;gap:10px;align-items:flex-start;margin:18px 14px 0;padding:11px 12px;
border:1px solid #F0D4D6;border-radius:8px;background:#FDF4F5;cursor:pointer;
transition:border-color .18s,background .18s,box-shadow .18s}
.sidemq:hover{border-color:var(--red);background:#FCEDEE;
box-shadow:0 0 0 1px var(--red),0 6px 18px rgba(217,28,38,.14)}
.sidemq .i{flex:none;width:20px;height:20px;color:var(--red);display:flex;
align-items:center;justify-content:center;margin-top:1px}
.sidemq .i svg{width:18px;height:18px}
.sidemq .d{min-width:0}
.sidemq .d b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidemq .l{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
color:var(--mut2);margin-top:3px}
.sidemq em{display:inline-block;font-style:normal;font-family:"IBM Plex Mono",monospace;
font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px;
padding:2px 6px;border-radius:3px}
.sidemq em.ok{background:#E8F3EC;color:#1E6B3F}
.sidemq em.no{background:#FCEBEB;color:#8E1319}

/* La ficha de la maquina: mas ancha que el buscador, porque adentro va la
   misma tarjeta que en Mis maquinas. */
.pmbox.ancha{max-width:640px}
.pmficha{padding:16px 18px;overflow-y:auto}
.pmficha .grupo{margin:0}
.pmpie2{display:flex;justify-content:flex-end;padding:12px 18px;
border-top:1px solid var(--line);background:var(--surf)}

/* Las migas estan siempre: son el camino elegido, no un aviso de scroll.
   Al hacerle clic a una se vuelve a ese filtro. */
.pmig{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;
color:var(--ink);cursor:pointer;white-space:nowrap}
.pmig:before{content:"\203A";color:var(--mut2);font-weight:400;font-size:15px;
margin:0 9px 0 1px;line-height:1}
.pmig:hover{color:var(--red)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap}
.ptabs a{font-size:13px;padding:6px 13px;border:1px solid var(--line2);border-radius:3px;
cursor:pointer;color:var(--mut);background:#fff}
.ptabs a:hover{border-color:var(--ink);color:var(--ink)}
.ptabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}

.pfil{margin-bottom:22px}
.pk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--mut);margin:0 0 9px}

/* align-items:start es a proposito: sin eso la grilla estira todas las
   tarjetas al alto de la mas alta, y a la que es solo foto le queda una
   franja blanca abajo. Cada una toma su alto natural.
   El padding deja lugar para que el halo del hover no se corte. */
.pops{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;align-items:start;padding:4px}
.pmats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px;align-items:start;padding:4px}

/* Dos estados que NO se pueden parecer, porque conviven: siempre hay una
   tarjeta elegida, y el mouse puede estar sobre otra.
   - elegida: borde rojo y tilde, quieta y sin halo.
   - bajo el mouse: se levanta y se enciende con el halo, como en Solicitar
     asistencia.
   Si las dos llevaran halo, con el mouse encima de otra pareceria que hay
   dos elegidas a la vez. */
.pcard{display:block;position:relative;border:1px solid var(--line);border-radius:12px;
overflow:hidden;background:#fff;cursor:pointer;transition:.24s}

.pcard.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

/* Va despues de .on a proposito: con la misma especificidad gana la ultima,
   asi la elegida tambien se enciende cuando el mouse se le pone encima. */
.pcard:hover,.pcard.on:hover{transform:translateY(-3px);border-color:var(--red);
box-shadow:0 0 0 1px var(--red),0 0 30px rgba(217,28,38,.24),0 16px 36px rgba(217,28,38,.14)}

/* El tilde sostiene la eleccion sin depender del halo. */
.pok{position:absolute;top:9px;right:9px;z-index:3;width:23px;height:23px;border-radius:50%;
background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
font-size:13px;line-height:1;box-shadow:0 2px 8px rgba(217,28,38,.4)}
.pcard.sm .pok{top:7px;right:7px;width:20px;height:20px;font-size:11px}
.pcard .tx{padding:9px 11px}
.pcard .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.pcard .tx span{display:block;font-size:12px;color:var(--mut);margin-top:2px;line-height:1.35}
.pcard.solofoto{line-height:0}
.pcard.sm .tx{padding:7px 9px}
/* Alto de dos renglones aunque el nombre entre en uno solo: si no, "Acrilico
   transparente" estira su tarjeta y queda distinta a las de al lado. */
.pcard.sm .tx b{font-size:13px;font-weight:500;line-height:1.3;
min-height:2.6em;transition:color .2s}
.pcard.sm:hover .tx b{color:var(--red)}
.pcard.sm.on .tx b{font-weight:600}

/* Proporcion fija y no alto fijo: el ancho de la tarjeta es elastico, asi que
   con alto fijo la foto queda recortada a una tira en pantalla ancha. */
.pfoto{background-size:cover;background-position:center;background-color:var(--line)}
.pfoto.op{aspect-ratio:16/9;transition:transform .3s}
.pcard:hover .pfoto.op{transform:scale(1.04)}
.pfoto.mat{aspect-ratio:4/3}
.pfoto.sin{display:flex;align-items:center;justify-content:center;background:#F2F2F0}
.pfoto.sin span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:#B9B9B4}

/* La tarjeta "Otros": no tiene foto, tiene un mas. */
.pfoto.mat.mas{display:flex;align-items:center;justify-content:center;
background:var(--surf);border-bottom:1px dashed var(--line2)}
.pfoto.mat.mas span{font-size:24px;font-weight:400;color:var(--mut2);line-height:1}
.pcard.otros:hover .pfoto.mat.mas{background:#FDF1F2;border-bottom-color:var(--red)}
.pcard.otros:hover .pfoto.mat.mas span{color:var(--red)}

/* ---- Ventanas: buscador de materiales y ficha de la maquina ---- */
.pmwrap{position:fixed;inset:0;z-index:120;background:rgba(17,17,19,.5);
display:flex;align-items:center;justify-content:center;padding:24px}
.pmbox{width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;
background:var(--paper);border-radius:12px;overflow:hidden;
box-shadow:0 30px 70px rgba(17,17,19,.32)}
.pmhd{display:flex;align-items:center;gap:12px;padding:15px 18px;
border-bottom:1px solid var(--line)}
.pmhd b{flex:1;font-size:15px;font-weight:600}
.pmx{background:none;border:0;font-family:inherit;font-size:22px;line-height:1;
color:var(--mut2);cursor:pointer;padding:0 2px}
.pmx:hover{color:var(--ink)}
.pmbus{margin:14px 18px 10px;padding:11px 13px;font-family:inherit;font-size:14.5px;
border:1px solid var(--line2);border-radius:3px;background:var(--paper);color:var(--ink)}
.pmbus:focus{outline:none;border-color:var(--ink)}

/* La lista es lo unico que scrollea: el buscador queda siempre a la vista. */
.pmlist{flex:1;overflow-y:auto;padding:0 8px 8px}
.pmit{display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:4px;
cursor:pointer;font-size:14px}
.pmit b{font-weight:500}
.pmit span{margin-left:auto;font-size:12px;color:var(--mut2);white-space:nowrap}
.pmit:hover{background:var(--surf2)}
.pmit.no{color:var(--mut2);cursor:default}
.pmit.no:hover{background:transparent}
.pmvacio{padding:16px 12px;font-size:13.5px;color:var(--mut2)}
.pmpie{padding:11px 18px;font-size:12px;line-height:1.45;color:var(--mut2);
background:var(--surf);border-top:1px solid var(--line)}

.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchips a{font-size:13px;padding:6px 14px;border:1px solid var(--line2);border-radius:3px;
cursor:pointer;color:var(--mut);background:#fff}
.pchips a:hover{border-color:var(--ink);color:var(--ink)}
.pchips a.on{background:var(--ink);border-color:var(--ink);color:#fff}

.prec{border:1px solid var(--line);border-radius:4px;background:#fff;margin-top:26px;
overflow:hidden}
.phd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surf)}
.phd b{font-size:15px;font-weight:600}

/* De donde salio el valor. Cinco origenes, cinco colores. */
.pest{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;padding:4px 9px;border-radius:3px;white-space:nowrap}
.pest.ok{background:#E8F3EC;color:#1E6B3F}
.pest.ap{background:#FDF3E2;color:#8A5A08}
.pest.rf{background:#EEF2F8;color:#3A5A85}
.pest.es{background:#FBEFEF;color:#8E4B4B}
.pest.ej{background:#F1F1EF;color:#77776F}

/* Celdas mas anchas y todo centrado: son numeros para leer de un vistazo
   parado frente a la maquina, no una tabla para escanear con el dedo. */
.pvals{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
background:var(--line)}
.pv{background:#fff;padding:17px 14px 19px;text-align:center}
.pv span{display:block;font-size:11.5px;color:var(--mut);margin-bottom:7px}
.pv b{font-size:25px;font-weight:600;line-height:1}
.pv b i{font-style:normal;font-size:12.5px;font-weight:400;color:var(--mut);margin-left:4px}

/* La alerta de lente: es lo unico que obliga a parar y tocar la maquina, asi
   que va en rojo y antes que la nota. */
.plente{margin:12px 0 0;padding:13px 16px;font-size:13px;line-height:1.55;
color:#8E1319;background:#FDF1F2;border:1px solid #F0C9CC;border-radius:4px}
.plente b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px}

/* La nota y el aviso viven fuera del cuadro de valores, cada uno en su bloque.
   Adentro harian que el cuadro creciera o se achicara segun la receta. */
.pnota{margin:12px 0 0;padding:13px 16px;font-size:13.5px;line-height:1.55;
color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:4px}
.pav{margin:12px 0 0;padding:12px 16px;font-size:12.5px;line-height:1.5;color:#8A5A08;
background:#FDF7EC;border:1px solid #EFE3C8;border-radius:4px}
.pav.sug{color:var(--mut);background:var(--surf);border-color:var(--line)}

@media(max-width:700px){
.pops{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.pmats{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.pvals{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.pv{padding:14px 10px 15px}
.pv b{font-size:21px}
.sidemq{margin:14px 18px 20px}
}