/* Shared screen UI. Keep print/export layouts and icon fonts independent. */
:root {
    --font-main: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-weight: 400;
    --ui-text: #172b40;
    --ui-muted: #526579;
    --ui-line: #e1e7ee;
    --ui-radius: 16px;
    --ui-control-radius: 12px;
    --ui-shadow: 0 8px 28px -18px rgba(15, 23, 42, .22);
    --ui-title: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    --ui-section: 1.125rem;
    --ui-body: .9375rem;
    --ui-small: .8125rem;
}

/* One regular weight for all screen UI, including dynamically loaded modules.
   Important declarations in this layer outrank legacy unlayered rules, even
   their !important headings/buttons. Icon glyph weights and authored document
   content are not UI typography; retain those and the print/export styles. */
@layer cabo-typography {
    @media screen {
        body,
        body :where(*):not(:where(
            .fa, .fas, .far, .fal, .fad, .fab, .fat, .fass, .fasr, .fasl, .fast,
            [class^="fa-"], [class*=" fa-"],
            .ctr-preview, .ctr-preview *,
            [contenteditable="true"], [contenteditable="true"] *,
            [contenteditable=""], [contenteditable=""] *
        )) {
            font-weight: var(--ui-font-weight) !important;
        }
        input::placeholder, textarea::placeholder,
        .announcement-weather-card::after, .col-kpi-card::after,
        [data-label]::before {
            font-weight: var(--ui-font-weight) !important;
        }
    }
}

@media screen {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-family: var(--font-main); font-size: var(--ui-body); line-height: 1.5; }
    :is(button, input, select, textarea, .swal2-popup) { font-family: var(--font-main) !important; }
    :is(#portal-view, #dynamic-content, .swal2-popup) :where(*, *::before, *::after) { box-sizing: border-box; }
    #sidebar, #sidebar * { box-sizing: border-box; }
    :is(#portal-view, #dynamic-content) { min-width: 0; }
    :is(#portal-view, #dynamic-content) > * { min-width: 0; max-width: 100%; }

    :is(#portal-view, #dynamic-content) :is(h1, h2) {
        font-family: var(--font-main) !important;
        font-size: var(--ui-title) !important;
        font-weight: var(--ui-font-weight) !important;
        line-height: 1.2 !important;
        letter-spacing: -.025em !important;
        overflow-wrap: anywhere;
    }
    :is(#portal-view, #dynamic-content) h3 {
        font-family: var(--font-main) !important;
        font-size: var(--ui-section) !important;
        font-weight: var(--ui-font-weight) !important;
        line-height: 1.35 !important;
        letter-spacing: -.015em;
    }
    :is(#portal-view, #dynamic-content) h4 { font-size: 1rem; font-weight: var(--ui-font-weight); line-height: 1.4; }
    :is(#portal-view, #dynamic-content) p { line-height: 1.6; }
    :is(#portal-view, #dynamic-content) :is(button, input, select, textarea) { max-width: 100%; }
    :is(#portal-view, #dynamic-content) :is(input, select, textarea) { font-size: .875rem; }
    :is(#portal-view, #dynamic-content) :is(button[class*="-btn"], button[class*="-tab"], .btn) {
        font-weight: var(--ui-font-weight);
        line-height: 1.35;
    }
    :is(#portal-view, #dynamic-content) :is(.shadow-card, .panel-card, .module-card) {
        border: 1px solid var(--ui-line);
        box-shadow: var(--ui-shadow);
        border-radius: var(--ui-radius);
    }
    :is(#portal-view, #dynamic-content) table { font-variant-numeric: tabular-nums; }
    :is(#portal-view, #dynamic-content) th { line-height: 1.4; }
    :is(button, a, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid #2563eb !important;
        outline-offset: 3px;
    }
    .cabo-table-scroll {
        width: 100%; max-width: 100%; min-width: 0;
        overflow-x: auto; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9;
    }
    .cabo-table-scroll[data-overflow="true"]::before {
        content: 'Desliza para ver todas las columnas';
        display: block; position: sticky; left: 0;
        width: fit-content; max-width: 100%;
        padding: 8px 12px; color: var(--ui-muted);
        font-size: .75rem; font-weight: var(--ui-font-weight); line-height: 1.4;
    }
    .cabo-drawer-close { display: none; }
    .swal2-popup { border-radius: 20px !important; max-width: calc(100vw - 24px) !important; }
    .swal2-title { font-size: 1.5rem !important; font-weight: var(--ui-font-weight) !important; line-height: 1.25 !important; }
    .swal2-html-container { font-size: var(--ui-body) !important; line-height: 1.55 !important; }
    .swal2-actions button { min-height: 44px; font-weight: var(--ui-font-weight) !important; border-radius: var(--ui-control-radius) !important; }

    /* Login uses the same type scale, including on short screens/with a keyboard. */
    body.login-page { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: auto; box-sizing: border-box; padding: 88px 20px 32px !important; }
    .login-page .login-card-wrapper { position: static; transform: none; width: 100%; max-width: 440px; margin: auto; }
    .login-page .login-card { width: 100%; box-sizing: border-box; padding: 32px; border: 1px solid var(--ui-line); border-radius: 24px; box-shadow: var(--ui-shadow); }
    .login-page .logo-capsule { height: auto !important; padding: 16px !important; margin-bottom: 24px !important; box-shadow: none; }
    .login-page .logo-capsule img { width: 230px; max-width: 100%; height: auto; max-height: none !important; }
    .login-page .login-card h2 { font-size: 1.75rem; line-height: 1.2; font-weight: var(--ui-font-weight); letter-spacing: -.025em; }
    .login-page .input-field { font-size: 16px; min-height: 48px; border-radius: var(--ui-control-radius); }
    .login-page .login-submit-btn { min-height: 48px; border-radius: var(--ui-control-radius); font-weight: var(--ui-font-weight); }
    .login-page .login-back-link { min-height: 44px; box-sizing: border-box; }
}

@media screen and (max-width: 1024px) {
    body.main-layout #sidebar { left: 0 !important; box-sizing: border-box; transform: translateX(-110%) !important; }
    body.main-layout #sidebar.is-open { transform: translateX(0) !important; }
    .cabo-drawer-close {
        display: flex; align-items: center; justify-content: center;
        align-self: flex-end; flex-shrink: 0; width: 44px; height: 44px;
        margin: 0 0 12px; border: 1px solid #ffffff30; border-radius: 12px;
        background: #ffffff10; color: #fff; font-size: 22px; cursor: pointer;
    }
    body.main-layout #sidebar .nav-item { white-space: normal !important; }
    body.main-layout #sidebar { max-height: 100vh; max-height: 100dvh; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
    body.main-layout #sidebar .logo-capsule { width: 100% !important; max-width: none !important; height: auto !important; min-height: 70px; padding: 16px !important; margin-bottom: 16px !important; }
    body.main-layout #sidebar .logo-capsule img { width: 210px !important; max-width: 100% !important; max-height: none !important; height: auto; }
    body.main-layout #sidebar .nav-menu { padding: 4px !important; }
}

@media screen and (max-width: 900px) {
    body.intranet-page :is(.scroll-widget-left, .scroll-widget-right) { display: none !important; }
    body.intranet-page.intranet-fullscreen .portal-topbar {
        position: sticky; top: max(8px, env(safe-area-inset-top));
        background: rgba(248, 250, 252, .97); border: 1px solid var(--ui-line);
        border-radius: 16px; padding: 10px 12px; box-shadow: var(--ui-shadow);
    }
}

@media screen and (max-width: 768px) {
    html { scrollbar-gutter: auto; }
    :is(#portal-view, #dynamic-content, .swal2-popup, [role="dialog"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
        min-width: 0 !important; max-width: 100% !important;
        font-size: 16px !important; min-height: 44px; box-sizing: border-box;
    }
    :is(#portal-view, #dynamic-content) :is(button, [role="button"], a[class*="btn"]) {
        min-height: 44px; touch-action: manipulation;
    }
    :is(#portal-view, #dynamic-content) :is(button[class*="close"], button[class*="icon-btn"]) { min-width: 44px; flex-shrink: 0; }
    :is(#portal-view, #dynamic-content) :is([class$="-toolbar"], [class$="-filters"], [class$="-actions"], [class$="-head"], .section-header) { flex-wrap: wrap; gap: 12px; }
    :is(#portal-view, #dynamic-content) :is([class$="-toolbar"], [class$="-filters"], [class$="-head"], [class$="-hero"]) > * { min-width: 0; }
    :is(#portal-view, #dynamic-content) :is([class$="-tabs"], [role="tablist"], .col-view-switcher, .td-vtoggle) {
        display: flex; flex-wrap: nowrap !important; min-width: 0; max-width: 100%;
        overflow-x: auto; overscroll-behavior-x: contain; gap: 6px;
        scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    }
    :is(#portal-view, #dynamic-content) :is([class$="-tabs"], [role="tablist"], .col-view-switcher, .td-vtoggle) > * {
        flex: 0 0 auto !important; white-space: nowrap; min-height: 44px;
    }
    /* Module-specific layouts with fixed columns. Calendars and diagrams keep their own canvas. */
    :is(#portal-view, #dynamic-content) :is(.gmo-kpis, .vn-kpis, .lic-kpi-grid, .col-kpi-grid, .inv-kpis-row, .ops-kpis, .itc-kpis) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
        gap: 12px !important;
    }
    :is(#portal-view, #dynamic-content) :is(.gmo-grid, .lic-config-grid, .lic-catalog-grid, .col-chart-grid, .ana-row, .itc-charts) { grid-template-columns: minmax(0, 1fr) !important; }
    #dynamic-content .col-header-top { flex-wrap: wrap; gap: 14px; }
    #dynamic-content .col-header-top > div { min-width: 0; }
    #dynamic-content .col-view-switcher { flex-shrink: 1; }
    #dynamic-content .anu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
    #dynamic-content .inv-sec-hdr { flex-wrap: wrap; gap: 12px; }
    #dynamic-content .inv-sec-hdr > * { min-width: 0; max-width: 100%; }
    #dynamic-content :is(.inv-chips, .inv-loan-history-bar) { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    #dynamic-content #mon-pane-alerts > div { grid-template-columns: minmax(0, 1fr) !important; }
    #dynamic-content #mon-pane-alerts > div > * { min-width: 0; }
    #dynamic-content #mon-pane-alerts h3 { flex-wrap: wrap; }
    #dynamic-content #mon-pane-alerts h3 > div { flex-wrap: wrap; margin-left: 0 !important; }
    #dynamic-content .monuc-body { min-height: 0; overflow: hidden !important; }
    #dynamic-content .monuc-pane.active { flex-direction: column; min-width: 0; overflow-y: auto; }
    #dynamic-content .monuc-sidebar { width: 100% !important; max-height: 40dvh; }
    #dynamic-content .monuc-detail { flex: none; min-width: 0; min-height: 220px; padding: 16px; }
    #portal-view .rc-header { flex-wrap: wrap; gap: 14px; }
    #portal-view .rc-header-info { min-width: 0; }
    #portal-view .culture-module [data-responsive-grid] { grid-template-columns: minmax(0, 1fr) !important; }
    #portal-view .culture-module > div:first-child { padding: 32px 24px !important; }
    #portal-view .culture-module > div:first-child p { font-size: clamp(1.5rem, 5vw, 2.25rem) !important; font-weight: var(--ui-font-weight) !important; line-height: 1.35 !important; }
    .cabo-user-chip-menu, .global-announcer-panel { max-width: calc(100vw - 24px) !important; }
    body .swal2-container { padding: 12px !important; }
    body .swal2-popup { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding-bottom: 20px; }
    body .swal2-html-container { margin-inline: 16px; overflow-x: auto; min-width: 0; }
    body .swal2-actions { flex-wrap: wrap; gap: 8px; }
    body .swal2-html-container :is(.form-row, .form-grid, .prefs-grid, [style*="grid-template-columns"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body .swal2-html-container :is(.form-row, .form-grid, .prefs-grid, [style*="grid-template-columns"]) > * {
        min-width: 0; max-width: 100%; grid-column: auto !important;
    }
    :is(.ctr-modal, .prs-modal, .vn-modal, .ca-modal, .cn-modal, .cv-modal, .emp-modal, .ev-modal, .rn-modal, .ss-modal, .itc-modal, .inv-modal, .col-modal, .const-modal, .td-modal, .lic-modal, .proy-modal, .monuc-modal) {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
        min-width: 0 !important;
    }
    :is(.ctr-modal-foot, .prs-modal-foot, .vn-modal-foot, .ca-modal-foot) { flex-wrap: wrap; }
}

@media screen and (max-width: 640px) {
    body.main-layout { padding: 12px; gap: 12px; }
    body.main-layout #dynamic-content { padding: 16px !important; border: 1px solid var(--ui-line); border-radius: 20px !important; overflow: visible; }
    body.main-layout .top-nav { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px !important; }
    body.main-layout .top-nav * { box-sizing: border-box; }
    body.main-layout .title-island { grid-column: 2; padding: 12px !important; }
    body.main-layout .title-island h2 { font-size: .875rem !important; max-width: none; white-space: normal; line-height: 1.3; }
    body.main-layout .user-island-wrapper { grid-column: 3; grid-row: 1; width: auto !important; gap: 8px !important; margin-left: auto; }
    body.main-layout .cabo-user-chip-clock, body.main-layout .cabo-user-chip-name { display: none; }
    body.main-layout .cabo-user-chip-button { min-width: 44px; min-height: 44px; padding: 5px; }
    body.main-layout .ti-top-search { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; }
    body.main-layout #ti-top-search-input {
        position: static; width: 100% !important; height: 46px; border-radius: 12px;
        font-size: 16px; padding: 0 14px 0 46px; opacity: 1; pointer-events: auto;
    }
    body.main-layout .ti-top-search .ti-top-search-icon {
        position: absolute; left: 0; width: 44px; height: 44px; transform: none !important;
        background: transparent; border: 0; box-shadow: none;
    }
    body.main-layout .ti-top-search-results { position: absolute; top: 54px; left: 0; right: 0; width: auto; max-width: none; }
    #dynamic-content .inv-header-card { padding: 22px 20px; margin-bottom: 18px; border-radius: 20px; }
    #dynamic-content .inv-header-inner { gap: 12px; }
    #dynamic-content .inv-hdr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: 100%; gap: 8px; }
    #dynamic-content .inv-hdr-btn { justify-content: center; white-space: normal; padding: 10px 8px; font-size: .8125rem; }
    #dynamic-content .inv-hdr-btn-orange { grid-column: 1 / -1; }
    body.intranet-page.intranet-fullscreen .portal-content-full { padding-inline: 12px !important; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
    body.intranet-page .portal-view { padding: 12px 0 !important; }
    body.intranet-page .portal-top-actions { gap: 8px !important; min-width: 0; }
    body.intranet-page .portal-clock-chip { display: none; }
    body.intranet-page .portal-weather-chip { min-width: 0; }
    body.intranet-page .portal-weather-text small { max-width: 100px; }
    body.intranet-page .portal-quick-rail { max-width: calc(100vw - 24px); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .cabo-user-chip-menu, .global-announcer-panel { position: fixed !important; top: max(76px, env(safe-area-inset-top)) !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: 70dvh; overflow-y: auto !important; }
    :is(#portal-view, #dynamic-content) :is(.gmo-hero, .vn-hero, .rc-hero, .coln-hero, .col-hero) { padding: 20px; gap: 14px; flex-wrap: wrap; }
    :is(#portal-view, #dynamic-content) :is(.gmo-hero, .vn-hero, .rc-hero, .coln-hero, .col-hero) > div { min-width: 0; }
    .coln-hero-chips { flex-wrap: wrap; }
    #portal-view .gmo-hero-title { align-items: flex-start; }
    #portal-view .gmo-hero-ico { flex-shrink: 0; width: 44px; height: 44px; font-size: 22px; }
    #portal-view .rc-back-btn { margin-left: 0; }
    #portal-view .hero-logo { width: min(100%, 420px); }
    #portal-view .hero-content { padding-inline: 4px; }
    #portal-view .hero-top { padding-top: 20px; }
    .login-page .login-card { padding: 28px 22px; }
    :is(#portal-view, #dynamic-content) [data-responsive-stack] { flex-wrap: wrap !important; }
    :is(#portal-view, #dynamic-content) [data-responsive-stack] > * { min-width: 0; max-width: 100%; }
    :is(#portal-view, #dynamic-content) [data-responsive-grid] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .cabo-table-scroll { overflow: visible !important; max-height: none !important; }
    .cabo-table-scroll::before, .cabo-drawer-close { display: none !important; }
}