:root {
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 20rem; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: var(--loading-opacity); }

/* Shell autenticado */
.app-shell { background: var(--color-page); min-height: 100vh; }
.environment-label { font-size: var(--font-size-sm); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-actions { align-items: center; display: flex; gap: var(--space-2); }
.header-icon-action { align-items: center; background: transparent; border: 1px solid currentColor; border-radius: var(--radius-control); color: inherit; cursor: pointer; display: inline-flex; height: 2.5rem; justify-content: center; padding: 0; transition: background var(--transition-fast), transform var(--transition-fast); width: 2.5rem; }
.header-icon-action svg { fill: none; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.25rem; }
.header-icon-action:hover:not(:disabled) { background: var(--surface-glass-low); }
.header-icon-action:active:not(:disabled) { transform: var(--button-active-transform); }
.app-content { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.app-content--collapsed { grid-template-columns: 5rem minmax(0, 1fr); }
.side-nav { backdrop-filter: var(--surface-backdrop-filter); background: var(--surface-glass-low); border-right: var(--border-subtle); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; min-height: 100vh; padding: var(--space-3); transition: padding var(--transition-normal), width var(--transition-normal); }
.side-nav-brand { align-items: center; background: var(--color-brand); border: 0; border-radius: var(--radius-control); box-shadow: var(--shadow-brand); cursor: pointer; display: flex; justify-content: center; margin-bottom: var(--space-4); min-height: 3.5rem; padding: var(--space-3); width: 100%; }
.side-nav-brand img { display: block; filter: drop-shadow(0 0 .28rem rgba(255, 255, 255, .95)) drop-shadow(0 0 .7rem rgba(255, 255, 255, .55)); height: auto; max-width: 8.5rem; width: 100%; }
.side-nav-brand:hover { filter: var(--button-hover-filter); }
.side-nav-brand:active { transform: var(--button-active-transform); }
.side-nav--collapsed { padding-inline: var(--space-2); }
.side-nav--collapsed .side-nav-brand { padding-inline: var(--space-2); }
.side-nav--collapsed .side-nav-brand img { content: url("../assets/branding/sica-isotipo-512.png"); max-width: 2rem; }
.side-nav--collapsed .nav-label, .side-nav--collapsed .nav-accordion-indicator, .side-nav--collapsed .environment-label { display: none; }
.side-nav nav { display: grid; gap: var(--space-1); }
.side-nav a, .side-nav span[aria-disabled="true"], .nav-accordion summary { align-items: center; border: 1px solid transparent; border-radius: var(--radius-control); color: var(--color-text-muted); display: flex; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-3); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.side-nav a:hover { background: var(--surface-glass-high); color: var(--color-text); }
.side-nav a.active { background: var(--color-nav-active); border-color: var(--color-border); box-shadow: var(--shadow-xs); color: var(--color-nav-active-text); font-weight: 700; }
.side-nav span[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.nav-icon { fill: none; flex: 0 0 auto; height: 1.25rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 1.25rem; }
.nav-accordion { min-width: 0; }
.nav-accordion summary { cursor: pointer; list-style: none; width: 100%; }
.nav-accordion summary::-webkit-details-marker { display: none; }
.nav-accordion summary:hover { background: var(--surface-glass-high); color: var(--color-text); }
.nav-accordion-indicator { display: none; }
.nav-submenu { border-left: var(--border-subtle); display: grid; gap: var(--space-1); margin: 0 0 0 var(--space-5); max-height: 0; opacity: 0; overflow: hidden; padding-left: var(--space-2); transition: max-height var(--transition-normal), margin var(--transition-normal), opacity var(--transition-fast); }
.nav-accordion[open] .nav-submenu { margin: var(--space-1) 0 var(--space-2) var(--space-5); max-height: 42rem; opacity: 1; }
.nav-submenu a, .nav-submenu span[aria-disabled="true"] { font-size: var(--font-size-sm); min-height: 2.5rem; }
.side-nav--collapsed .nav-accordion > :not(summary) { display: none; }
.side-nav--collapsed .nav-accordion summary, .side-nav--collapsed > nav > a { justify-content: center; padding-inline: var(--space-2); }
.side-nav-session-actions { display: none; }
.page-session-bar { background: var(--surface-glass-low); border-bottom: var(--border-subtle); margin: 0 calc(var(--space-8) * -1) var(--space-2); padding: 0 var(--space-8); }
.app-main--with-heading .page-session-bar { background: transparent; border: 0; left: var(--space-8); margin: 0; padding: 0; position: absolute; right: var(--space-8); top: 0; z-index: 2; }
.page-session-bar__inner { align-items: center; display: flex; justify-content: flex-end; margin: 0 auto; max-width: 100rem; min-height: 2.75rem; }
.page-session-bar .session-actions { color: var(--color-text-muted); }
.page-session-bar .environment-label { flex: 1; min-width: 0; }
.page-session-bar .session-actions .session-actions__logout { border: var(--border-subtle); border-radius: var(--radius-control); color: var(--color-accent); height: 2.5rem; margin-left: var(--space-1); width: 2.5rem; }
.app-main { min-width: 0; padding: 0 var(--space-8) var(--space-8); position: relative; }
.workspace-frame { margin: 0 auto; max-width: 100rem; }
.content-frame { min-width: 0; }

/* Encabezado, navegación contextual y composición de página. */
.page-header { align-items: end; border-bottom: var(--border-subtle); display: flex; gap: var(--space-5); justify-content: space-between; margin-bottom: var(--space-6); padding-bottom: var(--space-6); }
.page-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.module-toolbar { align-items: center; border-bottom: var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-6); padding: 0 0 var(--space-6); }
.module-toolbar__heading { flex: 0 0 auto; }
.module-toolbar__heading .page-title { margin-bottom: 0; }
.module-toolbar__breadcrumbs { margin-top: var(--space-1); }
.breadcrumbs { align-items: center; color: var(--color-text-muted); display: flex; flex-wrap: wrap; font-size: var(--font-size-sm); gap: var(--space-2); line-height: var(--line-height-normal); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 700; }
.module-toolbar .page-title { font-size: var(--font-size-2xl); }
.module-toolbar__controls { align-items: center; display: flex; flex: 1 1 25rem; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; min-width: 0; }
.module-toolbar__search { flex: 1 1 17rem; max-width: 30rem; }
.module-toolbar--with-breadcrumbs { align-items: end; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-3); row-gap: var(--space-2); }
.module-toolbar--with-breadcrumbs .module-toolbar__heading { grid-column: 1 / -1; grid-row: 1; padding-right: 15rem; }
.module-toolbar--with-navigation { column-gap: var(--space-5); grid-template-columns: minmax(0, 1fr) auto; }
.module-toolbar__navigation { align-self: end; grid-column: 1; grid-row: 2; min-width: 0; }
.module-toolbar--with-navigation .module-toolbar__controls { flex: none; flex-wrap: nowrap; grid-column: 2; grid-row: 2; justify-self: end; }
.module-toolbar--with-navigation { padding-bottom: var(--space-3); }
.module-toolbar--with-navigation .module-toolbar__search { max-width: 24rem; }
.module-toolbar--with-navigation .module-toolbar__controls .module-toolbar__search { min-width: 0; }
.module-toolbar--with-navigation .module-toolbar__controls .button { flex: 0 0 auto; white-space: nowrap; }
.module-tabs { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.module-tabs a { align-items: center; border-bottom: 2px solid transparent; color: var(--color-text-muted); display: inline-flex; font-size: var(--font-size-sm); font-weight: 700; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-2) var(--space-4); text-decoration: none; }
.module-tabs a:hover { color: var(--color-accent); }
.module-tabs a.active { border-bottom-color: var(--color-accent); color: var(--color-accent); }
.module-tabs svg { fill: none; height: 1.15rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.15rem; }
.eyebrow { color: var(--color-accent); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: .1em; margin: 0 0 var(--space-2); text-transform: uppercase; }
h1, h2, h3 { color: var(--color-text); font-family: var(--font-heading); line-height: var(--line-height-tight); margin-top: 0; }
h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-2); }
.page-title { animation: page-title-enter .42s cubic-bezier(.2, .75, .25, 1) both; }
h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.form-help { color: var(--color-text-muted); margin: 0 0 var(--space-4); max-width: 48rem; }

/* Acciones y formularios reutilizables. */
.button { align-items: center; border: 1px solid transparent; border-radius: var(--radius-control); box-shadow: var(--shadow-control); cursor: pointer; display: inline-flex; font-size: var(--font-size-sm); font-weight: 700; gap: var(--space-2); justify-content: center; min-height: 2.75rem; padding: var(--space-2) var(--space-4); text-decoration: none; transition: box-shadow var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast); }
.button:hover:not(:disabled) { filter: var(--button-hover-filter); }
.button:active:not(:disabled) { transform: var(--button-active-transform); }
.button--primary { background: var(--button-primary-background); color: var(--button-primary-color); }
.button--secondary { background: var(--button-secondary-background); border-color: var(--color-input-border); color: var(--button-secondary-color); }
.button--tertiary { background: var(--button-tertiary-background); box-shadow: none; color: var(--button-tertiary-color); }
.button--danger { background: var(--button-danger-background); color: var(--button-danger-color); }
.form-field { display: grid; gap: var(--space-2); }
.form-label { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 700; }
.form-control, .search-control, select, textarea { background: var(--color-input-background); border: var(--border-strong); border-radius: var(--radius-control); box-shadow: inset 0 1px 2px var(--surface-glass-low); color: var(--color-text); min-height: 2.75rem; padding: var(--space-2) var(--space-3); transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); width: 100%; }
.form-control::placeholder, .search-control::placeholder { color: var(--color-input-placeholder); }
.form-control:hover:not(:disabled), .search-control:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { background: var(--color-input-hover); }
.form-control:focus, .search-control:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: 0; }
.search-field { position: relative; }
.search-field::before { color: var(--color-text-muted); content: "⌕"; font-size: var(--font-size-lg); left: var(--space-3); pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }
.search-field .search-control { padding-left: var(--space-8); }
.checkbox-control { align-items: center; color: var(--color-text-muted); cursor: pointer; display: inline-flex; font-size: var(--font-size-sm); gap: var(--space-2); }
.checkbox-control input { accent-color: var(--color-accent); block-size: 1.1rem; inline-size: 1.1rem; margin: 0; }

/* Superficies, indicadores y tablas de operación. */
.surface, .summary-card, .dashboard-panel, .empty-state, .dialog-card { backdrop-filter: var(--surface-backdrop-filter); background: var(--surface-glass-medium); border: var(--border-subtle); border-radius: var(--radius-panel); box-shadow: var(--shadow-surface); }
.summary-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-6); }
.summary-card { min-height: 9.5rem; padding: var(--space-5); position: relative; }
.summary-card::after { background: var(--color-accent); border-radius: var(--radius-pill); bottom: var(--space-5); content: ""; height: .35rem; opacity: .18; position: absolute; right: var(--space-5); width: 3.25rem; }
.summary-label { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 700; margin: 0 0 var(--space-3); }
.summary-value { color: var(--color-text); font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 700; line-height: 1; margin: 0; }
.summary-trend { color: var(--color-success); font-size: var(--font-size-sm); font-weight: 700; margin: var(--space-3) 0 0; }
.section-menu { max-width: 54rem; }
.section-menu__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-menu__card { align-items: center; backdrop-filter: var(--surface-backdrop-filter); background: var(--surface-glass-medium); border: var(--border-subtle); border-radius: var(--radius-panel); box-shadow: var(--shadow-control); color: var(--color-text); display: flex; gap: var(--space-4); min-height: 8.75rem; overflow: hidden; padding: var(--space-5); position: relative; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-normal), transform var(--transition-fast); }
.section-menu__card::before { background: linear-gradient(135deg, var(--color-info-surface), transparent 62%); content: ""; inset: 0; opacity: .58; pointer-events: none; position: absolute; }
.section-menu__card > * { position: relative; }
.section-menu__card:hover { background: var(--surface-glass-high); border-color: var(--color-accent); box-shadow: var(--shadow-surface); transform: translateY(-3px); }
.section-menu__card:active { transform: translateY(-1px); }
.section-menu__icon { align-items: center; background: var(--color-info-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-accent); display: inline-flex; flex: 0 0 auto; height: 3.25rem; justify-content: center; width: 3.25rem; }
.section-menu__icon svg, .section-menu__arrow svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.section-menu__icon svg { height: 1.55rem; width: 1.55rem; }
.section-menu__content { display: grid; gap: var(--space-1); min-width: 0; }
.section-menu__content strong { font-family: var(--font-heading); font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
.section-menu__arrow { align-items: center; align-self: flex-end; background: var(--surface-glass-high); border-radius: var(--radius-pill); color: var(--color-accent); display: inline-flex; flex: 0 0 auto; height: 2rem; justify-content: center; margin-left: auto; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); width: 2rem; }
.section-menu__arrow svg { height: 1.15rem; width: 1.15rem; }
.section-menu__card:hover .section-menu__arrow { background: var(--color-accent); color: var(--color-on-brand); transform: translateX(2px); }
.dashboard-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr); }
.dashboard-panel { min-width: 0; padding: var(--space-5); }
.panel-transition { animation-duration: 220ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, .8, .25, 1); will-change: opacity, transform; }
.panel-transition--forward { animation-name: panel-enter-forward; }
.panel-transition--back { animation-name: panel-enter-back; }
.panel-heading { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-bottom: var(--space-4); }
.panel-heading--spaced { margin-top: var(--space-6); }
.panel-heading h2 { margin: 0; }
.panel-actions { align-items: center; display: flex; gap: var(--space-2); }
.listing-surface { backdrop-filter: var(--surface-backdrop-filter); background: var(--surface-glass-medium); border: var(--border-subtle); border-radius: var(--radius-panel); box-shadow: var(--shadow-surface); overflow: hidden; }
.data-table-wrap { overflow-x: auto; }
.permission-groups { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
.permission-group { background: var(--surface-glass-low); border: var(--border-subtle); border-radius: var(--radius-control); margin: 0; padding: var(--space-3) var(--space-4) var(--space-2); }
.permission-group legend { color: var(--color-text); font-family: var(--font-heading); font-weight: 700; padding: 0 var(--space-2); }
.permission-column-labels { color: var(--color-text-muted); display: grid; font-size: var(--font-size-xs); font-weight: 700; gap: var(--space-4); grid-template-columns: minmax(10rem, 1fr) auto; letter-spacing: .04em; padding: 0 0 var(--space-2); text-transform: uppercase; }
.permission-column-labels span:last-child { text-align: right; }
.permission-row { align-items: center; border-bottom: var(--border-subtle); display: grid; gap: var(--space-4); grid-template-columns: minmax(10rem, 1fr) auto; padding: var(--space-3) 0; }
.permission-row:last-child { border-bottom: 0; }
.permission-module { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 650; }
.permission-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: end; }
.permission-switch { align-items: center; background: var(--surface-glass-medium); border: var(--border-subtle); border-radius: var(--radius-pill); color: var(--color-text-muted); cursor: pointer; display: inline-flex; font-size: var(--font-size-xs); gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-2); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.permission-switch:has(input:checked) { background: var(--color-info-surface); border-color: var(--color-accent); color: var(--color-text); font-weight: 700; }
.permission-switch input { accent-color: var(--color-accent); height: 1.05rem; margin: 0; width: 1.05rem; }
.form-action-bar { align-items: center; background: var(--surface-glass-low); border: var(--border-subtle); border-radius: var(--radius-control); display: flex; gap: var(--space-3); justify-content: flex-end; margin: 0 0 var(--space-5); padding: var(--space-3); }
.data-table { border-collapse: separate; border-spacing: 0; font-size: var(--font-size-sm); min-width: 42rem; width: 100%; }
.data-table th { background: var(--surface-glass-low); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.data-table th, .data-table td { border-bottom: var(--border-subtle); padding: var(--space-4) var(--space-5); white-space: nowrap; }
.data-table td { color: var(--color-text-muted); }
.data-table td strong { color: var(--color-text); font-weight: 700; }
.data-table th:last-child, .table-actions { text-align: right; }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--surface-glass-low); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.pagination { align-items: center; border-top: var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding: var(--space-4) var(--space-6); }
.pagination__summary { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0; }
.pagination__summary strong { color: var(--color-text); }
.pagination__controls { display: flex; gap: var(--space-1); }
.pagination__button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; display: inline-flex; font-weight: 700; height: 2.25rem; justify-content: center; min-width: 2.25rem; padding: 0 var(--space-2); transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.pagination__button:hover:not(:disabled) { background: var(--surface-glass-high); color: var(--color-text); }
.pagination__button--active { background: var(--color-accent); color: var(--color-on-brand); }
.pagination__button:disabled { opacity: .45; }
.status { border-radius: var(--radius-pill); display: inline-flex; font-size: var(--font-size-xs); font-weight: 700; padding: var(--space-1) var(--space-2); }
.status--success { background: var(--color-success-surface); color: var(--color-success); }
.status--warning { background: var(--color-warning-surface); color: var(--color-warning); }
.status--info { background: var(--color-info-surface); color: var(--color-info); }
.status--danger { background: var(--color-danger-surface); color: var(--color-danger); }
.activity-list, .module-list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.activity-item, .module-link { align-items: center; background: var(--surface-glass-low); border: var(--border-subtle); border-radius: var(--radius-sm); color: var(--color-text); display: flex; gap: var(--space-3); padding: var(--space-3); text-decoration: none; }
.module-link { justify-content: space-between; transition: background var(--transition-fast), transform var(--transition-fast); }
.module-link:hover { background: var(--surface-glass-high); transform: translateY(-1px); }
.activity-mark { align-items: center; background: var(--color-info-surface); border-radius: var(--radius-pill); color: var(--color-info); display: grid; flex: 0 0 auto; height: 2rem; place-items: center; width: 2rem; }
.activity-copy { display: grid; gap: var(--space-1); min-width: 0; }
.activity-copy strong { font-size: var(--font-size-sm); }
.activity-copy span, .activity-time { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.activity-time { margin-left: auto; white-space: nowrap; }

/* Estados transitorios y retroalimentación. */
.alert { align-items: start; border: var(--border-subtle); border-radius: var(--radius-control); display: flex; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); }
.alert--success { background: var(--color-success-surface); color: var(--color-success); }
.alert--warning { background: var(--color-warning-surface); color: var(--color-warning); }
.alert--danger { background: var(--color-danger-surface); color: var(--color-danger); }
.alert--info { background: var(--color-info-surface); color: var(--color-info); }
.empty-state { max-width: 42rem; padding: var(--space-6); text-align: center; }
.empty-state p { color: var(--color-text-muted); margin: 0; }
.loading-state { align-items: center; color: var(--color-text-muted); display: flex; gap: var(--space-3); justify-content: center; min-height: 10rem; }
.spinner { animation: spinner-rotate 1s linear infinite; border: .2rem solid var(--color-info-surface); border-radius: var(--radius-pill); border-top-color: var(--color-info); height: 1.5rem; width: 1.5rem; }
.dialog-backdrop { align-items: center; background: var(--color-overlay); display: flex; inset: 0; justify-content: center; padding: var(--space-4); position: fixed; z-index: 20; }
.dialog-card { box-shadow: var(--shadow-dialog); max-width: 34rem; padding: var(--space-6); width: 100%; }
.session-loading { color: var(--color-text-muted); margin: 20vh auto; text-align: center; }
.visually-hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Login: misma composición, valores visuales tomados del contrato de tema. */
.login-shell { align-items: center; background: var(--login-page-background); display: grid; isolation: isolate; min-height: 100svh; overflow: hidden; padding: var(--space-12) var(--space-6); place-items: center; position: relative; }
.login-shell::before { animation: login-grain 12s linear infinite alternate; background-image: radial-gradient(var(--surface-glass-high) .7px, transparent .8px); background-size: 5px 5px; content: ""; inset: 0; mix-blend-mode: soft-light; opacity: .45; position: absolute; z-index: -4; }
.login-light-plane { background: linear-gradient(135deg, var(--surface-glass-low), transparent); border: var(--border-subtle); box-shadow: inset 0 0 80px var(--surface-glass-low), var(--shadow-xs); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 84%); height: 38vw; min-height: 20rem; position: absolute; width: 52vw; z-index: -3; }
.login-light-plane--top { animation: login-float-top 15s ease-in-out infinite alternate; right: -12vw; top: -13vw; transform: rotate(8deg); }
.login-light-plane--bottom { animation: login-float-bottom 18s ease-in-out infinite alternate; bottom: -16vw; left: -11vw; transform: rotate(-10deg); }
.login-blueprint { animation: login-blueprint-drift 22s ease-in-out infinite alternate; background: var(--login-blueprint-image) center / cover no-repeat; inset: -1.5%; opacity: .55; position: absolute; z-index: -2; }
.login-card { backdrop-filter: var(--surface-backdrop-filter); background: var(--login-card-background); border: 1px solid var(--login-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-surface); padding: var(--space-10) var(--space-12) var(--space-8); width: min(100%, 32.5rem); }
.login-brand { display: flex; justify-content: center; }
.login-brand img { display: block; filter: drop-shadow(var(--shadow-xs)); height: auto; max-width: 14.625rem; width: 100%; }
.login-card h1 { font-size: var(--font-size-xl); letter-spacing: -.025em; margin: var(--space-8) 0 var(--space-6); text-align: center; }
.login-card form { display: grid; gap: var(--space-3); }
.login-field { align-items: center; background: var(--login-input-background); border: 1px solid var(--login-input-border); border-radius: var(--radius-control); box-shadow: var(--login-input-shadow); display: flex; height: 3.45rem; overflow: hidden; transition: border var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); }
.login-field:focus-within { background: var(--color-input-hover); border-color: var(--login-input-focus); box-shadow: var(--login-input-focus-shadow); }
.login-field > svg { fill: none; flex: none; margin: 0 var(--space-3) 0 var(--space-4); stroke: var(--login-input-icon); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.3rem; }
.login-field input { background: transparent; border: 0; color: var(--color-text); font: 500 .96rem var(--font-body); height: 100%; min-width: 0; outline: 0; width: 100%; }
.login-field input::placeholder { color: var(--color-input-placeholder); }
.password-toggle { background: transparent; border: 0; color: var(--login-input-icon); cursor: pointer; display: grid; flex: none; height: 100%; place-items: center; width: 2.95rem; }
.password-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; width: 1.2rem; }
.password-toggle:hover { color: var(--color-accent); }
.login-remember { align-items: center; color: var(--color-text-muted); cursor: pointer; display: flex; font-size: var(--font-size-xs); gap: var(--space-2); margin: var(--space-1) var(--space-1) var(--space-2); }
.login-remember input { accent-color: var(--color-accent); height: 1rem; margin: 0; width: 1rem; }
.login-submit { align-items: center; background: var(--login-submit-background); border: 1px solid var(--login-submit-border); border-radius: var(--radius-control); box-shadow: var(--shadow-brand); color: var(--color-on-brand); cursor: pointer; display: flex; font: 600 var(--font-size-base) var(--font-heading); gap: var(--space-3); justify-content: center; min-height: 3.45rem; transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal); }
.login-submit:hover:not(:disabled) { box-shadow: var(--login-submit-hover-shadow); filter: var(--button-hover-filter); transform: translateY(-1px); }
.login-submit:disabled { cursor: wait; opacity: var(--loading-opacity); }
.login-submit span { font-size: var(--font-size-lg); }
.login-error { color: var(--color-danger); font-size: var(--font-size-xs); margin: var(--space-3) 0 calc(var(--space-2) * -1); text-align: center; }
.login-version { bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .08em; margin: 0; position: absolute; }
.sica-loading-shell { align-content: center; background: var(--login-page-background, var(--color-page)); display: grid; justify-items: center; min-height: 100svh; overflow: hidden; position: relative; }
.sica-loading-shell::before { background: var(--login-blueprint-image, none) center / cover no-repeat; content: ""; inset: 0; opacity: .28; position: absolute; }
.sica-loading-shell > * { position: relative; }
.sica-loader-mark { align-items: center; animation: loader-rise 1.8s cubic-bezier(.2, .7, .2, 1) infinite; display: grid; height: 7.2rem; justify-items: center; place-items: center; width: 7.2rem; }
.sica-loader-mark img { animation: loader-logo-pulse 1.8s ease-in-out infinite; height: auto; width: 3.6rem; }
.sica-loader-ring { animation: loader-ring 1.8s linear infinite; border: 2px solid transparent; border-right-color: var(--loader-accent); border-top-color: var(--loader-accent); border-radius: var(--radius-pill); height: 7.2rem; position: absolute; width: 7.2rem; }
#blazor-error-ui { background: var(--error-banner-background); bottom: 0; box-shadow: var(--shadow-xs); color: var(--error-banner-color); display: none; left: 0; padding: var(--space-3) var(--space-5); position: fixed; right: 0; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

@keyframes login-float-top { to { transform: rotate(8deg) translate3d(-2vw, 2vw, 0) scale(1.03); } }
@keyframes login-float-bottom { to { transform: rotate(-10deg) translate3d(3vw, -2vw, 0) scale(1.04); } }
@keyframes login-blueprint-drift { to { transform: translate3d(.7%, -.5%, 0) scale(1.015); } }
@keyframes login-grain { to { background-position: 18px -14px; } }
@keyframes loader-rise { 50% { transform: translateY(-.45rem); } }
@keyframes loader-logo-pulse { 50% { filter: drop-shadow(var(--shadow-brand)); transform: scale(1.05); } }
@keyframes loader-ring { to { transform: rotate(1turn); } }
@keyframes spinner-rotate { to { transform: rotate(1turn); } }
@keyframes page-title-enter { from { opacity: 0; transform: translateX(-.65rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes panel-enter-forward { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes panel-enter-back { from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1000px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .app-content { grid-template-columns: 13rem minmax(0, 1fr); }
    .app-content--collapsed { grid-template-columns: 5rem minmax(0, 1fr); }
    .app-main { padding: 0 var(--space-6) var(--space-6); }
    .page-session-bar { margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); }
    .app-main--with-heading .page-session-bar { left: 0; margin: 0 calc(var(--space-6) * -1); padding-inline: var(--space-6); position: static; right: 0; }
    .module-toolbar--with-breadcrumbs .module-toolbar__heading { padding-right: 0; }
    .module-toolbar--with-navigation { grid-template-columns: minmax(0, 1fr); }
    .module-toolbar--with-navigation .module-toolbar__navigation { grid-column: 1; grid-row: 2; }
    .module-toolbar--with-navigation .module-toolbar__controls { grid-column: 1; grid-row: 3; justify-self: stretch; }
    .module-toolbar--with-navigation .module-toolbar__search { max-width: none; }
}

@media (max-width: 700px) {
    .app-content { display: block; }
    .side-nav, .side-nav--collapsed { align-items: center; border-bottom: var(--border-subtle); border-right: 0; flex-direction: row; min-height: 0; overflow-x: auto; padding: var(--space-2) var(--space-3); }
    .side-nav-brand { display: none; }
    .side-nav nav { align-items: start; display: flex; min-width: max-content; }
    .page-session-bar { margin-bottom: var(--space-4); margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
    .app-main--with-heading .page-session-bar { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
    .page-session-bar .environment-label { display: none; }
    .side-nav--collapsed .nav-label { display: inline; }
    .side-nav--collapsed .nav-accordion > :not(summary) { display: grid; }
    .side-nav--collapsed .nav-accordion summary, .side-nav--collapsed > nav > a { justify-content: flex-start; padding-inline: var(--space-3); }
    .nav-accordion[open] .nav-submenu { display: none; }
    .side-nav a, .side-nav span[aria-disabled="true"], .nav-accordion summary { padding: var(--space-2) var(--space-3); }
    .app-main { padding: 0 var(--space-4) var(--space-5); }
    .page-header { align-items: stretch; flex-direction: column; margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
    .page-header-actions .button { flex: 1; }
    .module-toolbar { margin-bottom: var(--space-5); padding-bottom: var(--space-5); }
    .module-toolbar__heading { flex-basis: 100%; }
    .module-toolbar__controls { align-items: stretch; }
    .module-toolbar__controls .button, .module-toolbar__search { flex: 1 1 100%; max-width: none; }
    .summary-grid { gap: var(--space-3); }
    .summary-card { min-height: 8.5rem; padding: var(--space-4); }
    .summary-value { font-size: var(--font-size-2xl); }
    .section-menu__grid { grid-template-columns: 1fr; }
    .section-menu__card { min-height: 8.75rem; }
    .dashboard-panel { padding: var(--space-4); }
    .panel-heading { align-items: stretch; }
    .panel-actions { width: 100%; }
    .panel-actions > * { flex: 1; }
    .pagination { align-items: stretch; padding: var(--space-4); }
    .pagination__controls { justify-content: space-between; width: 100%; }
    .data-table { min-width: 38rem; }
    .permission-column-labels { display: none; }
    .permission-row { align-items: start; grid-template-columns: 1fr; gap: var(--space-2); }
    .permission-actions { justify-content: start; }
    .form-action-bar { justify-content: stretch; }
    .form-action-bar .button { flex: 1; }
    .login-shell { padding: var(--space-6) var(--space-4) var(--space-10); }
    .login-card { padding: var(--space-8) var(--space-5) var(--space-6); }
}

@media (max-width: 420px) {
    .summary-grid { grid-template-columns: 1fr; }
    .session-actions { gap: var(--space-1); }
    .logout-button { font-size: var(--font-size-xs); padding: var(--space-2); }
}

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