/* flow.css — ITCall Flow · identidad visual sobre Metronic
   Los colores vienen del tenant como variables: --tenant (principal), --tenant-2 (secundario), --tenant-riel (menú). */

/* ===== base ===== */
.flow-fondo{ background:#EEF3FA; }
.tenant-text{ color:var(--tenant); }
.kt-btn-primary{ background:var(--tenant)!important; border-color:var(--tenant)!important; color:#fff!important; }
.kt-btn-primary:hover{ filter:brightness(.94); }
.kt-btn-destructive,.kt-btn-destructive:hover{ background:var(--destructive)!important; border-color:var(--destructive)!important; color:#fff!important; box-shadow:none!important; }
.kt-btn-destructive i{ color:#fff!important; }

/* ===== menú lateral (riel) ===== */
.flow-riel{ background:var(--tenant-riel); color:#C9D6EE; transition:width .2s ease;
  background-image:radial-gradient(120% 60% at 0% 100%, color-mix(in srgb,var(--tenant) 28%,transparent), transparent 70%); }
.flow-riel-cab{ display:flex; align-items:center; gap:.5rem; height:72px; padding:0 1rem 0 1.15rem; flex-shrink:0; }
.flow-logo{ display:flex; align-items:center; gap:.55rem; min-width:0; flex-grow:1; text-decoration:none; }
.flow-logo-img{ height:30px; width:auto; }
.flow-logo-iso{ display:none; height:32px; width:auto; }
.flow-logo-txt{ font-weight:700; font-size:.95rem; letter-spacing:.02em; color:#fff;
  padding:.12rem .5rem; border-radius:999px; background:linear-gradient(90deg,var(--tenant),var(--tenant-2)); }
.flow-colapsar{ color:#8EA3C7; font-size:1.1rem; flex-shrink:0; }
.flow-colapsar:hover{ color:#fff; }

.flow-cliente{ display:flex; align-items:center; gap:.55rem; margin:0 .9rem .6rem; padding:.55rem .7rem;
  border-radius:.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#E7EEFB; font-size:.8rem; font-weight:600; min-width:0; }
.flow-punto{ width:.55rem; height:.55rem; border-radius:999px; background:var(--tenant-2); flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tenant-2) 30%,transparent); }

.flow-menu{ display:flex; flex-direction:column; gap:2px; padding:.4rem .7rem; }
.flow-lnk{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:.55rem;
  color:#C9D6EE; font-size:.875rem; font-weight:500; text-decoration:none; transition:background .15s,color .15s; }
.flow-lnk i{ font-size:1.15rem; color:#8EA3C7; transition:color .15s; }
.flow-lnk:hover{ background:rgba(255,255,255,.07); color:#fff; }
.flow-lnk:hover i{ color:#fff; }
.flow-lnk.flow-activo{ background:linear-gradient(90deg,color-mix(in srgb,var(--tenant) 38%,transparent),color-mix(in srgb,var(--tenant) 10%,transparent));
  color:#fff; font-weight:600; }
.flow-lnk.flow-activo i{ color:var(--tenant-2); }
.flow-lnk.flow-activo::before{ content:""; position:absolute; left:-.7rem; top:22%; bottom:22%; width:3px; border-radius:0 3px 3px 0; background:var(--tenant-2); }

.flow-riel-pie{ position:relative; border-top:1px solid rgba(255,255,255,.08); padding:.7rem .9rem; flex-shrink:0; }
.flow-perfil{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:start; padding:.35rem; border-radius:.55rem; color:#E7EEFB; }
.flow-perfil:hover{ background:rgba(255,255,255,.07); }
.flow-avatar{ width:2.1rem; height:2.1rem; border-radius:999px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg,var(--tenant),var(--tenant-2)); color:#fff; font-weight:700; font-size:.85rem; }
.flow-perfil-txt{ display:flex; flex-direction:column; min-width:0; flex-grow:1; line-height:1.2; }
.flow-perfil-txt b{ font-size:.82rem; font-weight:600; }
.flow-perfil-txt small{ font-size:.72rem; color:#8EA3C7; }
i.flow-perfil-txt{ flex-grow:0; font-size:.7rem; color:#8EA3C7; }
.flow-perfil-menu{ position:absolute; left:.9rem; right:.9rem; bottom:4.4rem; z-index:80; background:#fff; color:#031F53;
  border:1px solid #DCE5F2; border-radius:.6rem; box-shadow:0 18px 40px -12px rgba(3,31,83,.35); padding:.3rem; font-size:.85rem; }
.flow-perfil-menu a{ display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border-radius:.45rem; color:var(--destructive); }
.flow-perfil-menu a:hover{ background:#F3F6FB; }

/* colapsado: solo íconos */
@media (min-width:1024px){
  #sidebar.mini{ width:76px!important; }
  body:has(#sidebar.mini) #contenido{ margin-inline-start:76px; }
}
#sidebar.mini .flow-logo-img, #sidebar.mini .flow-logo-txt, #sidebar.mini .flow-colapsar,
#sidebar.mini .flow-cliente, #sidebar.mini .flow-lnk span, #sidebar.mini .flow-perfil-txt{ display:none; }
#sidebar.mini .flow-logo-iso{ display:block; }
#sidebar.mini .flow-riel-cab{ justify-content:center; padding:0; }
#sidebar.mini .flow-logo{ flex-grow:0; cursor:pointer; }
#sidebar.mini .flow-lnk{ justify-content:center; padding-inline:0; }
#sidebar.mini .flow-perfil{ justify-content:center; }

/* ===== piezas comunes de las pantallas ===== */
.flow-cabecera{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }
.flow-eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tenant); }
.flow-kpi{ border:1px solid var(--border); border-radius:.8rem; padding:1rem 1.1rem; background:#fff; position:relative; overflow:hidden; }
.flow-kpi::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--tenant),var(--tenant-2)); opacity:.85; }
.flow-kpi-et{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--muted-foreground); }
.flow-kpi-val{ font-size:1.65rem; font-weight:700; color:#031F53; letter-spacing:-.02em; margin-top:.15rem; font-variant-numeric:tabular-nums; }
.flow-kpi-sub{ font-size:.72rem; color:var(--muted-foreground); }
.flow-panel{ border:1px solid var(--border); border-radius:.8rem; background:#fff; }
.flow-panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); }
.flow-panel-cab h2{ font-size:.9rem; font-weight:600; color:#031F53; }
.flow-vacio{ padding:2rem 1rem; text-align:center; color:var(--muted-foreground); font-size:.85rem; }
.flow-vacio i{ display:block; font-size:1.8rem; color:#B7C6DE; margin-bottom:.4rem; }
.flow-estado{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:999px; }
.flow-estado::before{ content:""; width:.45rem; height:.45rem; border-radius:999px; background:currentColor; }
.flow-estado.ok{ color:#0E9454; background:#E8F7EF; }
.flow-estado.warn{ color:#B26A00; background:#FFF4E0; }
.flow-estado.off{ color:#5D6D8A; background:#EEF2F8; }
.flow-estado.vivo::before{ animation:flowPulso 1.6s ease-in-out infinite; }
@keyframes flowPulso{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* embudo */
.flow-embudo{ display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.1rem 1.2rem; }
.flow-emb-fila{ display:grid; grid-template-columns:9.5rem 1fr 3.5rem; align-items:center; gap:.75rem; font-size:.8rem; }
.flow-emb-fila span:first-child{ color:var(--secondary-foreground); }
.flow-emb-barra{ height:.85rem; border-radius:.3rem; background:#EEF3FA; overflow:hidden; }
.flow-emb-barra i{ display:block; height:100%; border-radius:.3rem; background:linear-gradient(90deg,var(--tenant-2),var(--tenant)); transition:width .6s ease; }
.flow-emb-fila b{ text-align:right; font-variant-numeric:tabular-nums; color:#031F53; }

.flow-perfil-menu a.flow-perfil-cuenta{ color:#031F53; }

/* ===== teléfono (estado de registro en el pie del menú + drawer) ===== */
.flow-fono-fila{ padding:.4rem .9rem; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.flow-fono-btn{ display:flex; align-items:center; gap:.65rem; width:100%; text-align:start; padding:.45rem .5rem; border-radius:.55rem; color:#E7EEFB; }
.flow-fono-btn:hover{ background:rgba(255,255,255,.07); }
.flow-fono-ico{ position:relative; width:2.1rem; height:2.1rem; border-radius:.6rem; display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.08); color:var(--tenant-2); font-size:1.05rem; }
#fono_drawer .flow-fono-ico{ background:color-mix(in srgb,var(--tenant) 12%,transparent); color:var(--tenant); }
.flow-fono-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.flow-fono-txt b{ font-size:.82rem; font-weight:600; }
.flow-fono-txt small{ font-size:.7rem; color:#8EA3C7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fono-punto{ position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:999px; border:2px solid var(--tenant-riel); background:#94A3B8; }
#fono_drawer .fono-punto{ border-color:#fff; }
.fono-punto.ok{ background:#16A34A; } .fono-punto.espera{ background:#F59E0B; } .fono-punto.timbre{ background:#F59E0B; animation:flowPulso 1s infinite; } .fono-punto.mal{ background:#DC2626; }
#sidebar.mini .flow-fono-txt{ display:none; } #sidebar.mini .flow-fono-btn{ justify-content:center; padding-inline:0; }

/* ===== submenús ===== */
.flow-grupo-cab{ width:100%; text-align:start; }
.flow-grupo-cab .flow-chev{ margin-inline-start:auto; font-size:.65rem!important; transition:transform .2s; }
.flow-grupo.abierto .flow-chev{ transform:rotate(180deg); }
.flow-grupo-cab.flow-en-grupo{ color:#fff; } .flow-grupo-cab.flow-en-grupo > i:first-child{ color:var(--tenant-2); }
.flow-grupo-cuerpo{ display:none; flex-direction:column; gap:1px; margin:2px 0 4px; padding-inline-start:1.55rem; position:relative; }
.flow-grupo-cuerpo::before{ content:""; position:absolute; left:1.15rem; top:4px; bottom:4px; width:1px; background:rgba(255,255,255,.12); }
.flow-grupo.abierto .flow-grupo-cuerpo{ display:flex; }
.flow-sub{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.48rem .7rem; border-radius:.5rem; color:#A9BBDA; font-size:.82rem; text-decoration:none; }
.flow-sub i{ font-size:.95rem; color:#7F95BC; }
.flow-sub:hover{ background:rgba(255,255,255,.07); color:#fff; }
.flow-sub.flow-activo{ background:color-mix(in srgb,var(--tenant) 30%,transparent); color:#fff; font-weight:600; }
.flow-sub.flow-activo i{ color:var(--tenant-2); }
#sidebar.mini .flow-grupo-cuerpo, #sidebar.mini .flow-chev{ display:none!important; }