{ /* ==========================================================================
   EXTENSION DEL SISTEMA DE DISEÑO SOFT UI (SI.SIOT)
   Diccionario de variables complementarias.
   Este archivo NO reemplaza a app.css, lo expande.
   ========================================================================== */

    :root {
        /* --- Paleta de Neutros / Grises --- */
        --soft-gray-50: #F9FAFB; /* Fondos de tarjetas de detalle */
        --soft-gray-100: #F3F4F6; /* Divisores ultra claros, fondos de avatar */
        --soft-gray-200: #E5E7EB; /* Bordes estándar de todas las tarjetas y contenedores */
        --soft-gray-400: #9CA3AF; /* Textos de soporte (ej. contador de caracteres) */
        --soft-gray-500: #6B7280; /* Textos secundarios, descripciones, íconos */
        --soft-gray-600: #4B5563; /* Textos de listas de notificaciones, íconos de tarjetas */
        --soft-gray-700: #374151; /* Estados hover de textos secundarios */
        --soft-gray-800: #1F2937; /* Textos principales, labels */
        --soft-gray-900: #111827; /* Títulos fuertes, headers de modales/drawers */
        /* --- Paleta de Azules Complementarios (El core usa --brand-blue) --- */
        --soft-blue-50: #EFF6FF; /* Fondo de tarjeta seleccionada activa */
        --soft-blue-100: #DBEAFE; /* Subtítulos en el Hero Header */
        --soft-blue-300: #93C5FD; /* Borde hover en tarjetas de selección */
        --soft-blue-900: #1E3A8A; /* Gradiente oscuro del Hero Header */
        /* --- Sombras Específicas de Componentes --- */
        /* Sombra utilitaria más sutil que la global, usada en Wizards y ResultViews */
        --soft-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        /* Sombras para botones de acción con color inyectado */
        --soft-shadow-btn-primary: 0 4px 10px rgba(24, 144, 255, 0.4);
        --soft-shadow-btn-primary-hover: 0 6px 14px rgba(24, 144, 255, 0.6);
        /* Sombra dramática para el Hero Header */
        --soft-shadow-hero: 0 10px 15px -3px rgba(30, 58, 138, 0.15);
        /* --- Geometría Extendida --- */
        /* El app.css define hasta lg (12px). Los organismos grandes usan 16px */
        --soft-border-radius-xl: 16px;
    }
    /* Aliases Semánticos (Buenas Prácticas) 
   Facilitan la lectura en los componentes .razor.css
*/
    :root {
        --text-title: var(--soft-gray-900);
        --text-primary: var(--soft-gray-800);
        --text-secondary: var(--soft-gray-500);
        --border-soft: var(--soft-gray-200);
        --bg-soft: var(--soft-gray-50);
    }