/* BIBLIOTECA DE MATERIALES — Academia76 adentro del portal.

   Tres piezas: las pildoras de tecnologia arriba, la grilla de materiales y la
   ficha, que se abre en el pop-up que ya existe (#fichapop, de la ficha de
   maquina). Por eso aca no hay tapa ni boton de cerrar: eso ya esta hecho en
   inicio.css y se reusa tal cual.

   EL ROJO SE GUARDA PARA UNA SOLA COSA: el material que NO va en esa
   tecnologia. Si el rojo se usara tambien para destacar o para titular,
   dejaria de leerse como peligro, que es justo lo que tiene que gritar cuando
   alguien esta por meter una plancha de PVC en un CO2. Todo lo demas es negro,
   gris y la linea fina de siempre. */

/* ---------- las pildoras de tecnologia ---------- */
.matfil{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.matp{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line2);background:#fff;color:var(--mut);
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;
  user-select:none;white-space:nowrap}
.matp:hover{border-color:var(--mut2);color:var(--ink)}
.matp.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* el puntito rojo marca las tecnologias que el socio TIENE en el taller */
.matp.mia i{width:6px;height:6px;border-radius:50%;background:var(--red,#D91C26);flex:none}
.matp.on.mia i{background:#fff}

.matav{margin-top:12px;font-size:13px;color:var(--mut2);line-height:1.5}

/* ---------- un bloque por tecnologia ---------- */
.matbl{margin-top:26px}
.mathd{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  padding-bottom:9px;border-bottom:1px solid var(--line2)}
.mathd b{font-size:16px;font-weight:700;color:var(--ink)}
.mathd span{font-size:13px;color:var(--mut2)}
.mathd em{margin-left:auto;font-style:normal;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}

.matgrid{display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.matc{display:flex;flex-direction:column;gap:3px;cursor:pointer;
  border:1px solid var(--line2);background:var(--paper,#fff);
  border-radius:3px;padding:13px 14px;min-height:74px}
.matc:hover{border-color:var(--mut2);background:#fff}
.matn{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.matf{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}

/* el prohibido: borde y fondo apenas rojizos, y el renglon con la cruz */
.matc.veda{border-color:#F0C1C1;background:#FCEBEB}
.matc.veda:hover{border-color:#D98A8A}
.matc.veda .matn{color:#8E1319}
.matx{display:flex;align-items:center;gap:6px;margin-top:5px;
  font-size:11.5px;font-weight:600;color:#B3272E}
.matx svg{width:13px;height:13px;flex:none}

/* ---------- LA FICHA, ADENTRO DEL POP-UP ----------

   EL RECUADRO NO CRECE CON EL TEXTO. Antes la tarjeta media lo que midiera la
   ficha, y como algunos materiales tienen cuatro parrafos largos, terminaba
   siendo mas alta que la pantalla. Entonces lo que se movia era LA PAGINA, no
   la ficha: la tarjeta entera subia y bajaba, el titulo se iba para arriba y
   uno perdia de vista de que material estaba leyendo.

   Ahora la tarjeta tiene un techo -el alto de la ventana menos el aire de
   arriba y abajo- y adentro se parte en dos: el encabezado (familia, nombre y
   las pildoras de tecnologia) queda CLAVADO, y el cuerpo es lo unico que
   scrollea. La X tambien queda fija, porque cuelga de la tarjeta y no del
   texto.

   Es un TECHO y no un alto fijo: una ficha corta se dibuja del tamano que
   necesita, sin media tarjeta vacia abajo. La ficha larga se corta ahi y
   scrollea. */
.matcard{max-width:640px;
  display:flex;flex-direction:column;
  /* 44px de aire arriba y abajo, que es el padding de .fichapop */
  max-height:calc(100vh - 88px)}
/* el encabezado no se mueve */
.matcard .matftop{flex:none}
/* y el cuerpo es lo unico que scrollea. min-height:0 es lo que le permite a un
   hijo de flex achicarse por debajo de su contenido: sin eso, el bloque se
   estira igual y el techo no sirve de nada. */
.matcard .fpbody{flex:1;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;padding:18px 24px 22px}

.matftop{padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.matftop.veda{background:#FCEBEB;border-bottom-color:#F0C1C1}
.matffam{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.matftop b.display{display:block;font-size:23px;line-height:1.2;color:var(--ink)}

/* en que tecnologias aparece este material, y en cual no */
.matchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.matchip{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line2);background:#fff;border-radius:999px;
  padding:4px 11px;font-size:11.5px;color:var(--mut)}
.matchip.no{border-color:#E3A9A9;background:#fff;color:#B3272E;font-weight:600}
.matchip svg{width:11px;height:11px;flex:none}

/* la alerta: lo primero que se lee al abrir un material prohibido */
.matalerta{display:flex;gap:13px;align-items:flex-start;
  border:1px solid #F0C1C1;background:#FCEBEB;border-radius:3px;
  padding:14px 16px;margin-bottom:20px}
.matalerta .mati{flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#B3272E;color:#fff}
.matalerta .mati svg{width:15px;height:15px}
.matalerta b{display:block;font-size:14.5px;color:#8E1319;margin-bottom:5px}
.matalerta p{margin:0;font-size:13px;line-height:1.6;color:#7A2126}

.matsec{margin-bottom:18px}
.matsec:last-of-type{margin-bottom:0}
.matrot{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.matsec p{margin:0;font-size:14px;line-height:1.62;color:var(--ink)}

.matpie{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--mut2)}
.matpie a{color:var(--ink);font-weight:600;cursor:pointer;text-decoration:underline}

@media(max-width:560px){
.matgrid{grid-template-columns:1fr 1fr}
.mathd em{margin-left:0;flex-basis:100%}
.matftop b.display{font-size:20px}
}
/* En el celular el pop-up ocupa la pantalla entera (inicio.css le saca el aire
   y le pone min-height:100vh). El techo pasa a ser la pantalla justa, asi el
   cuerpo sigue scrolleando adentro en vez de estirar la tarjeta. */
@media(max-width:520px){
.matcard{max-height:100vh}
.matcard .fpbody{padding:16px 18px 20px}
}