/* VIATUM quoting tool.
   Visual language aligned with Mirla, the tool the team already uses every day: indigo for
   actions, a left rail for navigation, generous corner radii, bold headings over soft grey
   supporting text. Familiarity beats originality here — people should not have to learn a
   second set of conventions.

   No web fonts: the application is served on the office network and the browsers reaching it
   may have no internet of their own. Figures use tabular numerals so amounts align. */

:root {
    --indigo: #4b2dd4;
    --indigo-dark: #3a1fae;
    --indigo-soft: #efebfe;
    --indigo-line: #d8cffb;

    --ink: #111827;
    --ink-soft: #6b7280;
    --ink-faint: #9ca3af;

    --page: #f4f4f6;
    --surface: #ffffff;
    --line: #e8e8ec;
    --line-strong: #d3d3da;

    --amber: #8a5510;
    --amber-soft: #fdf3e2;
    --green: #14663f;
    --green-soft: #e6f5ec;
    --danger: #a12525;
    --danger-soft: #fbecec;

    --r-sm: 8px;
    --r: 10px;
    --r-lg: 14px;
    --rail: 244px;

    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
            Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 12px; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.muted { color: var(--ink-soft); }

svg { flex: none; }

/* ---------- Application frame: fixed rail, scrolling content ---------- */

.app { display: flex; min-height: 100vh; }

.rail {
    width: var(--rail);
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 22px 14px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.rail-brand { padding: 0 10px 26px; }
.rail-brand img { height: 15px; width: auto; display: block; }
.rail-brand:hover { text-decoration: none; }

.rail-group {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
    padding: 0 10px 8px;
}

.rail-nav { display: flex; flex-direction: column; gap: 2px; }

.rail-nav a, .rail-nav span {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
}
.rail-nav a:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.rail-nav a.active { background: var(--indigo-soft); color: var(--indigo); }
.rail-nav span { color: var(--ink-faint); cursor: default; }
.rail-nav svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
                stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.rail-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

.rail-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--r);
}
.rail-user-mark {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--indigo-soft);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}
.rail-user-text { min-width: 0; }
.rail-user-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-user form { margin: 0; }
.rail-user button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--ink-faint);
    cursor: pointer;
}
.rail-user button:hover { color: var(--indigo); text-decoration: underline; }

.content { flex: 1; min-width: 0; padding: 28px 32px 64px; }
/* Fluid rather than capped. A fixed maximum left a wide empty strip on the right the moment the
   sidebar was collapsed or the screen was large, which is the opposite of what collapsing it is
   for. The quoting screen keeps its own wider cap below. */
.content-inner { max-width: 100%; }

/* ---------- Page header ---------- */

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 26px;
}
.page-head-text { flex: 1; min-width: 0; }
.page-head p { color: var(--ink-soft); margin: 6px 0 0; }

.eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
    margin-bottom: 6px;
}

/* ---------- Cards, tiles, tables ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}

.tile {
    display: block;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.tile:hover {
    border-color: var(--indigo-line);
    box-shadow: 0 1px 2px rgba(75, 45, 212, .06), 0 8px 20px rgba(17, 24, 39, .05);
    text-decoration: none;
}
.tile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--indigo-soft);
    color: var(--indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.tile-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none;
                 stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile h3, .tile p { text-decoration: none; }
.tile h3 { margin-bottom: 4px; }
.tile p { color: var(--ink-soft); font-size: 14px; margin: 0; }

.tile-soon { border-style: dashed; background: transparent; }
.tile-soon:hover { border-color: var(--line-strong); box-shadow: none; cursor: default; }
.tile-soon .tile-icon { background: var(--page); color: var(--ink-faint); }
.tile-soon h3, .tile-soon p { color: var(--ink-faint); }

.status {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 24px;
    margin-bottom: 26px;
}
.status-item { display: flex; flex-direction: column; gap: 1px; }
.status-label { font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.status-value { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.status a { margin-left: auto; font-size: 14px; font-weight: 500; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; }
.empty { padding: 36px 12px; text-align: center; color: var(--ink-soft); }

/* ---------- Controls ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r);
    border: 1px solid var(--indigo);
    background: var(--indigo);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--indigo-dark); border-color: var(--indigo-dark); text-decoration: none; }
.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
           stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-quiet {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-quiet:hover { background: var(--page); border-color: var(--line-strong); }

.btn-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--danger);
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="email"], input[type="tel"], input[type="file"], select {
    width: 100%;
    padding: 10px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
}
input:focus, select:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-soft);
}
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.notice {
    padding: 12px 16px;
    border-radius: var(--r);
    margin-bottom: 20px;
    font-size: 14px;
}
.notice-info { background: var(--indigo-soft); color: var(--indigo-dark); }
.notice-warn { background: var(--amber-soft); color: var(--amber); }
.notice-error { background: var(--danger-soft); color: var(--danger); }

/* ---------- Who are you ---------- */

.gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 20px;
    background: var(--page);
}

/* A single panel instead of loose blocks: it gives the screen an edge, so the content stops
   floating in an empty grey field. Width follows the grid inside, hence fit-content. */
.gate-panel {
    width: fit-content;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 44px 48px 46px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 18px 40px rgba(17, 24, 39, .06);
    text-align: center;
}
.gate-panel-narrow { width: 400px; }

/* The wordmark is hairline thin and widely tracked. A bold heading underneath fights it, so the
   question borrows the same voice instead: small, spaced, quiet. What should draw the eye on this
   screen is the row of faces, not a headline. */
.gate-brand {
    padding-bottom: 24px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.gate-logo { width: 132px; height: auto; display: block; margin: 0 auto; }

.gate-sub {
    margin: -14px 0 26px;
    font-size: 13px;
    color: var(--ink-faint);
}

.gate-title {
    margin: 0 0 26px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- Avatars ---------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: var(--indigo-soft);
    color: var(--indigo);
    font-weight: 600;
    line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar > svg {
    width: 45%;
    height: 45%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-lg { width: 60px; height: 60px; font-size: 20px; }
.avatar-xl { width: 96px; height: 96px; font-size: 30px; }
.avatar-chosen { background: var(--page); }

/* ---------- Choosing a photo ---------- */

.photo-pick {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    margin: 0;
}
.photo-pick:hover { border-color: var(--indigo); color: var(--indigo); }

.new-person {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: left;
}
.new-person-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.new-person-note { margin: 0; font-size: 12px; }
.new-person-actions { display: flex; gap: 10px; margin-top: 4px; }
.new-person-actions .btn { flex: 1; }

.edit-person { display: flex; flex-direction: column; gap: 22px; }
.edit-person-photo { display: flex; align-items: center; gap: 20px; }
.edit-person-actions { display: flex; gap: 10px; }

/* ---------- Quoting screen ---------- */

/* The grid needs room, so this page runs wider than the rest of the application. */
.content-inner:has(.quote-page) { max-width: 1340px; }

.quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.quote-block { margin-bottom: 18px; }
.quote-block h2 { margin-bottom: 4px; }
.quote-hint { font-size: 13px; margin: 6px 0 0; }
.quote-block h2 + .quote-hint { margin-bottom: 14px; }

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 16px;
    margin-top: 14px;
}
.field-grid label { margin-bottom: 4px; }

/* Dense rows on purpose: the team is used to reading twenty lines at a glance. */
.grid-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-top: 12px; }
.grid-table thead th {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
    text-align: left;
    padding: 0 8px 4px;
    border: 0;
}
.grid-table thead th.right { text-align: right; }
.grid-table td { padding: 0 3px; border: 0; }
.grid-table input, .grid-table select {
    padding: 6px 9px;
    font-size: 14px;
    border-radius: var(--r-sm);
    border-color: var(--line);
}
.grid-table input.right { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table input:focus, .grid-table select:focus { border-color: var(--indigo); }
.grid-table .col-num {
    width: 30px;
    text-align: right;
    font-size: 12px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    padding-right: 8px;
}
.grid-table .col-cur { width: 90px; }

.quote-option {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 14px;
    margin-top: 12px;
    background: var(--page);
}
.quote-option-head { display: flex; align-items: center; gap: 14px; }
.quote-option-head input[type="text"] { flex: 1; }
.quote-option-pick {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    cursor: pointer;
}
.quote-option-none {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
}
.quote-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}
.quote-option-pick input, .quote-option-none input, .quote-check input { width: auto; margin: 0; }

.quoted-price { display: flex; gap: 12px; align-items: flex-end; margin-top: 14px; }
.quoted-price > div:first-child { width: 160px; }

/* ---------- Totals panel ---------- */

.quote-totals { position: sticky; top: 22px; }

.totals-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.totals-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
    margin: 0 0 12px;
}
.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--ink-soft);
}
.totals-row b {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.totals-row-strong { font-size: 14px; color: var(--ink); }
.totals-row-strong b { font-size: 15px; }
.totals-row-loss b { color: var(--danger); }
.totals-sep { height: 1px; background: var(--line); margin: 10px 0; }
.totals-note { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; }

.filters { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 18px; }

.pager {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--ink-soft);
}

@media (max-width: 1100px) {
    .quote-layout { grid-template-columns: minmax(0, 1fr); }
    .quote-totals { position: static; }
    .quoted-price { flex-direction: column; align-items: stretch; }
    .quoted-price > div:first-child { width: auto; }
}

/* ---------- Versions ---------- */

.version-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--indigo-soft);
    color: var(--indigo);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.version-badge:hover { background: var(--indigo); color: #fff; text-decoration: none; }

.version-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-faint);
}
.version-strip a {
    padding: 2px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}
.version-strip a:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }
.version-strip a.version-current {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
}

/* ---------- Export links ---------- */

.export-links { display: inline-flex; gap: 10px; }
.export-links a {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
}
.export-links a:hover { border-color: var(--indigo); color: var(--indigo); text-decoration: none; }

/* ---------- Recent quotes on the home page ---------- */

.home-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.recent-card { padding: 20px 22px; }
.recent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.recent-head h2 { font-size: 17px; }
.recent-head a { font-size: 13px; font-weight: 500; }

.recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { text-decoration: none; }
.recent-row:hover .recent-name { color: var(--indigo); }
.recent-main { flex: 1; min-width: 0; }
.recent-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-meta {
    display: block;
    font-size: 12px;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-amount {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.recent-empty { padding: 22px 0; color: var(--ink-soft); font-size: 14px; }

@media (max-width: 1000px) {
    .home-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Settings ---------- */

.settings-add {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.settings-add input[type="text"] { flex: 1; max-width: 320px; }

/* ---------- Quote screen, second pass ---------- */

.field-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.two-columns h2 { margin-bottom: 12px; }

.grid-table .col-item { width: 170px; }
.grid-table .col-pick { width: 34px; text-align: center; }

textarea {
    width: 100%;
    padding: 10px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    resize: vertical;
}
textarea:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-soft);
}

/* The one figure everyone looks for, in the corporate colour as the review asked. */
.totals-headline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 12px -20px;
    padding: 12px 20px;
    background: var(--indigo);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.totals-headline b {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Internal valuation set apart on a very light grey, per the review. */
.totals-block {
    margin: 12px -20px -18px;
    padding: 14px 20px 16px;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------- Option comparison ---------- */

.option-price {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.option-price:last-child { border-bottom: 0; }
.option-price-main { min-width: 0; }
.option-price-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.option-price-concept { display: block; font-size: 12px; color: var(--ink-faint); }
.option-price-figures { text-align: right; white-space: nowrap; }
.option-price-figures b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.option-price-diff { font-size: 12px; color: var(--amber); }
.option-price-selected .option-price-name { color: var(--indigo); }
.option-price-selected .option-price-name::after {
    content: " · seleccionada";
    font-weight: 400;
    font-size: 11px;
    color: var(--ink-faint);
}

/* ---------- Registered price ---------- */

.totals-registered { border-color: var(--indigo-line); background: var(--indigo-soft); }
.registered-amount {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--indigo-dark);
    font-variant-numeric: tabular-nums;
}
.registered-when { margin: 2px 0 0; font-size: 12px; color: var(--indigo-dark); opacity: .75; }

@media (max-width: 900px) {
    .field-grid-three { grid-template-columns: minmax(0, 1fr); }
    .two-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Stale rate warning ---------- */

.rate-stale {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Transfer settings ---------- */

.transfer-config {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.transfer-config > div { width: 300px; }
.transfer-config .quote-check { padding-bottom: 10px; }

/* ---------- Settings, second pass ---------- */

/* A saved change reads as confirmation, so it is green rather than the action colour. */
.notice-success { background: var(--green-soft); color: var(--green); }

/* What a section is actually adding to a quote, where the eye lands last. */
.block-total {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    text-align: right;
    font-size: 13px;
    color: var(--ink-faint);
}
.block-total b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

.grid-table .col-move { width: 46px; white-space: nowrap; }
.btn-move {
    padding: 1px 4px;
    border: 0;
    background: none;
    color: var(--ink-faint);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.btn-move:hover:not(:disabled) { color: var(--indigo); }
.btn-move:disabled { opacity: .25; cursor: default; }

/* A hidden currency keeps its row but steps back visually. */
.row-hidden td { opacity: .55; }
.row-hidden:focus-within td { opacity: 1; }

/* ---------- Section headings and icons ---------- */

.section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.section-head h2 { display: flex; align-items: center; gap: 10px; flex: 1; }

.section-icon {
    width: 19px;
    height: 19px;
    flex: none;
    stroke: var(--indigo);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.label-icon {
    width: 14px;
    height: 14px;
    stroke: var(--ink-faint);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    vertical-align: -2px;
    margin-right: 5px;
}

/* ---------- Hidden currencies ---------- */

.more-currencies { margin-top: 16px; }
.more-currencies > summary {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
}
.more-currencies > summary::-webkit-details-marker { display: none; }
.more-currencies > summary::marker { content: ""; }
.more-currencies > summary:hover { border-color: var(--indigo); color: var(--indigo); }
.more-currencies[open] > summary { margin-bottom: 8px; }

/* ---------- Owner account ---------- */

.owner-badge {
    padding: 1px 8px;
    border-radius: 20px;
    background: var(--page);
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Fourth pass ---------- */

/* Placeholders were as dark as real content, so an empty field looked filled in. */
::placeholder { color: #b4b8bf; opacity: 1; }

/* ---------- Sign in ---------- */

/* Rows are centred one by one, which a CSS grid cannot do: it would push the gaps of an incomplete
   last row to the right. The container is capped to exactly the number of columns the server
   calculated, so wrapping happens where intended. */
.people {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: calc(var(--cols) * 172px + (var(--cols) - 1) * 14px);
    margin: 0 auto;
}

/* ---------- Cabecera de página ---------- */

.head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Barra de filtros ---------- */

.filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; min-width: 210px; }
.filter-search > svg {
    position: absolute;
    left: 12px;
    width: 17px; height: 17px;
    stroke: var(--ink-faint); fill: none;
    stroke-width: 1.7; stroke-linecap: round;
    pointer-events: none;
}
.filter-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 37px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    transition: border-color .12s, box-shadow .12s;
}
.filter-search input::placeholder { color: var(--ink-faint); }
.filter-search input:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-soft);
}

/* A real select, kept a normal box with its own arrow. The list it drops open is drawn by the
   browser and cannot be styled or repositioned, so it only lands where it should when the control
   itself has an ordinary size and shape — which is exactly what wrapping a transparent select in a
   decorative pill destroyed. */
.filter-select {
    height: 36px;
    max-width: 210px;
    padding: 0 32px 0 36px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink-soft);
    background-color: var(--surface);
    /* Two stacked background images: the chevron on the right, the filter's own icon on the left.
       A select cannot hold child elements, so this is the only way to give it an icon without
       wrapping it in something that would break where its dropdown list appears. */
    background-image: var(--filter-icon), var(--chevron);
    background-repeat: no-repeat, no-repeat;
    background-position: left 12px center, right 11px center;
    background-size: 16px 16px, 15px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    transition: border-color .12s, color .12s, background-color .12s;
}

/* The chevron, and one icon per filter. Kept as variables so the rule above stays readable and
   each filter only declares what makes it different. */
.filter-select {
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.filter-agent {
    --filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}
.filter-place {
    --filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 0 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.filter-price {
    --filter-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7.5a3.6 3.6 0 0 0-3.6-2.2C10.3 5.3 9 6.5 9 8c0 1.8 1.7 2.4 3.6 2.9 2.2.5 3.8 1.2 3.8 3.1 0 1.8-1.6 3-3.8 3A3.7 3.7 0 0 1 8.8 15'/%3E%3Cpath d='M12 3.5v17'/%3E%3C/svg%3E");
}

.filter-select:hover { border-color: var(--indigo); color: var(--indigo); }
.filter-select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
/* The dropped-open list is the browser's own, so it is left at normal colours: forcing a background
   on the options is honoured on some platforms and ignored on others, which looks worse than
   leaving it alone. */
.filter-select option { color: var(--ink); background: var(--surface); }

.filter-select.is-on,
.filter-dates.is-on {
    background-color: var(--indigo-soft);
    border-color: var(--indigo-line);
    color: var(--indigo);
    font-weight: 600;
}

.filter-dates {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-soft);
}
.date-sep { color: var(--ink-faint); padding: 0 2px; }

.date-field { display: inline-flex; align-items: center; gap: 2px; }

/* The one calendar per field, on its left, and the only thing that looks clickable — because it is. */
.date-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
}
.date-open svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.date-open:hover { background: var(--indigo-soft); color: var(--indigo); }
.filter-dates.is-on .date-open { color: var(--indigo); }

.filter-dates input[type="date"] {
    width: 96px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: inherit;
    outline: none;
    cursor: pointer;
}
/* The browser's own indicator is hidden: with a calendar button of our own on the left, keeping the
   native one on the right meant two icons per field for one job. The field still opens the picker
   when clicked, so nothing is lost by removing it. */
.filter-dates input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* An inverted range is not searched (it would always come back empty, which reads as "nothing
   found" rather than "these dates are swapped"), so the pill says so instead of the screen just
   sitting there. */
.filterbar.dates-backwards .filter-dates {
    background-color: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
}
.filterbar.dates-backwards .filter-dates .date-open { color: var(--danger); }
.filterbar.dates-backwards .filter-dates::after {
    content: "revisa el orden";
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.filter-apply {
    height: 36px;
    padding: 0 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.filter-apply:hover { background: var(--page); border-color: var(--indigo); color: var(--indigo); }
/* Slightly stronger than the other pills: with the dates no longer searching as you type, this is
   the control that actually applies them. */
.filter-apply { border-color: var(--line-strong); color: var(--ink); }

.filter-clear { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.filter-clear:hover { color: var(--danger); }

/* ---------- Tabla de datos ---------- */

/* The table runs to the card's edges: padding around a table wastes the width the columns need. */
/* No overflow:hidden here. It rounded the corners nicely and silently clipped the row action
   menu, which is absolutely positioned and has to escape the card to be visible at all. The header
   row gets its own rounding instead. */
.card-table { padding: 0; }
.card-table .datatable thead th:first-child { border-top-left-radius: var(--r-lg); }
.card-table .datatable thead th:last-child { border-top-right-radius: var(--r-lg); }

.datatable thead th {
    padding: 12px 14px;
    background: var(--page);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.datatable tbody td { padding: 12px 14px; vertical-align: middle; }
.datatable tbody tr { transition: background .1s; }
.datatable tbody tr:hover { background: color-mix(in srgb, var(--indigo-soft) 45%, transparent); }

/* Two lines in one cell: the fact on top, the context under it in a quieter voice. */
.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-strong { font-weight: 600; color: var(--ink); }
.cell-sub {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-faint);
}
.right .cell-stack { align-items: flex-end; }
.cell-none { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }

.datatable .col-actions { width: 44px; text-align: right; }

.empty-icon {
    display: block;
    width: 34px; height: 34px;
    margin: 0 auto 10px;
    stroke: var(--ink-faint); fill: none;
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Menú de acciones por fila ---------- */

.rowmenu { position: relative; display: inline-block; }
.rowmenu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    color: var(--ink-faint);
    cursor: pointer;
    list-style: none;
}
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu summary::marker { content: ""; }
.rowmenu summary svg { width: 18px; height: 18px; stroke: currentColor; fill: currentColor; }
.rowmenu summary:hover { background: var(--page); color: var(--ink); }
.rowmenu[open] summary { background: var(--indigo-soft); color: var(--indigo); }

.rowmenu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 208px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 2px 4px rgba(17, 24, 39, .04), 0 12px 32px rgba(17, 24, 39, .13);
    text-align: left;
}
.rowmenu-panel a,
.rowmenu-panel button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.rowmenu-panel a svg,
.rowmenu-panel button svg {
    width: 16px; height: 16px; flex: none;
    stroke: var(--ink-faint); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.rowmenu-panel a:hover,
.rowmenu-panel button:hover { background: var(--page); text-decoration: none; }
.rowmenu-panel a:hover svg,
.rowmenu-panel button:hover svg { stroke: var(--indigo); }
.rowmenu-panel form { margin: 0; }
.rowmenu-panel .is-danger { color: var(--danger); }
.rowmenu-panel .is-danger svg { stroke: var(--danger); }
.rowmenu-panel .is-danger:hover { background: var(--danger-soft); }
.rowmenu-sep { height: 1px; margin: 5px 4px; background: var(--line); }

/* ---------- Pie de tabla: filas por página y paginación ---------- */

.tablefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-soft);
}

.pagesize { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.pagesize select {
    padding: 5px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.pagesize-count { color: var(--ink-faint); }

.pagestrip { display: flex; align-items: center; gap: 4px; }
.pagestrip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px; height: 30px;
    padding: 0 7px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pagestrip a:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.pagestrip a svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pagestrip a.is-current {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
    font-weight: 600;
}
/* The ends stay in place when there is nowhere to go, greyed and inert, so the strip does not change
   width as you page through it. */
.pagestrip a.is-off { opacity: .3; pointer-events: none; }
.pagegap { padding: 0 3px; color: var(--ink-faint); }

@media (max-width: 700px) {
    .tablefoot { justify-content: center; }
}

/* ---------- Barra lateral plegable y barra superior ---------- */

/* One number drives the whole collapse: the rail's width. Everything that has to move follows from
   it, so there is no second place to keep in sync. */
:root { --rail-narrow: 66px; }
html.rail-collapsed { --rail: var(--rail-narrow); }

.rail { transition: width .16s ease; overflow: hidden; }

.rail-top {
    display: flex;
    align-items: center;
    padding: 0 10px 24px;
    min-height: 15px;
}

/* Wordmark and initial swap places: exactly one is ever visible, so the header never grows or
   shrinks in height as the rail collapses. */
.rail-mark {
    display: none;
    width: 30px;
    height: 30px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--indigo);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
html.rail-collapsed .rail-brand { display: none; }
html.rail-collapsed .rail-mark { display: flex; }
html.rail-collapsed .rail-top { justify-content: center; padding-left: 0; padding-right: 0; }

html.rail-collapsed .rail-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
html.rail-collapsed .rail-nav a > span { display: none; }

/* The label reappears as a tooltip on hover, which is what makes a collapsed rail usable rather
   than a row of guesses. Built from the data-tip attribute so there is no duplicate markup. */
html.rail-collapsed .rail-nav a { position: relative; }
html.rail-collapsed .rail-nav a::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--r-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 40;
}
html.rail-collapsed .rail-nav a:hover::after { opacity: 1; }

/* Collapsed, the footer keeps only the avatar: the name and its links have nowhere to go. */
html.rail-collapsed .rail-user { justify-content: center; }
html.rail-collapsed .rail-user-text { display: none; }

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: -28px -32px 22px;
    padding: 0 32px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(8px);
}
.topbar-where { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }

.rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
}
.rail-toggle svg {
    width: 19px; height: 19px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.rail-toggle:hover { background: var(--page); color: var(--ink); }

/* On a narrow screen the rail is collapsed and stays collapsed: there is no room for it open, and
   the toggle would only let someone bury the content under it. */
@media (max-width: 860px) {
    :root { --rail: var(--rail-narrow); }
    .rail-brand { display: none; }
    .rail-mark { display: flex; }
    .rail-top { justify-content: center; padding-left: 0; padding-right: 0; }
    .rail-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
    .rail-nav a > span { display: none; }
    .rail-user { justify-content: center; }
    .rail-user-text { display: none; }
    .rail-toggle { display: none; }
    .topbar { margin: -28px -20px 18px; padding: 0 20px; }
    .content { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Pantalla de entrada ---------- */

/* A quiet gradient rather than the flat grey of the app: this is the one screen seen before any
   work starts, and it can afford to look like a front door. */
.signin-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 12% -10%, var(--indigo-soft), transparent 60%),
        radial-gradient(900px 480px at 108% 110%, #eef0ff, transparent 62%),
        var(--page);
}

.signin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 20px;
}

.signin-card {
    width: 100%;
    max-width: 424px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px 40px 32px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 56px rgba(17, 24, 39, .09);
}

/* The wordmark is hairline and widely tracked, so it sets the voice: the heading under it stays
   modest instead of shouting over it. */
.signin-brand {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
}
.signin-brand img { width: 148px; height: auto; display: block; margin: 0 auto; }

.signin-title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
    text-align: center;
}
.signin-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    color: var(--ink-soft);
    text-align: center;
}

.signin-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 20px;
    padding: 11px 13px;
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
    border-radius: var(--r);
    font-size: 13.5px;
    color: var(--danger);
}
.signin-error svg {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 1px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.signin-form { display: grid; gap: 16px; }

.signin-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* The icon sits inside the field rather than beside the label: it marks what the box is for at the
   point the eye is already looking. Padding on the input, not margin on the icon, so the caret never
   lands underneath it. */
.signin-input { position: relative; display: flex; align-items: center; }
.signin-input > svg {
    position: absolute;
    left: 13px;
    width: 18px; height: 18px;
    stroke: var(--ink-faint); fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
    transition: stroke .12s;
}
.signin-input input {
    width: 100%;
    padding: 11px 13px 11px 41px;
    font: inherit;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    transition: border-color .12s, box-shadow .12s;
}
.signin-input input::placeholder { color: var(--ink-faint); }
.signin-input input:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3.5px var(--indigo-soft);
}
.signin-input:focus-within > svg { stroke: var(--indigo); }

/* Room on the right for the reveal button, so a long password does not run under it. */
.signin-input:has(.signin-reveal) input { padding-right: 42px; }
.signin-reveal {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-faint);
    cursor: pointer;
}
.signin-reveal svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.signin-reveal:hover { background: var(--page); color: var(--ink-soft); }
.signin-reveal.is-on { color: var(--indigo); }

.signin-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    background: var(--indigo);
    border: 1px solid var(--indigo);
    border-radius: var(--r);
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.signin-submit svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .14s;
}
.signin-submit:hover {
    background: var(--indigo-dark);
    border-color: var(--indigo-dark);
    box-shadow: 0 6px 18px rgba(75, 45, 212, .26);
}
.signin-submit:hover svg { transform: translateX(2.5px); }
.signin-submit:active { transform: translateY(1px); }

.signin-foot {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-faint);
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .signin-card { padding: 32px 24px 26px; border-radius: 16px; }
}

.rail-user-links { display: flex; gap: 12px; align-items: baseline; }
.rail-user-links a,
.rail-user-links button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--ink-faint);
    text-decoration: none;
    cursor: pointer;
}
.rail-user-links a:hover,
.rail-user-links button:hover { color: var(--indigo); text-decoration: none; }

/* ---------- Own profile ---------- */

.profile-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.profile-columns .card { padding: 22px 24px 24px; }

/* The name in the sidebar is now the way into the profile, so it has to look reachable. */
a.rail-user-name { display: block; text-decoration: none; color: var(--ink); }
a.rail-user-name:hover { color: var(--indigo); text-decoration: none; }

@media (max-width: 1000px) {
    .profile-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sixth pass ---------- */

/* The price of one passenger, in the same blue as the booking total but stepped back: it is a
   consequence of that figure, not a second headline competing with it. */
.totals-headline-soft {
    background: color-mix(in srgb, var(--indigo) 50%, #fff);
}

.figure-negative { color: var(--danger); }

.grid-table .col-qty { width: 78px; }

/* ---------- Seventh pass ---------- */

/* Computed figures look like the fields they come from, so the eye reads a row as one thing, but on a
   faint grey so nobody tries to type in them. */
.figure-box {
    display: block;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #f7f7f8;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-height: 33px;
    color: var(--ink);
}
/* The column sum carries a heavier border: it is the figure the rest add up to. */
.figure-box-total { border-width: 2px; border-color: var(--line-strong); }

.figure-foot-label {
    text-align: right;
    padding-right: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}
.grid-table tfoot td { padding-top: 8px; border: 0; }

/* ---------- Dynamic rows, eleventh review ---------- */

/* Its own column, always last: narrow, so it doesn't fight the figures next to it for room. */
.grid-table .col-drop { width: 34px; text-align: center; }
.btn-drop-row {
    padding: 3px 7px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-faint);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.btn-drop-row:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent);
                                      color: var(--danger); }
.btn-drop-row:disabled { opacity: .25; cursor: default; }

/* Quiet, small, and clearly secondary to "Guardar presupuesto": adding a row is a frequent, low
   stakes action and should not compete visually with the primary action of the page. */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    border: 1px dashed var(--line-strong);
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-add-row:hover { border-color: var(--indigo); color: var(--indigo); border-style: solid; }

/* The price of one passenger: the colour on the text, not a band behind it. */
.totals-per-pax {
    margin-top: 2px;
    padding: 6px 0 4px;
}
.totals-per-pax span,
.totals-per-pax b {
    color: color-mix(in srgb, var(--indigo) 65%, #fff);
    font-weight: 700;
}
.totals-per-pax b { font-size: 16px; }

/* Money that only passes through the agency, at the bottom and out of the way. */
.totals-row-aside {
    margin-top: 6px;
    font-size: 11px;
    color: #b4b8bf;
}
.totals-row-aside b { color: #b4b8bf; font-weight: 500; font-size: 11px; }

/* A plain rule between groups of the summary box, as opposed to .totals-sep which is used inside a
   single group. Its own class so the two can change independently. */
.totals-rule { height: 1px; background: var(--line); margin: 10px 0; }

/* PVP total and PVP per passenger, side by side with their label above each. */
.registered-figures {
    display: flex;
    gap: 28px;
}
.registered-label {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--indigo-dark);
    opacity: .7;
}

.registered-amount-pax {
    margin-top: 2px;
    font-size: 16px;
    color: color-mix(in srgb, var(--indigo) 65%, #fff);
}