:root {
    --epcm-ink: #162733;
    --epcm-deep: #203744;
    --epcm-cyan: #9fdbea;
    --epcm-blue: #397c98;
    --epcm-surface: #f3f7f9;
}

body { background: var(--epcm-surface); color: var(--epcm-ink); }
.app-header {
    background: linear-gradient(135deg, #172a36, #294654);
    color: #fff;
    box-shadow: 0 4px 18px rgba(18, 42, 54, .18);
}
.app-header__inner { min-height: 76px; }
.app-brand { color: #fff; text-decoration: none; }
.app-brand:hover { color: #fff; }
.app-brand__mark {
    width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
}
.app-brand__title {
    display: block; font-size: clamp(1.05rem, 2.6vw, 1.45rem);
    font-weight: 650; line-height: 1.05;
}
.app-brand__subtitle {
    color: var(--epcm-cyan); font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase;
}
.page-shell { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: 3rem; }
.card { border: 0; border-radius: 1rem; }
.btn-primary {
    --bs-btn-bg: var(--epcm-blue); --bs-btn-border-color: var(--epcm-blue);
    --bs-btn-hover-bg: #2d677f; --bs-btn-hover-border-color: #2d677f;
}
.table-responsive { border-radius: .75rem; }
.table > :not(caption) > * > * { padding: .8rem .75rem; }
.table thead th { white-space: nowrap; }
.search-panel {
    background: #fff; border-radius: 1rem;
    box-shadow: 0 5px 22px rgba(27, 57, 71, .08);
}
.sticky-tools {
    position: sticky;
    top: .75rem;
    z-index: 1020;
}
.section-filter {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(57, 124, 152, .14);
    backdrop-filter: blur(8px);
}
.legend-swatch {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: .35rem;
    border: 2px solid currentColor;
    border-radius: .18rem;
    vertical-align: -.2rem;
}
.legend-swatch--line {
    height: .7rem;
    border-style: dashed;
    background: transparent !important;
}
.chart-legend {
    row-gap: .75rem;
    font-size: 1rem;
}
.seccion-obra { scroll-margin-top: 7rem; }
.seccion-obra[hidden] { display: none !important; }
.brand-login {
    width: 132px; height: 198px; border-radius: 1rem; object-fit: cover;
}
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#grafico-avance-conjunto { min-width: 720px; }

@media (max-width: 767.98px) {
    .app-header__inner, .page-heading, .admin-actions {
        align-items: stretch !important; flex-direction: column;
    }
    .app-header .btn, .admin-actions .btn { width: 100%; }
    .app-brand__mark { width: 44px; height: 44px; }
    .card-body { padding: 1rem; }
    .card-body { overflow-x: auto; }
    .mobile-stack { flex-direction: column; align-items: stretch !important; }
    .sticky-tools { top: .4rem; }
}