/* Analítica: gráficas propias en SVG/HTML, sin librerías. */
.an {
    /* Colores de series: orden fijo, validado para daltonismo (contraste por pares contiguos) */
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
    --s0: #98a2b3;          /* «Otros» y «General» */
    --seq-0: #eef4fd; --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;
    --grid: var(--line);
    --up: #12804A;
}
:root[data-theme="dark"] .an {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --s0: #5d6879;
    --seq-0: #18243a; --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #256abf; --seq-4: #2a78d6; --seq-5: #3987e5; --seq-6: #6da7ec; --seq-7: #9ec5f4;
    --up: #4CD38A;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.an-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.an-tabs button { height: 32px; }
.an-lock { display: inline-flex; opacity: .55; margin-left: 2px; }
.an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.an-filters .select select { max-width: 190px; }
.an-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.an-date { height: 36px; width: 150px; padding: 0 8px; font-size: 13px; }
.an-note { background: var(--accent-soft); color: var(--ink-2); border-radius: var(--r-item); padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }

.an-pane { display: grid; gap: 14px; }
.an-pane[hidden] { display: none; }
.an-grid { display: grid; gap: 14px; }
.an-grid-2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.an-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-grid-2b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 1180px) { .an-grid-2, .an-grid-2b { grid-template-columns: 1fr; } .an-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .an-grid-3 { grid-template-columns: 1fr; } }

.an-card { padding: 14px 16px 16px; min-width: 0; }
.an-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.an-card-head h2 { font-size: 16px; font-weight: 700; }
.an-card-head p { color: var(--muted); font-size: 13px; margin-top: 3px; max-width: 70ch; }
.an-card-tools { display: flex; gap: 6px; flex: none; }
.an-tool { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.an-tool:hover { color: var(--ink); border-color: var(--line-2); }
.an-tool.is-on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.an-tool[aria-disabled="true"] { opacity: .55; }
.an-body { position: relative; min-height: 60px; }
.an-body.is-loading { opacity: .5; transition: opacity .2s; }
.an-empty { color: var(--muted); padding: 22px 4px; }

/* KPIs */
.an-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.an-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; }
.an-kpi span { color: var(--muted); font-size: 13px; font-weight: 500; }
.an-kpi strong { display: block; font-size: 26px; font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (max-width: 900px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Gráficas SVG */
.an-svg { display: block; width: 100%; overflow: visible; }
.an-svg text { fill: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.an-svg .an-grid-line { stroke: var(--grid); stroke-width: 1; }
.an-svg .an-axis { stroke: var(--line-2); stroke-width: 1; }
.an-svg .an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-svg .an-area { opacity: .12; }
.an-svg .an-guide { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.an-svg .an-dot { stroke: var(--panel); stroke-width: 2; }
.an-svg .an-hit { fill: transparent; }
.an-svg .an-bar-r:hover, .an-svg .an-col:hover rect { filter: brightness(1.08); }
.an-svg .an-endlabel { fill: var(--ink-2); font-weight: 600; font-size: 12px; }

.an-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

.an-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; box-shadow: var(--shadow-pop);
          padding: 8px 10px; font-size: 12.5px; min-width: 120px; max-width: 260px; color: var(--ink); }
.an-tip b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.an-tip div { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.an-tip div span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tip div em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }

/* Barras horizontales (HTML) */
.an-hbars { display: grid; gap: 6px; }
.an-hrow { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; border-radius: 6px; }
.an-hrow:hover { background: var(--hover); }
.an-hrow > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); padding-left: 2px; }
.an-hrow .an-track { height: 12px; border-radius: 0 4px 4px 0; background: transparent; position: relative; }
.an-hrow .an-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; }
.an-hrow em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); padding-right: 2px; }
.an-hrow.is-click { cursor: pointer; }

/* Dona */
.an-donut { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.an-donut svg { width: 150px; height: 150px; }
.an-donut svg path { stroke: var(--panel); stroke-width: 2; }
.an-donut .an-legend { display: grid; gap: 6px; margin: 0; }
.an-donut .an-legend span { justify-content: space-between; }
.an-donut .an-legend b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.an-donut-c { fill: var(--ink) !important; font-size: 17px !important; font-weight: 700; }
@media (max-width: 420px) { .an-donut { grid-template-columns: 1fr; justify-items: center; } }

/* Mapa de calor */
.an-heat { overflow-x: auto; }
.an-heat table { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 12.5px; }
.an-heat th { font-weight: 600; color: var(--muted); text-align: left; padding: 4px 6px; white-space: nowrap; }
.an-heat thead th { text-align: center; font-size: 11.5px; }
.an-heat td { text-align: center; border-radius: 5px; padding: 7px 4px; font-variant-numeric: tabular-nums; min-width: 46px; }

/* Nube */
.an-cloud { min-height: 300px; }
.an-cloud-word { position: absolute; white-space: nowrap; line-height: 1; cursor: pointer; font-weight: 700; font-stretch: 105%; border-radius: 4px; padding: 0 2px; transform: translate(-50%, -50%); background: none; border: 0; color: var(--ink); }
.an-cloud-word:hover, .an-cloud-word:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.an-cloud-word.w1 { color: var(--ink); } .an-cloud-word.w2 { color: var(--ink-2); } .an-cloud-word.w3 { color: var(--muted); font-weight: 600; }

/* En alza */
.an-rise { display: grid; gap: 2px; }
.an-rise-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 62px; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; text-align: left; background: none; border: 0; color: inherit; width: 100%; }
.an-rise-row:hover { background: var(--hover); }
.an-rise-row strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.an-rise-row small { color: var(--muted); font-size: 12px; }
.an-rise-row svg { width: 90px; height: 26px; }
.an-rise-row svg polyline { fill: none; stroke: var(--s1); stroke-width: 1.6; }
.an-rise-row svg polygon { fill: var(--s1); opacity: .12; }
.an-rise-g { font-weight: 700; color: var(--up); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* Tabla de datos */
.an-table-wrap { overflow: auto; max-height: 420px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th, .an-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.an-table th:first-child, .an-table td:first-child { text-align: left; }
.an-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }

/* Explorador */
.an-terms { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.an-term-box { position: relative; flex: 1 1 360px; min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--panel); }
.an-term-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.an-term-chips { display: contents; }
.an-term-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.an-term-chip i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.an-term-chip button { border: 0; background: none; color: var(--muted); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; }
.an-term-chip button:hover { background: var(--hover); color: var(--ink); }
.an-term-input { flex: 1; min-width: 160px; border: 0; outline: none; background: none; height: 32px; font-size: 14px; color: var(--ink); }
.an-term-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.an-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; }
.an-suggest button { display: flex; justify-content: space-between; width: 100%; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: 7px; text-align: left; color: var(--ink); cursor: pointer; font-size: 13.5px; }
.an-suggest button:hover, .an-suggest button.is-on { background: var(--hover); }
.an-suggest small { color: var(--muted); font-variant-numeric: tabular-nums; }
.an-hint { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.an-ex { border: 0; background: var(--panel-2); color: var(--accent); border-radius: 6px; padding: 3px 8px; font-size: 12.5px; cursor: pointer; margin: 2px 2px 0 0; }
.an-ex:hover { background: var(--accent-soft); }
.an-term-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.an-term-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.an-term-card h3 i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.an-term-card .an-tc-total { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.an-term-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.an-term-card .btn { margin-top: 12px; }
.an-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 1000px) { .an-detail { grid-template-columns: 1fr; } }
.an-heads { display: grid; gap: 2px; }
.an-heads a { display: grid; gap: 2px; padding: 8px 6px; border-radius: 8px; }
.an-heads a:hover { background: var(--hover); }
.an-heads a strong { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.an-heads a small { color: var(--muted); font-size: 12px; }
.an-cowords { display: flex; flex-wrap: wrap; gap: 6px; }
.an-cowords button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.an-cowords button:hover { border-color: var(--accent); color: var(--accent); }
.an-cowords button small { color: var(--faint); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Constructor */
.an-build { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.an-field { display: grid; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; min-width: 170px; }
.an-field[hidden] { display: none; }
.an-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.an-field .select select { width: 100%; height: 40px; font-size: 13.5px; color: var(--ink); }
.an-field .input { height: 40px; }

/* Acceso para cuentas */
.an-login { display: flex; gap: 16px; padding: 22px; align-items: flex-start; }
.an-login-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.an-login h2 { font-size: 18px; margin-bottom: 6px; }
.an-login p { color: var(--muted); max-width: 70ch; margin-bottom: 10px; }
.an-login .an-login-free { color: var(--ink-2); font-weight: 600; }

@media (max-width: 700px) {
    .an-bar { align-items: stretch; }
    .an-tabs, .an-range { overflow-x: auto; max-width: 100%; }
    .an-filters .select { flex: 1 1 140px; }
    .an-filters .select select { max-width: none; width: 100%; }
    .an-card-head { flex-direction: column; }
    .an-rise-row { grid-template-columns: minmax(0, 1fr) 70px 56px; }
    .an-rise-row svg { width: 70px; }
}