/* R197 · Capa transversal de legibilidad, adaptación y accesibilidad. */
:root {
    --ui-focus: #b66a00;
    --ui-focus-soft: rgba(182, 106, 0, .22);
    --ui-table-head: #e8f2f4;
    --ui-table-stripe: #f7fafb;
    --ui-control-height: 42px;
}

html {
    scroll-padding-top: calc(var(--global-save-height, 0px) + 24px);
}

body {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, p, li, dd, dt, label, legend, summary, figcaption, .button, .alert) {
    overflow-wrap: anywhere;
}

:where(button, .button, input, select, textarea) {
    font: inherit;
}

:where(button, .button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"])) {
    min-height: var(--ui-control-height);
}

:where(button, .button) {
    white-space: normal;
    text-align: center;
}

:where(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 3px;
}

:where(input, select, textarea)[aria-invalid="true"],
.field-needs-attention :where(input, select, textarea) {
    border-color: #b42318 !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
}

:where(input, select, textarea, button):disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

fieldset,
.panel,
.content-section,
.control-card,
.metric-card,
.report-table,
.energy-table,
figure {
    min-width: 0;
}

/* Mensajes: estructura estable, acción visible y estados que no dependen solo del color. */
.alert {
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 0;
}

.alert > :where(strong, span, p):not(.alert-action) {
    min-width: 0;
}

.alert > p {
    margin: 0;
}

.alert .alert-action,
.traceable-save-error .button {
    margin-left: auto;
}

.alert-warning {
    border-color: #d5a72f;
    background: #fff8df;
    color: #674900;
}

.alert-info {
    border-color: #8fb7c8;
    background: #f0f7fa;
    color: #214d61;
}

/* Tablas: desplazamiento contenido, cabeceras legibles y cifras comparables. */
.ui-scroll-region {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.ui-scroll-region[data-scrollable="true"] {
    border-radius: 10px;
    box-shadow: inset -10px 0 10px -14px rgba(16, 47, 66, .7);
}

.ui-scroll-region[data-scrollable="true"]:focus-visible {
    outline-offset: 2px;
}

.ui-table-scroll {
    width: 100%;
    margin-block: .75rem 1rem;
    border: 1px solid var(--line);
    background: var(--surface);
}

.ui-table-scroll > table {
    width: 100%;
    border-collapse: collapse;
}

.ui-table-scroll > table > caption {
    padding: .75rem .9rem;
    color: var(--ink);
    font-weight: 800;
    text-align: left;
}

.ui-table-scroll > table :where(th, td) {
    padding: .68rem .8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.ui-table-scroll > table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-table-head);
    color: var(--ink);
    text-align: left;
}

.ui-table-scroll > table tbody tr:nth-child(even) {
    background: var(--ui-table-stripe);
}

table :where(th, td).ui-numeric-cell,
table :where(input[type="number"], input[inputmode="decimal"], output.ui-numeric-value) {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

table :where(th, td) {
    line-height: 1.4;
}

/* Gráficas y leyendas: tipografía mínima y elementos distinguibles. */
:where(.dashboard-legend, .thermal-chart-legend, .chart-legend) {
    align-items: center;
    font-size: max(.88rem, 13px);
    line-height: 1.35;
}

:where(.dashboard-legend, .thermal-chart-legend, .chart-legend) > :where(span, li) {
    min-height: 2rem;
}

:where(.dashboard-legend, .thermal-chart-legend, .chart-legend) i {
    flex: 0 0 auto;
    border: 1px solid currentColor;
}

figure > :where(canvas, svg),
.dashboard-chart > :where(canvas, svg) {
    max-width: 100%;
}

/* Navegación, diálogos y anclas internas. */
:target,
.navigable-section {
    scroll-margin-top: calc(var(--global-save-height, 0px) + 30px);
}

.navigation-group > summary,
.page-section-navigation a {
    min-height: 42px;
}

.navigation-link[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--sun);
}

dialog {
    max-width: min(920px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

dialog::backdrop {
    background: rgba(16, 47, 66, .58);
}

/* Las tarjetas conservan proporción sin forzar columnas estrechas. */
:where(.metric-grid, .metrics-grid, .system-grid, .workflow-grid) > * {
    min-width: 0;
}

:where(.metric-grid, .metrics-grid) strong {
    font-variant-numeric: tabular-nums;
}

.topbar-actions,
.form-actions,
.project-actions {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    :where(.topbar, .section-heading) {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    :where(.topbar-actions, .form-actions) {
        max-width: 100%;
    }

    .ui-scroll-region[data-scrollable="true"] {
        background-image: linear-gradient(to right, transparent calc(100% - 18px), rgba(19, 123, 128, .08));
    }
}

@media (max-width: 620px) {
    .main-content {
        padding-inline: 14px;
    }

    :where(.panel, .content-section, .control-card) {
        padding-inline: clamp(12px, 4vw, 18px);
    }

    .alert {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .55rem .75rem;
    }

    .alert > :not(:first-child),
    .alert .alert-action,
    .traceable-save-error .button {
        grid-column: 2;
        width: 100%;
        margin-left: 0;
    }

    :where(.topbar-actions, .form-actions, .project-actions) > :where(.button, button, a),
    :where(.topbar-actions, .form-actions, .project-actions) > form,
    :where(.topbar-actions, .form-actions, .project-actions) > form > :where(.button, button) {
        width: 100%;
    }

    .ui-table-scroll > table :where(th, td) {
        padding: .58rem .65rem;
    }

    dialog {
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        margin: 8px;
        padding: 18px 14px;
    }
}

@media (pointer: coarse) {
    :where(a.button, button, summary, select, input:not([type="checkbox"]):not([type="radio"])) {
        min-height: 44px;
    }
}

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

@media (forced-colors: active) {
    :where(.alert, .button, .navigation-link, .ui-scroll-region, .metric-card) {
        border: 1px solid CanvasText;
    }

    :where(.dashboard-legend, .thermal-chart-legend, .chart-legend) i {
        forced-color-adjust: none;
    }
}

/* Coordinación global: informa sin sustituir las acciones y validaciones locales. */
.project-global-actions {
    position: fixed;
    top: 8px;
    left: calc(var(--app-sidebar-width) + clamp(24px, 4vw, 60px));
    right: clamp(24px, 4vw, 60px);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-height: min(38dvh, 240px);
    margin: 0;
    overflow: auto;
    padding: 14px 16px;
    border: 1px solid #b7d5db;
    border-radius: 14px;
    background: #f3fafb;
    box-shadow: 0 4px 14px rgba(13, 59, 80, .06);
}

body[data-project-id] .main-content {
    padding-top: calc(30px + var(--global-save-height, 0px) + var(--project-coordinator-height, 0px) + 18px);
}

.project-global-actions[data-state="running"] { border-color: #16888d; background: #eefafb; }
.project-global-actions[data-state="warning"] { border-color: #e2ae32; background: #fff9e8; }
.project-global-actions[data-state="error"] { border-color: #df6f65; background: #fff2f0; }
.project-global-actions[data-state="success"] { border-color: #65b98d; background: #effaf4; }

.project-global-actions-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.project-global-actions-copy strong { color: #0d3b50; }
.project-global-actions-copy small { color: #496979; line-height: 1.35; }
.project-global-actions[data-state="running"] .project-global-actions-copy strong::before {
    content: "";
    display: inline-block;
    width: .72rem;
    height: .72rem;
    margin-right: .55rem;
    border: 2px solid #16888d;
    border-right-color: transparent;
    border-radius: 50%;
    animation: project-global-spin .8s linear infinite;
}

@keyframes project-global-spin { to { transform: rotate(360deg); } }

/* Every secondary sticky control starts below both global floating bars. */
body[data-project-id] {
    --project-fixed-bars-height: calc(var(--project-coordinator-height, 0px) + var(--global-save-height, 0px));
}
body[data-project-id] .energy-form > .project-command-bar,
body[data-project-id] .stage-floating-tools,
body[data-project-id] .thermal-results-actions,
body[data-project-id] #electrical-app > .tool-toolbar-host + .tool-mode-toolbar,
body[data-project-id] .eco-command-strip,
body[data-project-id] .simulation-dashboard.is-calculating .dashboard-status,
body[data-project-id] .roof-stage-chrome {
    top: calc(var(--project-fixed-bars-height) + 18px);
}
body[data-project-id] :target { scroll-margin-top: calc(var(--project-fixed-bars-height) + 34px); }

@media (max-width: 900px) {
    .project-global-actions {
        top: 8px;
        left: 18px;
        right: 18px;
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .project-global-actions {
        top: 4px;
        gap: 8px;
        padding: 9px 10px;
    }

    .project-global-actions .topbar-actions {
        justify-content: flex-start;
    }
}

@media print {
    .skip-link,
    .sidebar,
    .app-sidebar-resizer,
    .global-project-save,
    .project-global-actions,
    .page-section-navigation,
    .topbar-actions,
    .application-footer {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .ui-scroll-region {
        overflow: visible;
    }
}