/* SmartDecisions demo — light corporate theme aligned with BearSoft identity
 * (navy + brown paw + cream). Used across login, home, excel and
 * routes pages. */

:root {
    /* Same palette as bearsoft.com.bo: cool blues and a teal accent. The
       previous creams and browns did not match the brand. */
    --bg:              #f7f9fc;
    --bg-alt:          #eef3fa;
    --panel:           #ffffff;
    --panel-elevated:  #eef3fa;
    --border:          #dbe4f0;
    --border-strong:   #c2d2e8;
    --text:            #152441;
    --text-strong:     #0d1a31;
    --muted:           #6b7590;

    --accent:          #2f6fb5;   /* azul medio: enlaces y botones */
    --accent-strong:   #255a94;
    --accent-2:        #12796f;   /* verde-azulado: acento secundario */
    --accent-2-strong: #0d5c55;
    --accent-3:        #dceafa;   /* light blue for soft backgrounds */

    --success:         #24693c;
    --danger:          #b4373a;
    --warning:         #a06a12;
    --caution:         #c8661a;   /* naranja: cancelar, volver atrás */

    --radius:          14px;
    --radius-sm:       8px;
    --max-width:       1140px;
    --font:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --shadow-lg:       0 10px 40px rgba(13, 30, 76, 0.12);
    --shadow-sm:       0 2px 8px rgba(13, 30, 76, 0.06);

    /* Three sizes for everything that is not a title or a figure (Rafael,
       14-oct: text the same size everywhere; what matters goes bold, not
       bigger). Running text and controls; table cells; small labels. */
    --fs-text:         0.875rem;
    --fs-table:        0.8125rem;
    --fs-label:        0.75rem;

    /* One gap between blocks (cards, panels, charts), across and down
       (Rafael, 14-oct: the same separation everywhere). */
    --gap-block:       1.25rem;
}

/* `hidden` hides, always. The attribute is only a default display:none and
   any rule that sets `display` (.form-stack, .pager, a grid) silently beat
   it: the prompt form never closed on Cancel. One rule for every page. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { color: var(--accent-2); }

code {
    background: #f1ecd9;
    border: 1px solid var(--border);
    color: var(--accent-2-strong);
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    font-size: 0.88em;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ============ Header / Nav ============ */
.demo-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.demo-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
}
.brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
}
.brand-text { font-size: 1.15rem; letter-spacing: -0.01em; }
.accent { color: var(--accent-2); }

.demo-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: var(--fs-text);
    color: var(--muted);
}
.demo-nav-actions .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-weight: 600;
}

/* ============ Buttons ============ */
.btn {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
    font-family: inherit;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    transform: translateY(-1px);
}
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border-color: var(--border-strong);
}
.btn-ghost:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-alt);
}
.btn-secondary {
    background: var(--accent-2);
    color: #ffffff;
    border-color: var(--accent-2);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--accent-2-strong);
    border-color: var(--accent-2-strong);
}
.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
    background: rgba(192, 57, 43, 0.08);
}
.btn-small { padding: 0.5rem 0.95rem; font-size: 0.88rem; }

/* Buttons by function, the same in every page (Rafael, 21-oct): green saves,
   orange cancels, red deletes; blue (.btn-primary) starts something new.
   The icon goes before the label (data-btn-icon, see SD_UI.decorateButtons). */
.btn[data-btn-icon] { display: inline-flex; align-items: center; gap: 0.45rem; }
.btn .sd-icon { width: 1.05em; height: 1.05em; flex: none; }
.btn-save { background: var(--success); color: #fff; border-color: var(--success); }
.btn-save:hover:not(:disabled) { filter: brightness(0.9); transform: translateY(-1px); }
.btn-cancel { background: transparent; color: var(--caution); border-color: var(--caution); }
.btn-cancel:hover:not(:disabled) { background: rgba(200, 102, 26, 0.08); }
.btn-delete { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-delete:hover:not(:disabled) { filter: brightness(0.9); }

/* ============ Layout: page + cards ============ */
main { min-height: calc(100vh - 64px); padding: 2.5rem 0; background: var(--bg); }

.page-title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: -0.015em;
    color: var(--text);
}
.page-subtitle { color: var(--muted); margin: 0 0 2rem; }
/* Plain paragraphs and list items in the content read at the text size;
   any class that sets its own size still wins. */
main p, main li { font-size: var(--fs-text); }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: var(--shadow-sm);
}
.card-elevated { background: var(--panel-elevated); box-shadow: var(--shadow-lg); }
/* Cards stacked one under the other keep the same gap as everything else:
   they used to touch (Parámetros, among others). */
.container > :is(.card, .routes-section) + :is(.card, .routes-section),
.routes-section > .day-summary + .card { margin-top: var(--gap-block); }
/* A section that only holds a chart has no title to set apart: it sits at
   the block gap, not at the 2.5rem of a titled section. */
.step-section:has(> .chart-card:first-child) { margin-top: var(--gap-block); }
/* The same between the blocks an analysis stacks inside its section: a chart
   right after a grid of charts or a stack of cards used to touch it. Not
   inside a container that already spaces its children with a gap, so that
   gap is never doubled. */
:not(.card-stack, .chart-grid, .split-layout, .segment-layout, .metric-grid, .metric-row,
     .sd-grid, .sd-tiles, .step-grid, .card-grid, .routes-layout, .routes-main,
     .routes-sidebar, .day-summary) >
    :is(.chart-grid, .card-stack, .split-layout, .segment-layout, .chart-card, .metric-grid, .table-wrapper, .card, div:not([class])) +
    :is(.chart-grid, .card-stack, .split-layout, .segment-layout, .chart-card, .table-wrapper, .card) { margin-top: var(--gap-block); }
.card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--text); }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-text); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-block);
}
@media (max-width: 1000px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .card-grid { grid-template-columns: 1fr; }
}

.module-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--border);
    transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.module-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-2);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.module-icon { font-size: 2rem; }
.module-card h3 { margin: 0; color: var(--text); }
.module-card p { color: var(--muted); margin: 0; font-size: var(--fs-text); }
.module-tag {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-2);
    font-weight: 700;
}

/* ============ Forms ============ */
.form-card {
    max-width: 420px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}
.form-stack { display: grid; gap: 0.9rem; }
.form-stack label {
    display: grid;
    gap: 0.35rem;
    font-size: var(--fs-text);
    color: var(--muted);
    font-weight: 600;
}
.form-stack input,
.form-stack textarea,
.form-stack select {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-stack input:focus,
.form-stack textarea:focus,
.form-stack select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13, 30, 76, 0.10);
}
/* A password field with the eye that shows what was typed (login, Mi cuenta). */
.sd-reveal { position: relative; display: block; }
.sd-reveal input { width: 100%; }
.form-stack .sd-reveal input { padding-right: 3rem; }
.sd-reveal-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: inline-flex;
    padding: 0.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
    cursor: pointer;
}
.sd-reveal-toggle:hover { color: var(--accent); }
.sd-reveal-toggle .sd-icon { width: 20px; height: 20px; }
.form-note { font-size: var(--fs-text); color: var(--muted); min-height: 1.2em; margin: 0; }
.form-note.error { color: var(--danger); font-weight: 600; }
.form-note.success { color: var(--success); font-weight: 600; }

/* ============ Upload zone (global, reused across modules) ============ */
.upload-zone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.4rem 1rem;
    margin: 0.6rem 0 1rem;
    text-align: center;
    background: var(--bg-alt);
    transition: border-color 0.18s ease, background 0.18s ease;
    cursor: pointer;
}
.upload-zone.dragover {
    border-color: var(--accent);
    background: #f1ecd9;
}
.upload-hint { color: var(--muted); margin: 0; font-size: var(--fs-text); }
.upload-hint a { font-weight: 700; }
.file-chip {
    margin: 0.7rem auto 0;
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    color: var(--text);
    font-size: var(--fs-text);
    font-weight: 600;
}

/* ============ Toasts ============ */
.sd-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 360px;
}
.sd-toast {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    color: var(--text);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    box-shadow: var(--shadow-lg);
    animation: sd-toast-in 0.2s ease;
}
.sd-toast-success { border-left-color: var(--success); }
.sd-toast-error { border-left-color: var(--danger); }
.sd-toast-info { border-left-color: var(--accent-2); }
.sd-toast-leaving { opacity: 0; transform: translateX(20px); transition: all 0.2s ease; }

@keyframes sd-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============ Footer ============ */
.demo-footer {
    border-top: 1px solid var(--border);
    padding: 1.4rem 0;
    color: var(--muted);
    font-size: var(--fs-text);
    text-align: center;
    background: var(--bg);
}
.demo-footer strong { color: var(--accent); }

/* ============ Responsive ============ */
@media (max-width: 720px) {
    .demo-nav-actions span:not(.user-chip) { display: none; }
    main { padding: 1.5rem 0; }
}

/* Session countdown chip, shared by every module page. */
.session-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: var(--fs-label);
    color: var(--muted);
    white-space: nowrap;
}
.session-chip.warning { color: var(--warning, #b8860b); border-color: var(--accent-3, #b8860b); }
@media (max-width: 900px) {
    .session-chip { display: none; }
}

/* --- "Tu actividad": what the account already has, above the modules ------ */
.activity-card { margin-bottom: 1.75rem; }

.activity-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.activity-head h2 { margin: 0; font-size: 1.15rem; }

.activity-meta { font-size: var(--fs-text); color: #5e6580; }

.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--gap-block);
}

.activity-tile {
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    background: #fbfcfe;
}

.tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .7rem;
}

.tile-head h3 { margin: 0; font-size: .95rem; }

.tile-when {
    font-size: var(--fs-label);
    color: #5e6580;
    white-space: nowrap;
}

.tile-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .28rem 0;
    border-bottom: 1px solid #eef1f7;
    font-size: var(--fs-text);
}

.tile-row:last-of-type { border-bottom: 0; }

.tile-label { color: #5e6580; }

.tile-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.tile-action {
    display: inline-block;
    margin-top: .75rem;
    font-size: var(--fs-text);
    font-weight: 600;
    text-decoration: none;
    color: #0d1e4c;
}

.tile-action:hover { text-decoration: underline; }

.activity-tile-empty { background: #fff; }

.tile-empty-text { margin: 0; font-size: var(--fs-text); color: #5e6580; }


/* --- Interpretación (capa de IA) ------------------------------------------ */
.ai-ask { white-space: nowrap; }

/* Interpretation panel.
   The selectors carry `.ai-answer` in front on purpose: `.card p` has
   specificity 0,1,1 and beat `.ai-text`, so in the modules whose container is
   a card —Quotes and Routes— the text took the card's size and color, and in
   the Commercial Analysis it did not. That is why the same note looked
   different depending on the screen. */
.ai-answer {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin: 1.25rem 0 0;
    padding: 1.1rem 1.25rem;
    background: #eef3fa;
    border: 1px solid #dbe4f0;
    border-left: 3px solid #2f6fb5;
    border-radius: 0 10px 10px 0;
}
/* `display: block` above beats the `hidden` attribute, and the panel showed
   as an empty box before anyone asked. */

.ai-answer .ai-text {
    margin: 0;
    font-size: var(--fs-text);
    line-height: 1.65;
    font-weight: 400;
    color: #152441;
    white-space: pre-wrap;
}

/* Nota al pie: información sobre la respuesta, no parte de ella. */
.ai-answer .ai-meta {
    display: block;
    margin: 1.75rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid #dbe4f0;
    font-size: var(--fs-label);
    line-height: 1.4;
    font-weight: 400;
    color: #8a93a8;
}

.ai-answer .ai-loading {
    font-size: var(--fs-text);
    color: #5e6580;
}

/* --- Section menu (Excel analyses, Rutas sections): shared by every module --- */
/* Four cards per row on desktop and the last row centred, so an odd count
   forms an inverted pyramid instead of leaving a hole at the end of a grid.
   Narrower screens fall to two columns and then one, still centred. */
.analysis-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-block);
    margin: 1rem 0;
}
/* Fixed basis and no grow: every card measures the same, so the shorter last
   row is narrower as a whole instead of stretching its cards. */
.analysis-menu .analysis-card { flex: 0 1 calc(20% - 0.8rem); }
@media (max-width: 1200px) {
    .analysis-menu .analysis-card { flex-basis: calc(25% - 0.75rem); }
}
@media (max-width: 900px) {
    .analysis-menu .analysis-card { flex-basis: calc(50% - 0.5rem); }
}
@media (max-width: 540px) {
    .analysis-menu .analysis-card { flex-basis: 100%; }
}
.analysis-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    text-align: left;
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--panel);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.analysis-card:hover:not([disabled]) { border-color: var(--accent); }
/* The chosen card stays marked while its panel is on screen (Rutas sections). */
.analysis-card.is-active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.analysis-card[disabled] { opacity: 0.55; cursor: not-allowed; }
.analysis-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.3rem;
    border-radius: 12px;
    background: var(--bg-alt);
    color: var(--accent);
    font-size: 1.4rem;
}
.analysis-card.is-active .analysis-icon { background: var(--accent); color: #ffffff; }
.analysis-title { font-weight: 700; color: var(--text-strong); }
.analysis-desc { font-size: var(--fs-text); color: var(--muted); line-height: 1.35; }
.analysis-soon {
    position: absolute; top: 0.6rem; right: 0.6rem;
    font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
    color: var(--accent-2); background: var(--bg-alt);
    padding: 0.15rem 0.45rem; border-radius: 999px;
}

/* ============ Tables (the only definition; every page loads base.css) ============ */
.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-table);
}
.data-table thead th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    background: var(--panel-elevated);
    color: var(--text-strong);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(90, 214, 194, 0.04); }
/* Money never wraps: "Bs 278.288,75" split across two lines reads as two
   different figures, and the column stops being scannable. */
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table.sortable thead th[data-sort] { cursor: pointer; user-select: none; }
.data-table.sortable thead th[data-sort]:hover { color: var(--text); }
.data-table.sortable thead th[data-sort].asc::after  { content: ' ▲'; color: var(--accent); }
.data-table.sortable thead th[data-sort].desc::after { content: ' ▼'; color: var(--accent); }

/* ============ Controls outside a styled form ============ */
/* A text box anywhere in the content looks like the others, not like the
   browser's default. :where() keeps it at zero specificity: any rule of a
   component (login, form-stack, period bar…) still wins. */
:where(main) :where(input:not([type]), input[type=text], input[type=search],
        input[type=number], input[type=email], input[type=date], select, textarea) {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-text);
    line-height: 1.4;
}
:where(main) :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 111, 181, 0.15);
}
/* A figure that is a problem, in any table. */
.text-bad { color: var(--danger); }

/* A checkbox with its label to the right, the same in every form. */
.checkbox, .form-stack label.checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-text); color: var(--muted); font-weight: 500; cursor: pointer; }

/* A label over its control. */
.field { display: grid; gap: 0.35rem; color: var(--muted); font-size: var(--fs-text); font-weight: 600; }
.field input { width: 22rem; max-width: 100%; }
/* A row of controls and buttons: aligned at the bottom, with air between
   them and above, so a button never sits against a table or a text box. */
.form-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.form-actions:first-child { margin-top: 0; }
.table-wrapper + .btn, .table-wrapper + button { margin-top: 1.25rem; }
/* And the table never starts right under a row of filters or buttons. */
:is(.field-row, .form-actions, .form-stack) ~ .table-wrapper { margin-top: 1.25rem; }
/* Controls side by side, like the exchange-rate simulator: same air between
   them as in a button row. */
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.field-row label { display: grid; gap: 0.35rem; color: var(--muted); font-size: var(--fs-text); font-weight: 600; }
/* A button under a field, or a form under a button row. */
.field + .btn, .field + button { margin-top: 1rem; }
.form-actions + :is(form, .form-stack) { margin-top: 1.25rem; }
/* And the next block of the same card does not start right under the buttons. */
.form-actions + :is(.card-head, h2, h3, h4) { margin-top: 2.25rem; }

/* Parámetros: a policy edited in place, and where its values come from. */
.form-table input { width: 100%; }
.policy-source { font-size: var(--fs-label); padding: 2px 8px; border-radius: var(--radius-sm); }
.policy-source.is-set { color: var(--success); }
.policy-source.is-default { color: var(--warning); }
.row-actions { white-space: nowrap; }

/* The one table pager (SD_UI.paginate in common/js/ui.js): ten rows a page, under
   every table, the same in every page. */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; }
.pager-info { color: var(--muted); font-size: var(--fs-text); font-variant-numeric: tabular-nums; }
.is-paged-out { display: none; }

/* An action shown as an icon, named by its tooltip (and aria-label for
   screen readers). One definition for every table that uses it. */
.btn-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--muted); cursor: pointer;
}
.btn-icon .sd-icon { width: 1.1rem; height: 1.1rem; }
/* A click on a button's drawing is a click on the button: handlers that read
   event.target find the button, not the <svg> or its <path>. */
.btn .sd-icon, .btn-icon .sd-icon { pointer-events: none; }
.btn-icon:hover:not(:disabled), .btn-icon:focus-visible { color: var(--accent); background: var(--bg-alt); border-color: var(--border); }
.btn-icon.is-delete:hover:not(:disabled) { color: var(--danger); }
.btn-icon.is-save:hover:not(:disabled) { color: var(--success); }
/* A switch drawn as an icon: on is green on a green tint, off is grey and
   faint, so the two read apart at a glance (Rafael, 21-oct). */
.btn-icon.is-on { color: var(--success); background: rgba(36, 105, 60, 0.14); border-color: rgba(36, 105, 60, 0.35); }
.btn-icon.is-on:hover:not(:disabled) { color: var(--success); background: rgba(36, 105, 60, 0.22); }
.btn-icon[data-toggle]:not(.is-on), .btn-icon[data-action="ACTIVE"] { opacity: 0.55; }
.btn-icon[data-toggle]:not(.is-on):hover, .btn-icon[data-action="ACTIVE"]:hover { opacity: 1; }
.btn-icon.is-danger, .btn-icon.is-danger:hover:not(:disabled) { color: #fff; background: var(--danger); border-color: transparent; }
.btn-icon + .btn-icon { margin-left: 0.25rem; }
.btn-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); right: 0;
    padding: 0.3rem 0.55rem; border-radius: var(--radius-sm);
    background: var(--text); color: var(--panel);
    font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5;
}
.btn-icon[data-tip]:hover::after, .btn-icon[data-tip]:focus-visible::after { opacity: 1; transform: none; }

/* An analysis computed with a parameter the account never set. */
.param-notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--warning);
    background: var(--panel);
    border-radius: var(--radius-sm);
    font-size: var(--fs-text);
}

/* Tablero: the salient figures of an area, on the area's own card. */
.area-figures { margin-top: 10px; display: grid; gap: 4px; }
.figure-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-text); }
.figure-label { color: var(--muted); }
.figure-value { color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }


/* ============ Badges and empty tables (both products) ============ */
/* A short state as a pill. The analyses give it their codes' tones
   (analyses.css); these four are the plain ones. */
.badge {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 600;
    color: #fff;
}
.badge-info   { background: var(--accent-3); color: var(--text-strong); }
.badge-muted  { background: var(--bg-alt); color: var(--muted); }
.badge-warn   { background: var(--warning); }
.badge-danger { background: var(--danger); }

/* The one row of a table with nothing to show. */
.empty-row td {
    text-align: center;
    color: var(--muted);
    padding: 1.4rem;
}