/* KGP Control v2 — cv2.css v4.0 — Paleta Dashboard Pro — Teal Blue System */
:root{
  --bg:#0B1120;--bg2:#111827;--bg3:#1a2236;--bg4:#1F2937;
  --border:#1F2937;--border2:#2d3a4e;
  --text:#E5E7EB;--text2:#9CA3AF;--text3:#6B7280;
  --green:#14B8A6;--green-dim:rgba(20,184,166,.18);
  --red:#EF4444;--red-dim:rgba(239,68,68,.18);
  --amber:#F59E0B;--amber-dim:rgba(245,158,11,.18);
  --blue:#3B82F6;--blue-dim:rgba(59,130,246,.18);
  --purple:#8B5CF6;--purple-dim:rgba(139,92,246,.18);
  --teal:#0D9488;--teal-dim:rgba(13,148,136,.18);
  --accent:#3B82F6;
}
/* Sidebar */
#cv2-sidebar{
  width:220px;min-width:220px;background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:100%;overflow:hidden;flex-shrink:0;
}
.s-logo{padding:16px;border-bottom:1px solid var(--border)}
.s-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.s-logo-icon{width:34px;height:34px;background:linear-gradient(135deg,#14B8A6,#3B82F6);
  border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px}
.s-logo-name{font-size:14px;font-weight:800;color:var(--text)}
.s-badges{display:flex;gap:6px;align-items:center}
.s-ver{font-size:10px;background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);padding:2px 7px;border-radius:8px}
.s-btn{width:26px;height:26px;background:var(--bg3);border:1px solid var(--border);
  border-radius:7px;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.s-btn:hover{background:var(--bg3);filter:brightness(1.2)}
.s-nav{padding:8px 0;flex:1;overflow-y:auto;min-height:0}
.s-lbl{font-size:9px;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;padding:12px 16px 4px}
.s-sep{height:1px;background:var(--border);margin:4px 10px}
.s-item{display:flex;align-items:center;gap:9px;padding:9px 16px;
  cursor:pointer;font-size:13px;font-weight:500;color:var(--text2);
  border-left:3px solid transparent;transition:.13s}
.s-item:hover{background:var(--bg3);color:var(--text)}
.s-item.active{color:var(--green);border-left-color:var(--green);
  background:rgba(20,184,166,.1);font-weight:600}
.s-icon{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.s-notif{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  min-width:18px;height:18px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  animation:cv2-notif-pulse 2s ease-in-out infinite}
@keyframes cv2-notif-pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}
/* Footer: padding-bottom extra para que no tape la barra de Windows/Mac */
.s-foot{
  padding:12px 16px 20px;
  padding-bottom:max(20px,env(safe-area-inset-bottom,20px));
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.s-name{font-size:12px;font-weight:700;color:var(--text)}
.s-role{font-size:10px;color:var(--text3);margin-bottom:8px}
.s-ubtn{display:block;width:100%;padding:7px 10px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;color:var(--text2);font-size:11px;
  font-family:inherit;cursor:pointer;text-align:left;margin-bottom:5px}
.s-ubtn:hover{color:var(--text);border-color:var(--border)}
.s-ubtn.danger:hover{color:var(--red);border-color:var(--red)}
/* Botones */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border:none;border-radius:7px;font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:filter .13s}
.btn:hover{filter:brightness(1.1)}
.btn-p{background:var(--accent);color:#fff}
.btn-g{background:var(--green);color:#fff}
.btn-r{background:var(--red);color:#fff}
.btn-s{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.btn-s:hover{border-color:var(--text2)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}
/* Inputs */
.inp,.sel,.txta{width:100%;padding:8px 12px;background:var(--bg3);
  border:1px solid var(--border2);border-radius:7px;color:var(--text);
  font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s, box-shadow .15s}
.inp:focus,.sel:focus,.txta:focus{
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(20,184,166,.18);
  background:var(--bg4)}
.inp::placeholder,.txta::placeholder{color:var(--text3)}
.inp:hover:not(:focus),.sel:hover:not(:focus),.txta:hover:not(:focus){
  border-color:var(--border2)}
.sel{padding-right:28px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-color:var(--bg3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23a0a8c8' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.sel option{background:var(--bg3);color:var(--text)}
.txta{resize:vertical;min-height:70px}
.lbl{display:block;font-size:10px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.fg{margin-bottom:12px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Tablas */
.tbl-wrap{background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{background:var(--bg3);padding:9px 12px;text-align:left;
  font-size:10px;font-weight:800;color:var(--text2);
  text-transform:uppercase;letter-spacing:.6px;
  border-bottom:1px solid var(--border);white-space:nowrap}
.tbl tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
.tbl tbody tr:last-child{border-bottom:none}
.tbl tbody tr:hover{background:var(--bg3)}
.tbl td{padding:9px 12px;vertical-align:middle}
/* Badges */
.bdg{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700}
.bdg-g{background:rgba(20,184,166,.2);color:var(--green)}
.bdg-r{background:rgba(239,68,68,.2);color:var(--red)}
.bdg-a{background:rgba(245,158,11,.2);color:var(--amber)}
.bdg-b{background:rgba(59,130,246,.2);color:var(--blue)}
.bdg-p{background:rgba(139,92,246,.2);color:var(--purple)}
/* Progress */
.prg-bg{background:var(--bg3);border-radius:8px;height:6px;overflow:hidden}
.prg-fill{height:6px;border-radius:8px;transition:width .4s}
/* Month nav */
.mnav{display:flex;align-items:center;gap:4px;
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:4px 8px}
.mlbl{font-size:12px;font-weight:700;color:var(--text);min-width:118px;text-align:center}
.mprev,.mnext{background:none;border:none;color:var(--text2);
  font-size:18px;cursor:pointer;padding:1px 5px;border-radius:5px;line-height:1}
.mprev:hover,.mnext:hover{background:var(--bg3);color:var(--text)}
/* Toast */
.toast{position:fixed;bottom:20px;right:20px;z-index:99999;
  padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.5);animation:tin .2s ease}
.toast-ok{background:var(--green);color:#fff}
.toast-err{background:var(--red);color:#fff}
.toast-w{background:var(--amber);color:#000}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Loading */
.loading{display:flex;align-items:center;gap:10px;padding:40px 24px;color:var(--text2)}
.spin{width:18px;height:18px;border:2px solid var(--border);
  border-top-color:var(--green);border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:48px 24px;text-align:center;color:var(--text2);font-size:13px}
/* Alertas */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px}
.alert-w{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.alert-r{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.alert-g{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.3);color:var(--green)}
/* Login */
#cv2-login{align-items:center;justify-content:center}
.login-box{background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;padding:36px 32px;width:100%;max-width:380px}
.login-icon{width:50px;height:50px;
  background:linear-gradient(135deg,#14B8A6,#3B82F6);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 12px}
/* Responsive móvil */
@media(max-width:640px){
  #cv2-sidebar{display:none!important}
  #cv2-main{padding:14px 14px 72px!important}
  .frow,.frow3{grid-template-columns:1fr!important}
}

/* ── FIXES v2.0.1 ────────────────────────── */

/* Dashboard: centrado con margen en pantallas grandes */
#cv2-main { display: flex; flex-direction: column; align-items: stretch; }
.dash-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Limitar ancho de TODO el contenido del main, no solo dash */
#cv2-main > * {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════
   MÓVIL — Bottom Nav + Drawer
   ═══════════════════════════════════════════════════ */
@media(max-width:720px){
  #cv2-sidebar { display:none!important }

  /* Main ocupa todo — padding-bottom para bottom nav */
  #cv2-main { padding:14px 14px 80px !important }

  /* ── BOTTOM NAV ── */
  #cv2-bottom-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:var(--bg2,#111827);
    border-top:1px solid var(--border,#1F2937);
    display:flex; align-items:stretch;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -4px 20px rgba(0,0,0,.4);
  }
  .cv2-nav-btn {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px; padding:8px 4px 6px;
    cursor:pointer; border:none; background:none;
    color:var(--text2,#9CA3AF); font-family:inherit;
    font-size:10px; font-weight:600; line-height:1.2;
    min-width:0; transition:color .13s;
    -webkit-tap-highlight-color:transparent;
  }
  .cv2-nav-btn .ni { font-size:22px; line-height:1; }
  .cv2-nav-btn.active { color:var(--green,#14B8A6); }
  .cv2-nav-btn.active .ni {
    filter:drop-shadow(0 0 6px currentColor);
  }

  /* ── DRAWER (Más) ── */
  #cv2-drawer-overlay {
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,.6);
    -webkit-tap-highlight-color:transparent;
  }
  #cv2-drawer {
    position:fixed; bottom:0; left:0; right:0; z-index:301;
    background:var(--bg2,#111827);
    border-radius:18px 18px 0 0;
    border-top:1px solid var(--border,#1F2937);
    padding:0 0 env(safe-area-inset-bottom,16px);
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    max-height:80vh; overflow-y:auto;
  }
  #cv2-drawer.open { transform:translateY(0); }
  #cv2-drawer-overlay.open { display:block; }

  .cv2-drawer-handle {
    width:40px; height:4px; background:var(--border,#1F2937);
    border-radius:2px; margin:10px auto 0;
  }
  .cv2-drawer-title {
    padding:14px 20px 8px;
    font-size:11px; font-weight:800; color:var(--text2,#9CA3AF);
    text-transform:uppercase; letter-spacing:.7px;
  }
  .cv2-drawer-sep {
    height:1px; background:var(--border,#1F2937); margin:4px 16px;
  }
  .cv2-drawer-item {
    display:flex; align-items:center; gap:12px;
    padding:13px 20px; cursor:pointer;
    font-size:14px; font-weight:500; color:var(--text2,#9CA3AF);
    border:none; background:none; width:100%; text-align:left;
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:background .1s;
  }
  .cv2-drawer-item:active { background:var(--bg3); }
  .cv2-drawer-item.active { color:var(--green,#14B8A6); font-weight:700; }
  .cv2-drawer-icon { font-size:20px; width:24px; text-align:center; flex-shrink:0; }

  /* Usuario en drawer */
  .cv2-drawer-user {
    padding:14px 20px;
    border-top:1px solid var(--border,#1F2937);
    margin-top:4px;
  }
  .cv2-drawer-user-name { font-size:13px; font-weight:700; color:var(--text,#E5E7EB); }
  .cv2-drawer-user-role { font-size:11px; color:var(--text3,#6B7280); margin-bottom:10px; }
  .cv2-drawer-user-btns { display:flex; gap:8px; flex-wrap:wrap; }
  .cv2-drawer-user-btn {
    flex:1; min-width:100px; padding:8px 12px;
    background:var(--bg3,#1a2236); border:1px solid var(--border,#1F2937);
    border-radius:8px; color:var(--text2,#9CA3AF);
    font-size:12px; font-family:inherit; cursor:pointer; text-align:center;
    font-weight:600;
  }
  .cv2-drawer-user-btn.danger { color:var(--red,#EF4444); border-color:rgba(239,68,68,.3); }
}

@media(min-width:721px){
  #cv2-bottom-nav, #cv2-drawer, #cv2-drawer-overlay { display:none!important; }
}

/* ═══════════════════════════════════════════════════
   FIXES MÓVIL — Cards y Layout
   ═══════════════════════════════════════════════════ */
@media(max-width:720px){

  /* Fuente monoespaciada que no da espacios extraños en Android */
  .cv2-mono, [style*="Courier New"],
  [style*="'Courier New'"],
  [style*="monospace"] {
    font-family: ui-monospace, 'Roboto Mono', 'SF Mono',
                 Menlo, Consolas, monospace !important;
    letter-spacing: -0.02em;
  }

  /* KPI Hero — una columna en móvil */
  .cv2-kpi-hero {
    grid-template-columns: 1fr !important;
  }
  .cv2-kpi-hero .cv2-kpi-hero-card:last-child {
    grid-column: auto !important;
  }
  .cv2-kpi-hero-card .kh-val {
    font-size: 26px !important;
  }

  /* Gastos del mes — una columna, sin overflow oculto */
  .cv2-gastos-row,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  /* Columnas de gasto: quitar borde derecho que separa */
  .cv2-gasto-col {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--border2, #38436a) !important;
  }
  .cv2-gasto-col:last-child { border-bottom: none !important; }
  .gasto-blue   { border-left-color: var(--blue) !important; }
  .gasto-purple { border-left-color: var(--purple) !important; }
  .gasto-amber  { border-left-color: var(--amber) !important; }

  /* Cards generales — padding más compacto */
  .cv2-card,
  [style*="padding:20px 22px"],
  [style*="padding: 20px 22px"] {
    padding: 14px 14px !important;
  }

  /* Grids de 3 columnas → 1 columna */
  .frow3,
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Grids de 2 columnas → 1 columna en pantallas muy chicas */
  @media(max-width:400px){
    .frow,
    [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* KPI grid pequeño — 2 columnas */
  .cv2-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cv2-kpi { padding: 12px 14px !important; }
  .cv2-kpi-val { font-size: 18px !important; }

  /* Formas de pago — 2 columnas */
  .cv2-fp-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Avance por vendedor — nombre en una sola línea */
  .cv2-avance-nombre {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
  }

  /* Total gastos bar */
  .cv2-total-bar,
  [style*="cv2-total-bar"] {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  /* Tablas — scroll horizontal */
  .tbl-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 480px; }
  .tbl thead th { padding: 8px 10px !important; font-size: 9px !important; }
  .tbl td       { padding: 8px 10px !important; font-size: 12px !important; }

  /* Inventario — tabla de stock hace scroll */
  [style*="grid-template-columns:2fr 1fr 80px 90px 90px 60px 100px"] {
    display: none !important; /* ocultar grid de stock en móvil */
  }

  /* Selector de mes — compacto */
  .mnav { padding: 3px 6px !important; }
  .mlbl { min-width: 100px !important; font-size: 11px !important; }

  /* Page header en columna */
  [style*="justify-content:space-between"][style*="margin-bottom:18px"],
  [style*="justify-content:space-between"][style*="margin-bottom: 18px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Botones grupo — en columna si necesario */
  .cv2-btn-group { flex-direction: column !important; }

  /* Números grandes en cards hero — sin word-break */
  [style*="font-size:30px"],
  [style*="font-size:28px"],
  [style*="font-size:36px"] {
    font-size: 24px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── Fix scroll horizontal (espacio derecha) */
  #kgp-cv2-root, #cv2-main, .dash-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  #cv2-main {
    padding: 12px 14px 80px !important;
  }
  .dash-wrap {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── KPI hero: 1 columna limpia en móvil */
  .cv2-kpi-hero {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cv2-kpi-hero > div:last-child {
    grid-column: 1 !important;
  }
  .cv2-kpi-val {
    font-size: 22px !important;
  }

  /* ── Navegador de mes — sin desborde */
  .mnav { padding: 3px 6px !important; flex-shrink: 0 !important; }
  .mlbl { min-width: 90px !important; font-size: 11px !important; }

  /* ── Gastos del mes → stack */
  .cv2-gastos-row {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  .gasto-col {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .gasto-col:last-child { border-bottom: none !important; }

  /* ── Dashboard inline grids → 1 col */
  .dash-wrap [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    border-radius: 8px !important;
    overflow: visible !important;
  }
  .dash-wrap [style*="grid-template-columns:repeat(3,1fr)"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .dash-wrap [style*="grid-template-columns:repeat(3,1fr)"] > div:last-child {
    border-bottom: none !important;
  }

  /* ── Total gastos bar → stack */
  .cv2-total-bar { flex-wrap: wrap !important; gap: 4px !important; }
  .cv2-total-bar .tv { font-size: 18px !important; }

  /* ── Fuente monospace correcta en Android */
  [style*="Courier New"],[style*="monospace"] {
    font-family: ui-monospace, 'Roboto Mono', monospace !important;
  }
}

/* ═══════════════════════════════════════════════════
   MODO DÍA — paleta profesional completa
   ═══════════════════════════════════════════════════ */
#kgp-cv2-root.day-mode {
  --bg:      #F8FAFC;
  --bg2:     #FFFFFF;
  --bg3:     #F1F5F9;
  --bg4:     #E2E8F0;
  --border:  #E5E7EB;
  --border2: #CBD5E1;
  --text:    #0F172A;
  --text2:   #475569;
  --text3:   #94A3B8;
  --green:   #0D9488;  --green-dim:  rgba(13,148,136,.10);
  --red:     #DC2626;  --red-dim:    rgba(220,38,38,.06);
  --amber:   #D97706;  --amber-dim:  rgba(217,119,6,.06);
  --blue:    #2563EB;  --blue-dim:   rgba(37,99,235,.06);
  --purple:  #7C3AED;  --purple-dim: rgba(124,58,237,.06);
  --teal:    #0F766E;  --teal-dim:   rgba(15,118,110,.06);
  --accent:  #2563EB;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── Layout principal día ── */
#kgp-cv2-root.day-mode #cv2-main,
#kgp-cv2-root.day-mode #cv2-sidebar {
  background: var(--bg) !important;
}
#kgp-cv2-root.day-mode #cv2-sidebar {
  background: var(--bg2) !important;
  box-shadow: 1px 0 8px rgba(0,0,0,.04);
}

/* ── Bottom nav + drawer día ── */
#kgp-cv2-root.day-mode #cv2-bottom-nav {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
#kgp-cv2-root.day-mode .cv2-nav-btn { color: var(--text2) !important; }
#kgp-cv2-root.day-mode .cv2-nav-btn.active { color: var(--green) !important; }
#kgp-cv2-root.day-mode #cv2-drawer {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.12);
}
#kgp-cv2-root.day-mode .cv2-drawer-handle { background: var(--border) !important; }
#kgp-cv2-root.day-mode .cv2-drawer-item { color: var(--text2) !important; }
#kgp-cv2-root.day-mode .cv2-drawer-item.active { color: var(--green) !important; }
#kgp-cv2-root.day-mode .cv2-drawer-item:active { background: rgba(0,0,0,.04) !important; }

/* ── Cards / shadows según spec ── */
#kgp-cv2-root.day-mode .cv2-card,
#kgp-cv2-root.day-mode .tbl-wrap {
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* Inline cards */
#kgp-cv2-root.day-mode [style*="border-radius"] {
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Sidebar día — bg-sidebar diferenciado */
#kgp-cv2-root.day-mode #cv2-sidebar {
  background: #F1F5F9 !important;
  box-shadow: 1px 0 6px rgba(0,0,0,.03);
  border-color: var(--border) !important;
}

/* ── Login box día ── */
#kgp-cv2-root.day-mode .login-box,
#kgp-cv2-root.day-mode .cv2-login-box {
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* ── Toast ── */
#kgp-cv2-root.day-mode .toast,
#kgp-cv2-root.day-mode .cv2-toast {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

/* ── Sombras profundas modo noche ── */
#kgp-cv2-root:not(.day-mode) .cv2-card,
#kgp-cv2-root:not(.day-mode) .tbl-wrap {
  box-shadow: 0 10px 25px rgba(0,0,0,.3);
}

/* Emojis NO se afectan — sin filter */

/* ═══════════════════════════════════════════════════
   FIX PADDING BOTTOM — bottom nav no tapa contenido
   ═══════════════════════════════════════════════════ */
@media(max-width:720px){
  .dash-wrap {
    padding-bottom: 16px !important;
  }
  /* El padding-bottom:80px ya está en #cv2-main pero asegurar el dash-wrap */
  #cv2-main .dash-wrap > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════
   INPUTS — usando variables para ambos modos
   ═══════════════════════════════════════════ */
#kgp-cv2-root input:not([type=checkbox]):not([type=radio]):not([type=file]),
#kgp-cv2-root textarea,
#kgp-cv2-root select {
  color: var(--text) !important;
  background: var(--bg3) !important;
  border-color: var(--border2) !important;
  caret-color: var(--green);
}
#kgp-cv2-root input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
#kgp-cv2-root textarea:focus,
#kgp-cv2-root select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(20,184,166,.18);
}
#kgp-cv2-root input::placeholder,
#kgp-cv2-root textarea::placeholder {
  color: var(--text3) !important;
  opacity: 1;
}
#kgp-cv2-root select option {
  background: var(--bg3);
  color: var(--text);
}