/* Variáveis CSS Centralizadas - Rádio Loja Admin - Paleta de Cores do Player */
:root {
    --font-family-ui: "Instrument Sans", 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --header-height: auto;
    
    /* Tema Claro - Estética de Prata e Aço Escovado (HD Premium) - Meio Tom */
    --bg-color: #f8fafc; 
    --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --card-bg-color: rgba(226, 232, 240, 0.92);
    --card-bg-rgb: 226, 232, 240;
    --card-bg-solid: #e2e8f0;
    --header-bg-color: rgba(203, 213, 225, 0.96);
    --input-bg-color: #f1f5f9;
    --placeholder-bg: #cbd5e1;
    --surface-glass: rgba(226, 232, 240, 0.7);
    --surface-polished: linear-gradient(145deg, rgba(226,232,240,0.9) 0%, rgba(148,163,184,0.3) 100%);
    --text-color-primary: #1e293b; /* Slate 800 para legibilidade HD */
    --text-color-secondary: #475569; /* Slate 600 */
    --text-color-placeholder: #94a3b8;

    /* Sistema de Cores Padronizado */
    --color-cyan: #0ea5e9; /* Cyan mais "aço polido" no tema claro */
    --color-cyan-hover: #0284c7;
    --color-cyan-light: rgba(14, 165, 233, 0.1);
    --color-cyan-border: rgba(14, 165, 233, 0.2);

    --color-magenta: #ff00ea;
    --color-magenta-hover: #ff00fa;
    --color-magenta-light: rgba(255, 0, 234, 0.1);
    --color-magenta-border: rgba(255, 0, 234, 0.3);

    --color-orange: #f59e0b; 
    --color-orange-hover: #d97706;
    --color-orange-light: rgba(245, 158, 11, 0.1);
    --color-orange-border: rgba(245, 158, 11, 0.3);

    --color-green: #10b981; 
    --color-green-hover: #059669;
    --color-green-light: rgba(16, 185, 129, 0.1);
    --color-green-border: rgba(16, 185, 129, 0.3);

    --color-red: #ef4444; 
    --color-red-hover: #dc2626;
    --color-red-light: rgba(239, 68, 68, 0.1);
    --color-red-border: rgba(239, 68, 68, 0.3);

    /* Contraste semantico para texto em superficies coloridas */
    --text-on-green-soft: #14532d;
    --text-on-red-soft: #7f1d1d;
    --text-on-amber-soft: #78350f;
    --text-on-strong-accent: #f8fafc;
    
    --color-navy: #003d82;
    --color-navy-hover: #004d9f;
    --color-navy-light: rgba(0, 61, 130, 0.1);
    --color-navy-border: rgba(0, 61, 130, 0.3);
    
    --color-silver: #cbd5e1; /* Cor de Aço Polido */
    --color-silver-hover: #94a3b8;
    --color-silver-light: rgba(203, 213, 225, 0.4);
    --color-silver-border: rgba(148, 163, 184, 0.5);
    
    --color-dark-gray: #3a3a3e;
    --color-dark-gray-hover: #4a4a4e;
    --color-dark-gray-light: rgba(58, 58, 62, 0.1);
    --color-dark-gray-border: rgba(58, 58, 62, 0.3);
    
    /* Links e Acentos */
    --link-color: var(--color-cyan);
    --link-hover-color: var(--color-cyan-hover);
    --button-text-color: #FFFFFF;
    --button-logout-text-color: #FFFFFF;
    --border-color-light: rgba(30, 41, 59, 0.08);
    --border-color-medium: rgba(30, 41, 59, 0.15);
    --focus-ring-color: rgba(14, 165, 233, 0.3);
    
    /* Botões Padronizados */
    --button-primary-bg: var(--color-cyan);
    --button-primary-hover: var(--color-cyan-hover);
    --button-secondary-bg: var(--color-silver);
    --button-secondary-hover: var(--color-silver-hover);
    --button-success-bg: var(--color-green);
    --button-success-hover: var(--color-green-hover);
    --button-warning-bg: var(--color-orange);
    --button-warning-hover: var(--color-orange-hover);
    --button-danger-bg: var(--color-red);
    --button-danger-hover: var(--color-red-hover);
    --button-info-bg: var(--color-cyan);
    --button-info-hover: var(--color-cyan-hover);
    --button-special-bg: var(--color-magenta);
    --button-special-hover: var(--color-magenta-hover);
    
    /* Status */
    --status-active-color: var(--color-green);
    --status-inactive-color: var(--color-red);
    --status-pending-color: var(--color-orange);
    --status-online-accent: #10b981;
    --status-paused-accent: #f59e0b;
    --status-offline-accent: #ef4444;
    --plan-active-color: #3c65ad;
    --plan-pending-color: #8f7a4a;
    --plan-inactive-color: #8a6666;
    --panel-surface-bg: var(--card-bg-color);
    --panel-surface-border: var(--border-color-light);
    --panel-surface-shadow: 0 4px 16px var(--shadow-color);
    --panel-header-bg: var(--input-bg-color);
    --panel-header-border: var(--border-color-medium);
    --panel-footer-bg: var(--input-bg-color);
    --panel-footer-border: var(--border-color-medium);
    --alert-success-bg: #dcfce7;
    --alert-success-text: var(--text-on-green-soft);
    --alert-success-border: #86efac;
    --alert-danger-bg: #fee2e2;
    --alert-danger-text: var(--text-on-red-soft);
    --alert-danger-border: #fca5a5;
    --shadow-color: rgba(15, 23, 42, 0.06); /* Sombra suave e profissional */
    --shadow-hover-color: rgba(15, 23, 42, 0.10);
    --shadow-modal: rgba(15, 23, 42, 0.16);
    --accent-cyan: #0ea5e9;
    --accent-cyan-rgb: 14, 165, 233;
    --accent-cyan-glow: rgba(0, 234, 255, 0.12);
    --accent-gradient: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-hover) 100%);
    --send-app-text: #0369a1;
    --send-app-bg: #dcebf8;
    --send-app-bg-hover: #cfe2f3;
    --send-app-border: #88b4d8;
    --send-option-whatsapp-text: #047857;
    --send-option-whatsapp-bg: #dff6ee;
    --send-option-whatsapp-border: #8fd8b5;
    --send-option-email-text: #0f766e;
    --send-option-email-bg: #dff1f1;
    --send-option-email-border: #8bc9c3;
    --border-radius: 12px;
    --backdrop-blur: 8px;
    --transition-speed: 0.25s;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.8125rem;
    --line-height-base: 1.5;
}

html.dark-theme {
    /* Tema Escuro - Base em tons derivados de #696969 */
    --bg-color: #323232;
    --bg-gradient: linear-gradient(135deg, #323232 0%, #515151 52%, #2d2d2d 100%);
    
    --card-bg-color: #424242;
    --card-bg-rgb: 66, 66, 66;
    --card-bg-solid: #424242;
    
    --header-bg-color: rgba(66, 66, 66, 0.95);
    --input-bg-color: #575757;
    --placeholder-bg: #707070;
    
    --text-color-primary: #efefef;
    --text-color-secondary: #c6c6c6;
    --text-color-placeholder: #a8a8a8;

    --border-color-light: rgba(214, 214, 214, 0.13);
    --border-color-medium: rgba(214, 214, 214, 0.24);

    /* Sistema de Cores base neutro */
    --color-cyan: #d1d1d1;
    --color-cyan-hover: #f0f0f0;
    --color-cyan-light: rgba(209, 209, 209, 0.14);
    --color-cyan-border: rgba(209, 209, 209, 0.28);
    
    --color-magenta: #b9b9b9;
    --color-magenta-hover: #d9d9d9;
    --color-magenta-light: rgba(185, 185, 185, 0.2);
    --color-magenta-border: rgba(185, 185, 185, 0.46);
    
    --color-orange: #fbbf24; /* Amber 400 */
    --color-orange-hover: #fbbf24;
    --color-orange-light: rgba(251, 191, 36, 0.15);
    --color-orange-border: rgba(251, 191, 36, 0.4);
    
    --color-green: #34d399; /* Emerald 400 */
    --color-green-hover: #6ee7b7;
    --color-green-light: rgba(52, 211, 153, 0.15);
    --color-green-border: rgba(52, 211, 153, 0.4);
    
    --color-red: #f87171; /* Red 400 */
    --color-red-hover: #fca5a5;
    --color-red-light: rgba(248, 113, 113, 0.15);
    --color-red-border: rgba(248, 113, 113, 0.4);

    /* Contraste semantico para texto em superficies coloridas */
    --text-on-green-soft: #d1fae5;
    --text-on-red-soft: #fecaca;
    --text-on-amber-soft: #fde68a;
    --text-on-strong-accent: #f8fafc;

    --alert-success-bg: rgba(34, 197, 94, 0.18);
    --alert-success-text: #d1fae5;
    --alert-success-border: rgba(74, 222, 128, 0.35);
    --alert-danger-bg: rgba(239, 68, 68, 0.2);
    --alert-danger-text: #fecaca;
    --alert-danger-border: rgba(252, 165, 165, 0.38);
    --status-online-accent: #34d399;
    --status-paused-accent: #fcd34d;
    --status-offline-accent: #ff9f9f;
    --plan-active-color: #8ea8d7;
    --plan-pending-color: #e7c977;
    --plan-inactive-color: #ff9f9f;
    --panel-surface-bg: var(--card-bg-color);
    --panel-surface-border: var(--border-color-light);
    --panel-surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --panel-header-bg: var(--input-bg-color);
    --panel-header-border: var(--border-color-medium);
    --panel-footer-bg: var(--input-bg-color);
    --panel-footer-border: var(--border-color-medium);

    --color-amber: #fcd34d;
    --color-amber-hover: #fde68a;
    --color-amber-light: rgba(252, 211, 77, 0.15);
    --color-amber-border: rgba(252, 211, 77, 0.4);
    
    --color-navy: #bdbdbd;
    --color-navy-hover: #ececec;
    --color-navy-light: rgba(189, 189, 189, 0.12);
    --color-navy-border: rgba(189, 189, 189, 0.34);
    
    --color-silver: #696969;
    --color-silver-hover: #7d7d7d;
    --color-silver-light: rgba(105, 105, 105, 0.42);
    --color-silver-border: rgba(125, 125, 125, 0.56);
    
    --color-dark-gray: #4b4b4b;
    --color-dark-gray-hover: #636363;
    --color-dark-gray-light: rgba(75, 75, 75, 0.5);
    --color-dark-gray-border: rgba(99, 99, 99, 0.7);
    
    /* Links e Acentos */
    --link-color: #dcdcdc;
    --link-hover-color: #f2f2f2;
    --button-text-color: #141414;
    --button-logout-text-color: #ffffff;
    --focus-ring-color: rgba(220, 220, 220, 0.28);
    
    /* Botões Padronizados - Mantendo consistência mas com cores visíveis */
    --button-primary-bg: #696969;
    --button-primary-hover: #7d7d7d;
    --button-secondary-bg: var(--color-silver);
    --button-secondary-hover: var(--color-silver-hover);
    /* ... demais botões herdam as variáveis de cor acima */

    /* Sombras e Profundidade */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover-color: rgba(0, 0, 0, 0.5);
    --shadow-modal: rgba(0, 0, 0, 0.7);
    
    --accent-cyan: #dcdcdc;
    --accent-cyan-rgb: 220, 220, 220;
    --accent-cyan-glow: rgba(255, 255, 255, 0.1);
    --accent-gradient: linear-gradient(135deg, #7b7b7b 0%, #5f5f5f 100%);
    --send-app-text: #e4e4e7;
    --send-app-bg: #56565f;
    --send-app-bg-hover: #666670;
    --send-app-border: #8a8a93;
    --send-option-whatsapp-text: #bbf7d0;
    --send-option-whatsapp-bg: #2f5a49;
    --send-option-whatsapp-border: #4c9f7b;
    --send-option-email-text: #ccfbf1;
    --send-option-email-bg: #2e5351;
    --send-option-email-border: #4f9c95;
    --backdrop-blur: 16px;
}