/* LicitaScan · base: reset mínimo, tipografía, foco y el shell de la aplicación
   (riel de íconos + panel secundario + contenido). CSS propio, sin frameworks. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: var(--t-cuerpo);
    line-height: 1.45;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

button, input, select, summary { font: inherit; color: inherit; }
button { cursor: pointer; }

code, .id { font-family: var(--mono); font-size: var(--t-meta); }

/* Foco visible y consistente en todo lo operable */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Solo para lectores de pantalla */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
    position: absolute; left: var(--e2); top: -3rem; z-index: 20;
    background: var(--superficie); color: var(--acento); padding: var(--e2) var(--e3);
    border: 2px solid var(--acento); border-radius: var(--radio);
}
.saltar:focus { top: var(--e2); }

.icono {
    width: 1.5rem; height: 1.5rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icono--chico { width: 1rem; height: 1rem; }
.icono--grande { width: 2rem; height: 2rem; }

/* ---------- Shell ---------- */

.app {
    display: grid;
    grid-template-columns: var(--ancho-rail) var(--ancho-panel) minmax(0, 1fr);
    grid-template-areas: "rail panel contenido";
    min-height: 100vh;
}

/* Riel de íconos: navegación principal */
.rail {
    grid-area: rail;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--e3);
    padding: var(--e3) var(--e2);
    background: var(--superficie);
    border-right: 1px solid var(--borde);
}

.rail__logo {
    display: grid; place-items: center; height: 2.5rem;
    color: var(--acento); border-radius: var(--radio);
}

.rail__lista { display: flex; flex-direction: column; gap: var(--e1); }
.rail__lista--pie { margin-top: auto; }

.rail__enlace {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 100%; padding: var(--e2) var(--e1);
    border: 0; border-radius: var(--radio); background: none;
    color: var(--texto-2); text-decoration: none;
    font-size: var(--t-pildora); font-weight: 600; line-height: 1.2; text-align: center;
}
.rail__enlace:hover { background: var(--hover); color: var(--tinta); }
.rail__enlace[aria-current="page"] { background: var(--acento-tenue); color: var(--acento); }
.rail__enlace--pronto { opacity: .55; cursor: default; }
.rail__enlace--pronto:hover { background: none; color: var(--texto-2); }

/* Panel secundario: vistas del módulo actual */
.panel {
    grid-area: panel;
    padding: var(--e5) var(--e4);
    border-right: 1px solid var(--borde);
    background: var(--papel);
}
.panel__titulo { font-size: var(--t-seccion); font-weight: 650; margin-bottom: var(--e4); }
.panel__seccion {
    font-size: var(--t-pildora); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texto-2); margin-bottom: var(--e2);
}
.panel__lista { display: flex; flex-direction: column; gap: 2px; }
.panel__enlace {
    display: block; padding: var(--e2) var(--e3);
    border-radius: var(--radio); color: var(--tinta); text-decoration: none;
}
.panel__enlace:hover { background: var(--hover); }
.panel__enlace[aria-current="true"] { background: var(--acento-tenue); color: var(--acento); font-weight: 600; }

/* Contenido */
.contenido { grid-area: contenido; min-width: 0; padding: var(--e4) var(--e6) var(--e5); }
.cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); margin-bottom: var(--e3); }
.cabecera__titulo { font-size: var(--t-pagina); font-weight: 650; line-height: 1.2; }
.cabecera__subtitulo { color: var(--texto-2); }

.hoja {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
}

/* ---------- Responsive ---------- */

/* Pantallas medianas: el panel pasa a una fila de vistas sobre el contenido */
@media (max-width: 1100px) {
    .app {
        grid-template-columns: var(--ancho-rail) minmax(0, 1fr);
        grid-template-areas: "rail panel" "rail contenido";
        grid-template-rows: auto 1fr;
    }
    .panel {
        display: flex; align-items: center; gap: var(--e3);
        padding: var(--e3) var(--e5) 0; border-right: 0; overflow-x: auto;
    }
    .panel__titulo, .panel__seccion { display: none; }
    .panel__lista { flex-direction: row; gap: var(--e1); }
    .panel__enlace { white-space: nowrap; border: 1px solid var(--borde); background: var(--superficie); border-radius: 999px; padding: var(--e1) var(--e3); }
    .panel__enlace[aria-current="true"] { border-color: var(--acento); }
    .contenido { padding: var(--e4) var(--e5) var(--e6); }
}

/* Teléfonos: el riel pasa a una barra inferior */
@media (max-width: 640px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "panel" "contenido";
        padding-bottom: 4.5rem;
    }
    .rail {
        position: fixed; inset: auto 0 0 0; height: auto; z-index: 10;
        flex-direction: row; align-items: center; gap: 0;
        padding: var(--e1) var(--e2); border-right: 0; border-top: 1px solid var(--borde);
        /* Con Rendimiento y Administrar ya no caben todas las entradas en un teléfono: la barra se desplaza (antes se cortaban). */
        overflow-x: auto; justify-content: flex-start;
        /* Que se vea que hay más: una sombra en el borde por el que se puede seguir desplazando (las de fondo "local" tapan la sombra
           cuando ya se llegó a ese borde). Sin esto las entradas de la derecha no se sabía que existían. */
        background:
            linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
            linear-gradient(to right, rgba(27, 39, 51, .22), rgba(27, 39, 51, 0)) left center / .75rem 100% no-repeat scroll,
            linear-gradient(to left, rgba(27, 39, 51, .22), rgba(27, 39, 51, 0)) right center / .75rem 100% no-repeat scroll,
            var(--superficie);
        scrollbar-width: none;
    }
    .rail__logo { display: none; }
    .rail__lista { flex-direction: row; gap: 0; flex: none; }
    .rail__lista--pie { margin-top: 0; }
    .rail__enlace { width: auto; min-width: 4rem; }
    .panel { padding: var(--e3) var(--e4) 0; }
    .contenido { padding: var(--e3) var(--e4) var(--e5); }
    .cabecera__titulo { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}