/* ===========================================================================
   PALETA por DEFAULT — Modo NORMAL (azul oscuro original)
   El modo pastel se aplica con body.modo-pastel (definido más abajo).
   =========================================================================== */
:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#0b1220; --text:#e2e8f0; --muted:#94a3b8;
  --primary:#3b82f6; --primary-d:#2563eb; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --border:#334155; --card:#1e293b;
  --topbar-bg:#0b1220;
  --accent-rgb:59,130,246;  /* azul */
  --hover-bg:#1e293b;
  --th-bg:#0b1220;
}

/* ===========================================================================
   Paleta ALTERNATIVA — Modo PASTEL (violeta-rosa femenino)
   Se activa cuando <body> tiene la clase .modo-pastel
   =========================================================================== */
body.modo-pastel{
  --bg:#241730;
  --panel:#33203f;
  --panel2:#1b1024;
  --text:#f5e3f0;
  --muted:#c2a8c8;
  --primary:#e89dc8;
  --primary-d:#d47bb3;
  --ok:#a8e0c2;
  --warn:#f5c9a5;
  --err:#f0a8b8;
  --border:#54395f;
  --card:#33203f;
  --topbar-bg:#1b1024;
  --accent-rgb:232,157,200;  /* rosa */
  --hover-bg:#3f2950;
  --th-bg:#1b1024;
}

/* ===========================================================================
   Paleta CLARA — Modo CLARO (luminoso, fondo blanco/gris suave)
   Se activa cuando <body> tiene la clase .modo-claro
   =========================================================================== */
body.modo-claro{
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel2:#f1f5f9;
  --text:#1e293b;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-d:#1d4ed8;
  --ok:#16a34a;
  --warn:#d97706;
  --err:#dc2626;
  --border:#cbd5e1;
  --card:#ffffff;
  --topbar-bg:#ffffff;
  --accent-rgb:37,99,235;  /* azul */
  --hover-bg:#e2e8f0;
  --th-bg:#f1f5f9;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden;max-width:100vw}
body{background:radial-gradient(ellipse at top, rgba(var(--accent-rgb),.06), transparent 50%), var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--topbar-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar .brand a{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px}
.topbar .logo{font-size:22px}
.topbar .nav{display:flex;gap:2px;flex:1;flex-wrap:nowrap;overflow:hidden;min-width:0}
.topbar .nav a{padding:6px 8px;border-radius:6px;color:var(--text);font-size:12px;white-space:nowrap}
.topbar .nav a:hover{background:var(--hover-bg);text-decoration:none}
.topbar .nav a.active{background:var(--primary);color:#fff}
.topbar .usuario{display:flex;gap:8px;align-items:center;color:var(--muted);flex-shrink:0}
#tema-toggle{font-size:12px !important;padding:5px 10px !important}
body.modo-pastel .topbar .nav a.active{background:linear-gradient(135deg,var(--primary),var(--primary-d));box-shadow:0 2px 10px rgba(232,157,200,.3)}
.topbar .usuario{display:flex;gap:10px;align-items:center;color:var(--muted)}
.contenedor{max-width:100%;margin:18px 0;padding:0 24px;width:100%;box-sizing:border-box}
.pie{text-align:center;color:var(--muted);padding:30px 0}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;border:1px solid}
.flash-ok{background:rgba(168,224,194,.12);border-color:var(--ok);color:#c8efd9}
.flash-err{background:rgba(240,168,184,.12);border-color:var(--err);color:#f5c9d2}
.flash-warn{background:rgba(245,201,165,.12);border-color:var(--warn);color:#f5dcc4}
.flash-info{background:rgba(232,157,200,.12);border-color:var(--primary);color:#f5d3e5}

h1,h2,h3{color:#fff;margin:0 0 16px}
h1{font-size:24px}
h2{font-size:18px;margin-top:24px}

.btn,button{cursor:pointer;border:none;background:var(--primary);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600}
.btn:hover{background:var(--primary-d)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ok{background:var(--ok)}
.btn-warn{background:var(--warn)}
.btn-err{background:var(--err)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

input,select,textarea{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
label{display:block;margin:8px 0 4px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin:12px 0}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}

/* KPIs — adaptables a ambos modos (usan --accent-rgb) */
.kpi{
  background:linear-gradient(135deg, var(--panel), var(--panel2));
  backdrop-filter:blur(8px);
  border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:10px;
  padding:10px 12px;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent);
}
.kpi::after{
  content:'';position:absolute;bottom:0;right:0;width:30px;height:30px;
  background:radial-gradient(circle at bottom right, rgba(var(--accent-rgb),.22), transparent 60%);
  pointer-events:none;
}
.kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--accent-rgb),.5);
  box-shadow:0 4px 20px -4px rgba(var(--accent-rgb),.4), inset 0 0 0 1px rgba(var(--accent-rgb),.14);
}
.kpi .lbl{
  color:#c2a8c8;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;
  font-weight:600;
}
.kpi .val{
  font-size:22px;font-weight:800;color:#fff;margin-top:2px;
  font-family:'JetBrains Mono','Consolas','Courier New',monospace;
  letter-spacing:-.5px;line-height:1.1;
}
.kpi .sub{color:#c2a8c8;font-size:10px;margin-top:2px;font-weight:500}
.kpi.k-ok{border-color:rgba(168,224,194,.4)}
.kpi.k-ok::before{background:linear-gradient(90deg,transparent,rgba(168,224,194,.6),transparent)}
.kpi.k-ok::after{background:radial-gradient(circle at bottom right, rgba(168,224,194,.22), transparent 60%)}
.kpi.k-ok .val{color:#a8e0c2}
.kpi.k-ok:hover{box-shadow:0 4px 20px -4px rgba(168,224,194,.4)}

.kpi.k-warn{border-color:rgba(245,201,165,.4)}
.kpi.k-warn::before{background:linear-gradient(90deg,transparent,rgba(245,201,165,.6),transparent)}
.kpi.k-warn::after{background:radial-gradient(circle at bottom right, rgba(245,201,165,.22), transparent 60%)}
.kpi.k-warn .val{color:#f5c9a5}
.kpi.k-warn:hover{box-shadow:0 4px 20px -4px rgba(245,201,165,.4)}

.kpi.k-err{border-color:rgba(240,168,184,.4)}
.kpi.k-err::before{background:linear-gradient(90deg,transparent,rgba(240,168,184,.6),transparent)}
.kpi.k-err::after{background:radial-gradient(circle at bottom right, rgba(240,168,184,.22), transparent 60%)}
.kpi.k-err .val{color:#f0a8b8}
.kpi.k-err:hover{box-shadow:0 4px 20px -4px rgba(240,168,184,.4)}

.kpi.k-pri{border-color:rgba(232,157,200,.5)}
.kpi.k-pri .val{color:#e89dc8}

/* Variante mini para grids densos */
.kpi-mini{padding:8px 10px}
.kpi-mini .val{font-size:18px}
.kpi-mini .lbl{font-size:8px}

table{width:100%;border-collapse:collapse;background:var(--card);border-radius:8px;overflow:hidden}
th{background:var(--th-bg);color:var(--text);padding:10px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td{padding:8px 10px;border-top:1px solid var(--border)}
tr:hover td{background:rgba(var(--accent-rgb),.06)}
.tbl-num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-compact td,.tbl-compact th{padding:6px 8px;font-size:13px}

.tag{display:inline-block;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;background:#1b1024;border:1px solid var(--border);color:var(--text)}
.tag-ok{background:rgba(168,224,194,.18);color:#c8efd9;border-color:var(--ok)}
.tag-warn{background:rgba(245,201,165,.18);color:#f5dcc4;border-color:var(--warn)}
.tag-err{background:rgba(240,168,184,.18);color:#f5c9d2;border-color:var(--err)}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:380px;width:100%}
.login-box h1{text-align:center;margin-bottom:24px}

.upload-box{border:2px dashed var(--border);border-radius:12px;padding:30px;text-align:center;background:var(--panel2)}
.upload-box.over{border-color:var(--primary);background:rgba(59,130,246,.05)}

.error-list{max-height:300px;overflow:auto}
.error-list .item{padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
.error-list .item.err{background:rgba(239,68,68,.05)}
.error-list .item.warn{background:rgba(245,158,11,.05)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs a{padding:10px 16px;color:var(--muted);border-bottom:2px solid transparent}
.tabs a.active{color:#fff;border-color:var(--primary)}

.row-actions{display:flex;gap:6px;justify-content:flex-end}

.checkbox{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.checkbox input{width:auto;margin:0}

.bulk-bar{display:none;background:var(--primary);color:#fff;padding:10px 16px;border-radius:8px;margin:10px 0;align-items:center;gap:10px}
.bulk-bar.show{display:flex}

@media(max-width:900px){
  .topbar{padding:8px 12px;gap:6px}
  /* En celular ya no scroll horizontal del nav - lo maneja el menú hamburguesa de header.php */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  .card{padding:14px !important;border-radius:10px}
  h1{font-size:22px}
  h2{font-size:16px}
  .tbl-compact td,.tbl-compact th{padding:6px 4px;font-size:12px}
  table{font-size:12px}
  .btn{padding:9px 14px;font-size:14px}
  .btn-sm{padding:6px 10px;font-size:12px}
  input,select,textarea{font-size:16px} /* iOS evita zoom auto si >= 16 */
  .contenedor{padding:10px}
}
@media(max-width:480px){
  .topbar{padding:6px 8px}
  h1{font-size:20px}
}

/* ===========================================================================
   OVERRIDES PARA MODO PASTEL — captura colores hex hardcoded comunes y los
   reemplaza por los equivalentes pastel. Usa selectores de atributo style.
   =========================================================================== */
body.modo-pastel {
  /* BACKGROUNDS — verdes / rojos / amarillos / azules clásicos */
  [style*="background:#22c55e"], [style*="background-color:#22c55e"],
  [style*="background:#16a34a"], [style*="background-color:#16a34a"],
  [style*="background:#14532d"], [style*="background-color:#14532d"] {
    background-color: var(--ok) !important;
    color: #3d6e54 !important;
  }
  [style*="background:#ef4444"], [style*="background-color:#ef4444"],
  [style*="background:#dc2626"], [style*="background-color:#dc2626"],
  [style*="background:#7f1d1d"], [style*="background-color:#7f1d1d"],
  [style*="background:#991b1b"], [style*="background-color:#991b1b"] {
    background-color: var(--err) !important;
    color: #8a4538 !important;
  }
  [style*="background:#fbbf24"], [style*="background-color:#fbbf24"],
  [style*="background:#f59e0b"], [style*="background-color:#f59e0b"],
  [style*="background:#ca8a04"], [style*="background-color:#ca8a04"],
  [style*="background:#854d0e"], [style*="background-color:#854d0e"] {
    background-color: var(--warn) !important;
    color: #8a6630 !important;
  }
  [style*="background:#3b82f6"], [style*="background-color:#3b82f6"],
  [style*="background:#2563eb"], [style*="background-color:#2563eb"],
  [style*="background:#1d4ed8"], [style*="background-color:#1d4ed8"],
  [style*="background:#1e40af"], [style*="background-color:#1e40af"] {
    background-color: var(--primary) !important;
    color: #3d3650 !important;
  }
  /* Background con # plano dentro (sin "background:") aplica menos seguido */

  /* COLORS de texto inline (color:#hex) */
  [style*="color:#22c55e"] { color: var(--ok) !important; }
  [style*="color:#16a34a"] { color: #5da27e !important; }
  [style*="color:#86efac"] { color: var(--ok) !important; }
  [style*="color:#bbf7d0"] { color: #c8efd9 !important; }
  [style*="color:#ef4444"] { color: var(--err) !important; }
  [style*="color:#fca5a5"] { color: #f5c9d2 !important; }
  [style*="color:#fbbf24"] { color: var(--warn) !important; }
  [style*="color:#f59e0b"] { color: #c89968 !important; }
  [style*="color:#fcd34d"] { color: #f5d39e !important; }
  [style*="color:#fde68a"] { color: #f5e3c4 !important; }
  [style*="color:#3b82f6"] { color: var(--primary) !important; }
  [style*="color:#60a5fa"] { color: var(--primary) !important; }
  [style*="color:#93c5fd"] { color: #d4baf5 !important; }
  [style*="color:#a5b4fc"] { color: #d4baf5 !important; }

  /* Bordes hardcoded */
  [style*="border-color:#22c55e"], [style*="border:1px solid #22c55e"], [style*="border-left:4px solid #22c55e"] { border-color: var(--ok) !important; }
  [style*="border-color:#ef4444"], [style*="border:1px solid #ef4444"], [style*="border-left:4px solid #ef4444"] { border-color: var(--err) !important; }
  [style*="border-color:#fbbf24"], [style*="border:1px solid #fbbf24"], [style*="border-left:4px solid #fbbf24"], [style*="border-left:4px solid var(--warn)"] { border-color: var(--warn) !important; }
  [style*="border-color:#3b82f6"], [style*="border:1px solid #3b82f6"], [style*="border-left:4px solid #3b82f6"] { border-color: var(--primary) !important; }

  /* Backgrounds oscuros (panel-like) → adaptarlos al panel pastel */
  [style*="background:#0b1220"], [style*="background-color:#0b1220"],
  [style*="background:#0f172a"], [style*="background-color:#0f172a"],
  [style*="background:#1e293b"], [style*="background-color:#1e293b"] {
    background-color: var(--panel2) !important;
  }

  /* Texto blanco "#fff" sobre fondos pastel claros queda ilegible — forzar texto oscuro */
  .tag, .estado-pill, .rm-pill, .rm-badge, .badge-cat, .canal-pill, .marca-pill {
    color: #4a4458 !important;
  }
  .tag.tag-ok, .tag-ok, .rm-badge-comp { background: var(--ok) !important; color: #3d6e54 !important; border-color: var(--ok) !important; }
  .tag.tag-warn, .tag-warn, .rm-badge-pend { background: var(--warn) !important; color: #8a6630 !important; border-color: var(--warn) !important; }
  .tag.tag-err, .tag-err { background: var(--err) !important; color: #8a4538 !important; border-color: var(--err) !important; }
  .rm-badge-parc { background: var(--primary) !important; color: #3d3650 !important; }
  .rm-badge-mark { background: #f5d3e5 !important; color: #8a4570 !important; }

  /* Gradientes comunes de cards de Alerta */
  .card[style*="linear-gradient"][style*="#22c55e"], .card[style*="linear-gradient"][style*="#16a34a"] {
    background: linear-gradient(135deg, var(--ok), #7dbf99) !important;
    color: #3d3650 !important;
  }
  .card[style*="linear-gradient"][style*="#f59e0b"], .card[style*="linear-gradient"][style*="#fbbf24"] {
    background: linear-gradient(135deg, var(--warn), #d9a96f) !important;
    color: #4a4458 !important;
  }
  .card[style*="linear-gradient"][style*="#ef4444"] {
    background: linear-gradient(135deg, var(--err), #d68a98) !important;
    color: #4a4458 !important;
  }
}

/* ===========================================================================
   OVERRIDES PARA MODO CLARO — fondo blanco, sombras suaves, texto oscuro
   =========================================================================== */
body.modo-claro {
  background: var(--bg) !important;
  color: var(--text);
}
body.modo-claro .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
body.modo-claro .topbar .brand a,
body.modo-claro .topbar .nav a {
  color: var(--text);
}
body.modo-claro .topbar .nav a.active {
  background: var(--primary);
  color: #fff;
}
body.modo-claro .topbar .usuario {
  color: var(--muted);
}
body.modo-claro .card,
body.modo-claro .widget .card,
body.modo-claro .kpi,
body.modo-claro .tool-card {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
}
body.modo-claro h1, body.modo-claro h2, body.modo-claro h3 { color: var(--text); }
body.modo-claro p, body.modo-claro label, body.modo-claro td, body.modo-claro th {
  color: var(--text);
}
body.modo-claro input, body.modo-claro select, body.modo-claro textarea {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}
body.modo-claro table th {
  background: var(--th-bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
body.modo-claro table tr:hover { background: var(--hover-bg); }
body.modo-claro .btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
body.modo-claro .btn-ghost:hover { background: var(--hover-bg); }

/* Overrides para colores hardcodeados oscuros en modo claro */
body.modo-claro [style*="background:#0f172a"],
body.modo-claro [style*="background-color:#0f172a"],
body.modo-claro [style*="background:#1e293b"],
body.modo-claro [style*="background-color:#1e293b"],
body.modo-claro [style*="background:#0b1220"],
body.modo-claro [style*="background-color:#0b1220"] {
  background: var(--panel) !important;
  color: var(--text) !important;
}
body.modo-claro [style*="color:#e2e8f0"],
body.modo-claro [style*="color:#f5e3f0"],
body.modo-claro [style*="color:#fff"] {
  color: var(--text) !important;
}
/* Gradientes oscuros → planos con borde de color en modo claro */
body.modo-claro .card[style*="linear-gradient"] {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-left: 4px solid currentColor !important;
}
body.modo-claro .card[style*="linear-gradient"][style*="#22c55e"] { border-left-color: var(--ok) !important; }
body.modo-claro .card[style*="linear-gradient"][style*="#ef4444"] { border-left-color: var(--err) !important; }
body.modo-claro .card[style*="linear-gradient"][style*="#f59e0b"],
body.modo-claro .card[style*="linear-gradient"][style*="#fbbf24"] { border-left-color: var(--warn) !important; }
body.modo-claro .card[style*="linear-gradient"][style*="#3b82f6"] { border-left-color: var(--primary) !important; }
/* El fondo principal con radial gradient oscuro lo dejamos plano */
body.modo-claro {
  background: var(--bg) !important;
}

/* === Logo adaptativo: dark por defecto, claro en modo-claro === */
.app-logo .logo-claro { display: none; }
body.modo-claro .app-logo .logo-dark { display: none; }
body.modo-claro .app-logo .logo-claro { display: inline-block; }

.export-menu{display:none;position:absolute;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:100;min-width:220px;overflow:hidden}
.export-menu.show{display:block}
.export-menu a{display:block;padding:10px 16px;color:var(--fg);text-decoration:none;font-size:14px;white-space:nowrap}
.export-menu a:hover{background:var(--ok);color:#fff}