/* La ficha de una instalacion en el portal del socio: la FOTO del equipo al
   lado del CAMINO de estados (como el seguimiento de un envio), la banda de
   cancelada y los pop-up del cliente.

   LA PANTALLA ES DE TRES TERCIOS IGUALES: la foto del equipo (1/3), el camino
   de los pasos 1 a 4 (1/3) y la columna de avisos con los hitos 5 a 8 (1/3).
   El reparto se hace en dos grids anidados: .ifila da foto (1fr) + el resto
   (2fr), y adentro .icaminodoble parte ese resto en dos mitades iguales
   (1fr 1fr) -> camino y avisos. Antes debajo del camino iba una tabla con
   serie/tipo/tecnico/fechas; se saco. El socio no necesita el numero de serie
   para saber como viene su instalacion, y el estado ya lo cuenta el camino. Lo
   unico que queda es lo que le importa: que maquina es (la foto) y en que paso
   esta (el camino y los avisos).

   SOBRE LA FOTO VAN TRES DATOS DE IDENTIDAD -tecnologia, modelo y numero de
   serie-, apoyados sobre un velo oscuro abajo, igual que la tarjeta del Inicio
   (.mqfoto/.mqcuerpo en css/micuenta.css). No es la tabla de datos que se saco:
   es solo QUE maquina es y su serial, para que el socio no tenga que navegar a
   Mis maquinas para leer el numero de serie. El dibujo -foto de fondo con el
   texto encima- lo arma vInstalacion() (instalaciones.js) con .ifotocuerpo.

   Y OCUPA TODA LA PANTALLA, DE PUNTA A PUNTA. El bloque llega hasta el borde
   derecho -con la misma sangria que tiene a la izquierda- y se estira hacia
   abajo hasta apoyarse arriba de la cinta roja de las redes. Antes cortaba a
   los 980 px de ancho y a la altura de su contenido, asi que en una pantalla
   grande quedaba media pagina en blanco abajo y una franja muerta a la derecha.
   El detalle de como se estira esta abajo de todo, en su propia seccion.

   EL CAMINO Y LOS AVISOS SE DIBUJAN IGUAL. Las dos columnas son una pila de
   TARJETAS SUELTAS, separadas por un gap -no una lista con las filas pegadas y
   divididas por lineas-. Cada tarjeta (un paso .ipaso o un aviso .iav) tiene su
   propio borde y su esquina redondeada, y por dentro es la misma cosa, LADO A
   LADO y centrado en el alto: a la IZQUIERDA el circulito con el NUMERO (.pto),
   en el MEDIO el cuerpo (el titulo, la explicacion y la fecha), y a la DERECHA
   la TILDE verde (.itick) cuando el hito ya se cumplio. Que las dos columnas
   compartan el mismo objeto es lo que las hace verse parejas; si el camino
   fuera una lista pegada y los avisos tarjetas sueltas, el numero quedaria a
   distinta altura en cada lado.

   COMO SE MARCA UN HITO CUMPLIDO. Tres cosas cambian a la vez y ninguna borra
   informacion:
     - el circulito de la izquierda (.pto) sigue mostrando SIEMPRE el numero del
       hito (1..8), este cumplido o no: es la lectura del orden del proceso.
     - a la derecha aparece la TILDE verde (.itick).
     - la celda entera toma un fondo VERDE CLARITO (.done).
   Asi el contraste entre lo hecho y lo que falta se ve de un vistazo, sin leer.

   LA COLUMNA DE AVISOS (.iavcol) es el tercer tercio, con los casilleros de los
   hitos 5 a 8, y sigue exactamente la misma regla que el camino: numero fijo a
   la izquierda, tilde a la derecha, fondo verde al cumplirse. El 5 (Conformidad
   del cliente) va con borde solido; del 6 al 8 son placeholder ("AVISO"),
   reservando el espacio. Cada casillero es titulo + una linea de detalle,
   apilados.

   LO QUE TODAVIA NO TOCA VA EN GRIS, EN LAS DOS COLUMNAS. El hito 5 iba siempre
   en negro y en negrita, asi que en una instalacion que ni siquiera arranco
   quedaba como lo unico encendido de la pantalla, mas fuerte que los cuatro
   pasos del camino. Con .esp se apaga igual que un paso que falta; solo se pone
   en negro cuando de verdad le toca responder al socio.

   COLORES DEL CAMINO, con el codigo de cualquier tracking: lo alcanzado va con
   fondo verde clarito y tilde a la derecha (.done), el paso actual es el ultimo
   verde y se distingue ademas con un HALO en el circulito y el titulo en negro
   (.on), y lo que falta queda gris. El rojo no aparece en el camino y queda
   solo para la banda de cancelada.

   EL PASO 2 PUEDE SER UN BOTON. Cuando el cliente puede elegir su dia, el paso
   2 se vuelve clickeable (.clk) y lleva a la grilla de reserva. Ademas, debajo
   del camino aparece un boton verde grande (.ireservar / .btnrv). */

/* ---------- LA FILA: FOTO + (CAMINO + AVISOS), EN TRES TERCIOS ----------
   La foto se lleva un tercio (1fr) y el resto (2fr) queda para el camino y los
   avisos, que .icaminodoble parte en dos mitades. Asi los tres bloques -foto,
   pasos 1-4, pasos 5-8- quedan del mismo ancho.

   SIN max-width: el ancho lo pone el contenedor de la pantalla (.main), que ya
   trae la sangria pareja de los dos lados. */
.ifila{display:grid;grid-template-columns:1fr 2fr;gap:16px;
  align-items:stretch;margin-top:16px}
.icaminowrap{min-width:0}

/* dentro del wrap, el camino y la columna de avisos, cada uno una mitad del
   resto -> con la foto, los tres tercios quedan iguales. */
.icaminodoble{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  align-items:stretch;height:100%}

/* ---------- LA FOTO DEL EQUIPO, CON LOS DATOS ENCIMA ----------
   El primer tercio. Misma pieza que la tarjeta del Inicio (.mqfoto): la imagen
   ocupa la celda entera y los tres datos -tecnologia, modelo, serie- se apoyan
   ENCIMA, abajo a la izquierda, sobre un velo oscuro que sube desde el pie para
   que el texto blanco se lea sobre cualquier foto.

   COMO SE MONTA EL TEXTO ENCIMA. La celda es position:relative; la imagen va
   estirada a los cuatro bordes (position:absolute; inset:0; object-fit:cover) y
   el cuerpo (.ifotocuerpo) tambien absolute, pegado abajo. Antes la celda era
   flex con la imagen centrada; se paso a este armado para poder apoyarle el
   texto encima sin empujar nada.

   SIN FOTO. Cuando no hay imagen no hay velo -quedaria un degrade sobre gris
   sin sentido-: se muestra "Foto pendiente" centrado, y el cuerpo de datos, si
   va, se apoya sobre el fondo gris. Por eso el velo cuelga de .confoto (que
   vInstalacion pone solo cuando hay foto), no de .ifoto a secas. */
.ifoto{position:relative;border:1px solid var(--line2);background:var(--surf2);
  border-radius:3px;overflow:hidden;min-height:220px}
.ifoto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* el cartel de "Foto pendiente", centrado, cuando no hay imagen */
.ifoto .sin{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}

/* EL VELO Y EL TEXTO. El cuerpo se apoya abajo a la izquierda; cuando hay foto,
   trae encima un degrade oscuro (de transparente arriba a negro abajo) para que
   el texto blanco se lea. El degrade vive en un ::before para no teñir el texto. */
.ifoto .ifotocuerpo{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ifoto.confoto .ifotocuerpo::before{content:"";position:absolute;
  left:0;right:0;bottom:0;top:-40px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(17,17,19,.82) 0%,rgba(17,17,19,.55) 45%,rgba(17,17,19,0) 100%)}

/* la tecnologia: rotulo chico en mono, arriba del modelo. Sobre foto va blanco
   apenas apagado; sin foto (fondo gris) va en el gris del texto secundario. */
.ifoto .iftec{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);line-height:1.2}
.ifoto.confoto .iftec{color:rgba(255,255,255,.82)}
/* el modelo: es el dato principal. */
.ifoto .ifmod{margin:1px 0 0;font-size:17px;font-weight:700;
  line-height:1.15;color:var(--ink)}
.ifoto.confoto .ifmod{color:#fff}
/* el numero de serie: abajo, en mono, mas discreto. */
.ifoto .ifserie{margin-top:3px;font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.02em;color:var(--mut);line-height:1.2}
.ifoto.confoto .ifserie{color:rgba(255,255,255,.72)}

/* ---------- LA TILDE DE CUMPLIDO ----------
   Va a la DERECHA de la celda, centrada en su alto (la celda es flex-row con
   align-items:center). Es un circulito verde con la tilde en blanco. La usan
   por igual el camino (.ipaso) y la columna de avisos (.iav): mismo dibujo. */
.itick{flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;font-weight:700}

/* ---------- EL CAMINO ----------
   Es una pila de tarjetas SUELTAS, igual que la columna de avisos (.iavcol):
   el contenedor no tiene borde ni fondo, solo reparte los pasos con un gap; el
   borde y la esquina redondeada son de cada paso. Antes el contenedor tenia el
   borde y los pasos iban pegados y separados por una linea; asi el numero de la
   izquierda quedaba a distinta altura que en los avisos. */
.icamino{display:flex;flex-direction:column;gap:10px;
  flex:1 1 0;height:100%;min-width:0}
/* cada paso es una tarjeta: el circulito del numero (izquierda), el cuerpo -tres
   renglones- (medio) y la tilde (derecha), centrados en el alto. Mismo dibujo
   que un casillero de avisos (.iav). Los cuatro se reparten el alto en partes
   iguales (flex:1 1 0), asi que cuando la fila se estira, se estiran con ella. */
.ipaso{flex:1 1 0;display:flex;align-items:center;gap:12px;min-height:56px;
  border:1px solid var(--line2);background:var(--paper);border-radius:3px;
  padding:10px 14px;min-width:0}
/* EL CIRCULITO DEL NUMERO, hijo directo de la celda (no del titulo) para que el
   align-items:center lo centre en el alto. Muestra SIEMPRE el numero del paso,
   en gris; no cambia al cumplirse (lo cumplido se marca con la tilde de la
   derecha y el fondo verde de la celda). Mismo dibujo que .iav .pto. */
.ipaso .pto{flex:none;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surf2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--mut2)}
/* el cuerpo del paso: los tres renglones apilados (titulo / explicacion / fecha) */
.ipaso .ipcuerpo{flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:2px}

/* primer renglon: solo el titulo (el circulito ya no vive adentro). */
.ipaso .tit{min-width:0}
.ipaso .tit b{font-size:13.5px;font-weight:600;color:var(--mut2);line-height:1.2}

/* la explicacion, debajo del titulo. Ya no hace falta sangrarla: el cuerpo
   entero esta corrido a la derecha del circulito. */
.ipaso .det{font-size:12px;color:var(--mut2);line-height:1.35}

/* la fecha: TERCER renglon, debajo. Chica y en mono. */
.ipaso .cuando{margin-top:1px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.01em;color:var(--ink)}
.ipaso .cuando.esp{color:var(--mut2)}

/* ALCANZADO: la celda toma fondo verde clarito y el texto se pone legible. El
   circulito NO cambia (sigue con su numero en gris); la marca de cumplido es
   el fondo y la tilde de la derecha. */
.ipaso.done{background:#EEF7F0}
.ipaso.done .tit b{color:var(--ink)}
.ipaso.done .det{color:var(--mut)}
/* el paso actual: se distingue con un halo en el circulito y el titulo en
   negro. Si ademas esta cumplido, conserva el fondo verde del .done. */
.ipaso.on .pto{box-shadow:0 0 0 3px #DBEBDD}
.ipaso.on .tit b{color:var(--ink)}
.ipaso.on .det{color:var(--mut)}

/* EL PASO 2 CLICKEABLE */
.ipaso.clk{cursor:pointer}
.ipaso.clk:hover{background:#EDF6F0}
.ipaso.clk .cuando.esp{color:var(--ok);font-weight:600}
.ipaso.clk:hover .tit b{color:var(--ink)}

/* ---------- LA COLUMNA DE AVISOS ----------
   Casilleros apilados, cada uno una tarjetita al mismo tono que un paso del
   camino, y NUMERADOS: continuan la cuenta del camino (hitos 5 a 8). Igual que
   el camino: el numero vive SIEMPRE en el circulito de la izquierda; lo
   cumplido se marca con la tilde de la derecha y el fondo verde (.done).
   El primero (Conformidad del cliente) es el proximo hito real y va con borde
   solido; del 6 al 8 son placeholder -borde punteado y "AVISO"- reservando el
   lugar hasta que tengan contenido.

   CADA CASILLERO ES: circulito (izquierda) + TITULO y UN DETALLE apilados en el
   centro (.iavtx) + TILDE (derecha), todo centrado en el alto. */
.iavcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.iav{flex:1 1 0;display:flex;align-items:center;gap:10px;min-height:56px;
  border:1px solid var(--line2);background:var(--paper);border-radius:3px;
  padding:10px 13px}
.iav .pto{flex:none;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surf2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;color:var(--mut2)}
/* el texto: titulo y (si hay) detalle, apilados; ocupa el medio */
.iav .iavtx{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.iav .iavtx b{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.iav .iavsub{font-size:11.5px;color:var(--mut);line-height:1.4}
/* EL HITO QUE TODAVIA NO TOCA: mismo apagado que un paso del camino que falta.
   Se sigue leyendo -el socio tiene que poder enterarse de lo que viene- pero no
   compite con lo que de verdad esta pasando. */
.iav.esp .iavtx b{color:var(--mut2)}
.iav.esp .iavsub{color:var(--mut2)}
/* el casillero vacio: borde punteado y todo apagado, se lee como "reservado".
   Ahi el rotulo "AVISO" va en mono, chico y espaciado. */
.iav.vacio{border-style:dashed;background:var(--surf2)}
.iav.vacio .pto{color:var(--mut2)}
.iav.vacio .iavtx b{font-family:"IBM Plex Mono",monospace;font-size:11px;
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut2);opacity:.75}
/* un aviso ya cumplido: fondo verde clarito, igual que un paso del camino. El
   circulito NO cambia (sigue con su numero); la marca es el fondo y la tilde. */
.iav.done{background:#EEF7F0}

/* EL BOTON DE RESERVA, debajo del camino */
.ireservar{margin-top:16px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap}
.btnrv{display:inline-block;background:var(--ok);color:#fff;border:1px solid var(--ok);
  border-radius:3px;padding:12px 22px;font-size:15px;font-weight:700;
  cursor:pointer;line-height:1;user-select:none}
.btnrv:hover{filter:brightness(.96)}
.ireservar span{font-size:12.5px;color:var(--mut);line-height:1.4}

.icanc{margin-top:16px;border:1px solid #F0C1C1;background:#FCEBEB;
  color:#8E1319;padding:13px 16px;border-radius:3px;font-size:13.5px;line-height:1.5}
.icanc b{font-weight:600}

/* La nota suelta. YA NO SE USA en la ficha -para preguntar algo esta el menu de
   la izquierda- pero la clase sigue viva: la usa el texto de la instalacion
   vieja sin registro, que se dibuja como parrafo en vez de camino. */
.inota{margin-top:14px;font-size:13px;color:var(--mut);line-height:1.5}
.inota a{color:var(--ink);font-weight:600;cursor:pointer;text-decoration:underline}

/* ---------- los pop-up del cliente ---------- */
.imodaltapa{position:fixed;inset:0;background:rgba(17,17,19,.55);z-index:420;
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto}
.imodal{background:#fff;width:100%;max-width:560px;border-radius:16px;
  border:1px solid var(--line2);box-shadow:0 26px 70px rgba(0,0,0,.3);overflow:hidden}
.imodal .ihd{display:flex;align-items:flex-start;gap:16px;
  padding:20px 24px 16px;border-bottom:1px solid var(--line)}
.imodal .ihd .iht{flex:1;min-width:0}
.imodal .ihd .iht b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.imodal .ihd .iht span{display:block;font-size:13px;color:var(--mut);margin-top:3px}
.imodal .ihd .ilogo{flex:none;line-height:1;padding-top:2px;
  font-family:"Days One";font-weight:400;font-size:20px;
  letter-spacing:.01em;color:var(--ink)}
.imodal .ihd .ilogo b{color:var(--red,#D91C26);font-weight:400}
.imodal .icuerpo{padding:18px 24px}
.imodal .ikv{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.imodal .ikv div span{display:block;font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut2);margin-bottom:3px}
.imodal .ikv div b{font-size:14px;font-weight:600;color:var(--ink)}
.imodal .itxt{font-size:14px;line-height:1.6;color:var(--mut);margin:0}
.imodal .itxt + .itxt{margin-top:11px}
.imodal .itxt b{color:var(--ink);font-weight:600}
.imodal .ikv + .itxt{margin-top:14px}
.imodal .ifm{margin-top:16px}
.imodal .ifm label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.imodal .ifm input,.imodal .ifm textarea{width:100%;border:1px solid var(--line2);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:14px;background:#fff}
/* el textarea del reclamo: mismo estilo que el input, pero que se pueda
   agrandar en vertical y nunca en horizontal (romperia el pop-up). */
.imodal .ifm textarea{resize:vertical;min-height:76px;line-height:1.45}
.imodal .ifm input.malo,.imodal .ifm textarea.malo{border-color:#B3272E}
.imodal .ihint{font-size:12px;color:var(--mut2);margin-top:5px}

.imodal .ip{display:flex;gap:12px;padding:4px 24px 10px}
/* LA VARIANTE APILADA (.ip.col): los botones van uno debajo del otro y del
   mismo ancho. La usa el pop-up de conformidad, que tiene tres opciones -Sí /
   No / Responder después- y en fila quedaban apretadas. El primero (.ok) sigue
   siendo el verde principal; los otros dos, secundarios. */
.imodal .ip.col{flex-direction:column;gap:10px}
.imodal .ip.col .ibtn{width:100%;flex:none}
.ibtn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  text-align:center;padding:12px 16px;border-radius:10px;
  border:1px solid var(--line2);background:#fff;color:var(--ink);
  font-size:14px;font-weight:600;cursor:pointer;user-select:none;white-space:nowrap}
.ibtn:hover{filter:brightness(.97)}
.ibtn.ok{background:#1F7A45;border-color:#1F7A45;color:#fff}
.ibtn.ch{background:#FBF3E6;border-color:#E4C9A1;color:#8A5A12}
.ibtn.inf{background:var(--ink);border-color:var(--ink);color:#fff}
.imodal .inotafoot{padding:8px 24px 20px;font-size:12px;color:var(--mut2);line-height:1.5;text-align:center}

/* ============================================================================
   LA PANTALLA SE ESTIRA HASTA EL PIE
   ============================================================================
   QUE PASABA. Con el pie ya apoyado abajo (css/alto.css), esta ficha dejaba una
   franja blanca enorme entre el ultimo casillero y la cinta roja de las redes,
   y otra franja muerta a la derecha: el bloque cortaba a los 980 px de ancho y
   a la altura de su contenido, sin importar el tamaño de la pantalla.

   COMO SE ARREGLA. No se le pone un alto calculado a mano -restar la cabecera y
   el pie es la pelea que alto.css ya explica que se pierde siempre-. Se arma
   una CADENA de columnas flexibles: el pie ya empuja el contenido hacia arriba,
   asi que basta con que el bloque .ifila se quede con todo lo que sobra adentro
   de la pantalla. Cada eslabon crece y le pasa el alto al de adentro:

       body  ->  #view  ->  .app  ->  .main  ->  .ifila

   Los dos primeros ya los arma alto.css; aca se suman los dos ultimos. Adentro
   de .ifila el reparto ya estaba resuelto: .icaminodoble y .icamino van al
   100% del alto, y cada paso y cada aviso son flex:1 1 0, asi que los cuatro se
   estiran en partes iguales.

   ESTAS REGLAS VALEN SOLO EN ESTA PANTALLA, y por eso van colgadas de
   :has(.ifila). El .main es el mismo cajon para TODO el portal: si se lo
   convirtiera en columna flexible para siempre, se tocarian de rebote todas las
   demas pantallas -Puntos, Foro, Academia, Mis datos- por un cambio que solo
   necesita esta. Con :has, el navegador aplica el cambio unicamente cuando la
   pantalla dibujada contiene el bloque de la instalacion. Y si un navegador
   viejo no entiende :has, no se rompe nada: la ficha se ve como antes.

   EL max-width DEL .main TAMBIEN SE SUELTA, para que el tercer tercio llegue
   hasta el borde derecho con la misma sangria que hay a la izquierda (la que da
   el padding del .main). El padding de abajo baja de 70 a 26 px: es el aire que
   queda entre el bloque y la cinta roja, y con 70 volvia a sobrar espacio.

   De 1000 px para abajo NO se aplica nada de esto: ahi los tres bloques ya se
   apilan uno debajo del otro y la pagina scrollea normalmente. */
@media(min-width:1001px){
.app:has(.ifila){display:flex;flex-direction:column}
.app:has(.ifila) > .main{flex:1 0 auto;display:flex;flex-direction:column;
  max-width:none;padding-bottom:26px}
.app:has(.ifila) > .main > .ifila{flex:1 1 auto}
}

/* ---------- pantalla angosta ----------
   La foto pasa arriba; y el camino y la columna de avisos se apilan (el camino
   arriba, los avisos abajo). */
@media(max-width:760px){
.ifila{grid-template-columns:1fr;gap:12px}
.ifoto{min-height:0;aspect-ratio:16 / 9}
.icamino{height:auto}
.icaminodoble{grid-template-columns:1fr;gap:12px;height:auto}
.iavcol{gap:10px}
.iav{min-height:52px}
.ipaso{min-height:52px}
}
@media(max-width:560px){
.imodal .ikv{grid-template-columns:1fr}
.imodal .ihd{flex-wrap:wrap}
.imodal .ihd .ilogo{order:-1;margin-left:auto}
.imodal .ihd .iht{flex-basis:100%}
.imodal .ip{flex-wrap:wrap}
.imodal .ip .ibtn{flex:1 1 100%}
}