/* King UI — variables sobreescritas en tiempo de render por resources/layouts/app.php (Theme::active) */
:root{
  --bg:#101828; --card:#172235; --text:#e8edf7; --hover:#1c2a40;
  --primary:#6ee7b7; --sidebar-bg:#0c1420; --border:#29384f; --muted:#9fb3d1; --accent:#6ee7b7;
  /* Semánticas — fijas, no dependen del tema activo de la empresa */
  --green:#22c55e; --yellow:#facc15; --red:#ef4444; --purple:#8b5cf6; --orange:#f59e0b; --cyan:#06b6d4;
  /* Marca King System — colores del logo oficial, fijos en todo el sistema (no dependen del tema de la empresa) */
  --king-gold:#d4af37; --king-blue:#3b82f6;
  --radius:16px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); font: 16px/1.5 system-ui, sans-serif; transition: background .2s, color .2s; }
a { color: var(--accent); }
.king-shell { width: min(960px, calc(100% - 2rem)); margin: 5rem auto; }
.hero, .card { padding: 2.5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.hero { text-align: center; } .hero h1 { font-size: clamp(2rem, 7vw, 4rem); margin: .25rem 0; }
.eyebrow { color: var(--accent); letter-spacing: .12em; font-size: .78rem; font-weight: 700; }
.button, button { display: inline-block; cursor: pointer; color: #07111f; border: 0; border-radius: 7px; background: var(--primary); padding: .7rem 1rem; font: inherit; font-weight: 700; text-decoration: none; }
.button-danger { background:#dc2626; color:#fff; }
.button-success { background:var(--green); color:#07111f; }
.button-gold { background:linear-gradient(135deg,#eab308,#b45309); color:#fff; }
.button-lg { padding:1rem 1.6rem; font-size:1.05rem; }
.auth-card { max-width: 440px; margin: auto; position: relative; overflow: hidden; }
.auth-card-content { position: relative; z-index: 2; }

/* ── LOGO CON GIRO (portado tal cual de legacy/login.php y legacy/dashboard/index.php) ── */
.login-watermark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:340px; height:340px; pointer-events:none; z-index:0; }
.login-watermark img{ width:100%; height:100%; object-fit:contain; opacity:.18; filter:drop-shadow(0 0 30px var(--accent)); animation:spin3d 8s ease-in-out infinite; }
@keyframes spin3d{ 0%{transform:rotateY(0deg)} 50%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)} }
.logo-badge-img{ animation:giroSuave 6s ease-in-out infinite; }
@keyframes giroSuave{ 0%{transform:rotateY(0deg)} 50%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)} }
.empresa-chip{ display:flex; align-items:center; gap:10px; background:var(--hover); border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:20px; }
.empresa-chip img{ width:44px; height:44px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.empresa-chip-info{ flex:1; min-width:0; }
.empresa-chip-nombre{ font-weight:700; font-size:13px; }
.empresa-chip-cambiar{ font-size:11px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-decoration:underline; }
.empresa-chip-cambiar:hover{ color:var(--accent); }

/* ── MARCA DE PLATAFORMA: badge suelto, sin caja ni giro, no forma parte de la tarjeta de login ── */
.platform-badge{ position:fixed; top:1.5rem; right:1.5rem; display:flex; align-items:center; gap:.6rem; z-index:5; }
.platform-badge img{ width:34px; height:34px; object-fit:contain; }
.platform-badge span{ font-size:.85rem; font-weight:700; }
.brand-king{ color:var(--king-gold); }
.brand-system{ color:var(--king-blue); }
@media(max-width:640px){ .platform-badge{ position:static; justify-content:center; margin-bottom:1.5rem; } }
label { display: block; margin: 1rem 0; }
input, select { display:block; width:100%; margin-top:.35rem; padding:.7rem; border:1px solid var(--border); border-radius:6px; font:inherit; background:var(--card); color:var(--text); }
input[type="color"] { width:64px; height:42px; padding:.25rem; cursor:pointer; }
.dashboard { display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem; }
.notice { padding:.8rem; border-radius:7px; } .success { background:#165b42; } .error { background:#7f1d1d; }
.field-error { display:block; color:#f87171; font-size:.78rem; font-weight:600; margin-top:.3rem; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:1rem; }
table { width:100%; border-collapse:collapse; margin-top:1rem; }
th, td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--border); }
.table-actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.button-link { background:none; border:0; color:var(--muted); text-decoration:underline; padding:0; font:inherit; font-weight:600; cursor:pointer; }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:99px; background:var(--hover); font-size:.75rem; font-weight:700; letter-spacing:.04em; }
.form-actions { display:flex; gap:.75rem; margin-top:1.5rem; align-items:center; }
.checkbox-list { display:grid; gap:.5rem; margin:1rem 0; }
.checkbox-list label { display:flex; align-items:center; gap:.5rem; margin:0; font-weight:400; }
.checkbox-list input { display:inline-block; width:auto; margin:0; }
.empty { color:var(--muted); }

/* ── SIDEBAR ── */
.menu-toggle{
  display:none; position:fixed; top:12px; left:12px;
  background:var(--primary); color:#07111f; width:45px; height:45px;
  border-radius:10px; z-index:10001; cursor:pointer; font-size:22px;
  align-items:center; justify-content:center; box-shadow:0 5px 20px rgba(0,0,0,.35); border:none;
}
.sidebar{
  width:240px; background:var(--sidebar-bg); height:100vh;
  padding:20px; position:fixed; left:0; top:0;
  overflow-y:auto; z-index:9998; box-sizing:border-box;
  border-right:1px solid var(--border); transition:.3s;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
.sidebar-logo{ max-width:190px; max-height:84px; margin-bottom:8px; display:block; }
.sidebar-user-name{ font-size:13px; font-weight:700; color:#e2e8f0; }
.sidebar-user-role{ font-size:11px; color:var(--muted); margin-top:2px; }
.sidebar-override{ font-size:11px; color:var(--accent); margin-top:4px; }
.sidebar-sep{ border:none; border-top:1px solid var(--border); margin:14px 0; }
.sidebar h2{ margin-top:0; margin-bottom:16px; font-size:20px; color:#e2e8f0; }
.sidebar a, .sidebar button.linklike{
  display:flex; align-items:center; gap:10px; padding:12px; width:100%;
  color:#e2e8f0; text-decoration:none; border-radius:10px; background:none; border:none;
  margin-bottom:6px; transition:.15s; font-size:14px; font-weight:500; cursor:pointer; text-align:left; font-family:inherit;
}
.sidebar a:hover, .sidebar button.linklike:hover{ background:var(--hover); transform:translateX(2px); }
.sidebar-gear{ margin-top:4px; color:var(--muted); }
.content{ margin-left:240px; padding:24px; min-height:100vh; box-sizing:border-box; width:calc(100% - 240px); overflow-x:hidden; }
.king-topbar{ display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-bottom:12px; }
.king-clock{
  font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.02em;
  text-transform:capitalize;
}
.king-idioma-switch{ position:relative; font-size:12px; font-weight:700; }
.king-idioma-actual{
  background:var(--hover); color:var(--text); border:1px solid var(--border); border-radius:6px;
  padding:3px 9px; cursor:pointer; font-size:12px; font-weight:700; font-family:inherit;
}
.king-idioma-menu{
  display:none; flex-direction:column; position:absolute; top:calc(100% + 4px); right:0;
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.35); min-width:100%; overflow:hidden; z-index:20;
}
.king-idioma-menu.open{ display:flex; }
.king-idioma-menu a{ color:var(--muted); text-decoration:none; padding:6px 12px; white-space:nowrap; }
.king-idioma-menu a:hover{ color:var(--text); background:var(--hover); }
.king-idioma-switch-guest{ position:absolute; top:16px; right:16px; z-index:10; }
.king-bell{ position:relative; text-decoration:none; font-size:18px; line-height:1; }
.king-bell-badge{
  position:absolute; top:-8px; right:-10px; background:#dc2626; color:#fff;
  font-size:10px; font-weight:700; line-height:1; padding:3px 5px; border-radius:999px;
  min-width:16px; text-align:center;
}
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9997; }
.overlay.active{ display:block; }

/* ── PANEL DE CONFIGURACIÓN (deslizante) ── */
.config-panel{
  position:fixed; top:0; left:-320px; width:280px; height:100%;
  background:var(--card); padding:20px; z-index:10000; transition:.3s;
  box-shadow:5px 0 20px rgba(0,0,0,.5); overflow-y:auto; box-sizing:border-box;
  border-right:1px solid var(--border);
}
.config-panel.active{ left:0; }
.config-panel h3{ margin:0 0 16px; color:var(--accent); font-size:16px; }
.config-panel a, .config-panel button.linklike{
  display:block; width:100%; padding:11px 14px; margin-bottom:8px;
  background:var(--hover); color:var(--text); border:none; border-radius:10px;
  text-decoration:none; transition:.2s; font-size:14px; font-weight:500; cursor:pointer; text-align:left; font-family:inherit;
}
.config-panel a:hover, .config-panel button.linklike:hover{ opacity:.85; transform:translateX(2px); }
.config-sep{ border:none; border-top:1px solid var(--border); margin:14px 0; }

@media(max-width:768px){
  .menu-toggle{ display:flex; }
  .sidebar{ left:-260px; }
  .sidebar.active{ left:0; }
  .content{ margin-left:0 !important; width:100% !important; padding-top:75px; }
}

/* ── KING THEME STUDIO ── */
.temas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:1rem; }
.tema-btn{
  border:2px solid transparent; border-radius:14px; padding:16px 14px;
  cursor:pointer; transition:.2s; text-align:center; background:var(--card); color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.tema-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.3); }
.tema-btn.activo{ border-color:var(--accent); }
.tema-btn.previsualizando{ outline:2px dashed var(--muted); outline-offset:2px; }
.tema-colores{ display:flex; gap:4px; }
.tema-punto{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.tema-nombre{ font-size:12px; font-weight:700; }
.tema-activar{
  background:none; border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:.4rem .8rem; font-size:.72rem; font-weight:700; cursor:pointer;
}
.tema-btn.activo .tema-activar{ border-color:var(--accent); color:var(--accent); cursor:default; }
.color-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.5rem 1rem; }
.color-grid label{ display:flex; flex-direction:column; }

/* ── CAMBIAR EMPRESA ── */
.company-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:1rem; }
.company-card{ margin:0; }
.company-card-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:var(--card); color:var(--text); border:1px solid var(--border);
  padding:1.25rem; border-radius:14px; font-weight:700; text-align:left;
}
.company-card-btn:hover{ border-color:var(--accent); }
.company-card-arrow{ color:var(--accent); flex-shrink:0; }
.company-card-name{ display:flex; align-items:center; gap:10px; }
.company-card-logo{ width:32px; height:32px; object-fit:contain; border-radius:6px; flex-shrink:0; background:#fff; }

/* ── COTIZACIONES: tabla de ítems editable ── */
.items-table input{ width:auto; min-width:0; margin:0; }
.items-table td{ vertical-align:middle; }
.items-table td:first-child input{ width:100%; }

/* ── DASHBOARD ── */
.dash-container{ max-width:1380px; margin:auto; }
.dash-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.75rem; flex-wrap:wrap; gap:1.25rem; }
.dash-header-left h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.5px; margin:0 0 .25rem; text-wrap:balance; }
.dash-header-left h1 span{ color:var(--accent); }
.dash-header-left p{ color:var(--muted); margin:0; font-size:.9rem; }
.logo-badge{
  width:96px; height:96px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:800; color:#07111f;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.dash-header img.logo-badge-img{ max-height:110px; max-width:280px; flex-shrink:0; }
.periodo-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:var(--green); padding:5px 14px; border-radius:50px; font-size:.75rem; font-weight:600; margin-top:.5rem; }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.kpi-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.35rem 1.2rem; position:relative; overflow:hidden; transition:all .3s;
  text-decoration:none; color:inherit; display:block;
}
.kpi-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--card-accent, var(--accent)); transform:scaleX(0); transform-origin:left; transition:.3s; }
.kpi-card:hover{ transform:translateY(-4px); box-shadow:0 12px 35px rgba(0,0,0,.4); }
.kpi-card:hover::before{ transform:scaleX(1); }
.kpi-glow{ position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:var(--card-accent, var(--accent)); opacity:.1; filter:blur(20px); }
.kpi-label{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.kpi-value{ font-size:1.5rem; font-weight:800; letter-spacing:-.5px; color:var(--card-color, var(--text)); font-variant-numeric:tabular-nums; }
.kpi-sub{ font-size:.75rem; color:var(--muted); margin-top:.3rem; }
.kpi-badge{ position:absolute; top:14px; right:14px; background:var(--red); color:#fff; padding:3px 10px; border-radius:50px; font-size:.65rem; font-weight:700; }

/* ── ZONA OPERATIVA ── */
.op-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.5rem; }
@media(max-width:860px){ .op-grid{ grid-template-columns:1fr; } }
.op-panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.35rem; }
.op-tit{ font-size:.95rem; font-weight:700; margin:0 0 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.op-link{ font-size:.7rem; color:var(--accent); text-decoration:none; font-weight:600; white-space:nowrap; }
.op-link:hover{ text-decoration:underline; }
.op-fila{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.op-fila:last-child{ border-bottom:none; }
.op-info{ min-width:0; flex:1; }
.op-a{ font-size:.84rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-b{ font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-val{ font-size:.84rem; font-weight:700; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }
.op-empty{ color:var(--muted); font-size:.82rem; text-align:center; padding:1.75rem 0; }

/* ── IMPRESIÓN ── documentos (cartas, cotizaciones, facturas) se imprimen vía el diálogo del navegador, sin librería de PDF */
@media print{
  .sidebar, .menu-toggle, .overlay, .config-panel, .king-topbar, .no-print{ display:none !important; }
  .content{ margin-left:0 !important; width:100% !important; padding:0 !important; }
}