/* Estilos personalizados para complementar Tailwind y definir la estética Neo-Brutalista */

        body {
            font-family: 'Inter', sans-serif;
            background-color: #F9F9F9; /* Fondo casi blanco */
            color: #111111; /* Texto casi negro */
        }

        /* Tipografía */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Inter', sans-serif;
            font-weight: 900; /* Extra-bold para títulos */
        }

        .font-mono {
            font-family: 'Roboto Mono', monospace;
        }

        /* Definición de la clase base del botón Neo-Brutalista */
        .neo-button {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 1.5rem 1rem;
            background-color: #FFFFFF;
            border: 2px solid #111111;
            border-radius: 0.5rem; /* 8px */
            text-align: center;
            cursor: pointer;
            transition: all 0.15s ease-out;
            box-shadow: 4px 4px 0 #111111; /* Sombra dura y desplazada */
        }

        .neo-button:hover {
            background-color: #EC4899; /* Fucsia de acento */
            color: #FFFFFF;
            box-shadow: 2px 2px 0 #111111;
            transform: translate(2px, 2px);
        }

        .neo-button:active {
            box-shadow: 0 0 0 #111111;
            transform: translate(4px, 4px);
        }

        /* Estilo para los inputs de la calculadora */
        .neo-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #111111;
            border-radius: 0.5rem; /* 8px */
            font-family: 'Roboto Mono', monospace;
            font-size: 1rem;
            background-color: #F9F9F9;
            box-shadow: 4px 4px 0 #111111;
            transition: all 0.1s ease-in-out;
            -webkit-appearance: none; /* Quitar estilos nativos */
            -moz-appearance: textfield; /* Para Firefox */
        }

        .neo-input:focus {
            outline: none;
            box-shadow: 2px 2px 0 #111111;
            transform: translate(2px, 2px);
            background-color: #FFFFFF;
        }

        /* Quitar flechas en inputs numéricos */
        .neo-input::-webkit-outer-spin-button,
        .neo-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Contenedor del gráfico */
        .chart-container {
            position: relative;
            background-color: #F9F9F9;
            border: 2px solid #111111;
            border-radius: 0.5rem;
            padding: 1rem;
            box-shadow: 4px 4px 0 #111111;
        }

        /* Configuración del Sidebar (Modal Lateral) */
        #metric-sidebar {
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
            z-index: 50;
            background-color: #FFFFFF;
            border-left: 2px solid #111111;
            box-shadow: -8px 0 0 #111111; /* Sombra dura hacia la izquierda */
        }

        #metric-sidebar.open {
            transform: translateX(0%);
        }

        #sidebar-overlay {
            z-index: 40;
            transition: opacity 0.3s ease-in-out;
        }