/* app.css - solo colores y componentes custom */
/* ── TEMA OSCURO (por defecto) ───────────────────────────── */
:root {
  --gp-bg:     #0d1117;
  --gp-dark:   #0d1117;
  --gp-card:   #161b22;
  --gp-card2:  #1c2330;
  --gp-border: #30363d;
  --gp-text:   #e6edf3;
  --gp-green:  #4ade80;
  --gp-yellow: #f59e0b;
  --gp-red:    #f87171;
  --gp-blue:   #60a5fa;
  --gp-purple: #c084fc;
  --gp-muted:  #8b949e;
}

/* ── TEMA CLARO ──────────────────────────────────────────── */
[data-theme="light"] {
  --gp-bg:     #f0f2f5;
  --gp-dark:   #f0f2f5;
  --gp-card:   #ffffff;
  --gp-card2:  #f8f9fa;
  --gp-border: #dee2e6;
  --gp-text:   #1a1a2e;
  --gp-green:  #16a34a;
  --gp-yellow: #d97706;
  --gp-red:    #dc2626;
  --gp-blue:   #2563eb;
  --gp-purple: #7c3aed;
  --gp-muted:  #6b7280;
}

body { background: var(--gp-bg) !important; color: var(--gp-text) !important; }

/* Cards */
.card, .card-header, .card-body, .card-footer {
  background-color: var(--gp-card) !important;
  border-color: var(--gp-border) !important;
  color: var(--gp-text) !important;
}
.card-header { background-color: rgba(0,0,0,0.3) !important; font-weight: 600; font-size: .875rem; }

/* Forms */
.form-control, .form-select {
  background-color: var(--gp-card2) !important;
  border-color: var(--gp-border) !important;
  color: var(--gp-text) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gp-blue) !important;
  box-shadow: 0 0 0 .2rem rgba(96,165,250,.15) !important;
}
.form-control::placeholder { color: #484f58 !important; }
.form-label { font-size: .8rem; color: var(--gp-muted); font-weight: 500; }

/* Tables */
.table { --bs-table-color: #e6edf3; --bs-table-bg: transparent; --bs-table-border-color: var(--gp-border); }
.table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gp-muted) !important; font-weight: 500; }
.table-dark { --bs-table-bg: var(--gp-card); }

/* Navbar */
.navbar {
  border-bottom: 1px solid #30363d !important;
  background-color: #161b22 !important;
}
.navbar-toggler {
  border-color: rgba(255,255,255,.3) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar .nav-link { color: #c9d1d9 !important; }
.navbar .nav-link:hover { color: #4ade80 !important; }
.navbar .nav-link.active { color: #4ade80 !important; font-weight: 600; }
.navbar .navbar-brand { color: #4ade80 !important; }
.navbar .dropdown-toggle { color: #c9d1d9 !important; }
.navbar .btn { color: #c9d1d9 !important; border-color: #30363d !important; }
.navbar .btn:hover { background-color: #30363d !important; }
.navbar .badge { font-size: .65rem !important; }
.dropdown-menu { background-color: var(--gp-card2) !important; border-color: var(--gp-border) !important; }
.dropdown-item { color: var(--gp-text) !important; font-size: .85rem; }
.dropdown-item:hover { background-color: rgba(255,255,255,0.07) !important; }

/* KPI */
.kpi-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gp-muted); margin-bottom: 4px; }
.kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kpi-sub   { font-size: .72rem; color: var(--gp-muted); margin-top: 2px; }

/* Colores */
.c-green  { color: var(--gp-green)  !important; }
.c-yellow { color: var(--gp-yellow) !important; }
.c-red    { color: var(--gp-red)    !important; }
.c-blue   { color: var(--gp-blue)   !important; }
.c-purple { color: var(--gp-purple) !important; }
.c-muted  { color: var(--gp-muted)  !important; }

/* Tags */
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:500; }
.tag-green  { background:rgba(74,222,128,.12);  color:var(--gp-green);  }
.tag-yellow { background:rgba(245,158,11,.12);  color:var(--gp-yellow); }
.tag-red    { background:rgba(248,113,113,.12); color:var(--gp-red);    }
.tag-blue   { background:rgba(96,165,250,.12);  color:var(--gp-blue);   }
.tag-purple { background:rgba(192,132,252,.12); color:var(--gp-purple); }
.tag-gray   { background:rgba(139,148,158,.12); color:var(--gp-muted);  }

/* Dots semáforo */
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:2px; }
.dot-green  { background:var(--gp-green);  }
.dot-yellow { background:var(--gp-yellow); }
.dot-red    { background:var(--gp-red);    }

/* Alertas */
.alerta-item { padding:10px 15px; border-bottom:1px solid var(--gp-border); display:flex; gap:10px; }
.alerta-item:last-child { border-bottom:none; }

/* Barras producción */
.bar-track { height:7px; background:var(--gp-card2); border-radius:4px; overflow:hidden; }
.bar-fill  { height:100%; background:var(--gp-blue); opacity:.8; border-radius:4px; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:380px; background:var(--gp-card); border:1px solid var(--gp-border); border-radius:12px; padding:36px 30px; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-thumb { background:var(--gp-border); border-radius:3px; }

[data-theme="light"] .navbar { background-color: #1e293b !important; }
/* ── OVERRIDES TEMA CLARO ────────────────────────────────── */
[data-theme="light"] body { background: #f0f2f5 !important; color: #1a1a2e !important; }
[data-theme="light"] .navbar { background: #1a1a2e !important; }
[data-theme="light"] .card,
[data-theme="light"] .card-header,
[data-theme="light"] .card-body,
[data-theme="light"] .card-footer {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #1a1a2e !important;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background-color: #f8f9fa !important;
  border-color: #ced4da !important;
  color: #1a1a2e !important;
}
[data-theme="light"] .table { color: #1a1a2e !important; }
[data-theme="light"] .table-hover tbody tr:hover { background-color: rgba(0,0,0,.04) !important; }
[data-theme="light"] .dropdown-menu {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}
[data-theme="light"] .dropdown-item { color: #1a1a2e !important; }
[data-theme="light"] .dropdown-item:hover { background-color: #f0f2f5 !important; }
[data-theme="light"] .kpi-label { color: #6b7280 !important; }
[data-theme="light"] .c-muted { color: #6b7280 !important; }
[data-theme="light"] .bar-track { background: #e5e7eb !important; }
[data-theme="light"] .collapse-icon { color: #1a1a2e; }
[data-theme="light"] .tag { background: rgba(0,0,0,.08) !important; color: #374151 !important; }
[data-theme="light"] .tag-green  { background: #dcfce7 !important; color: #166534 !important; }
[data-theme="light"] .tag-blue   { background: #dbeafe !important; color: #1e40af !important; }
[data-theme="light"] .tag-red    { background: #fee2e2 !important; color: #991b1b !important; }
[data-theme="light"] .tag-yellow { background: #fef9c3 !important; color: #854d0e !important; }
[data-theme="light"] .tag-purple { background: #ede9fe !important; color: #5b21b6 !important; }
[data-theme="light"] .tag-gray   { background: #f3f4f6 !important; color: #374151 !important; }