/* ─────────────────────────────────────────────────────────────────────────────
   La base de la página (V9 del plan de VOOST, D15). Sustituye a Bootstrap, que Luca cargaba solo por su «reboot»:
   ningún componente usaba sus clases, pero sus reglas sobre los elementos —el box-sizing, el margen del body, la
   altura de línea, los márgenes de títulos, párrafos y listas— sostenían la maquetación (medido en la V1, §11.2).
   Aquí van esas mismas reglas, con los tokens de VOOST en vez de los colores de Bootstrap, para que ninguna pantalla
   se mueva. Va antes de VOOST DS (App.razor), que manda en todo lo que también define.
   ───────────────────────────────────────────────────────────────────────────── */

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

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--surface);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: .25;
}

h6, h5, h4, h3, h2, h1 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

h1:focus { outline: none; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol,
ul {
    padding-left: 2rem;
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    margin-bottom: 0;
}

dt { font-weight: 700; }

dd {
    margin-bottom: .5rem;
    margin-left: 0;
}

blockquote { margin: 0 0 1rem; }

b,
strong {
    font-weight: bolder;
}

small { font-size: .875em; }

sub,
sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline;
}

sub { bottom: -.25em; }
sup { top: -.5em; }

a {
    color: var(--accent-text);
    text-decoration: underline;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

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

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .875em;
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: .875em;
    color: var(--negative-text);
    word-wrap: break-word;
}

a > code { color: inherit; }

figure { margin: 0 0 1rem; }

img,
svg {
    vertical-align: middle;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

label { display: inline-block; }

button { border-radius: 0; }

button:focus:not(:focus-visible) { outline: 0; }

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
select {
    text-transform: none;
}

[role=button] { cursor: pointer; }

select { word-wrap: normal; }

select:disabled { opacity: 1; }

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
    cursor: pointer;
}

textarea { resize: vertical; }

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: calc(1.275rem + .3vw);
    line-height: inherit;
}

legend + * { clear: left; }

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[hidden] { display: none !important; }

/* Lo que se lee con lector de pantalla y no se ve (el campo de fichero de ImageSelector, por ejemplo). */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Blazor: la validación de los formularios, el aviso de error y el límite de error ── */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--positive-icon);
}

.invalid {
    outline: 1px solid var(--negative-icon);
}

.validation-message {
    color: var(--negative-text);
}

/* El aviso de un error no controlado: oculto hasta que Blazor lo enseña. Como un Banner de aviso de VOOST. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: .6rem 1.25rem .7rem;
    background: var(--warning-soft);
    color: var(--warning-on-soft);
    box-shadow: var(--shadow-md);
}

#blazor-error-ui .reload { color: inherit; font-weight: 600; }

#blazor-error-ui .dismiss {
    position: absolute;
    top: .5rem;
    right: .75rem;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 1.25rem;
    border-left: 4px solid var(--negative-icon);
    background: var(--negative-soft);
    color: var(--negative-on-soft);
}

.blazor-error-boundary::after {
    content: "Se ha producido un error.";
}

/* ── Lo común de la aplicación ── */

.has-scroll-shadow td:last-child {
    box-shadow: var(--shadow-lg);
}

/* El identificador de lo que se está editando, en las fichas del panel de gestión. */
.editing-uuid {
    margin-bottom: 16px;
    font-size: 14px;
}

.editing-uuid span {
    font-weight: 600;
}

/* Las barras de desplazamiento: finas, con el pulgar en el color del producto. */
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    border-radius: 4px;
}

*::-webkit-scrollbar-track {
    background-color: var(--surface-raised);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
}

*::-webkit-scrollbar-button {
    display: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    scrollbar-width: none;
}