/* Tokens canónicos del design system — fuente: :root de index.html.
   Se carga DESPUÉS del CSS inline de cada página: al compartir nombres de
   variable, estas declaraciones ganan en cascada y unifican la paleta vieja
   (#0A0A0A/#131313) con la actual sin tocar los 6.500 líneas inline por página.
   Solo COLORES: las fuentes por página (Barlow en tienda) son intencionales.
   @media screen: la calculadora redefine :root dentro de @media print. */
@media screen {
    :root {
        --primary: #0C0C0E;
        --secondary: #E63312;
        --accent: #FF4D2A;
        --accent-glow: rgba(230, 51, 18, 0.25);
        --surface: #141416;
        --surface-elevated: #1C1C1F;
        --surface-hover: #252528;
        --background: #0C0C0E;
        --text: #F5F5F0;
        --text-muted: #9A9A95;
        --text-dim: #8A8A85;
        --border: rgba(255, 255, 255, 0.12);
        --border-strong: rgba(255, 255, 255, 0.16);
        --border-accent: rgba(230, 51, 18, 0.35);
        --success: #22C55E;
    }
}

/* A11y compartida: foco visible solo al navegar con teclado + skip-link */
:focus-visible {
    outline: 2px solid var(--accent, #FF4D2A);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10001;
    background: var(--secondary, #E63312);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-family: var(--font-body, Inter, system-ui, sans-serif);
    font-size: 0.9rem;
}

.skip-link:focus {
    left: 0;
}

/* Ficha técnica compartida (productos/*.html + spec-table.js). Datos en mono. */
.spec-table{width:100%;border-collapse:collapse;margin:6px 0 28px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.spec-table caption{caption-side:top;text-align:left;font-family:var(--font-mono,ui-monospace,monospace);font-size:0.72rem;color:var(--text-dim);padding:0 2px 10px;letter-spacing:0.03em}
.spec-group-title th{font-family:var(--font-mono,ui-monospace,monospace);font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.09em;color:var(--text-dim);background:var(--surface);padding:9px 14px;text-align:left;border-bottom:1px solid var(--border)}
.spec-table th[scope="row"]{font-weight:400;color:var(--text-muted);text-align:left;vertical-align:top;padding:10px 14px;width:48%;border-bottom:1px solid rgba(255,255,255,0.05)}
.spec-table td{color:var(--text);font-family:var(--font-mono,ui-monospace,monospace);font-size:0.85rem;text-align:right;vertical-align:top;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.05)}
.spec-table tbody:last-child tr:last-child th,.spec-table tbody:last-child tr:last-child td{border-bottom:none}
.spec-note{font-size:0.78rem;color:var(--text-dim);margin:-16px 0 32px}

/* Movil: la ficha se apila (etiqueta arriba, valor debajo a ancho completo).
   Un scroll lateral en una tabla de specs es hostil para un comprador B2B.
   Es SOLO presentacion: el <table>/<th scope>/<caption> siguen intactos.
   OJO: display:block borra el rol de tabla del arbol de accesibilidad, por eso
   spec-table.js emite role= explicitos que lo restituyen. No quitar unos sin otros. */
@media (max-width:768px){
    .spec-table,.spec-table caption,.spec-table tbody,.spec-table tr,
    .spec-table th[scope="row"],.spec-table td{display:block;width:auto}
    .spec-table th[scope="row"]{width:auto;padding:10px 14px 2px;border-bottom:none;font-size:0.8rem}
    .spec-table td{text-align:left;padding:2px 14px 10px;font-size:0.9rem;overflow-wrap:anywhere}
    /* sin display:block la cabecera de grupo (colspan=2) queda en una tabla
       anonima y su fondo/borde encoge al ancho del texto en vez de la fila */
    .spec-group-title th{display:block;padding:9px 14px}
}