:root {
    /* Variables públicas sobrescritas desde application.properties. */
    --theme-hero-start: #0a1830;
    --theme-hero-end: #061020;
    --theme-primary: #2468c9;
    --theme-primary-dark: #1754a5;
    --theme-primary-light: #3478df;
    --theme-primary-soft: #eaf2ff;
    --theme-primary-very-soft: #f5f9ff;
    --theme-button-start: #2b70d7;
    --theme-button-end: #174b9b;
    --theme-page: #f7f9fc;
    --theme-surface: #ffffff;
    --theme-logo-background: #ffffff;

    --navy-950: var(--theme-hero-end);
    --navy-900: var(--theme-hero-start);
    --navy-850: var(--theme-hero-start);
    --blue-700: var(--theme-primary-dark);
    --blue-600: var(--theme-primary);
    --blue-500: var(--theme-primary-light);
    --blue-100: var(--theme-primary-soft);
    --blue-50: var(--theme-primary-very-soft);
    --ink-900: #10213a;
    --ink-700: #394b63;
    --ink-500: #6d7c91;
    --line: #d8e2ef;
    --surface: var(--theme-surface);
    --page: var(--theme-page);
    --amber: #ef9f13;
    --amber-bg: #fff8df;
    --green: #079447;
    --green-bg: #edfff4;
    --purple: #7c2ed2;
    --purple-bg: #f3e8ff;
    --danger: #c83838;
    --danger-bg: #fff1f1;
    --shadow: 0 18px 50px rgba(10, 35, 78, .12);
    --shadow-soft: 0 8px 24px rgba(10, 35, 78, .08);
    --radius-lg: 22px;
    --radius-md: 15px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--page);
    color: var(--ink-900);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.app-boot {
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--blue-700);
}

.tracking-app {
    min-height: 100vh;
    background: var(--page);
}
.tracking-app.dark {
    --surface: #111d31;
    --page: #091323;
    --ink-900: #f4f7fc;
    --ink-700: #c3cddd;
    --ink-500: #94a4ba;
    --line: #2b3a53;
    --blue-50: #15243d;
    --blue-100: #193052;
    --green-bg: #0e3225;
    --amber-bg: #362b12;
    --purple-bg: #2c1b43;
    --danger-bg: #3b1d25;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, .22);
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 690px;
    color: #fff;
    background:
        radial-gradient(circle at 77% 17%, rgba(54, 119, 224, .18), transparent 28%),
        linear-gradient(142deg, var(--theme-hero-start), var(--theme-hero-end) 78%);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .36;
    background-image:
        linear-gradient(rgba(83, 127, 190, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 127, 190, .12) 1px, transparent 1px);
    background-size: 136px 136px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.hero::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -68px;
    height: 118px;
    background: var(--page);
    border-radius: 50% 50% 0 0 / 55% 55% 0 0;
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: min(1360px, calc(100% - 48px));
    margin: 0 auto;
    padding: 36px 0 115px;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: flex;
    align-items: center;
    min-height: 80px;
}
.brand-logo {
    width: min(330px, 58vw);
    max-height: 82px;
    object-fit: contain;
    border-radius: 11px;
    background: var(--theme-logo-background);
    padding: 7px 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.hero-actions { display: flex; align-items: center; gap: 13px; }
.year-chip {
    min-width: 84px;
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
}
.theme-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: #eff5ff;
    color: #183b69;
    display: grid;
    place-items: center;
    font-size: 21px;
    transition: transform .2s ease, background .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px); background: #fff; }

.hero-content {
    max-width: 760px;
    padding-top: 55px;
}
.hero-title {
    margin: 0;
    font-size: clamp(55px, 6vw, 86px);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 900;
}
.hero-title span {
    display: block;
    margin-top: 12px;
    color: var(--theme-primary-light);
}
.hero-subtitle {
    margin: 38px 0 31px;
    color: #dce5f4;
    font-size: 20px;
    line-height: 1.5;
}
.search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}
.search-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 47px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-weight: 760;
    transition: .2s ease;
}
.search-tab:hover { background: rgba(255,255,255,.11); }
.search-tab.active {
    border-color: var(--blue-600);
    background: var(--blue-600);
    box-shadow: 0 8px 24px rgba(30, 98, 202, .28);
}
.search-tab-icon { font-size: 17px; }
.search-row {
    display: flex;
    align-items: stretch;
    width: min(100%, 730px);
    min-height: 68px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(0,0,0,.18);
}
.search-year {
    width: 112px;
    border: 0;
    border-right: 1px solid #e1e6ee;
    outline: 0;
    padding: 0 13px;
    color: #1c3558;
    background: transparent;
    font-weight: 750;
}
.search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 14px;
    color: #9aa6b5;
    font-size: 21px;
    pointer-events: none;
}
.search-input {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #14233b;
    padding: 0 18px 0 48px;
    font-size: 17px;
    font-weight: 650;
}
.search-input::placeholder { color: #b4bdc8; font-weight: 600; }
.search-button {
    min-width: 160px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-button-start), var(--theme-button-end));
    box-shadow: 0 9px 20px rgba(25, 79, 157, .3);
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: transform .2s ease, filter .2s ease;
}
.search-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.search-button:disabled { opacity: .66; cursor: wait; transform: none; }
.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
    color: #aebbd0;
    font-size: 14px;
    font-weight: 650;
}
.trust-item { display: inline-flex; align-items: center; gap: 8px; }

.page-main {
    position: relative;
    z-index: 4;
    width: min(1390px, calc(100% - 48px));
    margin: -12px auto 0;
    padding-bottom: 56px;
}
.empty-panel {
    min-height: 180px;
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    display: grid;
    place-items: center;
    padding: 32px;
    text-align: center;
    color: var(--ink-500);
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    box-shadow: var(--shadow-soft);
}
.error-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 86px;
    padding: 22px 25px;
    border: 1px solid #f0bcbc;
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    color: var(--danger);
    box-shadow: var(--shadow-soft);
}
.error-panel strong { display: block; margin-bottom: 4px; }
.loading-panel {
    min-height: 190px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--line);
    border-top-color: var(--blue-600);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tracking-result { color: var(--ink-900); }
.result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}
.result-heading h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: var(--blue-700);
    font-size: 25px;
    letter-spacing: -.02em;
}
.export-wrap { position: relative; }
.export-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink-900);
    font-weight: 750;
}
.export-menu {
    position: absolute;
    z-index: 12;
    top: calc(100% + 8px);
    right: 0;
    width: 165px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.export-menu button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink-900);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.export-menu button:hover { background: var(--blue-50); }
.export-menu button + button { border-top: 1px solid var(--line); }
.export-pdf { color: #df3a3a; }
.export-excel { color: #0d9c4b; }
.export-image { color: #3478df; }

.summary-card, .subject-card, .current-strip, .panel {
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.summary-card {
    min-height: 68px;
    border-radius: var(--radius-md);
    padding: 15px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.expedient-line { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.expedient-number {
    color: var(--blue-700);
    font-size: 22px;
    font-weight: 900;
}
.count-chip, .status-chip, .document-chip, .current-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
.count-chip {
    padding: 7px 12px;
    border: 1px solid #bfd1ed;
    background: var(--blue-100);
    color: var(--blue-700);
    font-size: 13px;
}
.start-date {
    color: var(--ink-500);
    font-size: 14px;
}
.start-date strong { color: var(--ink-900); }
.subject-card {
    min-height: 82px;
    border-radius: var(--radius-md);
    margin-top: 12px;
    padding: 18px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.label-small {
    margin-bottom: 7px;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.subject-value { font-size: 16px; font-weight: 850; line-height: 1.4; }
.document-chip {
    padding: 9px 15px;
    background: var(--purple-bg);
    color: var(--purple);
    font-size: 12px;
    text-transform: uppercase;
}
.current-strip {
    min-height: 58px;
    border-color: #f1c04a;
    border-radius: var(--radius-md);
    background: var(--amber-bg);
    margin-top: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.current-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    color: #8b4d00;
    font-size: 13px;
    font-weight: 850;
}
.tracking-app.dark .current-route { color: #ffc85e; }
.current-label {
    padding: 7px 11px;
    border-radius: 7px;
    background: #ffdf78;
    color: #914d00;
    font-size: 11px;
    letter-spacing: .05em;
}
.route-arrow { color: var(--amber); font-size: 18px; }
.status-chip {
    padding: 7px 13px;
    border: 1px solid #bbcae0;
    background: #edf3fb;
    color: #164f9c;
    font-size: 12px;
    text-transform: uppercase;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.25fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}
.panel { border-radius: var(--radius-md); overflow: hidden; }
.panel-title {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    font-weight: 850;
}
.tree-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}
.tree-filter-wrap { position: relative; flex: 1; }
.tree-filter-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-500);
}
.tree-filter {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    outline: 0;
    padding: 0 12px 0 39px;
    background: var(--blue-50);
    color: var(--ink-900);
}
.tree-counter { color: var(--ink-500); font-size: 12px; font-weight: 800; }
.tree-list {
    min-height: 215px;
    max-height: 500px;
    overflow: auto;
    padding: 8px;
}
.tree-item {
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-900);
    padding-left: calc(12px + var(--tree-indent, 0px));
    padding-right: 33px;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: inherit;
    line-height: 1.35;
    min-height: var(--tree-row-height, 36px);
    padding-top: var(--tree-padding-v, 7px);
    padding-bottom: var(--tree-padding-v, 7px);
    gap: var(--tree-node-gap, 8px);
}
.tree-item:hover { background: var(--blue-50); }
.tree-item.active { background: var(--blue-100); color: var(--blue-700); font-weight: 850; }
.tree-item-current {
    position: absolute;
    right: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-600);
}
.tree-node-icon { flex: 0 0 auto; color: var(--amber); }
.tree-node-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-zoom {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 15px;
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 750;
}
.zoom-button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink-900);
}

.external-notice {
    margin: 17px;
    padding: 17px 19px;
    border: 1px solid #80ddb0;
    border-radius: 14px;
    background: var(--green-bg);
    color: var(--green);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.external-notice strong { display: block; margin-bottom: 5px; }
.external-notice small { color: inherit; line-height: 1.45; }
.transit-card {
    margin: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.transit-head {
    min-height: 53px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--line);
    background: var(--blue-50);
    font-size: 13px;
}
.transit-title strong { color: var(--blue-700); }
.current-code {
    padding: 7px 12px;
    border: 1px solid #b8cce9;
    background: var(--blue-100);
    color: var(--blue-700);
    font-size: 12px;
}
.transit-flow {
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 19px;
}
.flow-box {
    min-height: 190px;
    border: 1px solid #bed0eb;
    border-radius: 14px;
    padding: 17px;
    background: var(--surface);
}
.flow-label {
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.flow-office {
    margin: 10px 0 7px;
    color: var(--blue-700);
    font-weight: 900;
    line-height: 1.3;
}
.flow-meta { color: var(--ink-700); font-size: 13px; line-height: 1.5; }
.flow-meta em { color: var(--ink-500); }
.flow-separator { margin: 13px 0; border: 0; border-top: 1px solid var(--line); }
.flow-person { font-size: 13px; line-height: 1.5; }
.flow-person strong { color: var(--blue-700); }
.flow-arrow {
    display: grid;
    place-items: center;
    color: var(--blue-600);
    font-size: 28px;
}
.info-card {
    margin: 0 17px 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.info-card-title {
    min-height: 46px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid var(--line);
    background: var(--blue-50);
    font-weight: 850;
    font-size: 13px;
}
.info-rows { padding: 12px 17px; }
.info-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
}
.info-row-label { color: var(--ink-500); }
.info-row-value { font-weight: 750; }
.no-selection { min-height: 380px; display: grid; place-items: center; color: var(--ink-500); }

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.footer-inner {
    width: min(1450px, calc(100% - 48px));
    min-height: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.footer-brand { display: flex; align-items: center; gap: 15px; }
.footer-logo { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; background: var(--theme-logo-background); }
.footer-title { font-weight: 900; letter-spacing: .13em; text-transform: uppercase; font-size: 14px; }
.footer-subtitle { margin-top: 6px; color: var(--ink-500); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: flex; gap: 45px; color: var(--ink-500); font-size: 11px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }

@media (max-width: 980px) {
    .hero { min-height: 660px; }
    .hero-content { padding-top: 45px; }
    .content-grid { grid-template-columns: 1fr; }
    .tree-list { max-height: 390px; }
}
@media (max-width: 720px) {
    .hero-inner, .page-main, .footer-inner { width: min(100% - 28px, 100%); }
    .hero-inner { padding-top: 20px; }
    .brand-logo { width: 235px; max-height: 66px; }
    .year-chip { display: none; }
    .hero-content { padding-top: 47px; }
    .hero-title { font-size: clamp(46px, 15vw, 65px); }
    .hero-subtitle { margin: 28px 0 24px; font-size: 17px; }
    .search-tabs { gap: 7px; }
    .search-tab { padding: 0 13px; font-size: 12px; }
    .search-row { min-height: 62px; border-radius: 22px; }
    .search-button { min-width: 105px; border-radius: 16px; font-size: 12px; }
    .search-input { font-size: 14px; padding-left: 39px; }
    .search-icon { left: 10px; }
    .search-year { width: 83px; font-size: 13px; padding: 0 7px; }
    .trust-row { gap: 14px; font-size: 12px; }
    .summary-card, .subject-card, .current-strip { align-items: flex-start; flex-direction: column; }
    .current-strip { gap: 10px; }
    .current-route { gap: 7px; }
    .start-date { line-height: 1.5; }
    .transit-flow { grid-template-columns: 1fr; }
    .flow-arrow { min-height: 35px; transform: rotate(90deg); }
    .flow-box { min-height: auto; }
    .info-row { grid-template-columns: 1fr; gap: 3px; }
    .footer-inner { min-height: 180px; flex-direction: column; justify-content: center; align-items: flex-start; }
    .footer-links { gap: 22px; }
}
@media (max-width: 480px) {
    .hero { min-height: 720px; }
    .theme-toggle { width: 42px; height: 42px; }
    .brand-logo { width: 210px; }
    .search-tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .search-tab:last-child { grid-column: 1 / -1; }
    .search-row { flex-wrap: wrap; height: auto; padding: 7px; }
    .search-year { height: 46px; }
    .search-input-wrap { height: 46px; }
    .search-button { width: 100%; height: 48px; }
    .result-heading { align-items: flex-start; }
    .result-heading h2 { font-size: 21px; }
    .expedient-number { font-size: 18px; }
    .tree-item { font-size: 11px; }
}

@media print {
    body, .tracking-app, .tracking-app.dark { background: #fff !important; color: #111 !important; }
    .hero, .site-footer, .export-wrap, .empty-panel, .error-panel { display: none !important; }
    .page-main { width: 100%; margin: 0; padding: 0; }
    .tracking-result { display: block !important; }
    .summary-card, .subject-card, .current-strip, .panel, .transit-card, .info-card { box-shadow: none !important; break-inside: avoid; }
    .content-grid { grid-template-columns: 1fr 1.25fr; }
    .tree-list { max-height: none; overflow: visible; }
    .tree-toolbar, .tree-zoom { display: none; }
    .panel, .summary-card, .subject-card, .current-strip { background: #fff !important; color: #111 !important; }
}

/* Identidad institucional con escudo vertical y nombre configurable. */
.brand { gap: 14px; }
.brand-crest {
    width: 72px;
    height: 82px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 7px 14px rgba(0,0,0,.24));
}
.brand-copy { min-width: 0; }
.brand-name {
    max-width: 470px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .015em;
    text-transform: uppercase;
}
.brand-subtitle {
    margin-top: 6px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
@media (max-width: 560px) {
    .brand-crest { width: 53px; height: 65px; }
    .brand-name { max-width: 210px; font-size: 14px; }
    .brand-subtitle { font-size: 9px; letter-spacing: .1em; }
}


/* --- Ajuste visual final: escala equivalente al módulo de Ayacucho --- */
.ui-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: middle;
}
.ui-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}
.search-tab-icon { font-size: 15px; }
.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa6b5;
}
.tree-filter-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-500);
}
.search-button, .export-button, .zoom-button, .theme-toggle, .trust-item,
.result-heading h2, .panel-title, .info-card-title, .start-date,
.current-route, .transit-title, .tree-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.search-button { justify-content: center; }
.button-icon { width: 1.05em; height: 1.05em; }
.export-button .ui-icon-svg, .export-menu .ui-icon-svg, .zoom-button .ui-icon-svg,
.result-heading h2 .ui-icon-svg, .panel-title .ui-icon-svg,
.info-card-title .ui-icon-svg, .tree-node-icon.ui-icon-svg,
.theme-toggle .ui-icon-svg { width: 1.05em; height: 1.05em; }
.start-date .ui-icon-svg, .current-route .ui-icon-svg,
.transit-title .ui-icon-svg { width: 1em; height: 1em; }
.export-menu button { justify-content: flex-start; }
.theme-toggle {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Encabezado centrado y con la misma escala visual de la referencia. */
.hero { min-height: 645px; }
.hero-inner {
    width: min(1340px, calc(100% - 40px));
    padding: 28px 0 96px;
}
.topbar { min-height: 70px; }
.brand { min-height: 70px; gap: 13px; }
.brand-crest {
    width: 57px;
    height: 66px;
}
.brand-name {
    max-width: 470px;
    font-size: 19px;
    line-height: 1.08;
}
.brand-subtitle {
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: .17em;
}
.hero-content {
    max-width: 690px;
    padding-top: 37px;
}
.hero-title {
    font-size: clamp(54px, 5.2vw, 80px);
    line-height: .94;
}
.hero-title span { margin-top: 7px; }
.hero-subtitle {
    margin: 34px 0 29px;
    font-size: 18px;
}
.search-tabs { margin-bottom: 23px; }
.search-tab {
    min-height: 43px;
    padding: 0 18px;
    font-size: 14px;
}
.search-row {
    width: min(100%, 625px);
    min-height: 66px;
    border-radius: 27px;
}
.search-button {
    min-width: 142px;
    border-radius: 19px;
    font-size: 14px;
}
.search-input { font-size: 16px; }
.trust-row {
    margin-top: 27px;
    gap: 22px;
    font-size: 13px;
}
.year-chip {
    min-width: 76px;
    padding: 10px 16px;
    font-size: 14px;
}
.theme-toggle { width: 46px; height: 46px; }
.hero::after {
    bottom: -62px;
    height: 104px;
}
.page-main {
    width: min(1390px, calc(100% - 48px));
    margin: -10px auto 0;
}
.footer-inner { width: min(1450px, calc(100% - 48px)); }
.content-grid {
    grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.25fr);
}

/* Contraste correcto del pie en modo oscuro. */
.tracking-app.dark .site-footer { color: #f4f7fc; }
.tracking-app.dark .footer-title { color: #f4f7fc; }
.tracking-app.dark .footer-subtitle,
.tracking-app.dark .footer-links { color: #b7c4d7; }

@media (max-width: 980px) {
    .hero { min-height: 635px; }
    .hero-inner { width: min(100% - 32px, 100%); }
    .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .hero { min-height: 650px; }
    .hero-inner, .page-main, .footer-inner { width: min(100% - 28px, 100%); }
    .brand-crest { width: 50px; height: 60px; }
    .brand-name { max-width: 250px; font-size: 15px; }
    .brand-subtitle { font-size: 9px; }
    .hero-content { padding-top: 40px; }
    .hero-title { font-size: clamp(46px, 14vw, 64px); }
}


/* Zoom funcional del árbol de trámites. */
.tree-list { font-size: 12px; }
.tree-item {
    font-size: inherit;
    min-height: var(--tree-row-height, 36px);
    padding-top: var(--tree-padding-v, 7px);
    padding-bottom: var(--tree-padding-v, 7px);
    gap: var(--tree-node-gap, 8px);
    transition: font-size .16s ease, min-height .16s ease, padding .16s ease;
}
.tree-item .tree-node-icon { font-size: 1.05em; }
.zoom-value {
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.zoom-button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

/* --- Hilos documentarios y tiempos por movimiento --- */
.detail-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.detail-title-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.initial-chip {
    padding: 6px 11px;
    border: 1px solid #b8cce9;
    border-radius: 7px;
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: 11px;
    font-weight: 850;
}
.tree-item {
    position: relative;
    outline: none;
    overflow: visible;
}
.tree-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--blue-600);
}
.tree-expander {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--ink-500);
    transition: transform .18s ease;
}
.tree-expander-empty { display: inline-block; }
.tree-item.has-children .tree-expander { color: var(--blue-700); }
.tree-item:not(.tree-level-0)::before {
    content: "";
    position: absolute;
    left: calc(17px + var(--tree-indent) - var(--tree-step, 22px));
    top: -8px;
    bottom: 50%;
    border-left: 1px solid #bfd0e7;
}
.tree-item:not(.tree-level-0)::after {
    content: "";
    position: absolute;
    left: calc(17px + var(--tree-indent) - var(--tree-step, 22px));
    top: 50%;
    width: calc(var(--tree-step, 22px) - 8px);
    border-top: 1px solid #bfd0e7;
}
.tree-item:not(.tree-level-0):not(.last-sibling)::before {
    bottom: -8px;
}
.tracking-app.dark .tree-item:not(.tree-level-0)::before,
.tracking-app.dark .tree-item:not(.tree-level-0)::after {
    border-color: #405575;
}
.tree-node-text { min-width: 0; }
.flow-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.flow-label-row .ui-icon-svg {
    width: 15px;
    height: 15px;
    color: var(--ink-500);
}
.flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.duration-badge {
    max-width: 70px;
    padding: 5px 7px;
    border: 1px solid #f1c04a;
    border-radius: 6px;
    background: #fff3c4;
    color: #a45a00;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
.duration-badge.in-progress {
    border-color: #9ec0ec;
    background: var(--blue-100);
    color: var(--blue-700);
}
.area-duration {
    margin-top: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    background: var(--amber-bg);
    color: #8b4d00;
    font-size: 11px;
    line-height: 1.35;
}
.area-duration.in-progress {
    background: var(--blue-100);
    color: var(--blue-700);
}
.tracking-app.dark .duration-badge {
    background: #3a2c0c;
    color: #ffd47b;
}
.tracking-app.dark .area-duration {
    color: #ffd47b;
}

@media (max-width: 720px) {
    .flow-arrow {
        transform: none;
        min-height: 44px;
        flex-direction: row;
    }
    .flow-arrow .ui-icon-svg { transform: rotate(90deg); }
    .duration-badge { max-width: none; }
}


/* Árbol de trazabilidad: conectores padre-hijo al estilo Ayacucho. */
.tree-list {
    position: relative;
}
.tree-item {
    overflow: visible;
}
.tree-expander {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    color: var(--ink-500);
    position: relative;
    z-index: 2;
}
.tree-expander-empty {
    visibility: hidden;
}
.tree-thread {
    position: absolute;
    left: calc(13px + var(--tree-indent, 0px) - var(--tree-step, 22px));
    top: -9px;
    width: calc(var(--tree-step, 22px) - 8px);
    height: calc(50% + 10px);
    border-left: 1px solid #b9c9dc;
    border-bottom: 1px solid #b9c9dc;
    border-bottom-left-radius: 5px;
    pointer-events: none;
}
.tracking-app.dark .tree-thread {
    border-color: #4b607c;
}
.tree-item.has-children > .tree-node-icon {
    color: var(--amber);
}
.tree-item.is-leaf > .tree-node-icon {
    color: #7d8fa7;
}
.tree-item.active .tree-thread {
    border-color: var(--blue-600);
}


/* Segmento visual para búsqueda por Clave de Verificación. */
.search-code-prefix {
    min-width: 122px;
    padding: 0 17px;
    border-right: 1px solid #e1e6ee;
    color: #a5adb9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.search-code-icon {
    width: 17px;
    height: 17px;
    color: #9aa6b5;
}
.search-row-key .search-input { padding-left: 47px; }

@media (max-width: 720px) {
    .search-code-prefix {
        min-width: 105px;
        padding: 0 12px;
        font-size: 11px;
        gap: 7px;
    }
    .search-code-icon { width: 15px; height: 15px; }
}

@media (max-width: 480px) {
    .search-row-key .search-code-prefix {
        width: 108px;
        height: 46px;
        flex: 0 0 108px;
    }
    .search-row-key .search-input-wrap {
        flex: 1 1 calc(100% - 108px);
        min-width: 170px;
    }
}