:root {
    /* Paleta base SIGE */
    --navy-soft: #2D3A55;
    --blue-smoke: #6E7F9E;
    --blue-mist: #E7ECF4;
    --sky-gray: #F2F5FA;
    --lavender-gray: #E6E2F2;
    --sage-light: #E7EFE8;
    --success-soft: #A7D3B2;
    --lavender-soft: #CFC7E8;
    --background-light: #FAFCFE;
    --white: #FFFFFF;
    --accent-secondary: #F6EBD7;
    --danger-soft: #F8D7DA;

    /* Fondos y superficies */
    --color-page-background: var(--blue-mist);
    --color-auth-background: var(--background-light);
    --color-card-background: var(--white);
    --color-panel-background: var(--white);
    --color-surface-subtle: var(--sky-gray);
    --color-surface-muted: var(--blue-mist);
    --color-surface-accent: var(--lavender-gray);

    /* Texto */
    --color-text-primary: var(--navy-soft);
    --color-text-secondary: var(--blue-smoke);
    --color-text-muted: var(--blue-smoke);
    --color-text-on-dark: var(--white);
    --color-input-placeholder: var(--blue-smoke);

    /* Navegacion lateral */
    --color-menu-background: var(--white);
    --color-menu-text: var(--navy-soft);
    --color-menu-icon: var(--navy-soft);
    --color-menu-active-bg: var(--navy-soft);
    --color-menu-active-text: var(--white);
    --color-menu-hover-bg: var(--blue-mist);
    --color-menu-disabled-text: var(--blue-smoke);
    --color-menu-border: var(--blue-mist);
    --color-menu-avatar-bg: var(--blue-mist);
    --color-menu-logout-bg: var(--sky-gray);
    --color-menu-circuit: var(--lavender-gray);

    /* Botones */
    --color-button-primary-bg: var(--navy-soft);
    --color-button-primary-text: var(--white);
    --color-user-action-bg: var(--color-status-active-bg);
    --color-user-action-text: var(--color-status-active-text);
    --color-user-action-hover-bg: var(--color-status-active-bg);
    --color-user-action-hover-border: var(--color-status-active-text);
    --color-button-success-bg: var(--success-soft);
    --color-button-success-text: var(--navy-soft);
    --color-button-secondary-bg: var(--white);
    --color-button-secondary-text: var(--navy-soft);
    --color-button-secondary-border: var(--blue-mist);

    /* Tablas */
    --color-table-background: var(--white);
    --color-table-header-bg: var(--sky-gray);
    --color-table-row-bg: var(--white);
    --color-table-row-alt-bg: var(--blue-mist);
    --color-table-border: var(--blue-mist);

    /* Roles */
    --color-role-owner-bg: var(--blue-mist);
    --color-role-owner-text: var(--navy-soft);
    --color-role-admin-bg: var(--lavender-gray);
    --color-role-admin-text: var(--navy-soft);
    --color-role-unassigned-bg: var(--sky-gray);
    --color-role-unassigned-text: var(--blue-smoke);

    /* Estados, mensajes y acciones */
    --color-status-active-bg: var(--sage-light);
    --color-status-active-text: #25765A;
    --color-status-inactive-bg: var(--danger-soft);
    --color-status-inactive-text: #C84545;
    --color-success-bg: var(--sage-light);
    --color-success-text: #25765A;
    --color-info-bg: var(--blue-mist);
    --color-info-text: var(--navy-soft);
    --color-warning-bg: var(--accent-secondary);
    --color-warning-text: #8A641C;
    --color-danger-bg: var(--danger-soft);
    --color-danger-text: #C84545;

    /* Bordes, controles y capas */
    --color-border: var(--blue-mist);
    --color-border-strong: var(--blue-smoke);
    --color-input-background: var(--white);
    --color-input-border: var(--blue-mist);
    --color-input-focus-border: var(--blue-smoke);
    --color-input-text: var(--navy-soft);
    --color-focus-ring: rgba(45, 58, 85, 0.24);
    --color-overlay: rgba(45, 58, 85, 0.56);
    --color-modal-header-bg: var(--navy-soft);
    --color-modal-header-text: var(--white);
    --color-modal-header-muted: var(--blue-mist);
    --color-modal-control-bg: rgba(255, 255, 255, 0.12);
    --color-modal-control-border: rgba(255, 255, 255, 0.18);

    /* Login y elementos decorativos */
    --color-auth-brand-bg: var(--navy-soft);
    --color-auth-brand-accent: var(--lavender-soft);
    --color-auth-brand-muted: var(--blue-mist);
    --color-decoration-border: var(--blue-mist);
    --color-decoration-dashed-border: var(--blue-smoke);
    --color-surface-on-dark-subtle: rgba(255, 255, 255, 0.08);
    --color-surface-on-dark: rgba(255, 255, 255, 0.12);
    --color-surface-on-dark-border: rgba(255, 255, 255, 0.18);
    --color-text-on-dark-muted: rgba(255, 255, 255, 0.78);

    /* Sombras */
    --color-shadow: transparent;
    --color-shadow-strong: transparent;
    --shadow-soft: none;
    --shadow-deep: none;

    /* Alias de compatibilidad durante la migracion visual */
    --azul-950: var(--navy-soft);
    --azul-900: var(--navy-soft);
    --azul-800: var(--navy-soft);
    --azul-700: var(--color-button-primary-bg);
    --azul-600: var(--blue-smoke);
    --azul-500: var(--blue-smoke);
    --azul-400: var(--blue-smoke);
    --azul-300: var(--blue-mist);
    --azul-200: var(--blue-mist);
    --azul-100: var(--blue-mist);
    --azul-50: var(--background-light);
    --blanco: var(--white);
    --blanco-azulado: var(--background-light);
    --texto-principal: var(--color-text-primary);
    --texto-secundario: var(--color-text-secondary);
    --borde: var(--color-border);
    --exito: var(--color-success-text);
    --informacion: var(--color-info-text);
    --alerta: var(--color-danger-text);
    --sombra-profunda: var(--shadow-deep);
    --sombra-suave: var(--shadow-soft);

    /* Medidas existentes, no cromaticas */
    --radio-grande: 28px;
    --radio-mediano: 18px;
    --radio-pequeno: 12px;

    /* Estructura principal para una densidad legible al 100 % de zoom. */
    --layout-sidebar-width: 212px;
    --layout-sidebar-mobile-max-width: 288px;
    --layout-sidebar-padding-block: 14px;
    --layout-sidebar-padding-inline: 12px;
    --layout-page-padding-inline: 20px;
    --layout-page-padding-bottom: 24px;
    --layout-topbar-padding-top: 14px;
    --layout-filter-panel-padding: 18px;
    --layout-filter-gap: 12px;
    --layout-control-height: 42px;
    --layout-control-padding-inline: 12px;
    --layout-control-font-size: 14px;

    /* Escala tipográfica para formularios y detalles. */
    --form-title-size: 18px;
    --form-subtitle-size: 13px;
    --form-record-name-size: 20px;
    --form-section-title-size: 13px;
    --form-meta-label-size: 12px;
    --form-value-size: 14px;
    --form-field-label-size: 14px;
    --form-control-size: 14px;
    --form-table-size: 13px;
    --form-button-size: 14px;
}