/* ============================================================
   AppsHub UAI — Reset y base
   El de PAVE, con la escala de superficies de este proyecto.
   ============================================================ */

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

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

body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* El fondo de la página como color del texto seleccionado: legible sobre el
   acento en los tres temas — por luminancia en claro y oscuro, y negro sobre
   amarillo en alto contraste. */
::selection {
    background: var(--accent);
    color: var(--bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: var(--weight-semibold);
}

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: var(--text-muted);
}

[role="button"] {
    cursor: pointer;
}

img,
video,
canvas,
iframe {
    display: block;
    vertical-align: middle;
}

svg {
    display: inline-block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Salto al contenido. Invisible hasta que se lo enfoca con el teclado: quien
   navega con tabulador no tiene que recorrer el encabezado entero en cada
   página para llegar a las tarjetas. */
.saltar {
    position: absolute;
    top: -48px;
    left: 0;
    z-index: 9999;
    background: var(--accent);
    color: var(--text-inverse);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: 0 0 var(--radius-lg) 0;
    transition: top var(--transition-fast);
}

.saltar:focus {
    top: 0;
}

/* El texto sobre el acento, corregido por tema.

   `--text-inverse` es blanco y no cambia entre temas: sobre el acento funciona
   nada más que en el claro, donde ese acento es un violeta oscuro. En oscuro el
   acento es un violeta CLARO (2,07:1) y en alto contraste es amarillo (1,07:1),
   contra el 4,5 que pide AA.

   Es el primer elemento enfocable del hub —el primer Tab de quien navega con
   teclado— y el tema donde más se nota no es «Oscuro» sino «Automático» con el
   sistema en oscuro, que es el valor por omisión.

   Mismo arreglo que `.boton-guardar` y `.boton-ingresar`, que ya lo tenían. */
[data-theme="dark"] .saltar,
[data-theme="contrast"] .saltar {
    color: var(--bg);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="contrast"]) .saltar {
        color: var(--bg);
    }
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}