/* Rediseno del Inicio y de "Mis maquinas" del portal del socio.

   La tarjeta de maquina es la MISMA que la vidriera del catalogo (.mq76 en
   catalogo.css): foto ocupando la celda, texto (tipo + modelo + serie) apoyado
   ENCIMA sobre el degrade, sin franja blanca. Aca no se le cambia el estilo:
   solo el tamano y el layout de la pantalla.

   Va DESPUES de catalogo.css en index.html. */

/* ---------- EL TABLERO DEL INICIO: DOS COLUMNAS MITAD Y MITAD ----------
   Izquierda la maquina (mitad de la pagina); derecha las CINCO celdas
   apiladas (la otra mitad). La foto queda mas angosta y casi cuadrada, porque
   mantiene su alto de vista pero solo ocupa media pagina de ancho. */
.inirot{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mut2);margin:16px 0 12px;display:flex;
align-items:baseline;gap:9px}
.inirot span{color:var(--red)}

/* stretch y no start: la columna de las celdas mide LO MISMO que la foto, y
   ellas se reparten ese alto. Con start, la columna terminaba donde terminaba
   la ultima celda y el bloque quedaba desparejo contra la foto. */
.iniwrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;
align-items:stretch}
.inimaqs{min-width:0}
.inimaqs .mqmisgrid{margin-top:0}

/* La grilla de la izquierda: la maquina no se estira de mas. Con una sola,
   ocupa su columna; con varias, se reparten. */
.mqmisgrid{--gmin:260px;--gmax:1fr;gap:16px;justify-content:start;margin-top:0}

/* La tarjeta del socio ES la del catalogo: fondo oscuro, texto encima. */
.mq76.mqmine{width:100%}
/* La foto tiene la ALTURA DE LA VISTA: alto de la ventana menos la barra de
   arriba y el saludo. Asi entra en la primera pantalla sin scroll. La imagen
   llena ese rectangulo con object-fit:cover (de catalogo.css), centrada. */
.mq76.mqmine .mqfoto{aspect-ratio:auto;height:calc(100vh - 250px);min-height:300px}
.mq76.mqmine .mqfoto img{object-position:center center}

/* ---------- LAS CINCO CELDAS, APILADAS A LA DERECHA ----------
   Estado / Solicitudes / Maquinas / Puntos / Cosas para revisar.

   ERAN CUATRO Y AHORA SON CINCO, asi que se apretaron: menos alto de caja,
   icono mas chico y el numero un punto mas bajo. Entran las cinco en el mismo
   alto que la foto sin que ninguna se corte.

   SE REPARTEN EL ALTO CON space-between y NO con filas de 1fr: con 1fr cada
   celda se estiraba hasta ser una franja gorda con el texto flotando en el
   medio. Asi cada una conserva su alto natural y lo que se reparte es el aire
   entre ellas.

   Las cuatro primeras son informativas y no llevan a ninguna seccion (sin
   class "go"), salvo la de estado cuando hay una instalacion en curso. La
   quinta SIEMPRE lleva: es la unica que existe para que la toquen. */
.stat4{display:grid;grid-auto-rows:auto;align-content:space-between;gap:10px}
.stat{display:flex;align-items:center;gap:10px;background:var(--paper);
border:1px solid var(--line2);border-radius:10px;padding:10px 12px;position:relative;
overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--red);opacity:.9}
.stat.go{cursor:pointer;transition:.2s}
.stat.go:hover{border-color:var(--red);box-shadow:0 8px 20px rgba(217,28,38,.09)}

/* El icono, contenido a la fuerza en su caja para que nunca se infle. */
.stat .sic{flex:none;width:30px;height:30px;border-radius:8px;overflow:hidden;
background:#FBEFF1;color:var(--red);display:flex;align-items:center;
justify-content:center}
.stat .sic svg{width:16px!important;height:16px!important;flex:none}
.stat svg{max-width:100%;max-height:100%}
.stat .stx{display:flex;flex-direction:column;min-width:0;line-height:1.15;gap:1px}
.stat .srot{font-family:"IBM Plex Mono",monospace;font-size:8.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--mut2)}
.stat .sval{font-size:18px;margin:0}
/* Cuando el valor es la pastilla de estado, no es un numero grande: se achica
   para que entre entera y no rompa la linea. */
.stat .sval .estado{margin:0;font-size:10px}
.stat .ssub{font-size:10px;color:var(--mut)}
.stat .sarr{margin-left:auto;color:var(--mut2);font-size:16px;flex:none;align-self:center}
.stat.go:hover .sarr{color:var(--red)}

/* ---------- LA CELDA DE COSAS PARA REVISAR ----------

   Es la unica celda que no cuenta algo del equipo: cuenta lo que el SOCIO
   tiene que hacer (la contraseña sin cambiar, el perfil incompleto, la maquina
   que espera instalacion). Por eso se ve distinta de las otras cuatro.

   VA EN AMBAR Y NO EN ROJO. El rojo del portal es el de la marca y esta en el
   filete de todas las celdas; si esta ademas gritara en rojo, competiria con
   todo. El ambar es el mismo que ya usan el panel y los avisos para decir
   "esto te espera": no es una urgencia, es algo que falta.

   CUANDO NO FALTA NADA se apaga sola y pasa a verde con un tilde. No
   desaparece: que el socio pueda mirar y confirmar que esta todo al dia vale
   tanto como el aviso. */
.stat.pend:before{background:#C9821E}
.stat.pend{background:#FDF6E9;border-color:#E4C9A1}
.stat.pend .sic{background:#F7E7C9;color:#8A5A12}
.stat.pend .sval{color:#8A5A12}
.stat.pend.go:hover{border-color:#C9821E;box-shadow:0 8px 20px rgba(201,130,30,.14)}
.stat.pend.go:hover .sarr{color:#C9821E}

.stat.pend.aldia:before{background:#1F7A45}
.stat.pend.aldia{background:#EFF7F1;border-color:#BEE0C8}
.stat.pend.aldia .sic{background:#DBEBDD;color:#1F7A45}
.stat.pend.aldia .sval{color:#1F7A45}
.stat.pend.aldia.go:hover{border-color:#1F7A45;box-shadow:0 8px 20px rgba(31,122,69,.12)}
.stat.pend.aldia.go:hover .sarr{color:#1F7A45}

/* ---------- LA PANTALLA DE COSAS PARA REVISAR ----------
   Una tarjeta por pendiente: que es, por que importa, y el boton que lleva
   justo al lugar donde se arregla. El boton es la razon de ser de la pantalla,
   asi que va al costado y no escondido abajo. */
.pendlist{display:flex;flex-direction:column;gap:12px;max-width:820px;margin-top:16px}
.penditem{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
background:var(--paper);border:1px solid var(--line2);border-left:3px solid #C9821E;
border-radius:10px;padding:14px 16px}
.penditem .pt{flex:1;min-width:220px}
.penditem .pt b{display:block;font-size:15px;font-weight:600;color:var(--ink);
line-height:1.3}
.penditem .pt span{display:block;font-size:13px;color:var(--mut);
line-height:1.5;margin-top:4px}
.penditem .btn{flex:none}
.pendok{max-width:820px;margin-top:16px;border:1px solid #BEE0C8;background:#EFF7F1;
color:#177245;border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.55}
.pendok b{font-weight:600}

/* ---------- POP-UP DE FICHA ----------
   La ficha de la maquina, encima de la pantalla, con la foto grande arriba. */
.fichapop{position:fixed;inset:0;z-index:120;background:rgba(17,17,19,.55);
backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
padding:44px 20px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.fichapop.on{opacity:1;visibility:visible}
body.noscroll{overflow:hidden}

.fpcard{position:relative;width:100%;max-width:560px;background:var(--paper);
border-radius:14px;overflow:hidden;box-shadow:0 34px 80px rgba(17,17,19,.34);
transform:translateY(10px);transition:transform .22s}
.fichapop.on .fpcard{transform:none}

.fpx{position:absolute;right:12px;top:12px;z-index:4;width:34px;height:34px;
border-radius:50%;border:0;background:rgba(17,17,19,.55);color:#fff;
font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;
justify-content:center}
.fpx:hover{background:var(--red)}

.fpfoto{aspect-ratio:16/9;background:#1B1B20;display:flex;align-items:center;
justify-content:center;overflow:hidden}
.fpfoto img{width:100%;height:100%;object-fit:cover;display:block}
.fpfoto .mqsin{font-family:"IBM Plex Mono",monospace;font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.34)}

/* Adentro va el machBlock de siempre; le sacamos el borde y el fondo propios
   para que se funda con la tarjeta del pop-up. */
.fpbody{padding:16px}
.fpbody .grupo.mq{border:0;border-radius:0;background:none}
.fpbody .grupo.mq .gh{border-radius:0}

/* ---------- FICHA APAISADA EN PANTALLA ANCHA ----------
   En desktop/tablet la ficha se abre HORIZONTAL: la foto a la izquierda y los
   datos a la derecha, todo adentro de la pantalla sin scrollear. La tarjeta se
   limita al alto de la ventana; si algun dia los datos fueran mas largos que
   ese alto, scrollea SOLO la columna de datos, no toda la pagina. En pantalla
   angosta (celular) NO aplica: ahi sigue el apilado de siempre (foto arriba,
   datos abajo), que definen las reglas de mas abajo. */
@media(min-width:720px){
.fichapop{align-items:center;padding:32px 24px}
.fpcard{display:flex;flex-direction:row;max-width:940px;
max-height:calc(100vh - 64px)}
.fpfoto{flex:0 0 42%;aspect-ratio:auto;height:auto;align-self:stretch}
.fpbody{flex:1 1 auto;min-width:0;overflow-y:auto;padding:26px 28px}
/* el boton de cerrar queda arriba a la derecha, sobre la columna de datos:
   dejo aire para que no pise el nombre del modelo. */
.fpbody .grupo.mq .gh{padding-right:44px}
}

/* En pantalla angosta las columnas se apilan: primero la maquina, despues las
   celdas. Ahi la foto pierde la altura de la vista y vuelve a un alto
   comodo, porque ya no hay columna al lado que compensar. Y las celdas dejan
   de repartirse un alto que ya no tienen que igualar. */
@media(max-width:820px){
.iniwrap{grid-template-columns:1fr}
.mq76.mqmine .mqfoto{aspect-ratio:16/10;height:auto;min-height:0}
.stat4{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;
align-content:start;gap:10px}
}
@media(max-width:520px){
.stat4{grid-template-columns:1fr}
.fichapop{padding:0}
.fpcard{max-width:none;min-height:100vh;border-radius:0}
.penditem .btn{width:100%;text-align:center}
}