/* LIQUID_GLASS_V2: toda la interfaz con estilo vidrio (Apple Liquid Glass).
   Para quitarlo, borre la línea que carga este archivo en index.html. */
:root{
  --lg-fill:rgba(255,255,255,.58);
  --lg-panel:rgba(255,255,255,.72);
  --lg-edge:rgba(255,255,255,.9);
  --lg-hair:rgba(15,23,42,.07);
  --lg-shadow:0 1px 1px rgba(15,23,42,.04),0 8px 24px -8px rgba(15,23,42,.14);
  --lg-shadow-lg:0 2px 2px rgba(15,23,42,.04),0 24px 60px -20px rgba(15,23,42,.30);
  --lg-shine:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,23,42,.035);
  --lg-blur:saturate(180%) blur(22px);
  --lg-blue1:#4f8cff;--lg-blue2:#2563eb;
}
html body{
  background:
    radial-gradient(1100px 560px at 10% -12%,rgba(99,140,255,.20),transparent 60%),
    radial-gradient(900px 520px at 95% -10%,rgba(167,139,250,.16),transparent 62%),
    radial-gradient(900px 700px at 55% 115%,rgba(56,189,248,.12),transparent 60%),
    #eef2f8 !important;
  background-attachment:fixed !important;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Barra superior (fija en su lugar, no tapa el contenido) ---------- */
#app .main > .top{
  position:relative !important;top:auto !important;z-index:5;
  display:grid !important;grid-template-columns:minmax(0,1fr) auto auto;align-items:center !important;
  gap:14px !important;padding:10px 14px !important;margin-bottom:12px !important;
  background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  border:1px solid var(--lg-edge);border-radius:20px;box-shadow:var(--lg-shine),var(--lg-shadow);
}
#app .main > .top > div:first-child{min-width:0}
#app .main > .top #pageTitle{font-size:20px;font-weight:750;letter-spacing:-.02em;margin:0;display:inline-block}
#app .main > .top #pageSubtitle{font-size:12px;margin-top:2px;color:#5b6577}
#stTopStatusRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
#stTopStatusRow #conversationBotsTopStatus{margin:0 !important}
#app .main > .top > div:last-child{display:flex !important;align-items:center;gap:8px;justify-self:end}

/* Botones de paneles: pastillas de vidrio, centradas, sin recuadro vacío */
#stPanelShortcuts{justify-self:end;display:flex !important;flex-wrap:nowrap !important;justify-content:flex-end;gap:6px !important;
  padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;flex:none !important;width:auto !important}
#stPanelShortcuts a{
  min-height:30px !important;padding:5px 13px !important;border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6)) !important;
  border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine),0 1px 2px rgba(15,23,42,.06),0 4px 10px -4px rgba(15,23,42,.14) !important;
  color:#1f2a3d !important;font-weight:600 !important;font-size:12px !important;transition:transform .15s,box-shadow .15s,color .15s;
}
#stPanelShortcuts a:hover{transform:translateY(-1px);color:#1d4ed8 !important;box-shadow:var(--lg-shine),0 6px 16px -6px rgba(37,99,235,.4) !important}

/* Estado del sistema y chips de Atención / Acreditación */
#stHealthPill,#conversationBotsTopStatus > *{
  border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine),0 3px 10px -4px rgba(15,23,42,.18) !important;
  padding:4px 11px !important;font-size:11.5px !important;border-radius:999px !important;
}
#stHealthPill{margin-left:0 !important;top:0 !important}

/* Campana y mensajes */
#alertsBell,#internalMessagesButton{
  width:42px;height:42px;min-width:42px !important;padding:0 !important;border-radius:50% !important;
  display:inline-grid !important;place-items:center;font-size:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6)) !important;
  border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine),0 8px 18px -8px rgba(15,23,42,.35) !important;
  transition:transform .15s;
}
#alertsBell:hover,#internalMessagesButton:hover{transform:translateY(-1px) scale(1.03)}
#alertsCount,#internalMessagesCount{top:-4px !important;right:-4px !important;min-width:20px !important;height:20px !important;line-height:20px !important;
  font-size:10.5px !important;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.2)}

/* ---------- Paneles / tarjetas ---------- */
.card:not(.package-card),.modal,.login-card,.mini{
  /* Sin backdrop-filter: recortaba los menús flotantes (p. ej. "+ Adjuntar / Plantillas"). */
  background:rgba(255,255,255,.86) !important;
  border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine),var(--lg-shadow) !important;
}
.card{border-radius:18px !important}
/* Cuadros de paneles del Dashboard: conservan su color propio, solo se agrega brillo */
.card.package-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -12px rgba(15,23,42,.35) !important;border-radius:18px !important}
.modal{border-radius:22px !important;box-shadow:var(--lg-shine),var(--lg-shadow-lg) !important;background:rgba(255,255,255,.86) !important}
.modal-bg{background:rgba(15,23,42,.28) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card .card:not(.package-card),.modal .card:not(.package-card){background:rgba(255,255,255,.6) !important;box-shadow:var(--lg-shine) !important}
.convo-item{background:transparent}
.convo-list-head,.chat-compose{background:rgba(255,255,255,.45) !important;border-color:var(--lg-hair) !important}
.msg-bubble{box-shadow:0 1px 1px rgba(15,23,42,.04),0 4px 12px -6px rgba(15,23,42,.12);border:1px solid rgba(255,255,255,.7)}
.msg-row.out .msg-bubble{background:linear-gradient(180deg,#e6edff,#d9e4ff) !important}
details[style*="border:1px solid var(--line)"]{background:rgba(255,255,255,.6) !important;border-color:var(--lg-edge) !important;box-shadow:var(--lg-shine),0 4px 12px -8px rgba(15,23,42,.18)}

/* ---------- Menú lateral ---------- */
#app > .side,#app aside.side{
  background:rgba(255,255,255,.7) !important;
  border-right:1px solid var(--lg-edge) !important;box-shadow:inset -1px 0 0 rgba(15,23,42,.04);
}
.side .nav{border-radius:12px !important;transition:background .15s,box-shadow .15s}
.side .nav:not(.active){color:#1f2a3d !important}
.side .nav:hover{background:rgba(255,255,255,.75) !important;box-shadow:var(--lg-shine),0 2px 8px -4px rgba(15,23,42,.2)}
.side .nav.active,.side .nav[aria-current],.side .nav.current{
  background:linear-gradient(180deg,var(--lg-blue1),var(--lg-blue2)) !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(37,99,235,.6) !important}

/* ---------- Botones ---------- */
.btn{
  border-radius:12px !important;font-weight:650 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.66)) !important;
  border:1px solid rgba(15,23,42,.09) !important;color:#1f2a3d;
  box-shadow:var(--lg-shine),0 1px 2px rgba(15,23,42,.06),0 4px 10px -6px rgba(15,23,42,.18) !important;
  transition:transform .12s,box-shadow .15s,filter .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--lg-shine),0 6px 16px -8px rgba(15,23,42,.3) !important}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.55;transform:none}
.btn.primary{
  background:linear-gradient(180deg,var(--lg-blue1),var(--lg-blue2)) !important;color:#fff !important;border-color:rgba(37,99,235,.7) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(37,99,235,.65) !important;
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.sensitive{background:linear-gradient(180deg,#f05252,#dc2626) !important;color:#fff !important;border-color:#dc2626 !important}
.btn.danger{color:#b42318 !important}
.convo-filter{border-radius:999px !important;background:rgba(255,255,255,.7) !important;border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine)}

/* ---------- Campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{
  border-radius:12px !important;background:rgba(255,255,255,.75) !important;border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
input:focus,select:focus,textarea:focus{border-color:rgba(79,140,255,.7) !important;box-shadow:0 0 0 4px rgba(79,140,255,.16) !important;background:#fff !important}

/* ---------- Etiquetas ---------- */
.badge{border:1px solid rgba(255,255,255,.8);box-shadow:var(--lg-shine)}

/* ---------- Tamaños ---------- */
@media(max-width:1350px){
  #app .main > .top{grid-template-columns:minmax(0,1fr) auto}
  #stPanelShortcuts{grid-column:1 / -1;grid-row:2;justify-self:start;justify-content:flex-start;flex-wrap:wrap !important}
}
@media(max-width:850px){
  #app .main > .top{grid-template-columns:1fr;border-radius:16px}
  #app .main > .top > div:last-child{justify-self:start}
}

/* ---------- Ficha del cliente (CLIENT_HEADER_TIDY_V1) ---------- */
.tabs{display:flex !important;flex-wrap:wrap !important;grid-template-columns:none !important;gap:6px !important;
  padding:10px 4px !important;background:transparent !important;border-bottom:1px solid var(--lg-hair) !important}
.tabs .tab{flex:0 0 auto !important;width:auto !important;border-radius:999px !important;padding:7px 14px !important;
  font-weight:650 !important;font-size:12.5px !important;color:#334155;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.65)) !important;
  border:1px solid rgba(15,23,42,.08) !important;box-shadow:var(--lg-shine),0 1px 2px rgba(15,23,42,.05);transition:transform .12s,box-shadow .15s}
.tabs .tab:hover{transform:translateY(-1px);box-shadow:var(--lg-shine),0 5px 12px -6px rgba(15,23,42,.25)}
.tabs .tab.active{background:linear-gradient(180deg,var(--lg-blue1),var(--lg-blue2)) !important;color:#fff !important;
  border-color:rgba(37,99,235,.7) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px rgba(37,99,235,.6) !important}
#contextPanel .context-title,#contextPanel .context-head{gap:12px}
#contextPanel .context-name{letter-spacing:-.01em}
#contextPanel .chips .badge{padding:4px 10px}

/* KC_TOP_BUTTON: botón Centro de Conocimiento (pastilla de vidrio con ícono en degradado) */
#stKcTopButton{
  display:inline-flex !important;align-items:center;gap:8px;height:42px;padding:0 15px 0 6px !important;border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6)) !important;
  border:1px solid var(--lg-edge) !important;box-shadow:var(--lg-shine),0 8px 18px -8px rgba(15,23,42,.35) !important;
  color:#1f2a3d !important;font-weight:650 !important;font-size:12.5px !important;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .15s,box-shadow .15s,color .15s;
}
#stKcTopButton:hover{transform:translateY(-1px);color:#4338ca !important;box-shadow:var(--lg-shine),0 10px 22px -8px rgba(99,102,241,.5) !important}
#stKcTopButton:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.kc-ico{
  width:30px;height:30px;flex:none;border-radius:50%;display:inline-grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#4f8cff 0%,#6366f1 55%,#a855f7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -3px rgba(99,102,241,.55);
}
#stKcTopButton:hover .kc-ico{filter:brightness(1.08)}
#stKcPanel h3 .kc-ico{width:28px;height:28px}
@media (max-width:1380px){#stKcTopButton{padding:0 !important;width:42px;justify-content:center}#stKcTopButton .kc-lbl{display:none}}