/* ==========================================================================
   notitas · hub de herramientas
   Minimalismo monocromo. Cada sitio tiene un solo color de marca: el violeta
   de notitas en la portada y los ajustes, y el de cada apartado dentro de el
   (el dorado del logo en GOD CARDS, ver [data-tool]). El verde y el rojo se
   reservan para el signo del dinero y nunca viajan solos: siempre con signo y
   con texto (spec 25).
   ========================================================================== */

/* Geist (SIL Open Font License, fonts/OFL-Geist.txt), solo el alfabeto
   latino: 29 KB que se cachean una vez para toda la web. */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    --bg:            #ffffff;
    --bg-subtle:     #fafafa;
    --surface:       #ffffff;
    --surface-hover: #f5f5f6;
    --text:          #16161a;
    --text-muted:    #64646d;
    --text-faint:    #6e6e77;   /* 5:1 sobre blanco: AA tambien en letra pequena */
    --line:          #e6e6e9;
    --line-strong:   #d0d0d5;

    --gain:          #0d7038;
    --gain-bg:       #eaf6ef;
    --loss:          #b02318;
    --loss-bg:       #fdeeec;
    --warn:          #8a5a00;
    --warn-bg:       #fdf4e3;
    --info:          #1d4ed8;
    --info-bg:       #eef2ff;

    --accent:        #5b3cc4;   /* violeta de notitas, 7:1 sobre blanco */
    --accent-bright: #7c5cf0;

    /* Graficas: la serie principal en dorado y el contexto en gris. */
    --chart-value:   #8a6a10;
    --chart-base:    #93939c;

    --radius:  6px;
    --gap:     1.5rem;
    --measure: 74rem;

    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #0b0b0d;
        --bg-subtle:     #101013;
        --surface:       #101013;
        --surface-hover: #17171b;
        --text:          #f2f2f4;
        --text-muted:    #9b9ba4;
        --text-faint:    #85858e;   /* 5,4:1 sobre el fondo oscuro */
        --line:          #24242a;
        --line-strong:   #33333b;

        --gain:          #4ade80;
        --gain-bg:       #0d2418;
        --loss:          #f87171;
        --loss-bg:       #2a1211;
        --warn:          #fbbf24;
        --warn-bg:       #2a2008;
        --info:          #93b4fd;
        --info-bg:       #101a33;

        --accent:        #b3a1ff;
        --accent-bright: #c9bbff;

        /* El dorado de marca es demasiado claro como marca de datos sobre
           negro; este paso cumple banda de luminosidad y contraste. */
        --chart-value:   #c08a0a;
        --chart-base:    #6d6d76;
    }
}

/* Color de cada apartado: el layout pone data-tool en el body (y la portada
   en cada tarjeta). */
[data-tool="cartera"] {
    --accent:        #8a6a10;   /* dorado legible sobre blanco */
    --accent-bright: #e0a80f;   /* dorado del logo, solo para la marca */
}

/* Stock LEGO: azul ladrillo. El rojo queda para las perdidas. */
[data-tool="lego"] {
    --accent:        #1f5fd1;
    --accent-bright: #3b82f6;
}

@media (prefers-color-scheme: dark) {
    [data-tool="cartera"] {
        --accent:        #e0a80f;
        --accent-bright: #f5c518;
    }

    [data-tool="lego"] {
        --accent:        #7fb0ff;
        --accent-bright: #a9c9ff;
    }
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
    color: var(--text);
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

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

/* Enlace de salto para teclado y lectores de pantalla. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--text);
    color: var(--bg);
    padding: .6rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Estructura ----------------------------------------------------------- */

/* La pagina nunca debe desplazarse en horizontal: lo ancho (tablas, graficas)
   scrollea dentro de su propio contenedor, no arrastrando el documento. */
html, body { max-width: 100%; overflow-x: clip; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.masthead {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 20;
}

.masthead__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 56px;
    /* En pantallas estrechas los controles se encogen en vez de desbordar. */
    min-width: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-weight: 650;
    letter-spacing: .015em;
    white-space: nowrap;
}
.brand__mark { width: 26px; height: 26px; border-radius: 5px; }
.brand__name { font-size: .95rem; }
.brand__name em {
    font-style: normal;
    color: var(--accent);
}

.masthead__spacer { flex: 1; }

/* notitas / Apartado: la marca del hub siempre vuelve a la portada. */
.masthead__brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}
.brand__sep {
    color: var(--line-strong);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1;
}
.brand--tool { min-width: 0; gap: .45rem; }
.brand--tool .brand__mark { width: 22px; height: 22px; border-radius: 4px; }
.brand__mark--icon {
    display: grid;
    place-items: center;
    color: var(--bg);
    background: var(--accent);
    border-radius: 6px;
}
.brand__mark--icon svg { width: 15px; height: 15px; }
.brand--tool .brand__name { overflow: hidden; text-overflow: ellipsis; }
.masthead__user .btn[aria-current="page"] { color: var(--text); }

.masthead__user {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.role-tag {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: .1rem .4rem;
    color: var(--text-muted);
}

/* --- Navegacion ----------------------------------------------------------- */

.nav {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 56px;
    z-index: 19;
}

.nav__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav__inner::-webkit-scrollbar { display: none; }

.nav__link {
    padding: .7rem .75rem;
    font-size: .86rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--accent);
    font-weight: 550;
}

/* Buscador encima de los desplegables de producto largos (U4). */
.select-filter { margin-bottom: .4rem; }
.filters .select-filter { margin-bottom: .3rem; }

/* Barra inferior del movil (U2). En escritorio no existe. */
.tabbar { display: none; }

/* --- Contenido ------------------------------------------------------------ */

.main {
    flex: 1;
    max-width: var(--measure);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.page-head h1 {
    font-size: 1.35rem;
    font-weight: 620;
    letter-spacing: -.01em;
}
/* Un nombre de producto sin espacios (un codigo, una URL) no debe salirse. */
.page-head > div { min-width: 0; max-width: 100%; }
.page-head h1, .page-head__sub { overflow-wrap: anywhere; }

.page-head__sub {
    color: var(--text-muted);
    font-size: .86rem;
    margin-top: .2rem;
}

.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.section {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.section:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.section__title {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* --- Cifras del dashboard -------------------------------------------------
   Sin tarjetas: solo espacio y una linea divisoria. La cifra manda. */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 1.75rem 2rem;
}

.figure__label {
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.figure__value {
    font-family: var(--font-num);
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: -.02em;
    margin-top: .3rem;
    font-variant-numeric: tabular-nums;
}
.figure__value--sm { font-size: 1.25rem; }

.figure__meta {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

/* Signo del dinero. Nunca solo color: el signo +/- y el texto acompanan. */
.is-gain    { color: var(--gain); }
.is-loss    { color: var(--loss); }
.is-neutral { color: var(--text-muted); }

.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Tablas --------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
}

table.data th {
    text-align: left;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

table.data td {
    padding: .7rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

table.data tbody tr:hover { background: var(--surface-hover); }

table.data .right  { text-align: right; }
table.data .center { text-align: center; }

.cell-title { font-weight: 550; }
.cell-sub {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.total-row td {
    border-top: 2px solid var(--line-strong);
    border-bottom: 0;
    font-weight: 600;
    padding-top: .8rem;
}

/* --- Formularios ---------------------------------------------------------- */

.form { max-width: 46rem; }

.form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1.1rem;
}
/* Columnas fijas: un campo solo no se estira a todo el ancho (p. ej. cuando
   los demas estan ocultos con data-show-if). */
.form__grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field--wide { grid-column: 1 / -1; }

.field > label {
    font-size: .78rem;
    font-weight: 550;
    color: var(--text-muted);
}

.field__hint {
    font-size: .76rem;
    color: var(--text-faint);
}

.field__error {
    font-size: .78rem;
    color: var(--loss);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"],
input[type="search"], input[type="file"], select, textarea {
    width: 100%;
    padding: .5rem .6rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color .12s ease;
}

input[type="number"] {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

input:hover, select:hover, textarea:hover { border-color: var(--text-faint); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--loss);
}

textarea { min-height: 5.5rem; resize: vertical; }

fieldset {
    /* Por defecto un fieldset no encoge por debajo de su contenido. */
    min-width: 0;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 1.25rem 0 0;
    margin: 1.75rem 0 0;
}

legend {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    padding: 0 .6rem 0 0;
}

.form__actions {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

/* --- Botones -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    font-size: .86rem;
    font-weight: 550;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-hover); border-color: var(--text-faint); }

.btn--primary {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.btn--primary:hover { background: #000; border-color: #000; }
@media (prefers-color-scheme: dark) {
    .btn--primary:hover { background: #fff; border-color: #fff; }
}

.btn--danger { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 40%, var(--line-strong)); }
.btn--danger:hover { background: var(--loss-bg); }

.btn--quiet { border-color: transparent; color: var(--text-muted); padding-inline: .5rem; }
.btn--quiet:hover { color: var(--text); background: var(--surface-hover); }

.btn--sm { padding: .3rem .55rem; font-size: .78rem; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Etiquetas de estado -------------------------------------------------- */

.tag {
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .04em;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
    white-space: nowrap;
}

.tag--gain { color: var(--gain); border-color: color-mix(in srgb, var(--gain) 35%, transparent); background: var(--gain-bg); }
.tag--loss { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 35%, transparent); background: var(--loss-bg); }
.tag--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-bg); }
.tag--info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: var(--info-bg); }

/* Senal de oportunidad: la palabra ya lo dice; el color solo refuerza. */
.signal-buy   { color: var(--gain); border-color: color-mix(in srgb, var(--gain) 45%, transparent); background: var(--gain-bg); }
.signal-watch { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.signal-pass  { color: var(--text-muted); }

/* --- Avisos --------------------------------------------------------------- */

.notice {
    padding: .7rem .9rem;
    border: 1px solid var(--line-strong);
    border-left-width: 3px;
    border-radius: var(--radius);
    font-size: .87rem;
    margin-bottom: 1rem;
}
.notice--success { border-left-color: var(--gain); background: var(--gain-bg); color: var(--gain); }
.notice--error   { border-left-color: var(--loss); background: var(--loss-bg); color: var(--loss); }
.notice--warning { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.notice--info    { border-left-color: var(--info); background: var(--info-bg); color: var(--info); }

.notice strong { font-weight: 650; }

/* Aviso con una accion al lado (p. ej. aplicar una actualizacion). */
.notice--action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}

/* --- Estado vacio --------------------------------------------------------- */

.empty {
    padding: 3rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.empty h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .35rem; }
.empty p { font-size: .87rem; margin-bottom: 1rem; }

/* --- Filtros -------------------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}
.filters .field { min-width: 150px; }
.filters .field > label { font-size: .72rem; }

/* --- Timeline del producto (spec 14) -------------------------------------- */

.timeline { border-left: 2px solid var(--line); margin-left: .4rem; }

.timeline__item {
    position: relative;
    padding: 0 0 1.5rem 1.5rem;
}

.timeline__item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: .45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    border: 2px solid var(--bg);
}
.timeline__item--gain::before { background: var(--gain); }
.timeline__item--loss::before { background: var(--loss); }

.timeline__date {
    font-size: .74rem;
    color: var(--text-faint);
    font-family: var(--font-num);
}
.timeline__title { font-weight: 550; font-size: .9rem; }
.timeline__note { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }

/* --- Descripcion clave/valor ---------------------------------------------- */

.kv {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .45rem 1.25rem;
    font-size: .88rem;
}
.kv dt { color: var(--text-muted); }
.kv dd { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kv dd.text { font-family: var(--font); }

/* --- Desglose de calculo (spec 39) ---------------------------------------- */

.breakdown {
    font-family: var(--font-num);
    font-size: .88rem;
    max-width: 26rem;
}
.breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .3rem 0;
}
.breakdown__row--sum {
    border-top: 1px solid var(--line-strong);
    margin-top: .3rem;
    padding-top: .5rem;
    font-weight: 600;
}
.breakdown__row--total {
    border-top: 2px solid var(--text);
    margin-top: .4rem;
    padding-top: .55rem;
    font-weight: 650;
    font-size: .95rem;
}
.breakdown__label { color: var(--text-muted); font-family: var(--font); }
.breakdown__row--sum .breakdown__label,
.breakdown__row--total .breakdown__label { color: var(--text); }

/* --- Graficas ------------------------------------------------------------- */

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 2.5rem;
}

.chart {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}
.chart__title {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .9rem;
}
.chart__canvas { height: 240px; position: relative; }

/* Barras horizontales en CSS puro: sin libreria y legibles sin color. */
.bars { display: flex; flex-direction: column; gap: .55rem; }
.bar__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .15rem 1rem;
    font-size: .8rem;
    margin-bottom: .2rem;
}
.bar__track {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.bar__fill { height: 100%; background: var(--text-faint); }
.bar__fill--gain { background: var(--gain); }
.bar__fill--loss { background: var(--loss); }
.bar__fill--accent { background: var(--accent); }

/* --- Solo con JavaScript ------------------------------------------------- */

/* app.js marca <html class="js"> antes de pintar: sin JS no se ven controles
   que no harian nada. */
html:not(.js) .js-only { display: none !important; }

/* --- Panel desplegable ---------------------------------------------------- */

.panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    /* Que la cabecera fija no lo tape al saltar a #nuevo. */
    scroll-margin-top: 7.5rem;
}

.panel__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .9rem;
    font-size: .9rem;
    font-weight: 550;
}
.panel__summary::-webkit-details-marker { display: none; }
.panel__summary::before {
    content: "+";
    width: 1rem;
    font-family: var(--font-num);
    color: var(--accent);
    text-align: center;
}
.panel[open] > .panel__summary::before { content: "\2212"; }
.panel[open] > .panel__summary { border-bottom: 1px solid var(--line); }
.panel__summary:hover { background: var(--surface-hover); }

.panel__body { padding: 1rem .9rem 1.1rem; }
.panel__body .form__actions { margin-top: 1.1rem; padding-top: 1rem; }

/* --- Hoja de stock y precios ---------------------------------------------- */

.sheet__tools {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    margin-bottom: .75rem;
}
.sheet__tools .field > label { font-size: .72rem; }
.sheet__search { flex: 2 1 16rem; }
.sheet__source { flex: 1 1 12rem; }

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}

.segmented__btn {
    padding: .3rem .7rem;
    font-size: .8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
}
.segmented__btn:hover { color: var(--text); border-color: var(--text-faint); }
.segmented__btn[aria-pressed="true"],
.segmented__btn[aria-current="true"],
.segmented__btn[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Eleccion con radios que parecen pastillas (p. ej. en camino / ya lo tengo). */
.segmented--choice .segmented__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    font-size: .86rem;
}
.segmented--choice input { margin: 0; accent-color: var(--accent); }
.segmented--choice .segmented__btn:has(input:checked) {
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Bloques de un formulario largo, cada uno con su titulo. */
.form__group { margin: 0 0 1.5rem; padding: 0; border: 0; }
.form__group > legend {
    margin-bottom: .75rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Campos que solo valen con una opcion elegida (app.js, data-show-if). */
html.js [data-show-if].is-hidden { display: none; }
a.segmented__btn { text-decoration: none; }
.segmented__count {
    margin-left: .15rem;
    font-family: var(--font-num);
    font-size: .74rem;
}

.sheet__table td { vertical-align: middle; }
/* Acciones del producto (vender, Cardmarket) bajo su nombre. */
.cell-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    margin: .35rem 0 0 -.5rem;
}
.cell-actions .btn--quiet { background: transparent; }
.cell-actions .btn--quiet:hover { background: var(--line); }
.cm-link > summary { list-style: none; }
.cm-link > summary::-webkit-details-marker { display: none; }
.cm-link[open] { flex-basis: 100%; }
.cm-link[open] > summary { color: var(--text); }
.cm-link__body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-width: 30rem;
    margin: .35rem 0 .25rem .5rem;
}

/* En movil las filas pasan a ser bloques: sin esto [hidden] no las ocultaria. */
.sheet__table tr[hidden] { display: none !important; }

.sheet__table tr.is-dirty td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sheet__table tr.is-dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.cell-input {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}

.cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.stepper { display: inline-flex; align-items: stretch; }

.stepper__btn {
    width: 2.1rem;
    padding: 0;
    border: 1px solid var(--line-strong);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.stepper__btn:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.stepper__btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.stepper__btn:hover { background: var(--surface-hover); color: var(--text); }

.sheet__table .stepper__input {
    width: 4.25rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.sheet__table .stepper__input::-webkit-inner-spin-button,
.sheet__table .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html.js .sheet__table .stepper__input { border-radius: 0; }

.sheet__table .price-input {
    width: 7.5rem;
    text-align: right;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.sheet__table .is-changed {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

.check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .76rem;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}
.check input { margin: 0; accent-color: var(--accent); }
.check--lg { font-size: .87rem; color: var(--text); white-space: normal; }

/* Barra de guardado: siempre a mano al final de la pantalla. */
.savebar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .45);
}
.savebar__status { font-size: .84rem; color: var(--text-muted); }
.savebar__actions { display: flex; gap: .5rem; }
.sheet.has-changes .savebar { border-color: var(--accent); }
.sheet.has-changes .savebar__status { color: var(--text); font-weight: 550; }

/* --- Grafica de evolucion de la cartera ---------------------------------- */

.vchart { margin: 0; }

.vchart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-bottom: .9rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.vchart__legend-item { display: inline-flex; align-items: center; gap: .45rem; }

.vchart__key {
    width: 1rem;
    height: 2px;
    border-radius: 1px;
    background: var(--chart-base);
}
.vchart__key--value { background: var(--chart-value); }

.vchart__frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .6rem;
}

.vchart__yaxis { position: relative; min-width: 3.4rem; }

.vchart__ytick,
.vchart__xtick {
    position: absolute;
    font-size: .72rem;
    color: var(--text-faint);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vchart__ytick { right: 0; transform: translateY(-50%); }

.vchart__plot {
    position: relative;
    height: 240px;
    /* Arrastrar en horizontal consulta la grafica; en vertical, desplaza. */
    touch-action: pan-y;
    outline-offset: 6px;
}

.vchart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vchart__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vchart__area { fill: var(--chart-value); opacity: .1; }

.vchart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.vchart__line--value { stroke: var(--chart-value); }
.vchart__line--cost  { stroke: var(--chart-base); }

.vchart__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chart-base);
    /* Anillo del color de fondo: se ve aunque cruce la otra linea. */
    box-shadow: 0 0 0 2px var(--bg);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.vchart__dot--value { background: var(--chart-value); }
.vchart__dot[hidden] { display: none; }

.vchart__end {
    position: absolute;
    right: 12px;
    font-size: .78rem;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}
.vchart__end--above { transform: translateY(calc(-100% - 6px)); }
.vchart__end--below { transform: translateY(6px); }
.vchart__end--muted { color: var(--text-muted); }

.vchart__xaxis { position: relative; grid-column: 2; height: 1.7rem; }
.vchart__xtick { top: .5rem; transform: translateX(-50%); }
.vchart__xtick--start { transform: none; }
.vchart__xtick--end { transform: translateX(-100%); }

.vchart__cross {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-strong);
    transform: translateX(-50%);
    pointer-events: none;
}

.vchart__tip {
    position: absolute;
    top: .25rem;
    z-index: 2;
    min-width: 11rem;
    padding: .55rem .7rem;
    font-size: .78rem;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45);
    transform: translateX(12px);
    pointer-events: none;
}
.vchart__tip--left { transform: translateX(calc(-100% - 12px)); }
.vchart__cross[hidden], .vchart__tip[hidden] { display: none; }

.vchart__tip-date { color: var(--text-muted); margin-bottom: .3rem; }
.vchart__tip-row {
    display: grid;
    grid-template-columns: .9rem auto 1fr;
    align-items: center;
    gap: .45rem;
    line-height: 1.6;
}
.vchart__tip-key { width: .9rem; height: 2px; }
.vchart__tip-key--value { background: var(--chart-value); }
.vchart__tip-key--cost  { background: var(--chart-base); }
.vchart__tip-value {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}
.vchart__tip-value.is-gain { color: var(--gain); }
.vchart__tip-value.is-loss { color: var(--loss); }
.vchart__tip-label { color: var(--text-muted); }

.vchart__data { margin-top: 1rem; font-size: .84rem; }
.vchart__data > summary { cursor: pointer; color: var(--text-muted); }
.vchart__data .table-wrap { margin-top: .75rem; max-height: 22rem; overflow-y: auto; }

/* Tendencia de un precio, en la hoja de stock. */
.spark { display: inline-flex; align-items: center; gap: .45rem; }
.spark svg { width: 64px; height: 20px; overflow: visible; }
.spark__line {
    fill: none;
    stroke: var(--chart-base);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.spark__dot { fill: var(--chart-value); stroke: var(--bg); stroke-width: 2; }
.spark__delta { font-family: var(--font-num); font-size: .76rem; white-space: nowrap; }

/* En la tabla de escritorio la columna es estrecha: la cifra va debajo. */
@media (min-width: 40.01rem) {
    .sheet__table .spark { flex-direction: column; align-items: flex-start; gap: .15rem; }
}

/* --- Venta ---------------------------------------------------------------- */

.sale {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(15rem, 20rem);
    gap: 2.5rem;
    align-items: start;
}

.sale__summary {
    position: sticky;
    top: 7.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sale__summary .section__title { margin-bottom: .6rem; }
.sale__summary .breakdown { max-width: none; }

.sale__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
html:not(.js) .sale__actions { margin-top: 0; padding-top: 0; border-top: 0; }
.sale__actions .btn--primary { flex: 1; }

@media (max-width: 56rem) {
    .sale { grid-template-columns: 1fr; gap: 1.5rem; }
    .sale__summary { position: static; }
}

/* .field es flex: sin esto [hidden] no lo ocultaria. */
.field[hidden] { display: none; }

/* --- Utilidades ----------------------------------------------------------- */

.stack   { display: flex; flex-direction: column; gap: .3rem; }
.row     { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.small   { font-size: .82rem; }
.tiny    { font-size: .74rem; }
.nowrap  { white-space: nowrap; }
.mt      { margin-top: 1rem; }
.mt-lg   { margin-top: 2rem; }
.mb      { margin-bottom: 1rem; }
.prose   { max-width: 44rem; }
.prose p + p { margin-top: .75rem; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.inline-form { display: inline; }

/* --- Pantallas de acceso -------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.auth__card { width: 100%; max-width: 23rem; }

.auth__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
    text-align: center;
}
.auth__brand img { width: 56px; height: 56px; border-radius: 12px; }
.auth__brand h1 { font-size: 1.05rem; font-weight: 650; letter-spacing: .02em; }
.auth__brand h1 em { font-style: normal; color: var(--accent); }
.auth__brand p { font-size: .82rem; color: var(--text-muted); }

.auth .field + .field { margin-top: 1rem; }
.auth .btn { width: 100%; margin-top: 1.5rem; }

.auth__foot {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--text-faint);
    text-align: center;
}

/* --- Entrada a notitas (layouts/plain.php) -------------------------------
   La marca a la izquierda con su cursor y, a la derecha, una nota con la
   esquina doblada como la del icono. Detras, una rejilla de puntos, un brillo
   violeta y notas que flotan muy despacio. Sin movimiento si el sistema lo
   pide (prefers-reduced-motion). */

.landing {
    --land-bg:        #f6f5fb;
    --land-dot:       rgba(22, 22, 26, .09);
    --land-glow-1:    rgba(124, 92, 240, .26);
    --land-glow-2:    rgba(236, 72, 153, .12);
    --land-glow-3:    rgba(56, 189, 248, .12);
    --paper:          rgba(255, 255, 255, .86);
    --paper-line:     rgba(22, 22, 26, .08);
    --paper-fold:     #e6e0fb;
    --paper-shadow:   rgba(60, 40, 140, .22);
    --drift-bg:       rgba(255, 255, 255, .6);
    --drift-line:     rgba(22, 22, 26, .07);
    --brand:          #5b3cc4;
    --brand-hover:    #4c2fb0;
    --brand-caret:    #7c5cf0;

    min-height: 100vh;
    min-height: 100dvh;
    background: var(--land-bg);
    overflow-x: clip;
}

@media (prefers-color-scheme: dark) {
    .landing {
        --land-bg:        #09090b;
        --land-dot:       rgba(255, 255, 255, .07);
        --land-glow-1:    rgba(124, 92, 240, .30);
        --land-glow-2:    rgba(236, 72, 153, .12);
        --land-glow-3:    rgba(56, 189, 248, .08);
        --paper:          rgba(17, 17, 21, .82);
        --paper-line:     rgba(255, 255, 255, .09);
        --paper-fold:     #2c2549;
        --paper-shadow:   rgba(0, 0, 0, .55);
        --drift-bg:       rgba(255, 255, 255, .025);
        --drift-line:     rgba(255, 255, 255, .07);
        --brand:          #6a4be0;
        --brand-hover:    #7a5cf0;
        --brand-caret:    #9d85ff;
    }
}

.landing__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.landing__glow {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(38% 34% at 68% 46%, var(--land-glow-1), transparent 70%),
        radial-gradient(28% 30% at 28% 26%, var(--land-glow-2), transparent 70%),
        radial-gradient(32% 28% at 52% 88%, var(--land-glow-3), transparent 70%);
    animation: landing-breathe 18s ease-in-out infinite alternate;
}

.landing__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--land-dot) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 80%);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 80%);
}

/* Notas fantasma: cuadradas, con la esquina cortada, casi transparentes. */
.drift {
    --size: 96px;
    --turn: 0deg;
    --time: 20s;
    position: absolute;
    width: var(--size);
    aspect-ratio: 1;
    border: 1px solid var(--drift-line);
    border-radius: 12px;
    background: var(--drift-bg);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    transform: rotate(var(--turn));
    animation: landing-drift var(--time) ease-in-out infinite alternate;
}
.drift--1 { --size: 128px; --turn: -9deg;  --time: 19s; top: 11%;  left: 5%; }
.drift--2 { --size: 64px;  --turn: 7deg;   --time: 23s; top: 72%;  left: 10%; }
.drift--3 { --size: 92px;  --turn: 11deg;  --time: 21s; top: 9%;   right: 7%; }
.drift--4 { --size: 168px; --turn: -5deg;  --time: 27s; bottom: -56px; right: 16%; }
.drift--5 { --size: 46px;  --turn: 15deg;  --time: 17s; top: 52%;  left: 44%; }
.drift--6 { --size: 74px;  --turn: -13deg; --time: 25s; top: 4%;   left: 48%; }

@keyframes landing-drift {
    to { transform: translate3d(0, -22px, 0) rotate(calc(var(--turn) + 5deg)); }
}

@keyframes landing-breathe {
    to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

@keyframes landing-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
}

@keyframes landing-caret {
    50% { opacity: 0; }
}

@keyframes landing-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-caret) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.landing__frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 72rem;
    margin: 0 auto;
    padding: max(1.25rem, env(safe-area-inset-top)) 1.5rem max(1.25rem, env(safe-area-inset-bottom));
}

.landing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.landing__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-decoration: none;
}
.landing__brand img { width: 28px; height: 28px; border-radius: 7px; }

.landing__status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    font-size: .75rem;
    color: var(--text-muted);
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.landing__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-caret);
    animation: landing-pulse 2.4s ease-out infinite;
}

.landing__main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 3rem 4rem;
    padding: 3rem 0;
}

.wordmark {
    font-size: clamp(3.4rem, 8.2vw, 6.6rem);
    font-weight: 760;
    letter-spacing: -.06em;
    line-height: .9;
    color: var(--text);
}

.wordmark__caret {
    display: inline-block;
    width: .07em;
    height: .72em;
    margin-left: .07em;
    vertical-align: -.02em;
    border-radius: 2px;
    background: var(--brand-caret);
    animation: landing-caret 1.1s steps(1) infinite;
}

.landing__tagline {
    margin-top: 1.4rem;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--text-muted);
}

/* Las "notitas": tres notas adhesivas pequenas, un poco torcidas. */
.stickies {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.25rem;
}

.sticky {
    --turn: 0deg;
    padding: .55rem .95rem .65rem;
    font-size: .88rem;
    font-weight: 560;
    letter-spacing: -.005em;
    color: var(--sticky-ink);
    border-radius: 3px 3px 3px 12px;
    background: linear-gradient(315deg, var(--sticky-curl) 0 9px, var(--sticky-bg) 9px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 12px 22px -14px rgba(30, 20, 80, .45);
    transform: rotate(var(--turn));
    transition: transform .25s ease;
}
.sticky:hover { transform: rotate(0deg) translateY(-3px); }

.sticky--violet { --turn: -4deg;  --sticky-bg: #e9e3ff; --sticky-curl: #d6ccfb; --sticky-ink: #3a2a7a; }
.sticky--amber  { --turn: 2.5deg; --sticky-bg: #fdedc9; --sticky-curl: #f6dda6; --sticky-ink: #6b4a06; }
.sticky--mint   { --turn: -1.5deg; --sticky-bg: #d8f4e7; --sticky-curl: #bfe9d5; --sticky-ink: #1d5a40; }

@media (prefers-color-scheme: dark) {
    .sticky--violet { --sticky-bg: #2c2550; --sticky-curl: #3a3168; --sticky-ink: #ddd3ff; }
    .sticky--amber  { --sticky-bg: #3a2e14; --sticky-curl: #4b3c1b; --sticky-ink: #fbe3ae; }
    .sticky--mint   { --sticky-bg: #163428; --sticky-curl: #1f4535; --sticky-ink: #c3eed9; }
}

/* La nota del formulario. La sombra va en un hermano difuminado: un filter
   en un antecesor romperia el desenfoque del fondo de la nota. */
.landing__hero  { animation: landing-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.landing__panel { animation: landing-rise .55s .06s cubic-bezier(.2, .7, .2, 1) both; }

.landing__panel {
    position: relative;
    isolation: isolate;
    justify-self: end;
    width: 100%;
    max-width: 26rem;
}
.landing__panel::before {
    content: "";
    position: absolute;
    inset: 10% 8% -5%;
    z-index: -1;
    border-radius: 32px;
    background: var(--paper-shadow);
    filter: blur(42px);
    opacity: .55;
}

.paper {
    position: relative;
    padding: 2rem 1.75rem 1.6rem;
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.paper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 8px;
    background: linear-gradient(to bottom left, transparent 50%, var(--paper-fold) 50%);
}

.paper__title {
    font-size: 1.45rem;
    font-weight: 680;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.paper__lead {
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--text-muted);
}
.paper .paper__title + .paper__lead { margin-top: .35rem; }

.paper__title + .notice,
.paper__lead + .notice,
.paper__title + form,
.paper__lead + form,
.paper__title + p,
.paper__lead + p,
.paper__title + ul,
.paper__lead + ul,
.paper__title + ol,
.paper__lead + ol,
.paper__title + div,
.paper__lead + div { margin-top: 1.4rem; }

.paper .field + .field,
.paper .notice + .field { margin-top: 1rem; }
.paper .notice { margin-bottom: 1rem; }

.paper input[type="text"],
.paper input[type="email"],
.paper input[type="password"] {
    min-height: 46px;
    padding: .65rem .8rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
}

.paper .field > label { font-size: .8rem; }

.paper .check--lg { margin-top: .25rem; }

.btn--block { width: 100%; }

.paper .btn--primary {
    min-height: 46px;
    margin-top: 1.4rem;
    font-size: .92rem;
    font-weight: 600;
    border-radius: 10px;
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 80%, transparent);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.paper .btn--primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    transform: translateY(-1px);
}
.paper .btn--primary:active { transform: translateY(0); }

.paper .auth__foot {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--paper-line);
    font-size: .82rem;
}
.paper .auth__foot a { color: var(--text-muted); }
.paper .auth__foot a:hover { color: var(--text); }

.paper .page-head { margin-bottom: 1rem; }
.paper .page-head h1 { font-size: 1.45rem; letter-spacing: -.03em; }

/* Ver la contrasena mientras se escribe (auth.js). */
.reveal { position: relative; display: block; }
.reveal input { padding-right: 2.9rem !important; }
.reveal__btn {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--text-faint);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transform: translateY(-50%);
}
.reveal__btn:hover { color: var(--text); background: var(--surface-hover); }
.reveal__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reveal__slash { display: none; }
.reveal__btn[aria-pressed="true"] .reveal__slash { display: inline; }

/* Opciones y pasos dentro de la nota (recuperar el acceso). */
.options, .steps { display: grid; gap: .6rem; }
.options { margin-bottom: 1.25rem; }
.option, .step {
    display: grid;
    gap: .2rem;
    padding: .75rem .85rem;
    font-size: .84rem;
    color: var(--text-muted);
    border: 1px solid var(--paper-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.option strong, .step strong { color: var(--text); font-weight: 600; }
.option--link { padding: 0; }
.option--link a {
    display: grid;
    gap: .2rem;
    padding: .75rem .85rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}
.option--link a:hover { background: var(--surface-hover); }
.option--link a strong::after { content: " \2192"; color: var(--brand-caret); }

.steps { counter-reset: step; }
.step { position: relative; padding-left: 2.6rem; }
.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: .72rem;
    left: .8rem;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    font-size: .72rem;
    font-weight: 650;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}

.copy-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .3rem 0;
}
.copy-field__value {
    flex: 1;
    min-width: 0;
    padding: .5rem .6rem;
    font-size: .8rem;
    color: var(--text);
    background: var(--bg);
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    user-select: all;
}
.copy-field__btn.is-done { color: var(--brand-caret); border-color: var(--brand-caret); }

/* Elegir cuenta (recuperar desde el hosting). */
.accounts { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.account {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--paper-line);
    border-radius: 12px;
    cursor: pointer;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.account:hover { border-color: var(--text-faint); }
.account:has(input:checked) {
    border-color: var(--brand-caret);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-caret) 18%, transparent);
}
.account input { margin: 0; accent-color: var(--brand); }
.account__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: .85rem;
    font-weight: 650;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}
.account__body { display: grid; min-width: 0; }
.account__name { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; }
.account__email, .account__meta { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.account__meta { color: var(--text-faint); }

.landing__foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    color: var(--text-faint);
}

@media (max-width: 60rem) {
    .landing__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
        padding: 2rem 0 2.5rem;
        justify-items: center;
        text-align: center;
    }
    .landing__panel { justify-self: center; text-align: left; }
    .wordmark { font-size: clamp(3rem, 15vw, 4.6rem); }
    .landing__tagline { margin-top: 1rem; }
    .stickies { justify-content: center; margin-top: 1.5rem; }
    .drift--5, .drift--6 { display: none; }
}

@media (max-width: 30rem) {
    .landing__frame { padding-inline: 1rem; }
    .landing__status { display: none; }
    .stickies { display: none; }
    .paper { padding: 1.6rem 1.25rem 1.35rem; }
    .landing__foot { flex-direction: column; align-items: center; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .landing__glow, .drift, .wordmark__caret, .landing__pulse,
    .landing__hero, .landing__panel { animation: none; }
    .sticky, .paper .btn--primary { transition: none; }
}

/* Codigo dentro de un texto (APP_KEY=..., .env): se parte donde haga falta
   para no empujar la pagina en el movil. */
code {
    font-family: var(--font-num);
    font-size: .88em;
    overflow-wrap: anywhere;
}

/* Ordenes para copiar (cron de copias). */
.code-block {
    margin: .5rem 0 0;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-hover);
    font-family: var(--font-num);
    font-size: .78rem;
    overflow-x: auto;
    white-space: pre;
}

/* --- Paginas de un listado ------------------------------------------------ */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin-top: 1.25rem;
}
.pager__info {
    font-size: .8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.pager__page { color: var(--text-faint); }
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* --- Verificacion en dos pasos y codigos de recuperacion ----------------- */

.code-input {
    font-family: var(--font-num);
    font-size: 1.15rem;
    letter-spacing: .18em;
    font-variant-numeric: tabular-nums;
}

.twofa {
    display: grid;
    gap: 0 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    align-items: start;
}
/* Los dos pasos van lado a lado en escritorio: sin la raya de seccion. */
.twofa > .section { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 40rem) {
    .twofa > .section + .section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
}

/* El QR siempre negro sobre blanco, tambien en modo oscuro. */
.qr {
    width: 13.5rem;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
}
.qr:not(.is-ready) { display: none; }
.qr svg { display: block; width: 100%; height: 100%; }

.secret-key {
    font-family: var(--font-num);
    font-size: .95rem;
    letter-spacing: .06em;
    word-spacing: .25em;
    user-select: all;
    overflow-wrap: anywhere;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
    gap: .5rem 1.5rem;
    max-width: 34rem;
    padding: 1rem 1.25rem 1rem 2.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    font-family: var(--font-num);
    font-size: 1.02rem;
    letter-spacing: .05em;
}
.recovery-codes li::marker { color: var(--text-faint); font-size: .8em; }

/* --- Portada del hub ------------------------------------------------------ */

.hub-hero { margin-bottom: 2.25rem; }
.hub-hero__date {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.hub-hero__title {
    margin-top: .45rem;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 720;
    letter-spacing: -.045em;
    line-height: 1.05;
}
/* El cursor de la entrada, tambien aqui. */
.hub-hero__title::after {
    content: "";
    display: inline-block;
    width: .07em;
    height: .74em;
    margin-left: .08em;
    vertical-align: -.03em;
    border-radius: 2px;
    background: var(--accent-bright);
    animation: landing-caret 1.1s steps(1) infinite;
}
.hub-hero__sub { margin-top: .55rem; font-size: 1rem; color: var(--text-muted); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.section__head .section__title { margin-bottom: 0; }

/* Colores de las apps (Ajustes -> Apps). Fondo suave y tinta del mismo tono. */
.app-icon--violet, [data-app-color="violet"] { --app-bg: #ede9fe; --app-fg: #5b21b6; }
.app-icon--indigo, [data-app-color="indigo"] { --app-bg: #e0e7ff; --app-fg: #3730a3; }
.app-icon--sky,    [data-app-color="sky"]    { --app-bg: #e0f2fe; --app-fg: #075985; }
.app-icon--mint,   [data-app-color="mint"]   { --app-bg: #d1fae5; --app-fg: #065f46; }
.app-icon--amber,  [data-app-color="amber"]  { --app-bg: #fef3c7; --app-fg: #92400e; }
.app-icon--rose,   [data-app-color="rose"]   { --app-bg: #ffe4e6; --app-fg: #9f1239; }
.app-icon--slate,  [data-app-color="slate"]  { --app-bg: #e2e8f0; --app-fg: #1e293b; }

@media (prefers-color-scheme: dark) {
    .app-icon--violet, [data-app-color="violet"] { --app-bg: #2e2257; --app-fg: #ddd6fe; }
    .app-icon--indigo, [data-app-color="indigo"] { --app-bg: #1f2550; --app-fg: #c7d2fe; }
    .app-icon--sky,    [data-app-color="sky"]    { --app-bg: #0c2a3d; --app-fg: #bae6fd; }
    .app-icon--mint,   [data-app-color="mint"]   { --app-bg: #0b2e24; --app-fg: #a7f3d0; }
    .app-icon--amber,  [data-app-color="amber"]  { --app-bg: #33260a; --app-fg: #fde68a; }
    .app-icon--rose,   [data-app-color="rose"]   { --app-bg: #3a1420; --app-fg: #fecdd3; }
    .app-icon--slate,  [data-app-color="slate"]  { --app-bg: #1e2430; --app-fg: #cbd5e1; }
}

.app-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--app-fg);
    background: var(--app-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-fg) 14%, transparent);
}
.app-icon--sm { width: 36px; height: 36px; border-radius: 9px; font-size: .85rem; }
.app-icon--emoji { font-size: 1.6rem; font-weight: 400; }
.app-icon--sm.app-icon--emoji { font-size: 1.2rem; }

.tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
}

.tool-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.tool-card:hover { border-color: var(--accent); background: var(--surface-hover); }
.tool-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tool-card__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-subtle);
    border: 1px solid var(--line);
    color: var(--accent);
}
.tool-card__mark img { display: block; width: 48px; height: 48px; }
/* Apartado sin logo: su icono, en su color. */
.tool-card[data-tool] .tool-card__mark:not(:has(img)) {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.tool-card__mark svg { width: 26px; height: 26px; }

.tool-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.tool-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
.tool-card__summary { font-size: .8rem; font-weight: 550; color: var(--accent); }
.tool-card__description { margin-top: .35rem; font-size: .86rem; line-height: 1.45; color: var(--text-muted); }

.tool-card__go {
    align-self: center;
    color: var(--text-faint);
    transition: transform .15s ease, color .15s ease;
}
.tool-card:hover .tool-card__go { color: var(--accent); transform: translateX(3px); }

/* Apps de fuera: su color manda en el borde y la flecha. */
.tool-card--external { --accent: var(--app-fg); }
.tool-card--external .tool-card__summary { color: var(--text-faint); font-weight: 500; }
.tool-card--external:hover .tool-card__go { transform: translate(2px, -2px); }

.tool-card--add {
    align-items: center;
    border-style: dashed;
    background: transparent;
    color: var(--text-muted);
}
.tool-card--add .tool-card__mark {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-faint);
    background: transparent;
    border-style: dashed;
}
.tool-card--add:hover { color: var(--text); }
.tool-card--add:hover .tool-card__mark { color: var(--accent); border-color: var(--accent); }

/* Selector de stock (Mi stock / compartido) arriba de GOD CARDS y Stock LEGO. */
html.js .js-hide { display: none; }

.stock-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: -.5rem 0 1.5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--bg-subtle);
    font-size: .84rem;
}
.stock-bar__form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.stock-bar__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.stock-bar select { width: auto; min-width: 11rem; padding: .3rem .5rem; font-size: .84rem; }
.stock-bar__note { margin: 0; color: var(--text-muted); }
.stock-bar__note strong { color: var(--text); font-weight: 600; }

/* En un stock compartido la franja se tine: que no se apunte nada sin querer. */
.stock-bar--shared {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--bg));
}
.stock-bar--shared select { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); font-weight: 600; }

/* Ajustes -> Compartidos */
.stock-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.stock-members { margin: 0; padding: 0; border: 0; }
.stock-members > legend {
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 550;
    color: var(--text-muted);
}
.stock-members__list { display: grid; gap: .4rem; margin-bottom: .5rem; max-width: 40rem; }
.stock-members__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
}
.stock-members__row.is-member { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.stock-members__row select { width: auto; min-width: 9.5rem; }
.stock-members__who { display: grid; min-width: 0; }
.stock-members__who strong { font-size: .88rem; font-weight: 600; }
.stock-members__who span { font-size: .76rem; color: var(--text-muted); overflow-wrap: anywhere; }

@media (max-width: 40rem) {
    .stock-bar { margin-top: 0; }
    .stock-bar__form { width: 100%; }
    .stock-bar select { flex: 1; min-width: 0; }
}

/* Permisos por app (Ajustes -> Usuarios): una tarjeta marcable por app. */
.app-access { margin: 0; padding: 0; border: 0; }
.app-access > legend {
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 550;
    color: var(--text-muted);
}

.app-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .5rem;
    margin: .25rem 0 .5rem;
}

.app-pick__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    height: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.app-pick__item:hover { border-color: var(--text-faint); }
.app-pick__item:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.app-pick__item input { flex: none; margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.app-pick__icon { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.app-pick__icon--tool {
    display: grid;
    place-items: center;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}

.app-pick__text { display: grid; min-width: 0; line-height: 1.3; }
.app-pick__text strong { font-size: .88rem; font-weight: 600; }
.app-pick__text span {
    overflow: hidden;
    font-size: .76rem;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .app-pick__item { transition: none; }
}

/* Ajustes -> Apps */
.app-list { display: grid; gap: .5rem; }
.app-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
}
.app-row__body { display: grid; flex: 1; min-width: 0; }
.app-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; }
.app-row__url { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.app-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .1rem; }

.swatches { border: 0; margin: 0; padding: 0; }
.swatches legend {
    margin-bottom: .45rem;
    font-size: .78rem;
    font-weight: 550;
    color: var(--text-muted);
}
.swatches__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch { position: relative; display: inline-grid; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch__dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--app-fg);
    box-shadow: inset 0 0 0 3px var(--app-bg);
    transition: transform .12s ease;
}
.swatch input:checked + .swatch__dot {
    box-shadow: inset 0 0 0 3px var(--app-bg), 0 0 0 2px var(--bg), 0 0 0 4px var(--app-fg);
}
.swatch input:focus-visible + .swatch__dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch:hover .swatch__dot { transform: scale(1.08); }

@media (max-width: 40rem) {
    .app-row { flex-wrap: wrap; }
    .app-row__actions { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-card__go, .swatch__dot { transition: none; }
    .tool-card:hover .tool-card__go { transform: none; }
    .hub-hero__title::after { animation: none; }
}

/* --- Stock LEGO (/lego) ---------------------------------------------------- */

.lego-figures { margin-bottom: 2.5rem; }

.lego-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--accent);
}

/* Sets en casa: una tarjeta por set, con lo que costo y lo que vale. */
.lego-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .85rem;
}

.lego-card {
    position: relative;
    display: grid;
    gap: .3rem;
    height: 100%;
    padding: 1rem 1rem .95rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease;
}
/* Los dos tetones del ladrillo, arriba a la derecha. */
.lego-card::before,
.lego-card::after {
    content: "";
    position: absolute;
    top: .8rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.lego-card::before { right: 1.75rem; }
.lego-card::after  { right: .95rem; }
.lego-card:hover { border-color: var(--accent); background: var(--surface-hover); }
.lego-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lego-card__top { display: flex; align-items: center; gap: .5rem; padding-right: 2.2rem; }
.lego-card__number {
    font-family: var(--font-num);
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
}
.lego-card__name { font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.lego-card__stock { font-size: .84rem; color: var(--text-muted); }
.lego-card__stock strong { color: var(--text); font-weight: 650; }
.lego-card__money {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-num);
    font-size: .8rem;
    color: var(--text-muted);
}

/* Apuntar el valor de mercado desde la ficha. */
.lego-value { display: flex; gap: .4rem; margin-top: .6rem; max-width: 16rem; }
.lego-value input { min-width: 0; padding: .3rem .5rem; font-size: .84rem; }

/* "Recibido", con las unidades que han llegado. */
.receive { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.receive__qty { width: 4.2rem !important; padding: .25rem .4rem !important; font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
    .lego-card { transition: none; }
}

/* --- Movil (spec 26) ------------------------------------------------------
   Las tablas se convierten en fichas verticales: en un iPhone una tabla de
   diez columnas es ilegible por mucho scroll horizontal que tenga. */

@media (max-width: 40rem) {
    body { font-size: 15px; }

    .main { padding: 1.5rem 1rem 3rem; }

    .nav { top: 52px; }
    .masthead__inner { min-height: 52px; padding: 0 1rem; gap: .6rem; }
    .masthead__user { gap: .35rem; }
    .masthead__user .masthead__name { display: none; }
    .masthead__user .role-tag { display: none; }

    /* Dentro de un apartado manda su nombre: de notitas queda el icono. */
    .masthead__brand .brand:not(.brand--tool):not(:only-child) .brand__name { display: none; }
    .masthead__brand { gap: .4rem; }

    .figures { grid-template-columns: 1fr 1fr; gap: 1.35rem 1rem; }
    /* Las cifras grandes encogen con la pantalla y, si aun asi no caben, se
       parten por el espacio antes del simbolo, nunca a mitad de numero. */
    .figure__value { font-size: clamp(1.05rem, 5.2vw, 1.3rem); }
    .figure__value, .figure__label, .figure__meta { min-width: 0; overflow-wrap: break-word; }

    .page-head { align-items: flex-start; flex-direction: column; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 auto; min-width: 0; }

    .notice { overflow-wrap: anywhere; }
    .breakdown__row { gap: 1rem; }

    table.data.responsive thead,
    table.data.responsive caption { display: none; }

    /* tfoot tiene que entrar tambien en la conversion a fichas: si se queda
       como grupo de tabla, conserva el ancho de columnas original y arrastra
       toda la pagina a un scroll horizontal. */
    table.data.responsive,
    table.data.responsive tbody,
    table.data.responsive tfoot,
    table.data.responsive tr,
    table.data.responsive td {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    table.data.responsive tr {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: .75rem;
        margin-bottom: .75rem;
    }

    table.data.responsive td {
        border: 0;
        padding: .25rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        text-align: right;
        /* Sin esto el valor no puede encogerse y desborda la ficha. */
        min-width: 0;
        overflow-wrap: anywhere;
    }

    table.data.responsive td::before {
        content: attr(data-label);
        font-size: .74rem;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text-faint);
        font-weight: 600;
        text-align: left;
        /* La etiqueta no cede su sitio ni se parte por la mitad ("FUENT/E")
           cuando el valor es largo: se queda entera y el valor hace sitio. */
        flex: 0 0 auto;
        max-width: 45%;
        overflow-wrap: normal;
    }

    /* Una celda sin data-label no debe dejar un hueco vacio a la izquierda. */
    table.data.responsive td:not([data-label]) { display: none; }

    table.data.responsive td:first-child {
        display: block;
        text-align: left;
        padding-bottom: .5rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--line);
    }
    table.data.responsive td:first-child::before { display: none; }

    table.data.responsive .total-row td { border-top: 0; }
    table.data.responsive .total-row { border-color: var(--line-strong); border-width: 2px; }

    .kv { grid-template-columns: 1fr; gap: .1rem 0; }
    .kv dt { margin-top: .6rem; font-size: .78rem; }

    .form__actions .btn { flex: 1; }

    .filters { gap: .5rem; }
    .filters .field { min-width: 0; flex: 1 1 45%; }
}

/* Pantallas muy estrechas (iPhone SE de 1.a generacion, 320 px): una cifra
   por fila para que los importes de seis cifras quepan enteros. */
@media (max-width: 22.5rem) {
    .figures { grid-template-columns: 1fr; }
}

/* Movil: barra inferior fija en vez de la fila de diez enlaces (U2). */
@media (max-width: 40rem) {
    :root { --tabbar-h: 3.6rem; }

    .nav { display: none; }

    .tabbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        display: grid;
        /* Tantas columnas como botones: la portada lleva menos que un apartado. */
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bg);
        border-top: 1px solid var(--line);
    }

    .tabbar__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        height: var(--tabbar-h);
        font-size: .68rem;
        color: var(--text-muted);
        text-decoration: none;
        cursor: pointer;
        list-style: none;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar__link::-webkit-details-marker { display: none; }
    .tabbar__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
    .tabbar__icon { width: 1.45rem; height: 1.45rem; }
    .tabbar__more[open] > .tabbar__link { color: var(--text); }

    .tabbar__sheet {
        position: absolute;
        right: .5rem;
        bottom: calc(100% + .5rem);
        min-width: 13rem;
        padding: .35rem;
        display: grid;
        background: var(--bg);
        border: 1px solid var(--line-strong);
        border-radius: calc(var(--radius) * 2);
        box-shadow: 0 10px 30px rgb(0 0 0 / .18);
    }
    .tabbar__sheet a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 .85rem;
        border-radius: var(--radius);
        color: var(--text);
        text-decoration: none;
        font-size: .95rem;
    }
    .tabbar__sheet a:hover { background: var(--surface-hover); }
    .tabbar__sheet a[aria-current="page"] { color: var(--accent); font-weight: 600; }

    /* Que nada quede debajo de la barra. */
    .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 2rem); }
    .savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* Movil: todo lo que se toca mide al menos 44 px de alto (U3), la medida
   comoda para un dedo segun las guias de Apple y de Google. */
@media (max-width: 40rem) {
    .btn, .btn--sm, .segmented__btn { min-height: 44px; }
    .btn--sm { padding-inline: .8rem; font-size: .84rem; }
    .segmented__btn { display: inline-flex; align-items: center; }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }
    .check { min-height: 44px; }

    .brand { min-height: 44px; }

    /* El nombre que abre cada ficha: la zona que responde al dedo crece sin
       mover el texto. */
    a.cell-title { position: relative; }
    a.cell-title::after { content: ""; position: absolute; inset: -.85rem -.5rem; }
}

/* Movil: campos a 16px para que iOS no haga zoom al tocarlos, y la hoja de
   stock con botones del tamano de un dedo. */
@media (max-width: 40rem) {
    input, select, textarea { font-size: 16px; }

    .stepper__btn { width: 2.6rem; font-size: 1.15rem; }
    .sheet__table .stepper__input { width: 4.5rem; padding-block: .55rem; }
    .sheet__table .price-input { width: 8.5rem; padding-block: .55rem; }
    .sheet__table td[data-label] { align-items: center; }
    /* La fila es una tarjeta: se marca la tarjeta entera, no cada celda. */
    .sheet__table tr.is-dirty {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 7%, transparent);
    }
    .sheet__table tr.is-dirty td { background: transparent; }
    .sheet__table tr.is-dirty td:first-child { box-shadow: none; }
    .sheet__table .cell-stack { align-items: flex-end; }

    .savebar { margin-inline: -.25rem; padding: .65rem .75rem; }
    /* En el movil la barra se come un cuarto de pantalla: sale cuando hay
       algo que guardar. Sin JavaScript no hay forma de saberlo y se queda. */
    html.js .sheet:not(.needs-save) .savebar { display: none; }

    .vchart__plot { height: 190px; }
    .vchart__yaxis { min-width: 3.3rem; }
    .savebar__actions { width: 100%; }
    .savebar__actions .btn { flex: 1; }
}

@media print {
    .masthead, .nav, .tabbar, .page-head__actions, .form__actions, .filters,
    .savebar, .sheet__tools, .segmented, .panel, .vchart__tip, .vchart__cross { display: none; }
    body { background: #fff; color: #000; }
    .main { max-width: none; padding: 0; }
}