/* =========================================================
   LOS ALAMOS · FONDOS: agregar, depositar, retirar
   Archivo: frontend/assets/css/pages/funds.css
   add-funds.html, deposits.html y withdraw.html.
========================================================= */

/* ---------- 12. PORTAFOLIO Y MERCADO ---------- */
.la-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}
.la-help-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.la-help h3 {
    font-size: 16px;
    font-weight: 600;
}
.la-help p {
    margin-top: 4px;
    font-size: 14px;
    color: var(--la-soft);
}
@media (max-width: 640px) {
.la-help {
        flex-direction: column;
        align-items: stretch;
    }
}
@media (max-width: 640px) {
.la-help .la-btn {
        width: 100%;
    }
}

/* ---------- 21. AGREGAR FONDOS ---------- */
/* `.la-app a` (color: inherit) le gana a `.la-link`: se reafirma el acento. */
#funds-page .la-link,
#deposits-page .la-link {
    color: var(--la-gold-hi);
}
#funds-page .la-link:hover,
#deposits-page .la-link:hover {
    color: #F3CB72;
}
/* Enlace dentro de un párrafo: en línea, sin altura mínima. */
.la-step p .la-link {
    display: inline;
    min-height: 0;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- 22. DEPÓSITOS ---------- */
.la-amount {
    display: flex;
    align-items: center;
    min-height: 46px;
    border: 1px solid var(--la-line-strong);
    border-radius: var(--la-r-ctl);
    background: var(--la-surface-2);
    color: var(--la-dim);
    transition: border-color var(--la-t);
}
.la-amount > span {
    padding: 0 14px;
    font-family: var(--la-mono);
    font-size: 14px;
}
.la-amount input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--la-text);
    font-family: var(--la-mono);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    appearance: textfield;
    -moz-appearance: textfield;
}
.la-amount input:focus {
    outline: none;
}
.la-amount input::-webkit-outer-spin-button,
.la-amount input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.la-amount input::placeholder {
    color: var(--la-dim);
}
/* ---------- Historial ---------- */
.la-fund-list {
    padding: 4px 22px 8px;
}
.la-fund-list .la-skel-row {
    padding: 16px 0;
}
.la-fund-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 112px;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}
.la-fund-row + .la-fund-row {
    border-top: 1px solid var(--la-line);
}
.la-fund-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.la-fund-main strong {
    overflow: hidden;
    font-family: var(--la-mono);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.la-fund-main span {
    font-size: 12px;
    color: var(--la-dim);
}
.la-fund-amount {
    font-family: var(--la-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    text-align: right;
}
.la-fund-row .la-pill {
    justify-self: end;
}
@media (max-width: 640px) {
.la-fund-list {
        padding: 2px 16px 6px;
    }
}
@media (max-width: 640px) {
.la-fund-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main pill"
            "amount pill";
        gap: 4px 12px;
    }
}
@media (max-width: 640px) {
.la-fund-main {
        grid-area: main;
    }
}
@media (max-width: 640px) {
.la-fund-amount {
        grid-area: amount;
        text-align: left;
    }
}
@media (max-width: 640px) {
.la-fund-row .la-pill {
        grid-area: pill;
        align-self: center;
    }
}

/* ---------- 23. RETIROS ---------- */
/* ---------- Monto: atajo «Máx.» ---------- */
.la-app .la-amount-max {
    flex: none;
    min-height: 32px;
    margin-right: 7px;
    padding: 0 12px;
    border: 1px solid var(--la-gold-line);
    border-radius: var(--la-r-sm);
    background: var(--la-gold-bg);
    color: var(--la-gold-hi);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--la-t), border-color var(--la-t), opacity var(--la-t);
}
.la-app .la-amount-max:hover:not([disabled]) {
    background: rgba(212, 160, 23, 0.18);
    border-color: var(--la-gold);
}
.la-app .la-amount-max[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.la-method {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--la-line);
    border-radius: var(--la-r-ctl);
    background: rgba(148, 163, 184, 0.04);
}
.la-method i {
    color: var(--la-gold-hi);
}
.la-method strong {
    font-size: 15px;
    font-weight: 500;
}
/* ---------- Cuenta de destino ---------- */
.la-fieldset {
    display: grid;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 18px 20px 20px;
    border: 1px solid var(--la-line);
    border-radius: var(--la-r-card);
}
.la-fieldset legend {
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--la-soft);
}
/* ---------- Confirmación ---------- */
.la-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--la-line);
    border-radius: var(--la-r-ctl);
    font-size: 14px;
    line-height: 1.5;
    color: var(--la-soft);
    cursor: pointer;
    transition: border-color var(--la-t);
}
.la-check:hover {
    border-color: var(--la-gold-line);
}
.la-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--la-gold);
    cursor: pointer;
}
.la-check:has(input[aria-invalid="true"]) {
    border-color: var(--la-err);
}
/* KPI en dos columnas: el formulario debe verse en la primera pantalla. */
@media (max-width: 640px) {
#withdraw-page .la-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
#withdraw-page .la-kpi {
        gap: 6px;
        padding: 14px;
    }
}
@media (max-width: 640px) {
#withdraw-page .la-kpi-value {
        font-size: 1.125rem;
    }
}
@media (max-width: 640px) {
#withdraw-page .la-kpi .la-unit {
        display: block;
        margin: 2px 0 0;
    }
}
@media (max-width: 640px) {
#withdraw-page .la-kpi-hint {
        font-size: 12px;
    }
}
@media (max-width: 640px) {
.la-fieldset {
        padding: 14px 14px 16px;
    }
}
@media (max-width: 640px) {
.la-check {
        padding: 12px 14px;
    }
}
@media (max-width: 340px) {
#withdraw-page .la-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}