/* ============================================================
   GestorSuperas — Estilos globales (dark mode)
   assets/css/app.css
   ============================================================ */

:root {
    --gs-accent:   #f0a500;
    --gs-accent2:  #e08800;
    --gs-dark:     #121212;
    --gs-card:     #1e1e1e;
    --gs-border:   #2e2e2e;
    --gs-muted:    #6c757d;
}

/* Base */
body {
    background-color: var(--gs-dark);
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.92rem;
}

/* Navbar */
.navbar-brand { letter-spacing: .5px; }

/* Cards */
.card {
    background-color: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: 10px;
    color: #e0e0e0;
}
.card-header {
    background-color: #252525;
    border-bottom: 1px solid var(--gs-border);
    font-weight: 600;
    color: #e0e0e0;
}
.card-body { color: #e0e0e0; }

/* Dashboard — contadores */
.card-body .fs-2 {
    color: #ffffff;
    font-weight: 700;
}
.card-body .text-muted {
    color: #aaaaaa !important;
    font-size: 0.85rem;
}
.card-body .fs-1 { line-height: 1; }

/* Tablas */
.table {
    color: #d0d0d0;
}
.table-dark {
    --bs-table-bg: #1a1a1a;
    --bs-table-striped-bg: #222222;
    --bs-table-hover-bg: #2a2a2a;
    --bs-table-border-color: var(--gs-border);
}
.table thead th {
    color: var(--gs-accent);
    border-bottom: 2px solid var(--gs-border);
    font-size: 0.80rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Formularios */
.form-control, .form-select {
    background-color: #2a2a2a;
    border-color: var(--gs-border);
    color: #e0e0e0;
}
.form-control:focus, .form-select:focus {
    background-color: #333;
    border-color: var(--gs-accent);
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(240,165,0,.25);
}
.form-control::placeholder { color: #555; }

/* Botones */
.btn-warning {
    background-color: var(--gs-accent);
    border-color: var(--gs-accent);
    color: #000;
    font-weight: 600;
}
.btn-warning:hover {
    background-color: var(--gs-accent2);
    border-color: var(--gs-accent2);
    color: #000;
}

/* Badges de estado */
.badge-pendiente  { background-color: #555;    color: #ccc; }
.badge-procesando { background-color: #0d6efd; color: #fff; }
.badge-listo      { background-color: #198754; color: #fff; }
.badge-error      { background-color: #dc3545; color: #fff; }

/* Indicador TV activa/inactiva */
.dot-activa   { width:10px; height:10px; border-radius:50%; background:#198754; display:inline-block; }
.dot-inactiva { width:10px; height:10px; border-radius:50%; background:#6c757d; display:inline-block; }

/* Token display */
.token-display {
    font-family: 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--gs-accent);
    background: #111;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--gs-border);
    display: inline-block;
}

/* Drag & drop (playlists) */
.sortable-ghost  { opacity: 0.4; }
.sortable-drag   { opacity: 1; }
.drag-handle {
    cursor: grab;
    color: var(--gs-muted);
}
.drag-handle:active { cursor: grabbing; }

/* Progress bar de conversión */
.progress { background-color: #2a2a2a; }

/* Alerts */
.alert-dark-custom {
    background-color: #252525;
    border-color: var(--gs-border);
    color: #d0d0d0;
}

/* Login page */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: 14px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.login-logo {
    font-size: 2.5rem;
    color: var(--gs-accent);
}