/* TRADA · Tema minimalista · octubre 2026
   Inspirado en la identidad azul marino y cian del isotipo original.
   Este archivo se carga después de app.css y no modifica la lógica del sistema.
*/
:root {
    --trada-navy: #122e57;
    --trada-blue: #245d9b;
    --trada-cyan: #59bbd3;
    --background: #f7f9fc;
    --surface: #ffffff;
    --surface-subtle: #fafbfd;
    --surface-muted: #f1f5f9;
    --foreground: #213247;
    --muted-foreground: #6b788b;
    --border: #e3e9f0;
    --border-strong: #cbd6e2;
    --primary: #245d9b;
    --primary-foreground: #ffffff;
    --ring: rgba(36,93,155,.14);
    --blue: #245d9b;
    --blue-bg: #eff5fc;
    --violet: #337da3;
    --violet-bg: #ecf7fa;
    --sidebar-width: 254px;
    --radius-lg: 13px;
    --shadow-xs: 0 1px 2px rgba(24,42,60,.025);
    --shadow-sm: 0 2px 9px rgba(24,42,60,.035);
    --shadow-md: 0 8px 20px rgba(24,42,60,.065);
}
html, body, .staff-body, .client-body, .app-shell, .workspace { background: var(--background); }
::selection { background: #d0edf4; color: var(--trada-navy); }
:focus-visible { outline: 2px solid var(--trada-blue); outline-offset: 3px; }

/* Barra de navegación: blanca, discreta y con la marca siempre visible. */
.sidebar {
    padding: 24px 13px 16px;
    background: #ffffff;
    color: var(--foreground);
    border-right: 1px solid var(--border);
    box-shadow: none;
    overflow-x: hidden;
}
.sidebar-brand {
    min-height: 66px;
    padding: 0 9px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 19px;
}
.brand-link { gap: 11px; }
.brand-mark {
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    border: 1px solid #e2edf4;
    border-radius: 12px;
    background: #f1f7fb;
    box-shadow: none;
}
.brand-mark img { display: block; width: 43px; max-height: 33px; height: auto; object-fit: contain; }
.brand-copy strong {
    color: var(--trada-navy);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.15;
}
.brand-copy small { margin-top: 4px; color: #8793a2; font-size: 10px; }
.nav-caption { margin: 6px 13px 9px; color: #9ca7b4; font-size: 10px; letter-spacing: .055em; }
.nav-caption-secondary { margin-top: 21px; }
.sidebar-nav { gap: 4px; }
.nav-item {
    min-height: 42px;
    padding: 0 12px;
    gap: 11px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #536478;
    background: transparent;
    box-shadow: none;
}
.nav-item .icon { width: 17px; height: 17px; color: #8493a5; }
.nav-item:hover { color: var(--trada-blue); background: #f5f8fc; border-color: transparent; }
.nav-item:hover .icon { color: var(--trada-blue); }
.nav-item.is-active {
    background: #ecf3fa;
    color: #174f8e;
    font-weight: 700;
    border-color: transparent;
    box-shadow: none;
}
.nav-item.is-active .icon { color: #245d9b; }
.sidebar-user { border-top: 1px solid var(--border); padding: 16px 4px 3px; }
.sidebar-user .user-meta strong { color: #273d54; font-size: 12px; }
.sidebar-user .user-meta small { color: #8493a5; font-size: 10px; }
.sidebar-user .avatar { border: 0; }
.sidebar-user .icon-button, .sidebar-close { color: #78879b; }
.sidebar-user .icon-button:hover, .sidebar-close:hover { background: #f2f6fb; color: #20588e; }
.avatar { background: var(--trada-navy); }
.avatar-photo { overflow: hidden; }

/* Sin encabezado superior: los contenidos comienzan directamente con el título existente. */
.workspace { min-height: 100vh; }
.page-shell { padding: 42px 36px 68px; }
.mobile-nav-toggle { display: none !important; }
.page-heading { margin-bottom: 24px; }
.page-heading .eyebrow { color: #7b8da0; font-size: 10px; letter-spacing: .08em; }
.page-heading h2 { color: var(--trada-navy); font-size: 27px; font-weight: 760; letter-spacing: -.035em; }
.page-heading p { color: #758399; font-size: 13px; }
.page-status { color: #66788c; background: #fff; border-color: var(--border); border-radius: 8px; font-weight: 600; }
.page-status .icon { color: var(--trada-blue); }
.eyebrow { color: #768da5; letter-spacing: .07em; }

/* Tarjetas planas, acentos suaves y sin brillos, inclinaciones ni formas decorativas. */
.feature-card, .panel, .boards-panel, .stats-kpi-card,
.stats-dashboard-v2 .stats-chart-card, .stats-dashboard-v2 .stats-kpi-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: var(--shadow-xs);
}
.feature-card {
    min-height: 196px;
    padding: 22px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.feature-card::before, .feature-card::after { display: none; }
.feature-card:hover, .feature-card-static:hover {
    transform: none;
    border-color: #c7d7e4;
    box-shadow: var(--shadow-sm);
}
.feature-arrow { color: #97a8b6; transition: color .15s ease; }
.feature-card:hover .feature-arrow { transform: none; color: var(--trada-blue); }
.feature-icon, .panel-title-icon { width: 43px; height: 43px; border-radius: 10px; }
.feature-icon .icon { width: 19px; height: 19px; }
.feature-kicker { color: #8795a6; font-size: 10px; letter-spacing: .055em; }
.feature-copy h3 { color: #233b56; font-size: 18px; font-weight: 700; }
.feature-copy p { color: #718097; }
.tone-blue { color: #245d9b; background: #ebf3fa; }
.tone-violet { color: #377fa5; background: #ecf6fa; }
.tone-emerald { color: #25827b; background: #e9f6f3; }
.tone-rose { color: #99617b; background: #f8eef3; }
.tone-amber { color: #a77737; background: #fbf3e8; }
.soft-panel, .clients-toolbar { background: #fff; }
.mini-icon { color: var(--trada-blue); border-color: var(--border); background: #f3f7fb; }
.panel h3, .clients-toolbar h3, .stats-chart-heading h3 { color: #2b4057; }
.panel-icon-title p { color: #738296; }

/* Campos, tablas, botones: sin degradados. */
.button { border-radius: 8px; }
.button-primary, .auth-submit { background: var(--trada-blue); border-color: var(--trada-blue); color: #fff; box-shadow: none; }
.button-primary:hover, .auth-submit:hover { background: #1a4c80; border-color: #1a4c80; box-shadow: none; }
.button-outline { background: #fff; color: #445d73; border-color: #d5dee9; }
.button-outline:hover { background: #f5f8fc; color: var(--trada-blue); border-color: #bccddd; }
.icon-button:hover { color: var(--trada-blue); background: #f1f6fa; border-color: #e2eaf2; }
input, textarea, select { border-radius: 8px; }
input:focus, textarea:focus, select:focus,
.search-field:focus-within, .select-control:focus-within { border-color: #7da7c8; box-shadow: 0 0 0 3px var(--ring); }
.search-field, .select-control { border-color: var(--border); }
th { background: #fafbfd; color: #7b8898; border-bottom-color: var(--border); }
td { border-bottom-color: #edf0f4; }
tbody tr:hover, .clients-table tbody tr:hover { background: #f9fbfd; }
td strong, .cell-primary, .table-empty strong { color: #28425c; }
.entity-avatar { background: #f0f5fb; color: #27619a; border-color: #e2eaf2; }
.mono-chip { background: #f4f7fa; border-color: #e3e9f0; color: #596d80; }
.badge-muted { background: #f0f3f7; color: #63758a; }
.badge-success { background: #e9f7f1; color: #137653; }
.badge-warning { background: #fff5e8; color: #9f6b2a; }
.table-footer { background: #fff; color: #738194; border-color: var(--border); }
.dialog-header, .drawer-header { background: #fff; border-color: var(--border); }
.dialog-icon { color: var(--trada-blue); background: #edf4fa; }
.board-icon-choice input:checked + span { background: #eef5fb; color: var(--trada-blue); border-color: var(--trada-blue); box-shadow: none; }
.board-color-choice:has(input:checked) { border-color: var(--trada-blue); box-shadow: none; }
.board-icon-choice input:focus-visible + span, .board-color-choice:has(input:focus-visible) { outline-color: var(--trada-blue); }
.form-panel { top: 20px; }

/* Gráficas y estadísticas con colores corporativos, sin ornamentos. */
.stats-dashboard-v2 .stats-kpi-card,
.stats-dashboard-v2 .stats-chart-card { border-radius: 13px; box-shadow: var(--shadow-xs); }
.stats-dashboard-v2 .stats-kpi-card::after { opacity: .6; }
.stats-kpi-copy strong { color: var(--trada-navy); }
.metric-percent-blue { color: #245d9b; background: #edf4fb; }
.metric-percent-violet { color: #357ba1; background: #edf7fa; }
.metric-percent-emerald { color: #237e76; background: #ecf7f4; }
.key-blue, .key-cat-0 { background: #245d9b; }
.key-violet, .key-cat-1, .dot-violet { background: #59bbd3; }
.key-emerald, .key-cat-2 { background: #25827b; }
.key-orange, .key-cat-3 { background: #d5a167; }
.key-cat-4 { background: #7da3c1; }
.key-cat-5 { background: #244e7a; }
.key-cat-6 { background: #85a9a1; }
.key-cat-7 { background: #a1b4c9; }

/* Inicio de sesión sobrio: superficie neutra y bloque sólido de marca. */
.auth-body { background: #f7f9fc; }
.auth-layout {
    width: min(930px,calc(100vw - 48px));
    max-width: 930px;
    min-height: 550px;
    grid-template-columns: minmax(0,1fr) minmax(365px,.95fr);
    border: 1px solid var(--border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(24,42,60,.055);
}
.auth-intro { padding: 40px; background: var(--trada-navy); color: #fff; border-right: 0; }
.auth-intro::before, .auth-intro::after { display: none; }
.auth-brand { gap: 11px; }
.auth-brand-mark, .auth-mobile-mark, .auth-mark {
    width: 54px;
    height: 52px;
    border: 1px solid #deebf2;
    border-radius: 11px;
    background: #f1f7fb;
    box-shadow: none;
}
.auth-brand-mark img, .auth-mobile-mark img, .auth-mark img {
    display: block; width: 47px; max-height: 34px; height: auto; object-fit: contain;
}
.auth-brand strong { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: .055em; }
.auth-brand small { color: #bacbdd; font-size: 10px; }
.auth-intro-copy { padding: 42px 0 36px; }
.auth-intro-copy .eyebrow { color: #9bd1df; font-size: 10px; }
.auth-intro-copy h1 { color: #fff; font-size: clamp(28px,3.1vw,39px); letter-spacing: -.03em; line-height: 1.17; margin: 11px 0 14px; }
.auth-intro-copy h1 em { color: #a7dbe8; font-style: normal; font-weight: inherit; }
.auth-intro-copy p { color: #c1cfde; font-size: 13px; line-height: 1.6; }
.auth-trust-list { border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; gap: 13px; }
.auth-trust-list > span { color: #a7d5e2; }
.auth-trust-list strong { color: #eaf0f7; font-size: 10px; }
.auth-trust-list small { color: #b9c9d9; font-size: 10px; }
.auth-card.auth-card-modern { background: #fff; padding: 45px 40px; }
.auth-card-heading .eyebrow { color: #7088a0; font-size: 10px; }
.auth-card-heading h2 { color: var(--trada-navy); font-size: 29px; }
.auth-card-heading p { color: #748297; font-size: 12px; }
.auth-field-icon { color: #8595a6; }
.auth-input-wrap input { height: 46px; border-radius: 8px; border-color: #dbe3ec; }
.auth-submit { min-height: 46px; border-radius: 8px; font-size: 13px; }
.remember-access-control input:checked + .remember-checkbox { background: var(--trada-blue); border-color: var(--trada-blue); }
.auth-card:not(.auth-card-modern) { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.auth-card h1 { color: var(--trada-navy); }
.auth-mark { width: 61px; height: 58px; }

@media (max-width: 920px) {
    .auth-layout { width: min(480px,100%); max-width: 480px; min-height: 0; grid-template-columns: 1fr; }
    .auth-intro { display: none; }
    .auth-mobile-mark { display: grid; }
    .auth-card.auth-card-modern { padding: 38px 33px; }
}
@media (max-width: 900px) {
    .sidebar { box-shadow: 12px 0 32px rgba(15,36,61,.10); }
    .sidebar-backdrop { background: rgba(22,37,56,.32); backdrop-filter: none; }
    .mobile-nav-toggle {
        display: inline-grid !important;
        width: 41px;
        height: 41px;
        margin: 20px 0 0 20px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--trada-navy);
    }
    .page-shell { padding: 24px 22px 52px; }
}
@media (max-width: 680px) {
    .page-shell { padding: 22px 17px 46px; }
    .mobile-nav-toggle { margin: 16px 0 0 17px; }
    .page-heading h2 { font-size: 24px; }
    .feature-card { min-height: 174px; }
    .feature-card:hover { box-shadow: var(--shadow-sm); }
    .client-boards-table .client-board-row { background: #fff; border-color: var(--border); box-shadow: none; }
    .auth-body { padding: 17px 12px; background: #f7f9fc; }
    .auth-layout { width: min(450px,100%); border-radius: 13px; box-shadow: var(--shadow-sm); }
    .auth-card.auth-card-modern { padding: 30px 23px; }
    .auth-card:not(.auth-card-modern) { width: min(430px,100%); }
}
@media (prefers-reduced-motion: reduce) {
    .feature-card, .feature-arrow, .nav-item { transition-duration: .01ms; }
}


/* TRADA Color · equilibrado, minimalista y enfocado en logística. */
:root {
    --trada-navy: #10336a;
    --trada-blue: #176fc2;
    --trada-cyan: #3bbfd7;
    --background: #f1f8fe;
    --surface-subtle: #f7fbfe;
    --surface-muted: #ebf6fc;
    --border: #dceaf3;
    --primary: #176fc2;
    --ring: rgba(23, 111, 194, .17);
    --blue: #176fc2;
    --blue-bg: #eaf5ff;
    --violet: #6272c9;
    --violet-bg: #f0f2fe;
}
html, body, .staff-body, .client-body, .app-shell, .workspace {
    background: linear-gradient(145deg, #edf8ff 0%, #f9fcff 44%, #ebf8fd 100%);
}
.workspace { isolation: isolate; position: relative; }
.workspace::before {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--sidebar-width);
    z-index: -1;
    background: url('/public/assets/logistica-fondo.svg') right top / auto min(90vh, 900px) no-repeat;
    pointer-events: none;
}
/* Las decoraciones quedan fuera de las tarjetas, tablas y ventanas. */
.page-shell { position: relative; z-index: 0; }
.sidebar {
    background: linear-gradient(180deg,#fff 0%,#f5fbff 56%,#eaf7fc 100%);
    border-right: 1px solid #d9eafa;
}
.sidebar-brand { border-bottom-color: #d6e9f6; }
.brand-mark {
    background: linear-gradient(145deg, #eefbff, #dceffc);
    border-color: #c6e6f5;
}
.brand-copy strong { color: #10336a; }
.nav-item.is-active {
    background: linear-gradient(100deg,#dcefff 0%,#e1f8fa 100%);
    border-color: #d7eaf7;
    color: #0b4a91;
}
.nav-item.is-active .icon { color: #146bb8; }
.nav-item:hover { background: #eaf6ff; }
.sidebar-user { border-top-color: #d6eaf8; }
.page-heading .eyebrow { color: #2385b4; }
.page-heading h2 { color: #10336a; }
.page-status { background: #e6f5ff; color: #206ca4; border-color: #cfeaf9; }
.feature-card, .panel, .boards-panel, .stats-kpi-card,
.stats-dashboard-v2 .stats-chart-card, .stats-dashboard-v2 .stats-kpi-card {
    background: rgba(255,255,255,.97);
    border-color: #dceaf4;
    box-shadow: 0 3px 14px rgba(24,77,131,.045);
}
.feature-card { border-top: 3px solid #58bce0; padding-top: 19px; }
.feature-card:nth-child(4n+1) { border-top-color: #269cda; }
.feature-card:nth-child(4n+2) { border-top-color: #68aed2; }
.feature-card:nth-child(4n+3) { border-top-color: #68cdb9; }
.feature-card:nth-child(4n+4) { border-top-color: #7f99df; }
.feature-card:hover { border-color: #b9d9ec; box-shadow: 0 7px 24px rgba(20,94,159,.08); }
.feature-copy h3 { color: #163e71; }
.feature-kicker { color: #4b88a8; }
.tone-blue { color: #1268ba; background: linear-gradient(130deg,#d9efff,#ecfaff); }
.tone-violet { color: #686dca; background: linear-gradient(130deg,#edefff,#f5f6ff); }
.tone-emerald { color: #168c86; background: linear-gradient(130deg,#d9f8ed,#effdf8); }
.tone-rose { color: #b55a86; background: linear-gradient(130deg,#ffecf4,#fff6fa); }
.tone-amber { color: #b77c19; background: linear-gradient(130deg,#fff0cf,#fffaf0); }
.button-primary, .auth-submit {
    background: linear-gradient(105deg, #1563b5 0%, #228acc 100%);
    color: #fff;
    border-color: #176fc2;
    box-shadow: 0 3px 10px rgba(23,111,194,.12);
}
.button-primary:hover, .auth-submit:hover {
    background: linear-gradient(105deg, #104f99, #197bb9);
    border-color: #1764ab;
    box-shadow: 0 4px 12px rgba(23,111,194,.15);
}
.button-outline { color: #1b6099; border-color: #cfe5f3; background: #fff; }
.button-outline:hover { background: #eaf6ff; border-color: #a8d4ed; }
.dialog-icon, .panel-title-icon { background: #e3f4ff; color: #176fc2; }
th { background: #f2f9ff; color: #437592; }
.table-footer { background: #fbfdff; }
tbody tr:hover, .clients-table tbody tr:hover { background: #eff9ff; }
.badge-success { background: #def7ea; color: #12784f; }
.badge-warning { background: #fff3da; color: #96631b; }
.clients-toolbar { background: rgba(255,255,255,.96); }
.board-icon-picker { grid-template-columns: repeat(auto-fit, minmax(83px, 1fr)); gap: 9px; }
.board-icon-choice { min-width: 0; }
.board-icon-choice span { border-radius: 11px; }
.board-icon-choice input:checked + span { background: linear-gradient(125deg,#e2f5ff,#ecfbfd); border-color: #2283ca; color: #1569ad; }
.trada-field-help { display: block; font-size: 11px; line-height: 1.5; color: #6485a2; margin-top: 5px; }
.board-tone-blue { background: #def1ff; color: #176bc0; }
.board-tone-cyan { background: #d9f8fc; color: #107fa8; }
.board-tone-emerald { background: #e1f9ec; color: #158665; }
.board-tone-violet { background: #efedff; color: #6a62b2; }
.board-tone-amber { background: #fff1d9; color: #9a6b19; }
.board-tone-orange { background: #fff0e7; color: #ba682c; }
.board-tone-rose { background: #ffebf5; color: #aa537d; }
.auth-body { background: linear-gradient(135deg,#eaf6fe 0%,#f9fcff 58%,#e1f5f9 100%); }
.auth-intro {
    background: linear-gradient(155deg,#0d326c 0%,#155593 62%,#168ca9 100%);
    position: relative;
    isolation: isolate;
}
.auth-intro::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    background: url('/public/assets/logistica-fondo.svg') center center / cover no-repeat;
    opacity: .45;
    z-index: -1;
    pointer-events: none;
}
.auth-intro-copy h1 em { color: #b4f2f9; }
.auth-brand-mark { background: #e7f8fc; }
.auth-layout { border-color: #cee4f4; box-shadow: 0 12px 34px rgba(19,85,141,.09); }
@media (max-width: 900px) {
    .workspace::before { inset: 0; background-size: 900px auto; opacity: .6; }
}
@media (max-width: 680px) {
    .feature-card { border-top-width: 3px; }
    .workspace::before { background-size: 720px auto; opacity: .5; }
    .board-icon-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* TRADA · Azul océano · Identidad basada en el isotipo de la marca.
   Paisaje logístico sutil en la aplicación y login reducido a lo esencial. */
:root {
    --trada-navy: #0d295f;
    --trada-blue: #176e9f;
    --trada-cyan: #58cae7;
    --primary: #176e9f;
    --blue: #176e9f;
    --blue-bg: #e4f5fc;
    --ring: rgba(45, 154, 196, .18);
    --background: #eef8fd;
    --surface-subtle: #f5fbfe;
    --surface-muted: #e9f5fb;
    --border: #d8e9f3;
    --border-strong: #bbdae9;
}
::selection { background: #c3eef8; color: #0d295f; }
html, body, .staff-body, .client-body, .app-shell {
    background: #eef8fd;
}
.workspace {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 96% 1%, rgba(85,203,232,.29), transparent 40%),
        radial-gradient(ellipse at 9% 88%, rgba(82,166,219,.22), transparent 46%),
        linear-gradient(143deg, #e6f5fd 0%, #f5fbff 44%, #e6f5fd 100%);
}
.workspace::before {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--sidebar-width);
    z-index: 0;
    background: url('/public/assets/logistica-fondo.svg') center center / cover no-repeat;
    opacity: .78;
    pointer-events: none;
}
.workspace::after {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0 0 0 var(--sidebar-width);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(248,252,255,.12), transparent 24%, rgba(240,250,255,.08));
}
.page-shell { position: relative; z-index: 1; }
.mobile-nav-toggle { position: relative; z-index: 2; }
.sidebar {
    background: linear-gradient(180deg,#fff 0%,#f5fbff 60%,#e6f6fc 100%);
    border-right-color: #d1e7f2;
}
.brand-mark {
    background: linear-gradient(145deg, #effaff, #d9f2fd);
    border-color: #c5e8f6;
}
.brand-copy strong { color: #0d295f; }
.nav-item { color: #456982; }
.nav-item:hover { background: #e5f5fe; color: #176e9f; }
.nav-item.is-active {
    background: linear-gradient(110deg,#d8efff 0%,#e1f9fd 100%);
    border-color: #c8eaf7;
    color: #135b8c;
}
.nav-item.is-active .icon { color: #197caf; }
.page-heading h2 { color: #0d295f; }
.page-heading .eyebrow { color: #298dac; }
.page-status { background: #e4f6fe; color: #176e9f; border-color: #c9eaf6; }
.feature-card, .panel, .boards-panel, .stats-kpi-card,
.stats-dashboard-v2 .stats-chart-card, .stats-dashboard-v2 .stats-kpi-card {
    background: rgba(255,255,255,.96);
    border-color: #d6e9f3;
    box-shadow: 0 4px 18px rgba(16,77,114,.05);
}
.feature-card { border-top-color: #2d9dcc; }
.feature-card:nth-child(4n+1) { border-top-color: #2d9dcc; }
.feature-card:nth-child(4n+2) { border-top-color: #66cfe5; }
.feature-card:nth-child(4n+3) { border-top-color: #3db8ab; }
.feature-card:nth-child(4n+4) { border-top-color: #6b94d4; }
.feature-card:hover { border-color: #abd7ec; box-shadow: 0 7px 22px rgba(22,111,159,.09); }
.feature-icon.tone-blue, .tone-blue { color: #156b99; background: linear-gradient(145deg,#d7f0ff,#e7f9ff); }
.feature-icon.tone-violet, .tone-violet { color: #5779bb; background: linear-gradient(145deg,#e6edff,#f4f7ff); }
.feature-icon.tone-emerald, .tone-emerald { color: #128b7b; background: linear-gradient(145deg,#dff8ef,#effcf8); }
.feature-icon.tone-amber, .tone-amber { color: #a7781d; background: linear-gradient(145deg,#fff0d7,#fffaf0); }
.button-primary, .auth-submit {
    background: linear-gradient(115deg,#145b91 0%,#188cba 100%);
    border-color: #1876a7;
    box-shadow: 0 4px 12px rgba(22,110,159,.14);
}
.button-primary:hover, .auth-submit:hover {
    background: linear-gradient(115deg,#124e7c,#147da6);
    border-color: #176c9c;
}
.button-outline { color: #176e9f; border-color: #c2e2f2; }
.button-outline:hover { background: #e6f6fe; border-color: #a8d7eb; }
input:focus, textarea:focus, select:focus,
.search-field:focus-within, .select-control:focus-within {
    border-color: #4aaad0;
    box-shadow: 0 0 0 3px var(--ring);
}
.dialog-icon, .panel-title-icon { color: #176e9f; background: #ddf3fd; }
th { background: #eef8fd; color: #3f708f; }
tbody tr:hover, .clients-table tbody tr:hover { background: #effaff; }
.board-icon-choice input:checked + span { background: #e1f6ff; border-color: #2189b8; color: #156e9f; }
.board-color-choice:has(input:checked) { border-color: #2189b8; }
.metric-percent-blue { color: #176e9f; background: #e1f5ff; }
.metric-percent-violet { color: #5378bd; background: #ebf0ff; }
.key-blue, .key-cat-0 { background: #176e9f; }
.key-violet, .key-cat-1, .dot-violet { background: #60c9e0; }

/* Login: una sola tarjeta, bienvenida, credenciales y derechos reservados. */
.auth-body.auth-body-login {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 16px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 18% 14%, rgba(60,164,206,.19) 0%, transparent 37%),
        radial-gradient(ellipse at 84% 91%, rgba(85,209,230,.22) 0%, transparent 37%),
        linear-gradient(145deg,#ecf8ff 0%,#f9fcff 54%,#e5f5fb 100%);
}
.auth-login-shell {
    display: grid;
    justify-items: center;
    gap: 22px;
    width: min(458px,100%);
}
.auth-layout.auth-layout-single {
    display: block;
    width: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    border: 1px solid #d8eaf3;
    border-radius: 19px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 16px 50px rgba(19,81,124,.085), 0 2px 6px rgba(19,81,124,.025);
}
.auth-layout-single .auth-card.auth-card-modern {
    display: block;
    width: 100%;
    padding: 40px 39px 38px;
    background: #fff;
    border-radius: 0;
}
.auth-layout-single .auth-card-heading { margin-bottom: 29px; text-align: left; }
.auth-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 31px; color: #102e64; font-weight: 800; font-size: 17px; letter-spacing: .075em; }
.auth-login-symbol { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid #d3ebf7; border-radius: 13px; background: linear-gradient(135deg,#f2fcff,#e5f7fd); }
.auth-login-symbol img { display: block; width: 43px; height: auto; max-height: 38px; object-fit: contain; }
.auth-layout-single .auth-card-heading h1 {
    margin: 0;
    font-size: clamp(23px, 3.5vw, 28px);
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -.04em;
    color: #0d295f;
}
.auth-layout-single .auth-card-heading p { margin-top: 8px; color: #667e94; font-size: 13px; line-height: 1.5; }
.auth-layout-single .auth-form { gap: 17px; }
.auth-layout-single .auth-form label > span:first-child { color: #294a67; font-size: 12px; font-weight: 650; }
.auth-layout-single .auth-input-wrap input {
    height: 48px;
    width: 100%;
    border: 1px solid #d7e7f0;
    border-radius: 9px;
    padding-left: 39px;
    background: #fbfdff;
    color: #213b54;
    font-size: 14px;
}
.auth-layout-single .auth-input-wrap input:focus { border-color: #4aaad0; background: #fff; }
.auth-layout-single .auth-field-icon { color: #74a4bf; }
.auth-layout-single .password-input-wrap input { padding-right: 44px; }
.auth-layout-single .remember-access-control { align-items: center; gap: 10px; }
.auth-layout-single .remember-access-control strong { color: #385672; font-size: 12px; font-weight: 600; }
.auth-layout-single .remember-access-control small { color: #8295a5; font-size: 10px; }
.auth-layout-single .remember-access-control input:checked + .remember-checkbox { background: #176e9f; border-color: #176e9f; }
.auth-layout-single .auth-submit {
    min-height: 48px;
    width: 100%;
    font-size: 13px;
    border-radius: 9px;
    margin-top: 4px;
}
.auth-layout-single .auth-message { font-size: 12px; }
.auth-login-footer {
    font-size: 11px;
    line-height: 1.6;
    color: #66859b;
    text-align: center;
    letter-spacing: .005em;
}
@media (max-width: 900px) {
    .workspace::before { inset: 0; background-size: auto 100vh; opacity: .65; }
    .workspace::after { inset: 0; }
}
@media (max-width: 680px) {
    .workspace::before { background-size: auto 100vh; background-position: 63% center; opacity: .52; }
    .auth-body.auth-body-login { padding: 22px 15px; }
    .auth-login-shell { gap: 19px; width: min(440px,100%); }
    .auth-layout.auth-layout-single { border: 1px solid #d8eaf3; border-radius: 16px; box-shadow: 0 14px 38px rgba(19,81,124,.075); }
    .auth-layout-single .auth-card.auth-card-modern { padding: 30px 24px 27px; }
    .auth-login-brand { margin-bottom: 27px; }
    .auth-layout-single .auth-card-heading { text-align: left; }
    .auth-layout-single .auth-card-heading h1 { font-size: 25px; }
    .auth-layout-single .auth-input-wrap input { font-size: 16px; }
    .auth-login-footer { font-size: 10px; }
}
@media (max-width: 380px) {
    .auth-layout-single .auth-card.auth-card-modern { padding: 27px 18px 23px; }
    .auth-layout-single .auth-card-heading h1 { font-size: 23px; }
}


/* TRADA 2026.10.28 v5 — Azul real intenso y navegación superior restaurada.
   Mantiene el login sin panel comercial y los fondos logísticos existentes. */
:root {
    --trada-navy: #0a2a66;
    --trada-blue: #1253b8;
    --trada-cyan: #31bfe3;
    --primary: #1253b8;
    --blue: #1253b8;
    --blue-bg: #e5efff;
    --ring: rgba(18, 83, 184, .22);
    --background: #eff5ff;
    --surface-subtle: #f6f9ff;
    --surface-muted: #e9f1ff;
    --border: #dce6f4;
    --border-strong: #b8cae6;
}
::selection { background: #c8eefe; color: #0a2a66; }
html, body, .app-shell, .client-body, .staff-body { background: #edf4fe; }
.workspace {
    background:
        radial-gradient(ellipse at 97% 3%, rgba(29, 98, 204, .16), transparent 37%),
        radial-gradient(ellipse at 8% 91%, rgba(49, 191, 227, .14), transparent 43%),
        linear-gradient(140deg, #eaf3ff 0%, #f7faff 47%, #e9f2ff 100%);
}
/* Topbar original: breadcrumb + nombre de la sección + perfil y rol. */
.workspace-topbar {
    min-height: 72px;
    height: 72px;
    /* En flujo normal: el navbar reserva espacio y se desplaza con la página. */
    position: relative;
    top: auto;
    z-index: 1;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #cfddf0;
    box-shadow: 0 3px 16px rgba(12, 52, 115, .035);
    backdrop-filter: blur(14px);
}
.workspace-topbar::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 30px;
    bottom: -1px;
    height: 3px;
    width: 130px;
    border-radius: 3px;
    background: linear-gradient(90deg, #1154be, #2cc2e8);
}
.workspace-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workspace-heading > div { display: grid; gap: 3px; min-width: 0; }
.workspace-heading strong { color: #092b68; font-size: 15px; font-weight: 750; }
.breadcrumb { color: #2153a0; font-size: 10px; font-weight: 740; letter-spacing: .07em; }
.breadcrumb span { color: #15a4d1; margin: 0 6px; }
.workspace-actions { display: flex; align-items: center; gap: 11px; }
.top-role-badge { background: #e9f2ff; color: #1453a6; border: 1px solid #c6daf8; }
.top-role-badge .icon { color: #1253b8; }
.top-avatar-link .avatar { box-shadow: 0 0 0 3px #e3eeff; }
.avatar { background: linear-gradient(145deg, #1253b8, #0a2a66); }
/* Side navigation has a more visible selected state, without becoming overly decorative. */
.sidebar { background: linear-gradient(180deg,#fff 0%,#f9fbff 62%,#edf5ff 100%); border-right-color: #d6e3f5; }
.sidebar-brand { border-bottom-color: #dce6f5; }
.brand-mark { background: linear-gradient(145deg,#eef8ff,#e0efff); border-color: #c8def5; }
.brand-copy strong { color: #092b68; }
.nav-item { color: #415e83; }
.nav-item:hover { background: #e8f1ff; color: #1253b8; }
.nav-item:hover .icon { color: #1253b8; }
.nav-item.is-active {
    color: #fff;
    background: linear-gradient(115deg,#104baa,#1566cf);
    border-color: #1253b8;
    box-shadow: 0 3px 11px rgba(18,83,184,.13);
}
.nav-item.is-active .icon { color: #a9ebff; }
.sidebar-user .icon-button:hover, .sidebar-close:hover { color: #1253b8; background: #e8f1ff; }
.page-heading h2, .stats-kpi-copy strong { color: #0a2a66; }
.page-heading .eyebrow, .page-status .icon { color: #1253b8; }
.page-status { color: #1253b8; background: #e6f0ff; border-color: #c8dcf7; }
.feature-card { border-top-color: #1253b8; }
.feature-card:nth-child(4n+1) { border-top-color: #1253b8; }
.feature-card:nth-child(4n+2) { border-top-color: #32bce0; }
.feature-card:nth-child(4n+3) { border-top-color: #169f9c; }
.feature-card:nth-child(4n+4) { border-top-color: #5d80cf; }
.feature-card:hover { border-color: #bad2f2; box-shadow: 0 6px 19px rgba(18,83,184,.09); }
.feature-icon.tone-blue, .tone-blue { background: linear-gradient(145deg,#d7e8ff,#e8f7ff); color: #1253b8; }
.feature-copy h3 { color: #173c78; }
.button-primary, .auth-submit {
    color: #fff;
    background: linear-gradient(105deg,#0f48a8,#1564ce);
    border-color: #1253b8;
    box-shadow: 0 3px 10px rgba(18,83,184,.17);
}
.button-primary:hover, .auth-submit:hover { background: linear-gradient(105deg,#0a3a8b,#1056b8); border-color: #0b459c; }
.button-outline { color: #1253b8; border-color: #bfd4f2; }
.button-outline:hover { color: #0c3987; background: #e7f0ff; border-color: #9bbce8; }
.icon-button:hover { background: #e7f0ff; color: #1253b8; border-color: #d0e1f7; }
.dialog-icon, .panel-title-icon { color: #1253b8; background: #e4efff; }
input:focus, textarea:focus, select:focus, .search-field:focus-within, .select-control:focus-within { border-color: #2972dc; box-shadow: 0 0 0 3px var(--ring); }
.board-icon-choice input:checked + span { color: #1253b8; background: #e3f0ff; border-color: #1253b8; }
.board-color-choice:has(input:checked) { border-color: #1253b8; }
.metric-percent-blue { color: #1253b8; background: #e4efff; }
.key-blue, .key-cat-0 { background: #1253b8; }
.key-violet, .key-cat-1, .dot-violet { background: #31bfe3; }
th { background: #edf4ff; color: #426a9d; }
tbody tr:hover, .clients-table tbody tr:hover { background: #f0f6ff; }
/* Login remains single-card, with only greetings, credentials and copyright. */
.auth-body.auth-body-login {
    background:
        radial-gradient(ellipse at 15% 12%, rgba(27,91,194,.15), transparent 37%),
        radial-gradient(ellipse at 85% 91%, rgba(49,191,227,.16), transparent 38%),
        linear-gradient(145deg,#edf4ff 0%,#fafcff 53%,#e9f2ff 100%);
}
.auth-layout.auth-layout-single { border-color: #cfddf1; box-shadow: 0 16px 46px rgba(12,50,118,.08); }
.auth-login-symbol { background: linear-gradient(135deg,#f4fbff,#e3f1ff); border-color: #cadff7; }
.auth-login-brand, .auth-layout-single .auth-card-heading h1 { color: #0a2a66; }
.auth-layout-single .remember-access-control input:checked + .remember-checkbox { background: #1253b8; border-color: #1253b8; }
.auth-login-footer { color: #5e7391; }
@media (max-width: 900px) {
    .workspace-topbar { height: 66px; min-height: 66px; padding: 0 18px; }
    .workspace-topbar::after { left: 18px; width: 95px; }
    .menu-toggle { display: inline-grid !important; color: #1253b8; background: #e9f2ff; border: 1px solid #cddff6; }
    .page-shell { padding: 28px 22px 52px; }
}
@media (max-width: 680px) {
    .workspace-topbar { padding: 0 16px; }
    .workspace-topbar::after { left: 16px; width: 74px; }
    .workspace-heading strong { font-size: 13px; }
    .breadcrumb { font-size: 9px; }
    .page-shell { padding: 25px 17px 46px; }
}

/* TRADA: organización empresarial sin alterar el tema principal. */
.trada-organization-form {margin:16px 0;padding:18px;background:#f8fbff;border:1px solid #d9e5f7;border-radius:14px;display:grid;gap:13px}
.trada-organization-form[hidden],.trada-new-credentials[hidden]{display:none!important}
.trada-organization-form label {display:grid;gap:6px;font-size:13px;font-weight:600}
.trada-organization-form label input,.trada-organization-form label select {min-width:0;width:100%;min-height:42px;border:1px solid #d7e2ef;background:#fff;border-radius:9px;padding:8px 11px;color:#12325d}
.trada-form-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.trada-org-item{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #e6edf6}
.trada-org-copy{min-width:0;flex:1;display:grid;gap:3px}.trada-org-copy small{color:#64748b;line-height:1.4}
.trada-folder-symbol{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#e7f1ff;color:#1758b4;min-width:39px;height:39px}
.trada-access-fieldset{border:1px solid #d7e2ef;border-radius:10px;padding:12px;min-width:0}
.trada-board-permissions{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:7px;max-height:190px;overflow:auto;margin-top:8px}
.trada-organization-form .trada-permission-option{display:flex;gap:8px;align-items:center;border:1px solid #e2eaf4;border-radius:9px;padding:8px;font-weight:500;background:#fff}
.trada-organization-form .trada-permission-option input{width:16px;min-height:16px;accent-color:#165bbd}
.trada-new-credentials{padding:14px;border:1px solid #a9d8ee;border-radius:11px;background:#ecf8ff;margin-top:12px;overflow-wrap:anywhere}
.trada-favorite-filter{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;color:#1e477b}
.trada-favorite-filter input{accent-color:#1760b9}
.trada-favorite-button{background:#eef5ff;border:1px solid #d7e7f8;color:#1254a9;font-size:22px;border-radius:8px;width:34px;height:34px;cursor:pointer;margin-right:5px;vertical-align:middle}
.trada-favorite-button:hover{background:#dcecff}
@media(max-width:680px){.trada-org-item{flex-wrap:wrap}.trada-organization-form{padding:12px}.trada-board-permissions{grid-template-columns:1fr}}