/* ============================================================
   SELBUK CRM-AI — SHELL (layout compartido)
   Estilos del menú lateral, encabezado y modal demo.
   Cada CUERPO (página) importa este archivo y solo añade
   sus estilos propios de contenido.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --teal:#10b3a6;
  --teal-dark:#0c8c82;
  --teal-soft:#e6f7f5;
  --green:#16a34a;
  --green-soft:#e7f6ec;
  --red:#e2483d;
  --red-soft:#fdeceb;
  --amber:#f59e0b;
  --amber-soft:#fef3e2;
  --navy:#0f1b2d;
  --slate:#64748b;
  --slate-light:#94a3b8;
  --line:#e9eef2;
  --bg:#f4f7f9;
  --card:#ffffff;
  --ink:#1a2433;
  --radius:16px;
  --shadow:none;   /* diseño plano: sin sombras decorativas en tarjetas/paneles */
  --sidebar-w:248px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}

.app{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#0f1b2d,#0c1626);color:#cbd5e1;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;z-index:120;transition:margin-left .28s cubic-bezier(.4,0,.2,1)}
body.collapsed .sidebar{margin-left:calc(-1 * var(--sidebar-w))}
/* Móvil: el menú arranca cerrado por defecto (estado base, sin parpadeo).
   La hamburguesa lo abre; tocar una opción lo vuelve a cerrar (sidebar.js).
   En móvil el sidebar flota sobre el contenido en vez de empujarlo. */
@media(max-width:720px){
  .sidebar{position:fixed;top:0;left:0;margin-left:calc(-1 * var(--sidebar-w));box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.menu-open .sidebar{margin-left:0}
}
/* Backdrop móvil: tocar el cuerpo con el menú abierto lo cierra.
   Solo visible en móvil y solo cuando el menú está abierto. */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,27,45,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:110}
@media(max-width:720px){
  body.menu-open .sidebar-backdrop{opacity:1;visibility:visible}
}
/* Toast "demo": aviso al tocar una opción aún no disponible en el menú. */
.sb-demo-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);display:flex;align-items:center;gap:9px;max-width:90vw;background:var(--red);color:#fff;font-size:13px;font-weight:500;padding:12px 16px;border-radius:12px;box-shadow:0 12px 34px rgba(226,72,61,.4);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:600;pointer-events:none}
.sb-demo-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sb-demo-toast svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;flex-shrink:0}
.brand{display:flex;align-items:center;gap:12px;padding:22px 20px 18px}
.brand .logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:19px;flex-shrink:0}
.brand h1{font-size:16px;color:#fff;font-weight:700;letter-spacing:-.2px}
.brand p{font-size:11px;color:#7e8da3;margin-top:1px}

.nav{flex:1;overflow-y:auto;padding:8px 12px}
.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#5f7088;padding:16px 12px 7px;font-weight:600}
/* encabezado de sección colapsable — nombre más resaltado que antes */
.nav-sec-head{display:flex;align-items:center;gap:8px;padding:14px 12px 7px;cursor:pointer;user-select:none;-webkit-user-select:none}
/* los hijos no capturan el clic → e.target siempre es el head (robusto con SVG) */
.nav-sec-head>*{pointer-events:none}
.nav-sec-head .nav-sec-label{flex:1;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#5eead4;transition:color .15s}
.nav-sec-head:hover .nav-sec-label{color:#9af3e4}
/* badge de no-vistos a nivel de GRUPO (útil cuando el grupo está colapsado) */
.nav-sec-count{margin-left:0;font-size:10.5px;font-weight:700;background:var(--red);color:#fff;min-width:18px;text-align:center;padding:1px 6px;border-radius:20px;flex-shrink:0}
.nav-sec-caret{width:14px;height:14px;stroke:#7a8aa0;stroke-width:2.4;transition:transform .22s ease;flex-shrink:0}
.nav-sec-head.open .nav-sec-caret{transform:rotate(180deg)}
.nav-sec-head:not(.open) .nav-sec-caret{stroke:#5f7088}
/* cuerpo colapsable de cada sección: oculto cuando NO está abierto */
.nav-sec-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .26s cubic-bezier(.4,0,.2,1),opacity .18s}
.nav-sec-body.open{max-height:600px;opacity:1}
.nav-sec-body:not(.open){pointer-events:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px;color:#aab8cb;cursor:pointer;margin-bottom:2px;transition:.15s;position:relative;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
/* items con enlace disponible → tono más blanco que los inertes */
.nav-item.linked{color:#eef2f7}
.nav-item.active{background:linear-gradient(135deg,rgba(16,179,166,.22),rgba(16,179,166,.08));color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--teal)}
.nav-item svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.8}
.nav-item .badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.12);color:#cbd5e1;padding:2px 6px;border-radius:6px}
.nav-item .badge.soon{background:rgba(245,158,11,.18);color:#fbbf24}
.nav-item .badge.new{background:rgba(16,179,166,.22);color:#5eead4}
.nav-item .count{margin-left:auto;font-size:11px;font-weight:600;background:var(--red);color:#fff;min-width:20px;text-align:center;padding:1px 6px;border-radius:20px}
/* items sin destino aún → inertes */
.nav-item.disabled{opacity:.55;cursor:default}
/* items sin permiso de acceso (matriz de Roles) → tono más bajo, no clicables */
.nav-item.no-access{color:#56657c;cursor:not-allowed}
.nav-item.no-access:hover{background:transparent;color:#6b7a91}
.nav-item.no-access svg{opacity:.55}
.sidebar-foot{padding:14px 20px;font-size:11px;color:#5f7088;border-top:1px solid rgba(255,255,255,.06)}

/* ---------- MAIN ---------- */
.main{flex:1;min-width:0}
.demo-tag{flex-shrink:0;display:flex;align-items:center;height:40px;background:var(--amber,#f59e0b);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;padding:0 12px;border-radius:11px;text-transform:uppercase;cursor:default;box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* demo message modal */
.modal-overlay{position:fixed;inset:0;background:rgba(15,27,45,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.2s;z-index:200}
.modal-overlay.open{opacity:1;visibility:visible}
.mini-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:340px;max-width:92vw;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,27,45,.3);padding:24px;z-index:210;opacity:0;visibility:hidden;transition:.2s;text-align:center}
.mini-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.mm-ic{width:54px;height:54px;border-radius:50%;background:#fef3e2;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.mm-ic svg{width:28px;height:28px;stroke:#f59e0b;stroke-width:2}
.mm-t{font-size:17px;font-weight:700;margin-bottom:9px}
.mm-b{font-size:13.5px;color:#64748b;line-height:1.55;margin-bottom:20px}
.mm-btn{width:100%;border:none;border-radius:11px;padding:13px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;background:#10b3a6;color:#fff}
.topbar{display:flex;align-items:center;gap:18px;padding:16px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}

.hamburger{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;flex-shrink:0;transition:.15s}
.hamburger:hover{background:#f7fafc;border-color:var(--slate-light)}
.hamburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.28s}
/* el icono se mantiene como hamburguesa (3 líneas) esté el menú abierto o cerrado */
.search{flex:1;max-width:460px;margin:0 auto;position:relative}
.search input{width:100%;border:1px solid var(--line);background:#f7fafc;border-radius:12px;padding:11px 14px 11px 40px;font-size:14px;font-family:inherit;outline:none}
.search input:focus{border-color:var(--teal);background:#fff}
.search svg{position:absolute;left:13px;top:11px;width:18px;height:18px;stroke:var(--slate-light)}
/* espaciador flexible en la topbar (la hamburguesa queda a la izquierda, el usuario a la derecha) */
.topbar-spacer{flex:1}
.user{display:flex;align-items:center;gap:10px;margin-left:auto}
.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.iconbtn .dot{position:absolute;top:6px;right:6px;min-width:9px;height:9px;background:var(--red);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(226,72,61,.25)}
/* CAMPANA DE ALERTAS:
   sin alertas → VERDE (estado normal, todo al día);
   con alertas → ROJA con contador (algo nuevo sin ver, p.ej. pedido del portal). */
.bell{color:var(--slate-light);background:transparent;border-color:var(--line);transition:.18s}
.bell svg{width:20px;height:20px}
/* estado normal: verde */
.bell.ok{color:var(--green);border-color:var(--green-soft);background:var(--green-soft)}
/* con alertas: rojo + pulso sutil para llamar la atención */
.bell.has-alerts{color:var(--red);border-color:var(--red-soft);background:var(--red-soft);animation:bellPulse 1.8s ease-in-out infinite}
@keyframes bellPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,72,61,.0)}50%{box-shadow:0 0 0 4px rgba(226,72,61,.14)}}
.bell-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;border-radius:20px;border:2px solid #fff}
/* DEMO tag clickeable */
.demo-tag{cursor:pointer}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.user .who{font-size:13px;line-height:1.2}
/* iOS/Safari autodetecta el email y lo convierte en <a mailto> azul.
   Forzamos gris oscuro y anulamos el "data detector" de Apple. */
.user .who b{display:block;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.user .who b,
.user .who b a,
.user .who b a:link,
.user .who b a:visited,
.user .who b a[x-apple-data-detectors],
.user .who a[href^="mailto:"]{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  text-decoration:none!important;
  pointer-events:none;
  cursor:default;
}
.user .who span{color:var(--slate);font-size:11px}

@media(max-width:720px){
  .topbar{padding:14px 16px;gap:12px}
  .search{display:none}
  .user .who{display:none}
}