/* ==========================================================================
   GOD CARDS · TCG Portfolio
   Minimalismo monocromo. El unico color de marca es el dorado del logo, y se
   reserva para la identidad. El verde y el rojo se reservan para el signo del
   dinero y nunca viajan solos: siempre con signo y con texto (spec 25).
   ========================================================================== */

:root {
    color-scheme: light dark;

    --bg:            #ffffff;
    --bg-subtle:     #fafafa;
    --surface:       #ffffff;
    --surface-hover: #f5f5f6;
    --text:          #16161a;
    --text-muted:    #64646d;
    --text-faint:    #93939c;
    --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:        #8a6a10;   /* dorado legible sobre blanco */
    --accent-bright: #e0a80f;   /* dorado del logo, solo para la marca */

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

    --font: 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:    #6d6d76;
        --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:        #e0a80f;
        --accent-bright: #f5c518;
    }
}

/* --- 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; }

.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;
}

/* --- 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;
}

.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(190px, 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(220px, 1fr));
    gap: 1.1rem;
}

.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 {
    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; }

/* --- 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(320px, 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;
    justify-content: space-between;
    gap: 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); }

/* --- 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;
}

/* --- 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; }

    .figures { grid-template-columns: 1fr 1fr; gap: 1.35rem 1rem; }
    .figure__value { font-size: 1.3rem; }
    /* Las cifras largas se encogen antes que desbordar la columna. */
    .figure__value, .figure__label, .figure__meta { min-width: 0; overflow-wrap: anywhere; }

    .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;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* 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%; }
}

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