/* ============================================================
   MinerOS Hub · FIRMWARE: matriz, eficiencia y riesgo
   ------------------------------------------------------------
   Bloque 3 de la Fase 1 de la auditoria visual.

   Sigue el vocabulario visual que ya usa el sitio: tablas de datos
   sobre --card con cabecera en mono y versalitas, bordes de 1px en
   --border, dorado solo para el acento de estado. No se introduce
   ni un color nuevo.

   Las tres tablas son anchas por naturaleza (9 filas x 8 columnas en
   la matriz), asi que van dentro de un desplazador horizontal con el
   mismo patron que `.fwc-scroll` y `.ai-scroll`: scroll tactil, barra
   oculta y primera columna fija.
   ============================================================ */

/* lectores de pantalla: el valor de cada celda va en texto, no solo
   en el glifo y el title */
.fwm-table .sr,.fwe-table .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.fwm-scroll,.fwe-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.fwm-scroll::-webkit-scrollbar,.fwe-scroll::-webkit-scrollbar{display:none}

/* ---------- matriz de compatibilidad ---------- */
.fwm-table{width:100%;border-collapse:collapse;min-width:760px}
.fwm-table th,.fwm-table td{border-bottom:1px solid var(--border);text-align:center;padding:12px 8px}
.fwm-table thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:600;vertical-align:bottom;padding-bottom:14px;border-bottom:1px solid var(--border-gold)}
.fwm-table thead th.fwm-fw span{display:block;max-width:92px;margin:0 auto;text-wrap:balance}
.fwm-table th.fwm-fam{text-align:left;padding-left:18px;position:sticky;left:0;background:var(--card);z-index:1;min-width:250px}
.fwm-table tbody th.fwm-fam{font-weight:500}
.fwm-table tbody th.fwm-fam b{display:block;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.fwm-table tbody th.fwm-fam span{display:block;font-family:var(--mono);font-size:.72rem;color:var(--text-muted);margin-top:3px;line-height:1.5}
.fwm-table tbody tr:last-child th,.fwm-table tbody tr:last-child td{border-bottom:0}
.fwm-table tbody tr:hover th.fwm-fam,.fwm-table tbody tr:hover td{background:var(--bg-3)}
/* ---------- estados de la matriz ----------
   Las cuatro marcas siguen la convencion de tabla de datos: la FORMA
   lleva el significado y todas son legibles. Antes el "no soportado"
   iba en --border (1,22:1), asi que era invisible en 33 de 63 celdas
   y su propia muestra de leyenda aparecia en blanco.

   Peor que eso: invertia la jerarquia de informacion. El estado que el
   sitio SABE (no soportado) se veia menos que el estado que el sitio NO
   sabe (sin dato, 4,54:1). Ahora manda lo definido sobre lo incierto:

     ●  si          --gold        10,35:1   relleno, el dato accionable
     ◐  con cupo    --gold-2       8,9:1    medio relleno
     ○  no          --text-2       7,48:1   hueco: recesivo por forma
     –  sin dato    --text-muted   4,54:1   guion, el mas debil

   La recesion del "no" viene de que el circulo esta hueco, no de
   apagarle el color hasta que desaparece. */
.fwm-y{color:var(--gold);font-size:1.05rem}
.fwm-g{color:var(--gold-2,var(--gold));font-size:1.05rem}
.fwm-u{color:var(--text-muted);font-size:1.05rem}
.fwm-n{color:var(--text-2);font-size:.95rem}

.fwm-legend{margin-top:16px}
.fwm-legend p{display:flex;align-items:center;flex-wrap:wrap;gap:6px 4px;font-family:var(--mono);font-size:.75rem;color:var(--text-2);margin:0}
.fwm-k{display:inline-flex;align-items:center;justify-content:center;width:22px;margin-left:14px}
.fwm-k:first-child{margin-left:0}
.fwm-legend .fwm-note{display:block;font-family:inherit;font-size:.86rem;color:var(--text-2);margin-top:9px;max-width:68ch;line-height:1.6}

/* ---------- tabla de eficiencia ---------- */
.fwe-table{width:100%;border-collapse:collapse;min-width:680px}
.fwe-table thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:600;text-align:left;padding:14px 16px;border-bottom:1px solid var(--border-gold)}
.fwe-table thead th:nth-child(n+3){text-align:right}
.fwe-table tbody th{text-align:left;padding:14px 16px 4px;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.fwe-table tbody td{padding:14px 16px 4px;color:var(--text-2);font-size:.92rem}
.fwe-table td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.fwe-table td.num b{color:var(--gold);font-weight:700}
.fwe-nd{color:var(--text-muted);font-family:var(--mono);font-size:.82rem}
.fwe-table tr.fwe-note td{padding:0 16px 16px;border-bottom:1px solid var(--border);color:var(--text-2);font-size:.88rem;line-height:1.65;max-width:none}
.fwe-table tbody tr.fwe-note:last-child td{border-bottom:0}
.fwe-src{display:block;font-family:var(--mono);font-size:.72rem;color:var(--text-muted);margin-top:6px;letter-spacing:.02em}

/* ---------- advertencia previa a instalar ----------
   Reescrita a peticion del usuario. La version anterior era una linea con
   emoji al pie del listado, con `.section-note`, y se leia como letra
   pequena: justo lo contrario de lo que necesita el aviso mas importante
   de la pagina.

   Ahora es un bloque con titulo propio y enlace a la seccion de riesgo.
   No lleva rojo ni ningun color de alarma a proposito: no es un error del
   sistema, es una recomendacion profesional, y el dorado de la casa la
   marca como importante sin gritarla. */
.fw-advice{display:flex;gap:18px;align-items:flex-start;margin-top:30px;padding:22px 24px;
  border:1px solid var(--border-gold);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(231,189,90,.05),var(--card) 60%)}
.fw-advice-ico{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  color:var(--gold);background:rgba(231,189,90,.1);border:1px solid var(--border-gold);font-size:1.25rem}
.fw-advice-body{min-width:0}
.fw-advice-body h3{font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;color:var(--text)}
.fw-advice-body p{color:var(--text-2);font-size:.94rem;line-height:1.7;margin:0 0 9px;max-width:72ch;text-wrap:pretty}
.fw-advice-cta{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.fw-advice-cta::after{content:"\2193";font-family:var(--font);font-size:.9rem}
.fw-advice-cta:hover{color:var(--gold-2)}
@media(max-width:767px){.fw-advice{flex-direction:column;gap:14px;padding:20px 18px}}

/* ---------- riesgo ----------
   Cuatro items. El minmax de 420px da 2 columnas de 1024 arriba y 1
   columna en tactil, asi que 4 items nunca dejan celda huerfana.

   Antes el minimo era 300px, que a 1152 de ancho daba exactamente 3
   columnas: los items 1-3 en la primera fila, el 4 solo en la segunda
   y DOS celdas vacias de 383x229 mostrando el --border del contenedor.
   Se leia como dos tarjetas que no cargaron.

   4 columnas habria cabido, pero a 288px por tarjeta el parrafo de
   cinco lineas queda estrangulado. 2x2 le da 576px y se lee. */
.fwr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.fwr-item{background:var(--card);padding:24px 22px}
.fwr-item h3{font-family:var(--display);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;margin:0 0 9px;color:var(--text)}
.fwr-item p{color:var(--text-2);font-size:.93rem;line-height:1.7;margin:0;text-wrap:pretty}

/* ---------- ficha de firmware: comision, coste y fuente ----------
   Campos anadidos al reconstruir FIRMWARE. Se apoyan en `.crow`, que
   ya define la fila; esto solo da forma a lo nuevo. */
.crow .cfee{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:9px}
.crow .cfee div{display:flex;align-items:baseline;gap:7px}
.crow .cfee dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0}
.crow .cfee dd{font-family:var(--mono);font-size:.82rem;color:var(--text);margin:0;font-variant-numeric:tabular-nums}
.crow .ccompat{font-size:.88rem;color:var(--text-2);line-height:1.65;margin-top:9px;text-wrap:pretty}
.crow .csrc{font-family:var(--mono);font-size:.72rem;color:var(--text-muted);margin-top:8px;letter-spacing:.02em}
.crow .csrc a{color:var(--text-muted);text-decoration:underline;text-decoration-color:var(--border-gold);text-underline-offset:2px}
.crow .csrc a:hover{color:var(--gold)}

/* ============================================================
   MATRIZ EN MODO LISTA (tactil, <1024)
   ------------------------------------------------------------
   La tabla de 9x8 se invierte en una lista de familias plegables
   (ver `matrizLista` en firmware-matrix.js). Estos estilos visten
   el interior; la fila en si la pone `.ms-row` de la capa tactil.
   ============================================================ */
/* El desplazador pierde su caja cuando contiene la lista: `.ms-rows` ya
   trae borde y radio, y dos cajas anidadas dibujan un marco doble. */
.fwm-scroll.is-list{border:0;background:none;border-radius:0;overflow:visible}
.fwm-list{display:flex;flex-direction:column;gap:1px;background:var(--border)}
.fwm-li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);padding:11px 14px;min-height:44px}
.fwm-li span{font-size:.9rem;color:var(--text-2);min-width:0}
.fwm-li b{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
/* El color dice el estado sin leer, pero la palabra esta igual: un color
   solo no es accesible y una palabra sola no se escanea. */
.fwm-li-y b{color:var(--gold)}
.fwm-li-g b{color:var(--gold-2,var(--gold));opacity:.85}
.fwm-li-u b{color:var(--text-muted)}
.fwm-li-n b{color:var(--text-muted);opacity:.55}
/* Lo compatible primero. En una lista de siete donde cuatro son "No", el
   orden hace el trabajo que en la tabla hacia la columna. */
.fwm-li-n,.fwm-li-u{order:1}
.fwm-li-models{font-family:var(--mono);font-size:.72rem;line-height:1.6;
  color:var(--text-muted);padding:12px 14px 14px;margin:0;background:var(--card);
  border-top:1px solid var(--border)}

@media(max-width:767px){
  .fwm-table th,.fwm-table td{padding:11px 6px}
  .fwr-item{padding:20px 18px}
  .fwe-table thead th,.fwe-table tbody th,.fwe-table tbody td{padding-left:14px;padding-right:14px}
}