/* --- Contenedor Principal y Variables --- */
:root {
    --gld-panel-bg-color: #ffffff;
    --gld-border-color: #e0e0e0;
    --gld-accent-color: #026580;
}

.gld-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--gld-border-color);
    background-color: #f9f9f9;
    position: relative;
    min-height: 300px;
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: 20px;
}

/* --- Loader (sin cambios) --- */
.gld-loader { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); z-index: 10; justify-content: center; align-items: center; }
.gld-container.gld-loading .gld-loader { display: flex; }
.gld-loader div { border: 5px solid #f3f3f3; border-top: 5px solid var(--gld-accent-color); border-radius: 50%; width: 50px; height: 50px; animation: gld-spin 1s linear infinite; }
@keyframes gld-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === Estilos de Pestañas (estilo Fear & Greed) === */
.gld-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--gld-border-color);
    margin-bottom: 20px;
    text-align: center;
}
.gld-tabs-nav-item {
    flex-grow: 1;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid var(--gld-border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    color: #333;
    margin-right: 2px;
    transition: all 0.2s ease-in-out;
}
.gld-tabs-nav-item:last-child { margin-right: 0; }
.gld-tabs-nav-item:hover { background-color: #e9ecef; }
.gld-tabs-nav-item.active {
    background-color: var(--gld-panel-bg-color); /* Fondo blanco como el contenido */
    border-bottom: 1px solid var(--gld-panel-bg-color);
    font-weight: bold;
    color: var(--gld-accent-color);
}

.gld-tab-panel { display: none; padding-top: 0; }
.gld-tab-panel.active { display: block; background-color: var(--gld-panel-bg-color); padding: 20px; border: 1px solid var(--gld-border-color); border-radius: 0 0 8px 8px; margin-top: -1px;}

/* --- Tabla (sin cambios) --- */
.gld-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.gld-table th, .gld-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #ddd; }
.gld-table th { background-color: #f2f2f2; font-weight: bold; color: #333; text-align: center; }
.gld-table tbody tr:hover { background-color: rgba(233, 245, 255, 0.8); }
.gld-table .positive { color: #28a745 !important; font-weight: 500; }
.gld-table .negative { color: #dc3545 !important; font-weight: 500; }
.gld-table .neutral { color: #6c757d !important; }

/* --- Controles (sin cambios) --- */
.gld-controls { text-align: center; margin-top: 25px; display: flex; justify-content: center; align-items: center; gap: 15px; }
.gld-controls-input { width: 70px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 1.1em; font-weight: bold; }
.gld-controls-label { font-size: 0.9em; color: #6c757d; font-style: italic; }
.gld-controls-btn { position: relative; overflow: hidden; z-index: 1; display: inline-block; padding: 10px 20px; font-size: 1em; font-weight: bold; color: #ffffff; background-color: var(--gld-accent-color); text-decoration: none; border-radius: 4px; border: none; cursor: pointer; transition: color 0.3s ease-in-out; }
.gld-controls-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: -1; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease-in-out; }
.gld-controls-btn:hover::before { transform: scaleX(1); }


/* === Lógica Responsiva para Móvil === */
@media (max-width: 768px) { 
    .gld-container {
        padding: 10px;
    }
    .gld-tabs-nav-item {
        font-size: 0.9em;
        padding: 10px 5px;
    }
}