/* linux-os — sistema de diseño. CSS puro, sin framework.
   Tokens en :root (tema oscuro por defecto) redefinidos para claro vía
   prefers-color-scheme. Colores de estado validados sobre ambas superficies
   (contraste >= 3:1; todo badge lleva texto — nunca color solo). */

:root {
    --bg: #0d1117;
    --surface: #161b22;
    --border: #30363d;
    --ink: #e6edf3;
    --ink-2: #8b949e;
    --accent: #3fb950;
    --good: #3fb950;
    --warn: #d29922;
    --bad: #f85149;
    --info: #8b949e;
    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: system-ui, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --surface: #f6f8fa;
        --border: #d0d7de;
        --ink: #1f2328;
        --ink-2: #57606a;
        --accent: #1a7f37;
        --good: #1a7f37;
        --warn: #9a6700;
        --bad: #cf222e;
        --info: #57606a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
}

/* Fluido hasta 100rem (1600 px): más ancho, las tablas dejan de leerse de un vistazo. */
.container { max-width: 100rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.mono { font-family: var(--mono); }
.dim { color: var(--ink-2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---- header ---- */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    flex-wrap: wrap;
}
.logo {
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}
.logo:hover { text-decoration: none; }
.logo-prompt { color: var(--accent); }
.logo-cursor {
    display: inline-block;
    width: .55em;
    height: 1.05em;
    margin-left: .15em;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: blink 1.2s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .logo-cursor { animation: none; }
}
@keyframes blink { 50% { opacity: 0; } }
/* Menú: páginas reales (no anclas de la home). En estrecho, fila propia con scroll
   horizontal antes que partir palabras; el buscador baja a todo lo ancho. */
.site-nav { display: flex; gap: 1rem; margin-left: auto; overflow-x: auto; }
.site-nav a { font-family: var(--mono); color: var(--ink-2); white-space: nowrap; }
.site-nav a:hover { color: var(--accent); }
.jump { display: flex; gap: .35rem; }
.jump input, .jump button {
    font: inherit;
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .3rem .6rem;
}
.jump input { width: 12rem; }
.jump input:focus-visible, .jump button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jump button { cursor: pointer; color: var(--accent); }
@media (max-width: 47.99rem) {
    .site-nav { order: 3; flex-basis: 100%; margin-left: 0; }
    .jump { flex: 1 1 100%; order: 2; }
    .jump input { flex: 1; width: auto; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notice { border-left: 3px solid var(--warn); padding: .4rem .8rem; background: color-mix(in srgb, var(--warn) 8%, transparent); }

/* ---- summary bar ---- */
.summary-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0 .25rem;
}
.summary-line {
    font-family: var(--mono);
    font-size: 1.05rem;
    margin: 0;
}
.summary-prompt { color: var(--accent); }
.summary-updated {
    margin: 0;
    color: var(--ink-2);
    font-size: .85rem;
    white-space: nowrap;
}

/* ---- dashboard de widgets ----
   El grid decide DÓNDE va cada widget (áreas con nombre: el orden editorial de PLAN §2
   no depende de cómo empaquete un auto-fit). Cada widget es un contenedor: su interior
   se adapta a SU ancho con @container, no al de la pantalla — el mismo widget funciona
   en móvil, en una columna estrecha o a lo ancho. minmax(0, 1fr): una columna nunca se
   ensancha por su contenido (era lo que desbordaba en móvil). */
main { padding-bottom: 2rem; }
.dashboard {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "packages" "kernel" "radar" "distros" "releases";
}
/* Paquetes (el producto) a todo lo ancho arriba; debajo, por columnas en el orden de §2:
   kernel+radar (bajos) equilibran a distros. */
@media (min-width: 48rem) {
    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "packages packages"
            "kernel   distros"
            "radar    distros"
            "releases releases";
    }
}
@media (min-width: 80rem) {
    .dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "packages packages packages"
            "kernel   distros  releases"
            "radar    distros  releases";
    }
}
.widget--kernel { grid-area: kernel; }
.widget--radar { grid-area: radar; }
.widget--distros { grid-area: distros; }
.widget--releases { grid-area: releases; }
.widget--packages { grid-area: packages; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    container-type: inline-size; /* toda card es contenedor: sus tablas apilables funcionan en cualquier página */
}
.card--narrow { max-width: 40rem; margin-inline: auto; }
.widget { margin: 0; } /* tras .card: anula su margen dentro del grid */
.card h2 {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    font-family: var(--mono);
    font-weight: 700;
}
.card h2::before { content: "# "; color: var(--accent); }
.card h3 {
    margin: 1rem 0 .5rem;
    font-size: .85rem;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.h-note { font-size: .8rem; font-weight: 400; }

/* ---- stat tiles ---- */
.tiles { display: flex; gap: 1rem; flex-wrap: wrap; }
.tile {
    flex: 1 1 8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .6rem .9rem;
    background: var(--bg);
}
.tile-value {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.tile-label { font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.tile-sub { font-size: .8rem; color: var(--ink-2); }

/* ---- tablas ---- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
thead th {
    font-size: .75rem;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody th { font-weight: 600; white-space: nowrap; }
.row-sub th { font-weight: 400; padding-left: 1.45em; } /* alinea con el texto tras el punto de color */
/* Tabla apilable: si su widget es estrecho, cada fila pasa a ser una ficha de dos
   líneas — clave (th de fila) + estado (.cell-status) arriba, el resto debajo en
   pequeño. Sustituye al scroll horizontal, que escondía justo la columna de soporte. */
@container (width < 40rem) {
    .stack-table, .stack-table tbody { display: block; }
    .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .stack-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .15rem .75rem;
        padding: .55rem 0;
        border-bottom: 1px solid var(--border);
    }
    .stack-table tr:last-child { border-bottom: none; }
    .stack-table tr::after { content: ""; flex-basis: 100%; order: 1; } /* salto de línea */
    .stack-table th, .stack-table td { padding: 0; border: none; order: 2; }
    .stack-table tbody th { order: 0; flex: 1 1 auto; }
    .stack-table .cell-status { order: 0; }
    .stack-table td:not(.cell-status) { font-size: .85rem; color: var(--ink-2); }
    .stack-table td[data-label]::before { content: attr(data-label) " "; }
    .stack-table .row-sub th { padding-left: 1.05em; }
}
.distro-dot {
    display: inline-block;
    width: .65em;
    height: .65em;
    vertical-align: baseline;
    margin-right: .4em;
}

/* ---- badges (estado: siempre con texto) ---- */
.badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge--good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.badge--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.badge--info, .badge--dead { color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 12%, transparent); border-color: color-mix(in srgb, var(--ink-2) 30%, transparent); }

/* ---- listas del radar y upcoming ----
   subgrid: los badges de todas las filas comparten columna, así los nombres alinean. */
.radar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .45rem .75rem;
}
.radar-list li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
}
.radar-what { display: flex; flex-wrap: wrap; column-gap: .6rem; }
.all-clear { color: var(--ink-2); margin: .5rem 0; }

/* ---- releases: herramienta | versión | fecha · categoría (meta a otra línea si es estrecho) ---- */
.release-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    column-gap: 1rem;
}
.release-item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
}
.release-item:last-child { border-bottom: none; }
.release-tool { font-weight: 600; }
.release-version { overflow-wrap: anywhere; }
.release-version .badge { margin-left: .4rem; }
.release-meta { font-size: .85rem; text-align: right; white-space: nowrap; }
@container (width < 26rem) {
    .release-list { grid-template-columns: max-content minmax(0, 1fr); }
    .release-meta { grid-column: 1 / -1; text-align: left; }
}

/* ---- páginas de contenido ---- */
.lead { margin: 0 0 1rem; color: var(--ink-2); max-width: 75ch; }
.lead strong { color: var(--ink); }
.crumbs { margin: 0 0 .25rem; font-family: var(--mono); font-size: .85rem; }
.data-note { font-size: .85rem; margin: 1rem 0 0; max-width: 75ch; }
.cell-sub { font-size: .8rem; }
.table-group th, .matrix-group th {
    padding-top: 1rem;
    font-size: .75rem;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* chips: enlaces compactos a releases y paquetes */
.chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    display: inline-block;
    padding: .2rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: .85rem;
    color: var(--ink);
    white-space: nowrap;
}
.chip:hover, .chip:focus-visible { border-color: var(--accent); text-decoration: none; }
.chip--pkg { font-family: var(--mono); color: var(--accent); }

/* matriz paquetes × releases: comparar entre columnas es su función → scroll horizontal
   con la columna del paquete fija (no se apila como .stack-table). */
.matrix-scroll { overflow-x: auto; }
.matrix-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.matrix { font-size: .9rem; }
.matrix thead th { vertical-align: bottom; white-space: normal; min-width: 6.5rem; }
.matrix thead th a { color: var(--ink-2); }
.matrix td { white-space: nowrap; }
.matrix tbody th[scope="row"], .matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
}
.matrix-group th { position: sticky; left: 0; background: var(--surface); }

/* ---- estados vacíos y footer ---- */
.unavailable { color: var(--ink-2); font-style: italic; }
.site-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0 2rem;
    font-size: .85rem;
    color: var(--ink-2);
}