/* ========================================
 SONO TERMINAL - STYLES
 Versión: 2.0 - Mejorado y Responsive
 ======================================== */

/* ===== VARIABLES CSS ===== */
:root {
 /* Colores principales */
 --color-bg-primary: #0a0a0a;
 --color-bg-secondary: #1a1a1a;
 --color-bg-tertiary: #2a2a2a;
 --color-text-primary: #ffffff;
 --color-text-secondary: #cccccc;
 --color-text-muted: #888888;

 /* Colores de score */
 --color-panic: #ff0000;
 --color-fear: #ff6600;
 --color-accumulation: #ffaa00;
 --color-neutral: #cccc00;
 --color-optimism: #88ff00;
 --color-euphoria: #00ff88;
 --color-bubble: #00ffff;

 /* Colores de señales */
 --color-long: #00ff88;
 --color-short: #ff4466;
 --color-neutral-signal: #888888;

 /* Espaciado */
 --spacing-xs: 4px;
 --spacing-sm: 8px;
 --spacing-md: 16px;
 --spacing-lg: 24px;
 --spacing-xl: 32px;

 /* Bordes */
 --border-radius-sm: 4px;
 --border-radius-md: 8px;
 --border-radius-lg: 12px;

 /* Sombras */
 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
 --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
 --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

 /* Transiciones */
 --transition-fast: 0.15s ease;
 --transition-normal: 0.3s ease;
 --transition-slow: 0.5s ease;
}

/* Tema claro */
body.light-mode {
 --color-bg-primary: #ffffff;
 --color-bg-secondary: #f5f5f5;
 --color-bg-tertiary: #e5e5e5;
 --color-text-primary: #000000;
 --color-text-secondary: #333333;
 --color-text-muted: #666666;
}

/* ===== RESET Y BASE ===== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
 background-color: var(--color-bg-primary);
 color: var(--color-text-primary);
 line-height: 1.6;
 overflow-x: hidden;
}

/* ===== LAYOUT ===== */
.container {
 max-width: 1400px;
 margin: 0 auto;
 padding: var(--spacing-lg);
}

.header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: var(--spacing-md) 0;
 border-bottom: 1px solid var(--color-bg-tertiary);
 margin-bottom: var(--spacing-lg);
}

.header-title {
 font-size: 24px;
 font-weight: bold;
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
}

.status-indicator {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 animation: pulse 2s infinite;
}

.status-indicator.connected {
 background-color: var(--color-long);
}

.status-indicator.loading {
 background-color: #ffaa00;
}

.status-indicator.error {
 background-color: var(--color-short);
}

@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

/* ===== COIN SELECTOR ===== */
.coin-selector-group {
 display: flex;
 gap: var(--spacing-sm);
}

.coin-selector {
 padding: var(--spacing-sm) var(--spacing-md);
 background-color: var(--color-bg-secondary);
 border: 2px solid transparent;
 border-radius: var(--border-radius-md);
 color: var(--color-text-secondary);
 cursor: pointer;
 transition: all var(--transition-fast);
 font-weight: 500;
}

.coin-selector:hover {
 background-color: var(--color-bg-tertiary);
 transform: translateY(-2px);
}

.coin-selector.active {
 border-color: var(--color-long);
 color: var(--color-text-primary);
 background-color: var(--color-bg-tertiary);
}

/* ===== CARDS ===== */
.card {
 background-color: var(--color-bg-secondary);
 border-radius: var(--border-radius-lg);
 padding: var(--spacing-lg);
 margin-bottom: var(--spacing-lg);
 box-shadow: var(--shadow-md);
 transition: transform var(--transition-normal);
}

.card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow-lg);
}

.card-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-md);
 padding-bottom: var(--spacing-sm);
 border-bottom: 1px solid var(--color-bg-tertiary);
}

.card-title {
 font-size: 18px;
 font-weight: bold;
 color: var(--color-text-primary);
}

.card-subtitle {
 font-size: 12px;
 color: var(--color-text-muted);
 margin-top: var(--spacing-xs);
}

/* ===== SCORE DISPLAY ===== */
.score-display {
 text-align: center;
 padding: var(--spacing-xl);
}

.score-value {
 font-size: 72px;
 font-weight: bold;
 line-height: 1;
 margin-bottom: var(--spacing-sm);
}

.score-label {
 font-size: 14px;
 color: var(--color-text-muted);
 margin-bottom: var(--spacing-md);
}

.score-bar-container {
 width: 100%;
 height: 12px;
 background-color: var(--color-bg-tertiary);
 border-radius: 6px;
 overflow: hidden;
 margin-bottom: var(--spacing-sm);
}

.score-bar {
 height: 100%;
 transition: width var(--transition-slow), background-color var(--transition-normal);
 border-radius: 6px;
}

.score-bar.panic { background-color: var(--color-panic); }
.score-bar.fear { background-color: var(--color-fear); }
.score-bar.accumulation { background-color: var(--color-accumulation); }
.score-bar.neutral { background-color: var(--color-neutral); }
.score-bar.optimism { background-color: var(--color-optimism); }
.score-bar.euphoria { background-color: var(--color-euphoria); }
.score-bar.bubble { background-color: var(--color-bubble); }

.score-status {
 font-size: 16px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 1px;
}

/* ===== SIGNAL BADGES ===== */
.signal-badge {
 display: inline-block;
 padding: var(--spacing-xs) var(--spacing-md);
 border-radius: var(--border-radius-sm);
 font-weight: bold;
 font-size: 14px;
 text-transform: uppercase;
}

.signal-badge.long {
 background-color: rgba(0, 255, 136, 0.2);
 color: var(--color-long);
 border: 1px solid var(--color-long);
}

.signal-badge.short {
 background-color: rgba(255, 68, 102, 0.2);
 color: var(--color-short);
 border: 1px solid var(--color-short);
}

.signal-badge.neutral {
 background-color: rgba(136, 136, 136, 0.2);
 color: var(--color-neutral-signal);
 border: 1px solid var(--color-neutral-signal);
}

/* ===== DECISION DISPLAY ===== */
.decision-display {
 text-align: center;
 padding: var(--spacing-xl);
 background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
 border-radius: var(--border-radius-lg);
 margin: var(--spacing-lg) 0;
}

.decision-badge {
 display: inline-block;
 padding: var(--spacing-md) var(--spacing-xl);
 border-radius: var(--border-radius-lg);
 font-size: 32px;
 font-weight: bold;
 margin-bottom: var(--spacing-md);
 text-transform: uppercase;
 letter-spacing: 2px;
 box-shadow: var(--shadow-lg);
}

.decision-badge.long {
 background-color: var(--color-long);
 color: #000;
}

.decision-badge.short {
 background-color: var(--color-short);
 color: #fff;
}

.decision-badge.neutral {
 background-color: var(--color-neutral-signal);
 color: #fff;
}

.confidence-display {
 font-size: 20px;
 color: var(--color-text-secondary);
 margin-top: var(--spacing-sm);
}

.decision-explanation {
 margin-top: var(--spacing-md);
 padding: var(--spacing-md);
 background-color: var(--color-bg-secondary);
 border-radius: var(--border-radius-md);
 font-size: 14px;
 line-height: 1.8;
}

/* ===== TABLES ===== */
.table-container {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 margin: var(--spacing-md) 0;
}

table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}

thead {
 background-color: var(--color-bg-tertiary);
}

th {
 padding: var(--spacing-md);
 text-align: left;
 font-weight: bold;
 color: var(--color-text-primary);
 border-bottom: 2px solid var(--color-bg-primary);
}

td {
 padding: var(--spacing-sm) var(--spacing-md);
 border-bottom: 1px solid var(--color-bg-tertiary);
}

tr:hover {
 background-color: var(--color-bg-tertiary);
}

.bullish {
 color: var(--color-long);
 font-weight: bold;
}

.bearish {
 color: var(--color-short);
 font-weight: bold;
}

.positive {
 color: var(--color-long);
}

.negative {
 color: var(--color-short);
}

/* ===== CALCULATOR ===== */
.calculator {
 background-color: var(--color-bg-tertiary);
 border-radius: var(--border-radius-lg);
 padding: var(--spacing-lg);
 margin: var(--spacing-lg) 0;
}

.calculator-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: var(--spacing-md);
 margin-bottom: var(--spacing-lg);
}

.input-group {
 display: flex;
 flex-direction: column;
}

.input-label {
 font-size: 12px;
 color: var(--color-text-muted);
 margin-bottom: var(--spacing-xs);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.input-field {
 padding: var(--spacing-sm) var(--spacing-md);
 background-color: var(--color-bg-secondary);
 border: 1px solid var(--color-bg-tertiary);
 border-radius: var(--border-radius-sm);
 color: var(--color-text-primary);
 font-size: 16px;
 font-family: inherit;
 transition: border-color var(--transition-fast);
}

.input-field:focus {
 outline: none;
 border-color: var(--color-long);
}

.calculator-button {
 padding: var(--spacing-md) var(--spacing-lg);
 background-color: var(--color-long);
 color: #000;
 border: none;
 border-radius: var(--border-radius-md);
 font-size: 16px;
 font-weight: bold;
 cursor: pointer;
 transition: all var(--transition-fast);
 text-transform: uppercase;
 letter-spacing: 1px;
}

.calculator-button:hover {
 background-color: #00cc66;
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}

.calculator-button:active {
 transform: translateY(0);
}

.calculator-results {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: var(--spacing-md);
 margin-top: var(--spacing-lg);
}

.result-item {
 text-align: center;
 padding: var(--spacing-md);
 background-color: var(--color-bg-secondary);
 border-radius: var(--border-radius-md);
}

.result-label {
 font-size: 11px;
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: var(--spacing-xs);
}

.result-value {
 font-size: 20px;
 font-weight: bold;
 color: var(--color-text-primary);
 transition: color var(--transition-fast);
}

.result-value.updated {
 color: var(--color-long);
 animation: flash 0.5s;
}

@keyframes flash {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

/* ===== NOTIFICATIONS ===== */
.notifications-container {
 position: fixed;
 top: var(--spacing-lg);
 right: var(--spacing-lg);
 z-index: 1000;
 max-width: 400px;
}

.notification {
 background-color: var(--color-bg-secondary);
 border-left: 4px solid var(--color-long);
 border-radius: var(--border-radius-md);
 padding: var(--spacing-md);
 margin-bottom: var(--spacing-sm);
 box-shadow: var(--shadow-lg);
 animation: slideIn 0.3s ease;
 position: relative;
}

@keyframes slideIn {
 from {
 transform: translateX(100%);
 opacity: 0;
 }
 to {
 transform: translateX(0);
 opacity: 1;
 }
}

.notification-error {
 border-left-color: var(--color-short);
}

.notification-warning {
 border-left-color: #ffaa00;
}

.notification-info {
 border-left-color: #00aaff;
}

.notification-title {
 font-weight: bold;
 margin-bottom: var(--spacing-xs);
}

.notification-message {
 font-size: 14px;
 color: var(--color-text-secondary);
}

.notification-close {
 position: absolute;
 top: var(--spacing-sm);
 right: var(--spacing-sm);
 background: none;
 border: none;
 color: var(--color-text-muted);
 font-size: 20px;
 cursor: pointer;
 transition: color var(--transition-fast);
}

.notification-close:hover {
 color: var(--color-text-primary);
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
 display: inline-block;
 width: 20px;
 height: 20px;
 border: 3px solid var(--color-bg-tertiary);
 border-top-color: var(--color-long);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

@keyframes spin {
 to { transform: rotate(360deg); }
}

.hidden {
 display: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
 .container {
 padding: var(--spacing-md);
 }

 .header {
 flex-direction: column;
 gap: var(--spacing-md);
 }

 .header-title {
 font-size: 20px;
 }

 .coin-selector-group {
 flex-wrap: wrap;
 justify-content: center;
 }

 .coin-selector {
 font-size: 12px;
 padding: var(--spacing-xs) var(--spacing-sm);
 }

 .score-value {
 font-size: 48px;
 }

 .decision-badge {
 font-size: 24px;
 padding: var(--spacing-sm) var(--spacing-lg);
 }

 table {
 font-size: 12px;
 }

 th, td {
 padding: var(--spacing-xs);
 }

 .calculator-grid {
 grid-template-columns: 1fr;
 }

 .calculator-results {
 grid-template-columns: repeat(2, 1fr);
 }

 .notifications-container {
 left: var(--spacing-sm);
 right: var(--spacing-sm);
 max-width: none;
 }
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-bold { font-weight: bold; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }