/* =========================================================
   LOS ALAMOS · MIS ACTIVOS
   Archivo: frontend/assets/css/pages/portfolio.css
   Solo portfolio.html.
========================================================= */

/* ---------- 12. PORTAFOLIO Y MERCADO ---------- */
.la-asset-text {
    display: grid;
    line-height: 1.25;
    min-width: 0;
}
.la-asset-text strong {
    font-size: 14px;
    font-weight: 600;
}
.la-asset-text span {
    font-size: 12px;
    color: var(--la-dim);
}
a.la-asset:hover .la-asset-text strong {
    color: var(--la-gold-hi);
}

/* ---------- 17. MIS ACTIVOS ---------- */
/* ---------- Distribución ---------- */
.la-alloc {
    display: grid;
    gap: 18px;
    padding: 20px 22px 22px;
}
.la-alloc-bar {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
}
.la-alloc-seg {
    display: block;
    height: 100%;
    min-width: 3px;
    transition: width 0.4s var(--la-ease);
}
.la-alloc-seg[data-i="0"],
.la-alloc-swatch[data-i="0"] {
    background: var(--la-gold);
}
.la-alloc-seg[data-i="1"],
.la-alloc-swatch[data-i="1"] {
    background: #7C93AB;
}
.la-alloc-seg[data-i="2"],
.la-alloc-swatch[data-i="2"] {
    background: #4F6A85;
}
.la-alloc-seg[data-i="3"],
.la-alloc-swatch[data-i="3"] {
    background: #B8C4D0;
}
.la-alloc-seg[data-i="4"],
.la-alloc-swatch[data-i="4"] {
    background: #8A6D1A;
}
.la-alloc-seg[data-i="5"],
.la-alloc-swatch[data-i="5"] {
    background: #33475C;
}
.la-alloc-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.la-alloc-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.la-alloc-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.la-alloc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--la-text);
}
.la-alloc-share,
.la-alloc-amount {
    font-family: var(--la-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.la-alloc-share {
    min-width: 62px;
    font-weight: 500;
    color: var(--la-text);
}
.la-alloc-amount {
    min-width: 96px;
    font-size: 13px;
    color: var(--la-dim);
}
/* ---------- Tabla de posiciones ---------- */
.la-app .la-table--positions {
    table-layout: fixed;
    min-width: 880px;
}
.la-app .la-table--positions th:nth-child(1) { width: 24%; }
.la-app .la-table--positions th:nth-child(2) { width: 14%; }
.la-app .la-table--positions th:nth-child(3) { width: 15%; }
.la-app .la-table--positions th:nth-child(4) { width: 14%; }
.la-app .la-table--positions th:nth-child(5) { width: 9%; }
.la-app .la-table--positions th:nth-child(6) { width: 14%; }
.la-app .la-table--positions th:nth-child(7) { width: 10%; }
/* Contiene el texto oculto (.la-sr) del último encabezado dentro de la tabla;
   sin esto ensancha la página en móvil. */
.la-app .la-table--positions th {
    position: relative;
}
.la-app .la-table--positions th,
.la-app .la-table--positions td {
    padding-left: 16px;
    padding-right: 16px;
}
.la-app .la-table--positions th:first-child,
.la-app .la-table--positions td:first-child {
    padding-left: 22px;
}
.la-app .la-table--positions th:last-child,
.la-app .la-table--positions td:last-child {
    padding-right: 22px;
}
.la-app .la-table--positions td {
    overflow: hidden;
    text-overflow: ellipsis;
}
.la-app .la-table--positions td.la-num {
    font-family: var(--la-mono);
    font-variant-numeric: tabular-nums;
}
.la-app .la-table--positions td.la-date {
    white-space: nowrap;
    font-size: 13px;
    color: var(--la-dim);
}
.la-app .la-table--positions td.la-act {
    text-align: right;
    white-space: nowrap;
}
.la-app .la-table--positions td.la-num[data-sign="zero"] {
    color: var(--la-dim);
}
.la-app .la-table--positions td .la-link {
    margin-top: 0;
}
.la-app .la-table--positions .la-asset {
    display: flex;
}
/* `.la-app a` fija color:inherit y le gana a `.la-link`; se reafirma el acento. */
.la-app .la-table--positions a.la-link,
.la-app .la-table--positions button.la-link {
    color: var(--la-gold-hi);
}
.la-app .la-table--positions a.la-link:hover,
.la-app .la-table--positions button.la-link:hover {
    color: #F3CB72;
}
.la-share-value {
    display: block;
}
.la-share-track {
    display: block;
    height: 3px;
    margin: 6px 0 0 auto;
    width: 100%;
    max-width: 96px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}
.la-share-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--la-gold);
}
/* ---------- Fila desplegable de inversiones ---------- */
.la-app .la-table--positions tr.la-sub td {
    padding: 0 22px 14px 68px;
    background: rgba(148, 163, 184, 0.03);
    border-bottom: 1px solid var(--la-line);
}
.la-app .la-table--positions tr.la-sub[hidden] {
    display: none;
}
.la-sublist {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.la-subitem {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--la-line);
    font-size: 13px;
}
.la-subitem:first-child {
    border-top: 0;
}
.la-subdate {
    color: var(--la-dim);
}
.la-subamount {
    font-family: var(--la-mono);
    font-variant-numeric: tabular-nums;
    color: var(--la-text);
}
@media (max-width: 640px) {
.la-alloc {
        padding: 16px;
    }
}
@media (max-width: 640px) {
.la-alloc-item {
        grid-template-columns: 10px minmax(0, 1fr) auto;
    }
}
@media (max-width: 640px) {
.la-alloc-amount {
        grid-column: 2 / -1;
        min-width: 0;
        text-align: left;
    }
}
@media (max-width: 640px) {
.la-app .la-table--positions tr.la-sub td {
        padding-left: 22px;
    }
}
@media (max-width: 640px) {
.la-subitem {
        grid-template-columns: 1fr auto;
    }
}
@media (max-width: 640px) {
.la-subdate {
        grid-column: 1 / -1;
    }
}
@media (prefers-reduced-motion: reduce) {
.la-alloc-seg {
        transition: none;
    }
}