/* Paleta y tipografía de Quipu. Se define en claro y se redefine en oscuro:
   ningún color tiene su única definición dentro de la consulta de medios. */
:root {
    color-scheme: light dark;

    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #e2e5ea;
    --text: #16191d;
    --text-soft: #656d78;
    --accent: #2f6f4f;
    --up: #1f7a4d;
    --down: #b4372f;

    --series-1: #2f6f4f;
    --series-2: #3d7ea6;
    --series-3: #b8863b;
    --series-4: #7a5ba6;
    --series-5: #b4372f;
    --series-6: #4a8f8b;

    --radius: 12px;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 4%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --surface: #1c1f24;
        --border: #2b3038;
        --text: #e8eaed;
        --text-soft: #9aa2ad;
        --accent: #5fb98a;
        --up: #5fb98a;
        --down: #e07a70;

        --series-1: #5fb98a;
        --series-2: #6aa9d0;
        --series-3: #d4a758;
        --series-4: #a98ad0;
        --series-5: #e07a70;
        --series-6: #6fbdb8;

        --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    }
}

* {
    box-sizing: border-box;
}

/* Blazor enfoca el encabezado al navegar, por accesibilidad, y el navegador le pinta su
   anillo naranja por defecto. Se quita el de ese foco programático pero se conserva el de
   teclado, que es el que de verdad hace falta para saber dónde estás. */
h1[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.app-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 32px 8px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    font-size: 32px;
    color: var(--accent);
    line-height: 1;
}

.brand h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.01em;
}

/* Navegación: pestañas arriba en escritorio y barra inferior en móvil, que es donde
   llega el pulgar sin recolocar la mano. */
.tabs {
    display: flex;
    gap: 4px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.tabs a {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 550;
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tabs a:hover {
    background: var(--surface);
    color: var(--text);
}

.tabs a.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-icon {
    font-size: 15px;
    line-height: 1;
}

/* Libros: crear, compartir y el enlace de invitación. */
.book-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 12px;
}

.book-form input,
.book-form select,
.book-card .sub-row select,
.invite-link input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}

.book-form input {
    flex: 1;
    min-width: 180px;
}

.book-form button,
.button-link {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    background: none;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}

.book-form button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-weight: 600;
}

.book-form button.danger {
    background: var(--down);
    border-color: var(--down);
    color: #fff;
    font-weight: 600;
}

.book-card h3 {
    font-size: 13px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 18px 0 6px;
}

.invite-link {
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 10px 12px 12px;
    margin: 4px 0 8px;
    display: grid;
    gap: 8px;
}

.invite-link input {
    width: 100%;
    font-size: 13px;
}

.book-more {
    margin-top: 16px;
}

/* El círculo del perfil, con la inicial. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    flex: none;
}

.avatar-big {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

.profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.profile-head h2 {
    margin: 0;
    font-size: 17px;
    word-break: break-all;
}

.profile-head .mv-note {
    margin: 4px 0 0;
}

.profile-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0 0 18px;
    font-size: 14px;
}

.profile-facts dt {
    color: var(--text-soft);
}

.profile-facts dd {
    margin: 0;
}

.profile-books {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.profile button.secondary,
.danger-zone button.danger {
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.profile button.secondary {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
}

.danger-zone {
    border-color: color-mix(in srgb, var(--down) 40%, var(--border));
}

.danger-zone form {
    display: grid;
    gap: 8px;
    max-width: 360px;
}

.danger-zone label {
    font-size: 13px;
    color: var(--text-soft);
}

.danger-zone input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}

.danger-zone button.danger {
    background: var(--down);
    border: none;
    color: #fff;
    margin-top: 4px;
}

.profile-consequences {
    font-size: 14px;
    line-height: 1.55;
    padding-left: 18px;
    margin: 0 0 16px;
}

.login-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    margin: 0 0 14px;
}

.logout {
    margin-left: auto;
}

.logout button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-soft);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.logout button:hover {
    color: var(--text);
    border-color: var(--text-soft);
}

/* Pantalla de acceso */
.login {
    max-width: 340px;
    margin: 14vh auto 0;
    padding: 0 24px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.login-brand h1 {
    margin: 0;
    font-size: 24px;
}

.login form {
    display: grid;
    gap: 8px;
}

.login label {
    font-size: 13px;
    color: var(--text-soft);
}

.login input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 16px; /* 16px o iOS hace zoom al enfocar el campo */
    font-family: inherit;
    width: 100%;
}

.login input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.login button {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    margin-top: 6px;
}

/* Entrar con Google: secundario, para que la contraseña siga siendo lo principal. */
.login-alt {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.login-alt-separador {
    font-size: 12px;
    color: var(--text-soft);
    text-align: center;
}

.login-google {
    display: block;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}

.login-google:hover {
    border-color: var(--text-soft);
}

.login-error {
    background: color-mix(in srgb, var(--down) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border));
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    margin: 4px 0 0;
    line-height: 1.5;
}

.login-error code {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    word-break: break-all;
}

.warning {
    background: color-mix(in srgb, var(--series-3) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--series-3) 40%, var(--border));
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Desglose de un cálculo, línea a línea */
.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ledger td {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.ledger tr.total td {
    font-weight: 650;
    border-bottom: 2px solid var(--border);
}

.ledger tr:last-child td {
    border-bottom: none;
    font-size: 17px;
}

.footnote {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.6;
}

.footnote code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

.positions tfoot td {
    padding-top: 12px;
    border-top: 2px solid var(--border);
    font-weight: 650;
}

.brand p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 32px 48px;
}

.loading {
    color: var(--text-soft);
    padding: 48px 0;
}

/* Controles del periodo y del sitio */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.range {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
}

.range button {
    background: none;
    border: none;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    padding: 7px 13px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.range button:hover {
    color: var(--text);
}

.range button.active {
    background: var(--accent);
    color: var(--bg);
}

.controls select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    padding: 9px 12px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .controls {
        gap: 8px;
        margin-bottom: 12px;
    }

    /* La botonera se desplaza en horizontal en vez de partirse en dos filas. */
    .range {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .controls select {
        flex: 1;
        min-width: 0;
    }
}

/* Filtros de la pestaña de movimientos */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.filters label {
    display: grid;
    gap: 4px;
}

.filters label.grow {
    flex: 1;
    min-width: 180px;
}

.filters label > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

.filters input,
.filters select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 11px;
    width: 100%;
}

.filters input:focus,
.filters select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* Lista de movimientos: en lista y no en tabla, para que no haga falta desplazarse
   en horizontal en una pantalla estrecha. */
.movements {
    list-style: none;
    margin: 0;
    padding: 0;
}

.movements li {
    border-bottom: 1px solid var(--border);
}

/* La fila entera es el botón que despliega la corrección: en un móvil el objetivo
   pulsable tiene que ser la fila y no un iconito. */
.mv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 11px 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mv-row:hover .mv-desc {
    color: var(--accent);
}

.movements li.open {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 10px;
    margin: 0 -10px;
    padding: 0 10px;
}

.mv-edit {
    padding: 4px 0 14px;
}

.mv-note {
    font-size: 12px;
    color: var(--text-soft);
    margin: 10px 0;
    line-height: 1.5;
}

.mv-actions {
    display: flex;
    gap: 8px;
}

.mv-actions button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 13px;
    padding: 8px 14px;
    cursor: pointer;
}

.mv-actions button:hover {
    color: var(--text);
    border-color: var(--text-soft);
}

.mv-actions button.danger {
    background: var(--down);
    border-color: var(--down);
    color: #fff;
    font-weight: 600;
}

/* Fila con una acción a la vista al lado: la fila sigue siendo el botón que despliega. */
.sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-row .mv-row {
    flex: 1;
    min-width: 0;
}

.sub-row .mv-actions button {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.warning .mv-actions {
    margin-top: 8px;
    flex-wrap: wrap;
}

.warning p {
    margin: 0;
}

details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
}

.movements li:last-child {
    border-bottom: none;
}

.mv-main {
    min-width: 0;
}

.mv-desc {
    display: block;
    font-size: 14px;
    /* Los conceptos del banco son largos y con referencias: se cortan en una línea. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-meta {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-side {
    text-align: right;
    white-space: nowrap;
}

.mv-amount {
    display: block;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mv-date {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
}

@media (max-width: 640px) {
    .filters { gap: 8px; }

    /* Fechas y desplegables a dos columnas; la búsqueda a lo ancho. */
    .filters label {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .filters label.grow { flex: 1 1 100%; }

    /* 16 px o iOS hace zoom al enfocar el campo. */
    .filters input,
    .filters select { font-size: 16px; }
}

/* Formularios de alta */
.form-panel .range {
    margin-bottom: 16px;
}

.form-panel .filters {
    margin-bottom: 14px;
}

/* Los controles de Blazor no llevan clase propia, así que se estilan por elemento
   dentro del formulario para que igualen a los filtros. */
.form-panel .filters input,
.form-panel .filters select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 11px;
    width: 100%;
}

.form-panel .filters input:focus,
.form-panel .filters select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

button.primary {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
}

button.primary:disabled {
    opacity: 0.5;
    cursor: default;
}

.ok-msg {
    background: color-mix(in srgb, var(--up) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--up) 40%, var(--border));
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    margin: 0 0 12px;
}

.validation-message {
    color: var(--down);
    font-size: 12px;
}

/* Portada de cartera */
.kpi-small {
    font-size: 18px !important;
}

.actions-top {
    margin-bottom: 14px;
}

.quote-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.quote-price {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.quote-src {
    font-size: 11px;
    color: var(--text-soft);
}

/* Cotizaciones: una fila por posición con su campo de precio */
.quotes {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.quotes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

/* La fila de la posición sigue siendo horizontal; el desglose se despliega debajo. */
.quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

/* El nombre es el botón que abre el desglose. El campo de precio queda fuera: anidar un
   input dentro de un botón haría que teclear un precio desplegara los lotes. */
.lots-toggle {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.lots-toggle:disabled {
    cursor: default;
}

.lots-toggle:not(:disabled):hover .mv-desc {
    color: var(--accent);
}

.lots-hint {
    color: var(--accent);
}

.lots {
    padding: 10px 0 4px;
}

.quotes li:last-child {
    border-bottom: none;
}

.quote-input input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding: 8px 10px;
    width: 118px;
    text-align: right;
}

.quote-input input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

@media (max-width: 640px) {
    .form-panel .filters input,
    .form-panel .filters select,
    .quote-input input { font-size: 16px; }

    .quote-input input { width: 104px; }
}

/* Tarjetas de cabecera */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}

.kpi-hero {
    grid-column: span 2;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.kpi h2 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

.kpi-value {
    margin: 0;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-hero .kpi-value {
    font-size: 38px;
}

.kpi-unit {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-soft);
}

.kpi-note {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-soft);
}

.tone-up { color: var(--up); }
.tone-down { color: var(--down); }
.tone-flat { color: var(--text-soft); }

/* Paneles */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px 20px;
    margin-bottom: 18px;
}

.panel > header {
    margin-bottom: 14px;
}

.panel h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 620;
}

.panel > header p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-soft);
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* Un elemento de grid no encoge por debajo del ancho de su contenido salvo que se le
   permita explícitamente. Sin esto, la tabla de cartera —que lleva min-width para que sus
   columnas no se toquen— estiraba la columna entera y con ella toda la página. */
.grid-two > *,
.kpis > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .grid-two { grid-template-columns: 1fr; }
    main { padding: 14px; }
    .app-header { padding: 16px 14px 0; }
    .tabs { padding: 0 14px; }
}

/* Móvil: la navegación baja a una barra fija y el contenido se compacta. */
@media (max-width: 640px) {
    body { font-size: 15px; }

    main {
        padding: 12px 12px 84px; /* hueco para la barra inferior */
    }

    .app-header {
        padding: 14px 14px 10px;
    }

    .brand h1 { font-size: 19px; }
    .brand p { font-size: 12px; }
    .brand-mark { font-size: 26px; }

    .tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        max-width: none;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        gap: 0;
    }

    .tabs a {
        flex: 1;
        flex-direction: column;
        gap: 3px;
        padding: 8px 2px;
        font-size: 10px;
        border-radius: 10px;
        justify-content: center;
        min-width: 0;
    }

    .tab-label {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .tabs a.active {
        background: none;
        color: var(--accent);
        box-shadow: none;
    }

    .tab-icon { font-size: 19px; }

    .kpis {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .kpi { padding: 13px 14px; }
    .kpi-hero { grid-column: 1 / -1; }
    .kpi-value { font-size: 21px; }
    .kpi-hero .kpi-value { font-size: 31px; }
    .kpi h2 { font-size: 11px; }
    .kpi-note { font-size: 12px; }

    .panel { padding: 15px 16px 17px; }
    .panel h2 { font-size: 15px; }

    .table-scroll { margin: 0 -16px; padding: 0 16px; }

    .allocation { grid-template-columns: 1fr; justify-items: center; }
    .allocation-legend { width: 100%; }

    .category-head { font-size: 13px; }

    .ledger { font-size: 14px; }
    .ledger tr:last-child td { font-size: 15px; }

    .login { margin-top: 8vh; }
}

/* Solo en pantallas de verdad estrechas se pasa a una columna: a 375 px, que es el
   ancho de móvil más común, dos tarjetas por fila siguen leyéndose bien. */
@media (max-width: 340px) {
    .kpis { grid-template-columns: 1fr; }
}

/* Gráficas */
.chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.chart-empty {
    color: var(--text-soft);
    font-size: 14px;
    padding: 24px 0;
    text-align: center;
}

.grid {
    stroke: var(--border);
    stroke-width: 1;
}

.axis {
    fill: var(--text-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.marker {
    fill: var(--accent);
    stroke: var(--surface);
    stroke-width: 2;
}

.bar-income { fill: var(--series-1); }
.bar-expense { fill: var(--series-3); }

.legend {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--text-soft);
    margin-top: 6px;
}

.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: baseline;
}

.swatch-income { background: var(--series-1); }
.swatch-expense { background: var(--series-3); }

/* Categorías de gasto */
.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.category-head {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 4px;
}

.category-amount {
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}

.category-track {
    height: 7px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.category-fill {
    height: 100%;
    background: var(--series-3);
    border-radius: 4px;
}

/* Reparto por clase de activo */
.alloc-bar {
    display: flex;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 16px;
}

.alloc-slice {
    min-width: 3px;
    transition: opacity 0.15s;
}

.alloc-slice:hover {
    opacity: 0.82;
}

.alloc-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
    font-size: 14px;
}

.alloc-legend li {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 10px;
    align-items: start;
}

.alloc-cost {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
}

.alloc-amount,
.alloc-share {
    font-variant-numeric: tabular-nums;
}

.alloc-share {
    color: var(--text-soft);
    min-width: 48px;
    text-align: right;
}

/* Reparto por institución */
.allocation {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;
}

.donut {
    width: 130px;
    height: 130px;
    /* El trazo empieza a las tres en punto; girándolo un cuarto arranca arriba. */
    transform: rotate(-90deg);
}

.slice {
    fill: none;
    stroke-width: 16;
}

.allocation-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.allocation-legend li {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 8px;
    align-items: center;
}

.allocation-amount,
.allocation-share {
    font-variant-numeric: tabular-nums;
}

.allocation-share {
    color: var(--text-soft);
    min-width: 48px;
    text-align: right;
}

.allocation-debt {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
}

.allocation-legend li {
    align-items: start;
}

@media (max-width: 520px) {
    .allocation { grid-template-columns: 1fr; }
}

/* Tabla de posiciones */
/* Las tablas anchas se desplazan dentro de su caja; el cuerpo de la página nunca
   se desplaza en horizontal. */
.table-scroll {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}

.positions {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
}

/* La primera columna se queda con el espacio sobrante y las numéricas
   solo ocupan lo que necesitan, en vez de repartirse el ancho a partes iguales. */
.positions th:first-child,
.positions td:first-child {
    width: 100%;
}

.positions th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.positions td {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

/* Sin esto, dos columnas numéricas seguidas se pegan y "2,2957" y "218,24 €" se leen
   como un solo número. */
.positions th + th,
.positions td + td {
    padding-left: 18px;
}

.positions tr:last-child td {
    border-bottom: none;
}

.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 14px;
    white-space: nowrap;
}

.symbol {
    display: block;
    font-weight: 600;
}

.instrument-name {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
}

.secondary {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
}

.as-of {
    text-align: center;
    color: var(--text-soft);
    font-size: 12px;
    margin-top: 8px;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #ffe6c8;
    color: #1d1d1d;
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* El plan de cuentas se lee como un árbol: el sangrado es la única pista de qué cuelga
   de qué, y va en el padding para que la fila entera siga siendo pulsable. */
.accounts .mv-row {
    padding-left: calc(var(--depth, 0) * 18px);
}

.accounts .mv-desc.closed {
    color: var(--text-soft);
    text-decoration: line-through;
}

/* En un móvil no caben las seis columnas del desglose sin desplazarse de lado, y lo que se
   queda fuera es justo la plusvalía. Se sacrifican coste y valor —que ya salen en la fila de
   la posición— para dejar a la vista cuándo, cuánto, a qué precio y cómo va. */
@media (max-width: 640px) {
    .lots .positions {
        min-width: 0;
    }

    .lots .positions th:nth-child(4),
    .lots .positions td:nth-child(4),
    .lots .positions th:nth-child(5),
    .lots .positions td:nth-child(5) {
        display: none;
    }

    .lots .positions th + th,
    .lots .positions td + td {
        padding-left: 10px;
    }
}

/* Compras sobre la curva de cotización. El tallo baja hasta el eje para que se vea el
   cuándo aunque el punto quede alto, y el color dice si desde entonces vale más o menos. */
.trade-stem {
    stroke: var(--text-soft);
    stroke-width: 1;
    stroke-dasharray: 2 3;
    opacity: 0.5;
}

.trade-dot {
    fill: var(--surface);
    stroke: var(--text-soft);
    stroke-width: 2;
}

.trade-dot.tone-up {
    stroke: var(--up);
}

.trade-dot.tone-down {
    stroke: var(--down);
}

/* El SVG se escala al ancho, así que en un móvil el texto del eje encoge con él. Se compensa
   en unidades del lienzo: no es un tamaño mayor, es el mismo tamaño tras el encogimiento. */
@media (max-width: 640px) {
    .chart .axis {
        font-size: 20px;
    }
}

/* Botón de ocultar importes, junto al de salir. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.privacy {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: 6px 14px;
}

.privacy:hover {
    color: var(--text);
}

/* Encendido se ve encendido: si no, no hay forma de saber que lo que ves está tapado. */
.privacy.on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}

/* Selector de libro. Solo aparece con más de uno: con uno sería un desplegable de un
   elemento, que es ruido. */
.book-picker {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.book-picker select {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #d6d3cd);
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    max-width: 14rem;
}

.book-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line, #d6d3cd);
    border-radius: 999px;
    color: var(--muted, #6b6862);
}

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

/* Invitación */
.invite-lead {
    margin: 0 0 1rem;
    line-height: 1.5;
}

.invite-note {
    font-size: 0.85rem;
    color: var(--muted, #6b6862);
    margin: 0.2rem 0 0.8rem;
}

/* Aviso de la cuenta de demostración. Solo aparece si esa cuenta existe. */
.login-demo {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line, #d6d3cd);
    font-size: 0.85rem;
    color: var(--muted, #6b6862);
    line-height: 1.5;
}

.login-demo code {
    background: var(--surface-2, #f1efeb);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
}