/* ===================================================
   SKYLINE — SISTEMA DE TEMAS CON CSS VARIABLES
   =================================================== */

:root {
    --bg-base:      #0f1117;
    --bg-surface:   #161b27;
    --bg-elevated:  #1e2436;
    --bg-input:     #0a0d14;

    --border:       #252d42;
    --border-light: #2e3855;

    --text-primary:   #f0f2f7;
    --text-secondary: #8b95b0;
    --text-muted:     #4e5873;

    --accent:         #4f72ff;
    --accent-hover:   #3a5aee;
    --accent-subtle:  rgba(79, 114, 255, 0.12);

    --positive:   #22c55e;
    --negative:   #f43f5e;
    --warning:    #f59e0b;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
}

/* ── LIGHT MODE ──
   Fondo base grisáceo (no blanco) para que las cards blancas "floten" y se
   distingan entre sí. Tres niveles bien diferenciados: base (fondo) < elevated
   (cajas anidadas / hover) < surface (cards blancas). Bordes y sombras con un
   tinte azulado para dar profundidad sin ensuciar. */
body.light-mode {
    --bg-base:      #e5e9f2;   /* fondo de la página, netamente grisáceo */
    --bg-surface:   #ffffff;   /* cards y tablas: blanco puro que resalta */
    --bg-elevated:  #e6eaf6;   /* cajas anidadas / hover: gris claro visible sobre el blanco */
    --bg-input:     #e8ecf6;   /* inputs: apenas hundidos respecto de la card */

    --border:       #c9d0e4;   /* borde principal: más marcado para separar recuadros */
    --border-light: #d8def0;

    --text-primary:   #1a2035;
    --text-secondary: #4e5a7a;
    --text-muted:     #9aa3be;

    --accent:         #4f72ff;
    --accent-hover:   #3a5aee;
    --accent-subtle:  rgba(79, 114, 255, 0.1);

    --positive:   #16a34a;
    --negative:   #e11d48;
    --warning:    #d97706;

    --shadow-sm:  0 1px 3px rgba(38,50,90,0.10);
    --shadow-md:  0 5px 16px rgba(38,50,90,0.13);
    --shadow-lg:  0 12px 32px rgba(38,50,90,0.17);
}

/* En claro, reforzamos el contorno de los contenedores grandes para que cada
   bloque se lea como una tarjeta separada y no como una masa blanca uniforme. */
body.light-mode .card,
body.light-mode .table-container,
body.light-mode .chart-box,
body.light-mode .complex-card,
body.light-mode .modal-content,
body.light-mode .kpi-box {
    border-color: var(--border);
}
body.light-mode .kpi-box { background: #eef1fa; }
body.light-mode th { background: #f4f6fc; }
body.light-mode tbody tr:hover { background: #eef1fa; }

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    padding: 20px;
    transition: background 0.3s, color 0.3s;
}
/* overflow-x: clip recorta cualquier desborde horizontal accidental (tooltips
   absolutos, tablas anchas mal contenidas) sin volver scrollable el eje Y ni
   afectar elementos position:fixed (modales, panel flotante, menú lateral). */
.container { width: 1400px; max-width: 98%; overflow-x: clip; }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── HEADER ── */
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }

.title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.2s, transform 0.2s;
}
.title:hover { color: var(--accent); transform: scale(1.02); }

.currency-toggle {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-surface);
    padding: 8px 18px; border-radius: 30px;
    border: 1px solid var(--border);
}
.currency-toggle span { font-weight: 600; color: var(--text-secondary); transition: color 0.2s; }
.active-currency { color: var(--accent) !important; }

/* ── SWITCH TOGGLE ── */
.switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-light); transition: .3s; border-radius: 24px;
}
.slider:before {
    position: absolute; content: ""; height: 16px; width: 16px;
    left: 4px; bottom: 4px; background: white; transition: .3s; border-radius: 50%;
}
input:checked + .slider { background: var(--accent); }
input:checked + .slider:before { transform: translateX(24px); }

/* ── BOTÓN PRIVACIDAD Y TEMA ── */
.btn-privacy {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 18px; cursor: pointer;
    padding: 6px 10px;
    color: var(--text-secondary);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-privacy:hover { background: var(--bg-elevated); border-color: var(--border-light); transform: scale(1.05); }

.privacy-mode .obfuscated,
.privacy-mode #globalView canvas, .privacy-mode #portfolioView canvas { filter: blur(6px); opacity: 0.5; pointer-events: none; user-select: none; }

/* ── TABS ── */
.nav-tabs {
    display: flex; gap: 4px; margin-bottom: 28px;
    background: var(--bg-surface); padding: 5px;
    border-radius: var(--radius-md); border: 1px solid var(--border); flex-wrap: wrap;
}
.tab-btn {
    flex: 1; background: transparent; color: var(--text-secondary);
    border: none; padding: 7px 10px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 12px; font-weight: 600;
    transition: background 0.2s, color 0.2s; text-transform: uppercase; letter-spacing: 0.5px;
}
.tab-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.tab-btn.active { background: var(--accent); color: #fff; }

.view-section { display: none; animation: fadeIn 0.3s ease; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── CARDS ── */
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }

.card {
    background: var(--bg-surface); padding: 22px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.card .val { font-size: 28px; font-weight: 700; color: var(--text-primary); }
.card .pnl { font-size: 14px; font-weight: 600; }

/* ── CARD COLORES BORDE ── */
.card-activa  { border-left: 3px solid var(--accent); }
.card-cerrada { border-left: 3px solid #8b5cf6; }
.card-total   { border-left: 3px solid var(--warning); }

/* ── SEMÁFORO ── */
.positive { color: var(--positive) !important; }
.negative { color: var(--negative) !important; }
.warning  { color: var(--warning)  !important; }
.neutral  { color: var(--text-muted) !important; }

.complex-card .card-details  { display: flex; flex-direction: column; gap: 8px; }
.complex-card .detail-row    { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); padding: 3px 0; }
.complex-card .highlight     { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font-weight: 700; font-size: 15px; }
.complex-card .highlight-actual { font-weight: 700; color: var(--text-primary); font-size: 15px; }
.spacer-row  { margin-bottom: 4px; }

/* ── TABLAS ── */
.table-container {
    background: var(--bg-surface); padding: 22px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    margin-bottom: 24px; border: 1px solid var(--border); overflow-x: auto;
}
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.table-header h3 { color: var(--text-primary); font-size: 17px; font-weight: 700; }

.table-container table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; background: var(--bg-surface); }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--bg-elevated); }

th.sortable { cursor: pointer; transition: color 0.2s; user-select: none; position: relative; padding-right: 20px !important; }
th.sortable:hover { color: var(--accent); }
th.sortable::after { content: '↕'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); }
th.sortable.asc::after  { content: '▲'; color: var(--accent); }
th.sortable.desc::after { content: '▼'; color: var(--accent); }

/* ── SCANNER TABLAS CABECERAS FIJAS ── */
#scannerFundContainer, #scannerTechContainer { max-height: 80vh; overflow-y: auto; padding-top: 0; }
#scannerFundContainer h3, #scannerTechContainer h3 { margin-top: 0; padding-top: 22px; background: var(--bg-surface); position: relative; z-index: 22; }
#scannerFundContainer th, #scannerTechContainer th { position: sticky; top: 0; background: var(--bg-surface); z-index: 20; box-shadow: 0 2px 0 0 var(--border); }
#scannerFundContainer table, #scannerTechContainer table { white-space: nowrap; }
#scannerFundContainer th, #scannerTechContainer th,
#scannerFundContainer td, #scannerTechContainer td { padding: 10px 8px; font-size: 13px; }

/* ── CATEGORÍAS ── */
.categories { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.category {
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border); padding: 7px 16px;
    border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s;
}
.category:hover { border-color: var(--accent); color: var(--accent); }
.category.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }

/* ── BOTONES ── */
.btn-submit, .btn-action {
    background: var(--accent); color: #fff;
    border: none; padding: 9px 18px; border-radius: var(--radius-sm);
    font-weight: 600; cursor: pointer; font-size: 13px;
    transition: background 0.2s, transform 0.15s;
}
.btn-submit:hover, .btn-action:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-cancel {
    background: transparent; border: 1px solid var(--negative);
    color: var(--negative); padding: 9px 18px; border-radius: var(--radius-sm);
    cursor: pointer; font-weight: 600; font-size: 13px; transition: background 0.2s;
}
.btn-cancel:hover { background: rgba(244,63,94,0.08); }

.action-buttons { display: flex; gap: 6px; }
.btn-edit {
    background: transparent; border: 1px solid var(--warning); color: var(--warning);
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.2s;
}
.btn-edit:hover { background: rgba(245,158,11,0.1); }
.btn-delete {
    background: transparent; border: 1px solid var(--negative); color: var(--negative);
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.2s;
}
.btn-delete:hover { background: rgba(244,63,94,0.08); }
.import-export-btns { display: flex; gap: 8px; }

/* ── MODAL ── */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
    background: var(--bg-surface); padding: 28px; border-radius: var(--radius-lg);
    border: 1px solid var(--border); width: 400px; box-shadow: var(--shadow-lg);
    transform: translateY(-16px); transition: transform 0.25s;
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.close-modal { float: right; color: var(--text-muted); font-size: 22px; cursor: pointer; transition: color 0.2s; }
.close-modal:hover { color: var(--negative); }

#transactionForm input, #transactionForm select,
#fciTransactionForm input, #fciTransactionForm select {
    width: 100%; background: var(--bg-input);
    border: 1px solid var(--border); color: var(--text-primary);
    padding: 11px 13px; margin-bottom: 13px; border-radius: var(--radius-sm); outline: none; transition: border-color 0.2s;
}
#transactionForm input:focus, #transactionForm select:focus,
#fciTransactionForm input:focus, #fciTransactionForm select:focus { border-color: var(--accent); }

/* ── AUTOCOMPLETE ── */
.autocomplete-wrapper { position: relative; width: 100%; }
.suggestions-list {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 150px; overflow-y: auto; z-index: 10; list-style: none; display: none;
}
.suggestions-list li { padding: 9px 13px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 14px; transition: background 0.15s; }
.suggestions-list li:hover { background: var(--bg-elevated); color: var(--accent); }

/* ── GRÁFICOS ── */
.charts-section  { display: flex; flex-direction: column; gap: 18px; }
.charts-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chart-box {
    background: var(--bg-surface); padding: 20px;
    border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.chart-box.full-width { grid-column: 1 / -1; }
.chart-box h3 { color: var(--text-primary); margin-bottom: 18px; font-size: 15px; font-weight: 700; text-align: center; }
.chart-wrapper { height: 300px; position: relative; }
/* Los gráficos de línea grandes (Evolución) van con altura acotada + el chart
   con maintainAspectRatio:false. Esto evita el bug de Chart.js donde el canvas
   suelto (sin altura fija) colapsa o crece sin control al volver de otra
   pestaña/app (dependencia circular canvas↔contenedor con responsive:true). */
.chart-wrapper.tall { height: 380px; }
.chart-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.chart-header-flex h3 { margin: 0; }
.chart-controls {
    display: flex; gap: 12px; align-items: center;
    background: var(--bg-elevated); padding: 7px 13px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.chart-select {
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border); padding: 5px 10px;
    border-radius: var(--radius-sm); outline: none; cursor: pointer;
}
.custom-checkbox { display: flex; align-items: center; cursor: pointer; gap: 6px; font-size: 12px; color: var(--text-secondary); user-select: none; }
.custom-checkbox input { display: none; }
.checkmark { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); transition: 0.2s; font-size: 12px; }
.custom-checkbox input:checked + .btn-nominal { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.custom-checkbox input:checked + .btn-pct     { background: rgba(139,92,246,0.1); border-color: #8b5cf6; color: #8b5cf6; }

/* ── TOOLTIPS ── */
.tooltip {
    position: relative; display: inline-block; cursor: help;
    background: var(--border-light); color: var(--text-primary);
    border-radius: 50%; width: 16px; height: 16px;
    text-align: center; font-size: 10px; line-height: 16px;
    margin-left: 5px; font-weight: 700;
}
/* El contenido inline ya NO se muestra in-place (se cortaba en el borde del
   recuadro contenedor y se salía de pantalla en mobile). Queda en el DOM solo
   como fuente de datos: tooltips.js lo renderiza en #skyTooltip (fixed, sobre
   todo, clampeado a la pantalla). display:none igual permite leer su innerHTML. */
.tooltip .tooltiptext { display: none; }

/* Burbuja portal única, adosada al <body>. */
#skyTooltip {
    position: fixed; z-index: 2147483647; display: none;
    width: max-content; max-width: 300px;
    background: var(--bg-elevated); color: var(--text-primary);
    text-align: left; border-radius: var(--radius-md);
    padding: 13px; font-size: 12px; font-weight: 400; line-height: 1.5;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    white-space: normal; pointer-events: none; opacity: 0;
}
#skyTooltip b { font-weight: 700; }
.tooltip .tooltiptext::after {
    content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px;
    border-width: 6px; border-style: solid;
    border-color: transparent transparent var(--bg-elevated) transparent;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

th:first-child .tooltip .tooltiptext,
th:nth-child(2) .tooltip .tooltiptext,
th:nth-child(3) .tooltip .tooltiptext,
th:nth-child(4) .tooltip .tooltiptext { left: -20px; transform: translateX(0); }
th:first-child .tooltip .tooltiptext::after,
th:nth-child(2) .tooltip .tooltiptext::after,
th:nth-child(3) .tooltip .tooltiptext::after,
th:nth-child(4) .tooltip .tooltiptext::after { left: 25px; margin-left: 0; }

th:last-child .tooltip .tooltiptext,
th:nth-last-child(2) .tooltip .tooltiptext,
th:nth-last-child(3) .tooltip .tooltiptext,
th:nth-last-child(4) .tooltip .tooltiptext { left: auto; right: -20px; transform: translateX(0); }
th:last-child .tooltip .tooltiptext::after,
th:nth-last-child(2) .tooltip .tooltiptext::after,
th:nth-last-child(3) .tooltip .tooltiptext::after,
th:nth-last-child(4) .tooltip .tooltiptext::after { left: auto; right: 25px; margin-left: 0; }

.kpi-box .tooltip .tooltiptext { bottom: 150%; top: auto; left: 50%; transform: translateX(-50%); }
.kpi-box .tooltip .tooltiptext::after { top: 100%; bottom: auto; border-color: var(--bg-elevated) transparent transparent transparent; }

/* ── KPI GRID ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.kpi-box {
    background: var(--bg-elevated); border: 1px solid var(--border);
    padding: 14px; border-radius: var(--radius-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative;
}
.kpi-box .label { font-size: 11px; color: var(--text-secondary); margin-bottom: 7px; display: flex; align-items: center; justify-content: center; }
.kpi-box .val   { font-size: 17px; font-weight: 700; }
.clickable-cell { cursor: pointer; transition: 0.15s; }
.scanner-row:hover .clickable-cell { color: var(--accent) !important; }

/* ── FILTROS DE TIEMPO ── */
.time-filters {
    display: flex; gap: 4px; background: var(--bg-surface);
    padding: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border); flex-wrap: wrap;
}
.time-btn {
    background: transparent; color: var(--text-secondary); border: none;
    padding: 5px 11px; border-radius: 5px; cursor: pointer; font-size: 12px;
    font-weight: 600; transition: 0.15s;
}
.time-btn:hover  { color: var(--text-primary); }
.time-btn.active { background: var(--bg-elevated); color: var(--accent); }

/* ── BADGE VARIACIÓN DIARIA ── */
.daily-badge  { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; vertical-align: middle; }
.badge-positive { background: rgba(34,197,94,0.1);  color: var(--positive); border: 1px solid rgba(34,197,94,0.2); }
.badge-negative { background: rgba(244,63,94,0.1);  color: var(--negative); border: 1px solid rgba(244,63,94,0.2); }

/* ── COMPARADOR FLOTANTE ── */
.floating-compare-panel {
    position: fixed; bottom: 28px; right: 28px;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px; z-index: 100;
    box-shadow: var(--shadow-lg); min-width: 210px;
    display: flex; flex-direction: column; gap: 8px;
}
.compare-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px; }
.btn-clear-all { background: transparent; color: var(--negative); border: 1px solid var(--negative); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; font-weight: 600; transition: 0.15s; }
.btn-clear-all:hover { background: rgba(244,63,94,0.08); }
.compare-tags { display: flex; flex-direction: column; gap: 5px; }
.compare-tag { display: flex; justify-content: space-between; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border); padding: 5px 11px; border-radius: 5px; font-size: 13px; }
.remove-tag-btn { color: var(--text-muted); cursor: pointer; font-weight: 700; padding: 0 4px; transition: 0.15s; }
.remove-tag-btn:hover { color: var(--negative); transform: scale(1.2); }

/* ── INPUTS ── */
.filter-input {
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-primary); padding: 9px 14px; border-radius: var(--radius-sm);
    outline: none; transition: border-color 0.2s; width: 100%; font-size: 14px;
}
.filter-input:focus { border-color: var(--accent); }
.input-wrapper { position: relative; display: flex; flex: 1; align-items: center; width: 100%; }
.clear-search-btn { position: absolute; right: 13px; color: var(--text-muted); cursor: pointer; font-weight: 700; font-size: 16px; display: none; transition: color 0.2s; user-select: none; z-index: 10; }
.clear-search-btn:hover { color: var(--negative); }
/* En .input-wrapper (flex con align-items:center) la ✕ se centra sola. En
   .autocomplete-wrapper NO, porque no es flex: sin un `top` explícito el
   absolute la deja en su posición estática, o sea DEBAJO del input y encima de
   la lista de sugerencias. Acá se la centra a mano. El wrapper mide lo mismo
   que el input (la lista es absolute y no suma alto), así que 50% es el medio. */
.autocomplete-wrapper .clear-search-btn { top: 50%; transform: translateY(-50%); }
/* Los formularios de transacción le ponen margin-bottom a sus inputs. Cuando el
   input está dentro de un .autocomplete-wrapper, ese margen hace que el wrapper
   mida 13px MÁS que el campo, y entonces el 50% de arriba cae por debajo del
   centro real del input (la ✕ quedaba corrida hacia abajo). El margen se pasa al
   wrapper: el espaciado visual queda idéntico y el wrapper mide exactamente lo
   mismo que el campo. */
#transactionForm .autocomplete-wrapper input,
#fciTransactionForm .autocomplete-wrapper input { margin-bottom: 0; }
#transactionForm .autocomplete-wrapper,
#fciTransactionForm .autocomplete-wrapper { margin-bottom: 13px; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }

/* ── VIEW TOGGLE PILL ── */
.view-toggle { display: flex; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.toggle-btn { background: transparent; border: none; color: var(--text-secondary); padding: 6px 14px; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s; }
.toggle-btn.active { background: var(--accent); color: #fff; }
.toggle-btn:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.05); }
/* Fila de filtros del gráfico de evolución: "Comparar con" a la izquierda y
   "Período" a la derecha, aprovechando el ancho libre en desktop. */
.chart-filtros-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-filtro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chart-filtro-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
/* Todos estos grupos envuelven. Sin esto, cada botón que se agrega a una fila
   que "entraba justo" empuja al último fuera de la pantalla en celular, sin
   scroll y sin forma de tocarlo — pasó con benchmarks (4→6) y con los tipos de
   dólar (7 botones). */
#grupoRangoGrafico, #grupoBenchmark, #grupoRangoDolar, #grupoDolarTipos { flex-wrap: wrap; }
#grupoRangoGrafico .toggle-btn { padding: 6px 11px; }
@media (max-width: 768px) {
    /* En mobile no entran las dos en el mismo renglón: una debajo de la otra. */
    .chart-filtros-row { flex-direction: column; align-items: stretch; }
    .chart-filtro { justify-content: space-between; }
    #grupoRangoGrafico, #grupoBenchmark,
    #grupoRangoDolar, #grupoDolarTipos { width: 100%; justify-content: space-between; }
    #grupoRangoGrafico .toggle-btn, #grupoBenchmark .toggle-btn,
    #grupoRangoDolar .toggle-btn, #grupoDolarTipos .toggle-btn { padding: 6px 9px; font-size: 12px; flex: 1 1 auto; }
}

/* ── Solapa Ajustes (PWA / ayuda) ── */
.ajustes-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px; }
.ajustes-nota { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 10px 0 0; }

/* ── Guía rápida ── */
/* Dos columnas en pantalla ancha, una en celular. El nombre de la solapa va
   arriba en chico para que se pueda barrer con la vista sin leer todo. */
.guia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.guia-item p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 3px 0 0; }
.guia-tab {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--accent);
}
.guia-titulo {
    font-size: 14px; color: var(--text-primary); margin: 22px 0 6px;
    padding-top: 16px; border-top: 1px solid var(--border);
}
/* Las cuatro señales: etiqueta a la izquierda y descripción a la derecha. */
.guia-senales { display: flex; flex-direction: column; gap: 7px; }
.guia-senales > div { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.guia-senales b { color: var(--text-primary); min-width: 92px; flex-shrink: 0; }
.guia-senales span { color: var(--text-secondary); line-height: 1.45; }

.guia-privacidad {
    background: rgba(79,114,255,0.06); border: 1px solid rgba(79,114,255,0.25);
    border-radius: var(--radius-sm); padding: 14px 16px;
}
.guia-privacidad p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.guia-privacidad p:last-child { margin-bottom: 0; }
.guia-privacidad b { color: var(--text-primary); }
/* La excepción se separa: es lo que NO está cifrado y no puede pasar inadvertido. */
.guia-nota {
    border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 12px !important;
    font-size: 12.5px !important;
}

@media (max-width: 640px) {
    .guia-senales > div { flex-direction: column; gap: 1px; }
    .guia-senales b { min-width: 0; }
}
.ajustes-ok { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #22c55e; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; font-weight: 600; }
.ajustes-ios, .ajustes-manual { font-size: 13px; color: var(--text-primary); line-height: 1.5; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.ajustes-ios b, .ajustes-manual b { color: var(--text-primary); }

/* ── Modal de cuenta / sincronización cifrada ── */
.cuenta-texto { font-size: 13.5px; color: var(--text-primary); line-height: 1.55; margin-bottom: 12px; }
.cuenta-nota { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 10px 0; }
.cuenta-error { font-size: 12px; color: #f43f5e; min-height: 16px; margin: 6px 0; }
.cuenta-input { width: 100%; box-sizing: border-box; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); padding: 10px 12px; font-size: 13px; margin-bottom: 10px; font-family: inherit; }
.cuenta-ancho { width: 100%; margin-top: 8px; }
.cuenta-estado-ok { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #22c55e; border-radius: var(--radius-sm); padding: 10px; text-align: center; font-weight: 600; font-size: 13px; }
.cuenta-google { display: flex; justify-content: center; margin-top: 14px; min-height: 44px; }
.cuenta-alternativa { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.cuenta-alternativa a { color: var(--text-secondary); text-decoration: underline; }
.cuenta-alternativa a:hover { color: var(--accent); }
.cuenta-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); margin: 12px 0; cursor: pointer; }
/* Las 24 palabras: numeradas y en grilla, para poder copiarlas a papel sin
   perder el orden (el orden importa: es la clave). */
.cuenta-palabras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin: 12px 0; }
.cuenta-palabra { font-size: 12.5px; color: var(--text-primary); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; display: flex; gap: 6px; align-items: baseline; }
.cuenta-palabra i { font-style: normal; font-size: 9.5px; color: var(--text-muted); min-width: 14px; text-align: right; }
@media (max-width: 480px) { .cuenta-palabras { grid-template-columns: repeat(2, 1fr); } }

/* ── Leyenda propia de las tortas de composición ──
   La leyenda nativa de Chart.js se desbordaba del recuadro con 10+ activos
   (se cortaba en una segunda columna) y comía el ancho del anillo. Esta es
   HTML: envuelve, scrollea si hace falta y muestra el % de cada activo, así
   las porciones chicas no necesitan etiqueta encima del gráfico. */
.pie-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 12px; max-height: 150px; overflow-y: auto; padding-right: 4px; }
.pie-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-secondary); flex: 1 1 calc(50% - 14px); min-width: 150px; }
.pie-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.pie-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-legend-pct { margin-left: auto; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .pie-legend-item { flex: 1 1 100%; min-width: 0; }
    .pie-legend { max-height: 132px; }
}

/* ── CHECKBOX COMPARADOR ── */
.compare-cb {
    appearance: none; background: var(--bg-input); margin: 0; color: currentColor;
    width: 1.15em; height: 1.15em; border: 1px solid var(--border);
    border-radius: 0.15em; display: grid; place-content: center; cursor: pointer;
}
.compare-cb::before {
    content: ""; width: 0.65em; height: 0.65em; transform: scale(0);
    transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--accent);
    background: var(--accent); transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.compare-cb:checked::before { transform: scale(1); }

/* ── MENÚ MÓVIL ── */
.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--text-primary); font-size: 26px; cursor: pointer; padding: 0 4px; transition: color 0.2s; }
.mobile-menu-btn:hover { color: var(--accent); }

.menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; }
.menu-overlay.open { display: block; }

body.no-scroll { overflow: hidden !important; }

/* ── ALERTAS ── */
#alertBadge { display: flex; }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── MERCADO: tipografía compacta uniforme en todas las sub-solapas (referencia: Bonos) ── */
#marketView .mercado-subview table {
    font-size: 12px;
    white-space: nowrap;
}

/* ── BONOS ── */
.bonos-filter-btn { cursor: pointer; }
.bonos-filter-btn.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }

/* ── CALENDARIO ── */
.cal-grid-head {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    margin-bottom: 4px; text-align: center;
    font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
    min-height: 84px; background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 6px; padding: 5px; overflow: hidden; transition: background 0.15s, border-color 0.15s;
}
.cal-cell.cal-has-events { cursor: pointer; }
.cal-cell.cal-has-events:hover { border-color: var(--accent); }

/* ── RESPONSIVE TABLET (769–1024px) ──
   El layout de escritorio funciona, solo compactamos un poco y garantizamos
   que las secciones nuevas (análisis, detalle RF) respiren bien. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body { padding: 14px; }
    .title { font-size: 34px; }
    .dashboard-cards { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    /* Las tarjetas de señales del scanner/análisis: 2 por fila en vez de 4
       apretadas. */
    #scannerDetailContent > div[style*="flex-wrap"] > div,
    #carteraAnalisisMount .ca-signals > div { min-width: 45% !important; }
}

/* ── RESPONSIVE MÓVIL ── */
@media screen and (max-width: 768px) {
    body { padding: 10px; padding-bottom: 80px; }

    /* Los tooltips (230px fijos) no deben desbordar en pantallas chicas. El
       recorte horizontal global vive en .container (ver arriba). */
    .tooltip .tooltiptext { max-width: 78vw; }

    /* Calendario en mobile: celdas compactas; el detalle completo del día se
       ve tocando la celda (panel de abajo), así que los chips solo marcan. */
    .cal-grid, .cal-grid-head { gap: 2px; }
    .cal-cell { min-height: 56px; padding: 3px; }
    .cal-cell .cal-chip strong { display: none; }
    .cal-cell .cal-chip { padding: 1px 3px; justify-content: center; }

    .mobile-menu-btn { display: block; }
    .header-top { flex-direction: column; gap: 12px; align-items: stretch; }
    .header-top > div { justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 10px; }
    .title { font-size: 28px; }

    /* La barra de moneda se reubica dentro del menú hamburguesa (ver
       placeCurrencyToggle en app.js). Dentro del drawer ocupa todo el ancho,
       arriba de las solapas, con un separador. */
    .currency-toggle.in-menu {
        width: 100%; border: none; border-bottom: 1px solid var(--border);
        border-radius: 0; justify-content: center; gap: 8px;
        padding: 16px 18px; background: var(--bg-elevated); flex-wrap: wrap;
    }
    .currency-toggle.in-menu #mepRateText { flex-basis: 100%; text-align: center; font-size: 11px; }

    .nav-tabs {
        position: fixed; top: 0; left: -300px; width: 240px; height: 100vh;
        background: var(--bg-surface); flex-direction: column; justify-content: flex-start;
        padding-top: 60px; z-index: 1000; transition: 0.3s ease-in-out;
        border-right: 1px solid var(--border); gap: 0;
        box-shadow: var(--shadow-lg); overflow-y: auto; padding-bottom: 20px;
    }
    .nav-tabs.open { left: 0; }
    .tab-btn {
        flex: none !important; width: 100% !important; border-radius: 0 !important;
        padding: 14px 18px !important; text-align: left !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: 13px !important; height: auto !important;
    }

    .time-filters { display: flex; flex-wrap: nowrap !important; overflow-x: auto; width: 100%; padding-bottom: 8px; justify-content: flex-start !important; }
    .time-filters::-webkit-scrollbar { height: 3px; }
    .time-filters::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
    .time-btn { flex: 0 0 auto; padding: 5px 11px; font-size: 12px; }

    .scanner-controls { flex-direction: column !important; gap: 10px !important; }
    .scanner-controls > div:last-child { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 7px; order: 1; }
    .scanner-controls .btn-action { min-width: 0 !important; height: 40px !important; font-size: 11px !important; padding: 0 !important; }
    .scanner-controls .input-wrapper { order: 2; width: 100% !important; }
    .scanner-controls .input-wrapper input { height: 44px !important; }

    #scannerDetailContent > div[style*="display: grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    #scannerDetailContent > div[style*="display: flex"] { flex-direction: column !important; gap: 14px !important; }
    #scannerDetailContent > div[style*="display: flex"] > div { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
    #scannerDetailContent .tradingview-widget-container iframe { min-height: 480px !important; }

    .chart-controls { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 5px !important; width: 100%; margin-bottom: 10px; }
    .custom-checkbox { flex: 1 1 48%; justify-content: center; font-size: 11px; }
    .checkmark { padding: 6px 10px !important; width: 100%; text-align: center; box-sizing: border-box; }
    .chart-select { width: 100% !important; max-width: 100%; box-sizing: border-box; margin-top: 5px; }

    .charts-grid { display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; }
    .chart-box { padding: 12px 10px; width: 100%; box-sizing: border-box; overflow: hidden; }
    .chart-wrapper { height: 300px; position: relative; width: 100%; }
    .chart-wrapper.tall { height: 320px; }

    .dashboard-cards { grid-template-columns: 1fr; gap: 13px; }

    /* Filas etiqueta/valor de las cards de patrimonio: el valor (montos + %)
       no debe partirse a mitad de número ni descarrilar la fila. */
    .card-details .detail-row { gap: 10px; align-items: baseline; line-height: 1.4; }
    .card-details .detail-row > span:last-child { white-space: nowrap; text-align: right; }

    .table-header { flex-direction: column; align-items: stretch; gap: 13px; }
    .table-header > div { width: 100% !important; justify-content: center; flex-direction: column; gap: 8px; }
    .input-wrapper { width: 100% !important; }

    .table-container { width: 100%; overflow: hidden !important; }
    .table-container table { display: block; width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; border-collapse: separate !important; border-spacing: 0; }
    .table-container table th, .table-container table td { white-space: nowrap !important; }

    .table-container table th:first-child,
    .table-container table td:first-child {
        position: sticky !important; left: 0 !important;
        background-color: var(--bg-surface) !important; z-index: 10 !important;
        box-shadow: 4px 0 8px rgba(0,0,0,0.2); border-right: 1px solid var(--border);
        white-space: normal !important; min-width: 100px; max-width: 120px;
    }

    #usaScannerView .table-container table th:first-child,
    #usaScannerView .table-container table td:first-child {
        min-width: 35px !important; width: 35px !important; box-shadow: none !important; border-right: none !important;
    }
    #usaScannerView .table-container table th:nth-child(2),
    #usaScannerView .table-container table td:nth-child(2) {
        position: sticky !important; left: 35px !important;
        background-color: var(--bg-surface) !important; z-index: 10 !important;
        box-shadow: 4px 0 8px rgba(0,0,0,0.2) !important; border-right: 1px solid var(--border) !important;
        white-space: normal !important; min-width: 90px; max-width: 110px;
    }

    .table-container table thead th:first-child,
    #usaScannerView .table-container table thead th:nth-child(2) { z-index: 20 !important; }
}

/* ── Panel de filtros del Scanner ──────────────────────────────────────── */
/* Los controles del panel son más chicos que los del resto de la app: son
   muchos y conviven en una sola fila que envuelve. */
.scanner-flabel {
    display: block; font-size: 11px; color: var(--text-secondary);
    margin-bottom: 4px; white-space: nowrap;
}
.scanner-fctrl { height: 35px; padding: 5px 8px; font-size: 13px; }
select.scanner-fctrl { min-width: 120px; }

.scanner-fcheck {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    cursor: pointer; height: 35px; white-space: nowrap;
}
.scanner-fcheck input { cursor: pointer; }

/* Búsquedas rápidas: chips clickeables. Se distinguen del botón de acción
   (lleno, color de acento) por ser de contorno — no son la acción principal,
   son atajos. */
.scanner-preset {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); padding: 7px 12px;
    border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.scanner-preset:hover { border-color: var(--accent); color: var(--text-primary); }
.scanner-preset.activo {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Criterio activo. El × queda pegado al texto para que se lea como una unidad. */
.scanner-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text-primary);
    padding: 4px 6px 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.scanner-chip button {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 15px; line-height: 1;
    padding: 0 4px; border-radius: 50%; transition: color 0.15s;
}
.scanner-chip button:hover { color: var(--negative); }

/* En celular el panel se apila: los controles a ancho completo se tocan mejor
   que ocho cajitas de 72px en dos columnas. */
@media (max-width: 640px) {
    .scanner-fctrl, select.scanner-fctrl { width: 100% !important; min-width: 0; }
    #usa_scannerFiltersPanel > div > div,
    #arg_scannerFiltersPanel > div > div { gap: 10px !important; }
    .scanner-preset { font-size: 11px; padding: 6px 10px; }
}


/* ==========================================================================
   ACCESIBILIDAD
   Agregado al final a propósito: son reglas transversales que tienen que
   ganarle a lo anterior sin andar tocando cada componente.
   ========================================================================== */

/* ── Foco visible para teclado (1.3) ──────────────────────────────────────
   Antes había 3 reglas :focus en todo el archivo y ninguna :focus-visible:
   navegar con Tab por 8 solapas y tablas de cientos de filas era imposible
   de seguir, no se veía dónde estabas parado.

   :focus-visible en vez de :focus a propósito: el navegador lo aplica solo
   cuando el foco viene del teclado, así que el anillo NO aparece al hacer
   clic con el mouse. Es lo que evita que se vea "roto" en uso normal. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
/* Quita el subrayado punteado propio de Firefox, que se superpone al anillo. */
::-moz-focus-inner { border: 0; }

/* El switch de moneda esconde su input real (opacity:0) y muestra el .slider.
   Sin esto, al llegar con Tab el foco cae en algo invisible y no se ve nada. */
.switch input:focus-visible + .slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Zoom de iOS al enfocar un campo (1.1) ────────────────────────────────
   Safari en iPhone hace zoom automático cuando enfocás un input de menos de
   16px, y después no vuelve solo. Eso era lo que el viejo user-scalable=no
   tapaba —a costa de bloquear el zoom de toda la app—.
   Con 16px el zoom no se dispara y el usuario conserva el pellizco.
   Solo en pantallas chicas: en escritorio 13px se ve mejor. */
@media (max-width: 768px) {
    #transactionForm input, #transactionForm select,
    #fciTransactionForm input, #fciTransactionForm select,
    .cuenta-input, .filter-input, .scanner-fctrl,
    input[type="text"], input[type="number"], input[type="date"],
    input[type="search"], input[type="password"], select, textarea {
        font-size: 16px;
    }
}

/* ── Movimiento reducido (1.4) ────────────────────────────────────────────
   El sistema operativo expone esta preferencia cuando alguien tiene
   sensibilidad vestibular (mareo con el movimiento en pantalla). Había 34
   transiciones en la hoja y ninguna la respetaba.

   No se anula todo con display:none ni se rompe nada: las transiciones pasan
   a durar prácticamente cero, así que los estados finales (hover, activo,
   modal abierto) siguen siendo exactamente los mismos. Solo desaparece el
   recorrido entre uno y otro. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   1.5 — JERARQUÍA DEL DASHBOARD
   Las tres tarjetas tenían el mismo peso visual, pero no tienen la misma
   importancia: la enorme mayoría de las visitas es para ver cómo viene la
   cartera HOY. "Patrimonio Activo" pasa a ser la principal y las otras dos
   quedan de apoyo, sin sacarles información a ninguna.
   ========================================================================== */

/* El número que la gente viene a ver. Sube de 15px a 24px y toma el color de
   acento: se lee de un vistazo sin tener que buscarlo entre las otras filas. */
.card-activa .highlight-actual {
    font-size: 24px;
    line-height: 1.2;
    color: var(--accent);
    letter-spacing: -0.5px;
}
.card-activa .highlight-actual > span:first-child {
    /* La etiqueta "Actual:" no necesita crecer con el número. */
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0;
    align-self: center;
}
/* Rendimiento: segundo en orden de importancia, apenas por encima del resto. */
.card-activa .highlight { font-size: 16px; }
/* La franja de color izquierda, más marcada solo en la principal. */
.card-activa { border-left-width: 4px; }

/* Las secundarias bajan medio tono. No se achica la letra de los importes
   (siguen teniendo que leerse), solo se atenúan los rótulos. */
.card-cerrada h3, .card-total h3 { opacity: 0.75; }

/* ==========================================================================
   1.6 — PLACEHOLDERS DE CARGA
   Antes, durante el primer segundo se veían "$0,00" en todos lados: una
   cartera en cero es la peor lectura errónea posible en una app de plata.
   Mientras <body> tenga .cargando-datos, los importes se tapan con una barra
   gris que late. app.js saca la clase al terminar la primera carga.
   ========================================================================== */

.cargando-datos .card-details .detail-row > span:last-child,
.cargando-datos #mepRateText {
    /* El texto real sigue en el DOM (no se borra nada): se vuelve
       transparente y encima se dibuja la barra. Así, al sacar la clase, el
       valor ya está y no hay salto de layout. */
    color: transparent !important;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: skyline-latido 1.4s ease-in-out infinite;
    min-width: 68px;
}

@keyframes skyline-latido {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Quien pidió movimiento reducido ve la barra quieta, no un destello fijo. */
@media (prefers-reduced-motion: reduce) {
    .cargando-datos .card-details .detail-row > span:last-child,
    .cargando-datos #mepRateText { animation: none; background: var(--bg-input); }
}


/* ==========================================================================
   1.9 — MICRO-ANIMACIONES
   Las solapas ya tenían fadeIn (.view-section). Lo que faltaba es la señal de
   "esto se acaba de actualizar": con precios que refrescan solos, un número
   que cambia sin avisar pasa desapercibido.
   La duración la controla el bloque de prefers-reduced-motion de más arriba,
   así que quien pidió menos movimiento no ve nada de esto.
   ========================================================================== */

@keyframes skyline-destello {
    0%   { background-color: transparent; }
    18%  { background-color: var(--flash-color); }
    100% { background-color: transparent; }
}

.valor-cambio-sube, .valor-cambio-baja {
    animation: skyline-destello 1.1s ease-out;
    border-radius: 3px;
    /* El destello se pinta detrás del texto, sin moverlo ni un píxel. */
    box-decoration-break: clone;
}
.valor-cambio-sube { --flash-color: rgba(34, 197, 94, 0.22); }
.valor-cambio-baja { --flash-color: rgba(244, 63, 94, 0.22); }

/* Las tarjetas ya subían en hover; se le agrega la transición de sombra para
   que el movimiento no llegue "seco". */
.card { transition: transform 0.2s ease, box-shadow 0.2s ease; }