/* ============================================================
   Konecta Bot — Sistema de diseño
   Tema CLARO por defecto. Modo oscuro vía [data-tema="oscuro"].
   Marca: verde #6cc24a (todo a colores de marca, sin azul).
   ============================================================ */

:root{
  /* Marca */
  --verde:#6cc24a;
  --verde-osc:#3b8a2e;
  /* "azul" reconvertido a verde de marca (se conserva el nombre por compatibilidad) */
  --azul:#3b8a2e;
  --azul-osc:#2c6c22;

  /* Tema CLARO (por defecto) */
  --fondo:#f4f7fb;
  --fondo-deg:
    radial-gradient(900px 600px at 90% -10%, rgba(108,194,74,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(108,194,74,.10), transparent 60%),
    var(--fondo);
  --superficie:#ffffff;
  --superficie-2:#f8fafc;
  --texto:#0a1628;
  --texto-2:#5b6b7e;
  --niebla:#8a99ab;
  --linea:#e6ecf2;
  --linea-fuerte:#d3dce6;
  /* alias usados por módulos (CRM, etc.); se resuelven por tema -> arregla modo oscuro */
  --bg:var(--superficie-2); --tarjeta:var(--superficie); --borde:var(--linea); --gris:var(--niebla);
  --sombra:0 10px 30px rgba(10,22,40,.08);
  --sombra-fuerte:0 24px 60px rgba(10,22,40,.16);
  --burbuja-cliente:#ffffff;
  --burbuja-bot:#e6f5db;       /* verde de marca, claro */
  --chat-fondo:#eae6df;
}

[data-tema="oscuro"]{
  --fondo:#0a1628;
  --fondo-deg:
    radial-gradient(900px 600px at 90% -10%, rgba(108,194,74,.12), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(108,194,74,.14), transparent 60%),
    var(--fondo);
  --superficie:#0f2438;
  --superficie-2:#13293f;
  --texto:#eaf2f8;
  --texto-2:#aebccc;
  --niebla:#7a8ca0;
  --linea:rgba(255,255,255,.08);
  --linea-fuerte:rgba(255,255,255,.16);
  --sombra:0 10px 30px rgba(0,0,0,.35);
  --sombra-fuerte:0 24px 60px rgba(0,0,0,.5);
  --burbuja-cliente:#1b2b3a;
  --burbuja-bot:#075e54;
  --chat-fondo:#0b1a2a;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--fondo-deg);
  background-attachment:fixed;
  color:var(--texto);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s, color .25s;
}

a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Layout del panel (sidebar + contenido) ---------- */
#app{display:flex;min-height:100vh}

.sidebar{
  width:248px;flex-shrink:0;
  background:var(--superficie);
  border-right:1px solid var(--linea);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  transition:background-color .25s;
}
.sidebar .marca{
  display:flex;align-items:center;gap:10px;
  padding:20px 20px 16px;
}
.sidebar .marca img{width:34px;height:auto}
.sidebar .marca b{font-size:18px;letter-spacing:.2px}

.nav{flex:1;overflow-y:auto;padding:8px}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin:2px 0;border-radius:11px;
  color:var(--texto-2);font-size:14.5px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.nav a .ic{width:20px;text-align:center;font-size:16px}
.nav a:hover{background:var(--superficie-2);color:var(--texto);text-decoration:none}
.nav a.activa{
  background:linear-gradient(135deg, rgba(108,194,74,.16), rgba(108,194,74,.16));
  color:var(--texto);
}
.nav a.activa .ic{filter:none}

.sidebar .pie{padding:14px;border-top:1px solid var(--linea)}
.sidebar .pie .correo{font-size:12px;color:var(--niebla);margin-bottom:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Botón tema claro/oscuro */
.tema-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border-radius:10px;border:1px solid var(--linea);
  background:var(--superficie-2);color:var(--texto-2);
  font-size:13px;font-weight:600;cursor:pointer;margin-bottom:8px;
}
.tema-toggle:hover{border-color:var(--linea-fuerte);color:var(--texto)}

/* ---------- Área de contenido ---------- */
.contenido{flex:1;min-width:0;padding:26px 30px 120px}
.cabecera{margin-bottom:22px}
.cabecera h1{font-size:23px;font-weight:800;letter-spacing:.2px}
.cabecera p{color:var(--texto-2);font-size:13.5px;margin-top:3px}

.seccion{display:none;animation:aparecer .25s ease}
.seccion.activa{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
.menu-movil{display:none}
@media(max-width:860px){
  .sidebar{
    position:fixed;z-index:60;left:0;top:0;transform:translateX(-100%);
    transition:transform .25s;box-shadow:var(--sombra-fuerte);
  }
  .sidebar.abierta{transform:translateX(0)}
  .contenido{padding:18px 16px 120px}
  .menu-movil{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:11px;border:1px solid var(--linea);
    background:var(--superficie);color:var(--texto);font-size:20px;cursor:pointer;
    margin-bottom:16px;
  }
  .respaldo-movil{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:50}
  .respaldo-movil.visible{display:block}
}