/* Neo-Dark Clinic — sin cambios de tipografía */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:#0f1115;color:#e6e9f2;
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.topbar{position:sticky;top:0;z-index:4;background:#0c0f14;border-bottom:1px solid #232735;padding:12px 16px}
.topbar h1{margin:0;font-weight:600;font-size:18px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #232735;padding:10px 12px;background:#0c0f14;position:sticky;top:52px;z-index:3}
.tab{background:#121621;border:1px solid #232735;color:#e6e9f2;padding:8px 10px;border-radius:10px;cursor:pointer}
.tab.active{border-color:#22d3ee;box-shadow:0 0 0 1px rgba(34,211,238,.2) inset}

.container{padding:16px;max-width:1100px;margin:0 auto}
.panel{display:none;background:#151922;border:1px solid #232735;border-radius:14px;padding:16px;margin-bottom:16px}
.panel.active{display:block}
.muted{color:#8b93a7;margin:8px 0}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.col2{grid-column:span 2}
.col4{grid-column:span 4}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group input,.form-group select,.form-group textarea{background:#0f1320;border:1px solid #232735;color:#e6e9f2;border-radius:10px;padding:10px}
.row-hidden{display:none}

.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.primary{background:linear-gradient(90deg,#22d3ee,#7dd3fc);color:#001016;border:0;padding:10px 12px;border-radius:12px;cursor:pointer}
.ghost{background:#0f1320;border:1px solid #232735;color:#e6e9f2;padding:10px 12px;border-radius:12px;cursor:pointer}

.result,.ia-reporte{background:#0f1320;border:1px dashed #232735;border-radius:12px;padding:12px;margin-top:10px;white-space:pre-wrap}

.micro-grid{grid-template-columns:repeat(2,1fr)}
.btn-group.micro,.emoji-group{display:flex;gap:6px;flex-wrap:wrap}
.btn-chip{padding:6px 8px;border-radius:10px;border:1px solid #232735;background:#0f1320;color:#e6e9f2;cursor:pointer}
.btn-chip.active{border-color:#34d399;box-shadow:0 0 0 1px rgba(52,211,153,.25) inset}

.bristol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bristol-card{background:#0f1320;border:1px solid #232735;border-radius:12px;padding:10px;text-align:left;color:#e6e9f2;cursor:pointer}
.bristol-card img{width:100%;height:90px;object-fit:contain;background:#0b0f18;border-radius:8px;border:1px solid #232735}
.bristol-card h3{margin:8px 0 4px 0}

/* Bristol seleccionado (highlight verde) */
.bristol-card.active{border-color:#34d399;box-shadow:0 0 0 1px rgba(52,211,153,.25) inset, 0 0 10px rgba(52,211,153,.25);background:rgba(52,211,153,.06)}

.table-wrap{overflow:auto;border:1px solid #232735;border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #232735;text-align:left}
td:last-child{width:60px}
.badge{display:inline-block;padding:2px 6px;border-radius:8px;border:1px solid #232735;color:#8b93a7}

.icc-row{display:flex;gap:8px}
.vit-section{color:#7dd3fc;margin-top:6px}

.toast{position:fixed;bottom:20px;right:20px;background:#0f1320;border:1px solid #232735;padding:10px 12px;border-radius:10px;color:#e6e9f2;opacity:0;transform:translateY(10px);transition:all .25s}
.toast.show{opacity:1;transform:translateY(0)}

/* drag-over effect */
.tab.drag-over{outline:1px dashed #38bdf8;outline-offset:2px;}

/* Buscador de expedientes */
.searchbar{
  padding:8px 16px;
  border-bottom:1px solid #232735;
  background:#0c0f14;
}
.searchbar-inner{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.search-input-wrap{
  flex:1 1 260px;
  position:relative;
}
.search-input-wrap input{
  width:100%;
  background:#0f1320;
  border:1px solid #232735;
  color:#e6e9f2;
  border-radius:10px;
  padding:8px 10px;
}
.search-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#0f1320;
  border:1px solid #232735;
  border-radius:10px;
  margin-top:4px;
  max-height:220px;
  overflow:auto;
  z-index:5;
  display:none;
}
.sugerencia-item{
  width:100%;
  text-align:left;
  padding:6px 10px;
  border:0;
  background:transparent;
  color:#e6e9f2;
  cursor:pointer;
}
.sugerencia-item:hover{
  background:#111827;
}
@media (max-width:768px){
  .searchbar-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .search-actions{
    justify-content:flex-start;
  }
}

/* Seguimiento — tendencia por sesión */
.badge-ok{
  border-color:#22c55e;
  color:#bbf7d0;
}
.badge-warn{
  border-color:#eab308;
  color:#facc15;
}
.badge-bad{
  border-color:#ef4444;
  color:#fecaca;
}

/* Historial IA */
.ia-history-title{
  margin-top:16px;
}


/* ===== Seguimiento (estilo tipo Styku) ===== */
.seguimiento-toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin: 8px 0 10px;
  max-width: 520px;
}
.resumen-grid{
  display:grid;
  gap:6px;
}


/* ===== IA VESAYA: Cards (no rompe estilos) ===== */
.ia-wrap{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.ia-card{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:14px; overflow:hidden; }
.ia-card-h{ padding:10px 12px; font-weight:900; letter-spacing:.3px; color:rgba(230,237,243,.92); border-bottom:1px solid rgba(255,255,255,.08); }
.ia-card-b{ padding:10px 12px; color:rgba(230,237,243,.82); font-size:12.5px; line-height:1.35; }
.ia-line{ margin:4px 0; }
.toast{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); background:rgba(0,0,0,.78); color:#fff; padding:10px 12px; border-radius:999px; font-weight:800; opacity:0; pointer-events:none; transition:.2s; z-index:9999; border:1px solid rgba(255,255,255,.12); }
.toast.show{ opacity:1; }


/* ===============================
   CC - Comparación Circunferencias (A rojo vs B verde)
   =============================== */
.cc-acc{margin-top:16px}
.cc-acc-btn{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:#eaf6ff;
  padding:14px 16px;
  border-radius:14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cc-acc-btn:hover{background:rgba(255,255,255,.055)}
.cc-acc-sub{font-size:12px;opacity:.8}
.cc-acc-body{margin-top:10px}
.cc-wrap{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:12px;
  align-items:start;
}
@media (max-width: 1040px){
  .cc-wrap{grid-template-columns:1fr}
}
.cc-left{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  padding:12px;
  display:grid;
  gap:12px;
}
.cc-canvas-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:10px 10px 12px;
}
.cc-title{font-weight:700;margin-bottom:8px;color:#eaf6ff}
.cc-canvas-card canvas{
  width:100%;
  height:220px;
  display:block;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.06);
}
.cc-right{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  padding:12px;
}
.cc-controls{display:flex;flex-direction:column;gap:10px}
.cc-ctrl-title{font-weight:800}
.cc-ctrl-sub{font-size:12px;opacity:.85}
.cc-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.cc-pill{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  font-weight:700;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.dot{width:10px;height:10px;border-radius:50%}
.dot-red{background:#ff3b3b}
.dot-green{background:#15e28a}
.cc-label{font-size:12px;opacity:.9;margin-top:2px}
.cc-select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:#eaf6ff;
}
.cc-row{display:flex;gap:10px}
.cc-btn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  color:#eaf6ff;
  background:rgba(255,255,255,.03);
}
.cc-btn.ghost:hover{background:rgba(255,255,255,.06)}
.cc-btn.primary{
  background:linear-gradient(90deg, rgba(0,207,255,.30), rgba(21,226,138,.20));
  border:1px solid rgba(0,207,255,.35);
}
.cc-btn.primary:hover{filter:brightness(1.08)}
.cc-toggles{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  opacity:.95;
}
.cc-toggles input{transform:translateY(1px)}
.cc-zoom input[type="range"]{width:100%}
.cc-tip{
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,207,255,.22);
  background:rgba(0,207,255,.10);
  font-size:12px;
}

.peso-range{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.peso-range .mini{display:flex;flex-direction:column;gap:4px}
.peso-range small{color:#8b93a7;font-size:12px;line-height:1.1}


/* Seguimiento % grasa (Navy) */
#caderaNavySegWrap[aria-hidden="true"]{display:none !important;}


/* =========================
   Avatar corporal estimado (spritesheet)
   ========================= */
.avatar-box{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.avatar-box-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.avatar-title{font-weight:800;letter-spacing:.2px}
.avatar-sub{opacity:.85;font-size:.92rem}
.avatar-controls{
  display:flex;gap:10px;align-items:end;justify-content:flex-end;
  margin:10px 0 12px 0;flex-wrap:wrap;
}
.avatar-ctrl{display:flex;flex-direction:column;gap:6px;font-size:.85rem;opacity:.95}
.avatar-ctrl span{opacity:.85}
.avatar-grid{
  display:grid;
  grid-template-columns: 1fr 36px 1fr;
  gap:12px;
  align-items:center;
}
.avatar-card{
  border-radius:16px;
  padding:10px;
  border:2px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  min-height: 220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.avatar-card.before{border-color: rgba(255,70,70,.55); box-shadow: 0 0 0 1px rgba(255,70,70,.15) inset;}
.avatar-card.after{border-color: rgba(90,255,170,.55); box-shadow: 0 0 0 1px rgba(90,255,170,.15) inset;}
.avatar-card-top{font-weight:800;opacity:.9;font-size:.92rem;letter-spacing:.4px}
.avatar-arrow{
  text-align:center;
  font-size:28px;
  opacity:.8;
  user-select:none;
}
.avatar-sprite{
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background-color: rgba(0,0,0,.25);
  background-repeat:no-repeat;
  background-image: url('avatar/avatars_montage.png');
  background-size: 500% 200%;
  background-position: 0% 0%;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.avatar-label{
  font-weight:800;
  opacity:.92;
}
.avatar-footnote{
  margin-top:10px;
  font-size:.82rem;
  opacity:.72;
}


/* === IA DASHBOARD (Tarjetas estilo Neo-Dark Clinic) === */
.ia-reporte{ margin-top:14px; }
.ia-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:14px;
}
.ia-title{ font-weight:800; letter-spacing:.2px; }
.ia-meta{ opacity:.85; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-actions-mini{ display:flex; gap:8px; }
.ia-dashboard{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .ia-dashboard{ grid-template-columns: 1fr; }
  .ia-meta{ white-space:normal; }
}
.ia-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px 12px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ia-card-wide{ grid-column: span 2; }
@media (max-width: 980px){
  .ia-card-wide{ grid-column: span 1; }
}
.ia-card-h{ display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.ia-card-t{ font-weight:800; font-size:.95rem; }
.ia-card-s{ opacity:.95; font-size:.95rem; margin-top:2px; }
.ia-card-b{ opacity:.9; font-size:.92rem; line-height:1.3; }
.ia-kv{ margin-top:6px; display:grid; gap:6px; }
.ia-kv-row{ display:flex; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.08); padding-top:7px; }
.ia-kv-row .k{ opacity:.82; }
.ia-kv-row .v{ font-weight:700; }
.ia-bars{ margin-top:6px; display:grid; gap:8px; }
.ia-bar-row{ display:grid; grid-template-columns: 120px 1fr 50px; align-items:center; gap:10px; }
.ia-bar-label{ opacity:.9; font-size:.92rem; }
.ia-bar-track{
  height:10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.ia-bar-fill{ height:100%; border-radius:999px; }
.bar-firm{ background:rgba(255,193,7,.95); }
.bar-bact{ background:rgba(76,175,80,.95); }
.bar-prot{ background:rgba(33,150,243,.95); }
.bar-acti{ background:rgba(244,67,54,.95); }
.ia-bar-val{ text-align:right; font-weight:800; }
.ia-vitlist{ margin-top:6px; display:grid; gap:8px; }
.ia-vititem{ display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
.ia-pri{ margin-top:6px; display:grid; gap:8px; }
.ia-pri-item{ display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
.check{
  width:14px; height:14px; border-radius:999px;
  background:rgba(76,175,80,.95);
  box-shadow:0 0 0 3px rgba(76,175,80,.18);
  display:inline-block;
}
.dot{ width:12px; height:12px; border-radius:999px; margin-top:4px; display:inline-block; }
.dot-red{ background:rgba(244,67,54,.98); box-shadow:0 0 0 4px rgba(244,67,54,.18); }
.dot-amber{ background:rgba(255,193,7,.98); box-shadow:0 0 0 4px rgba(255,193,7,.18); }
.dot-green{ background:rgba(76,175,80,.98); box-shadow:0 0 0 4px rgba(76,175,80,.18); }
.ia-quote{
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
  font-size:1.02rem;
  line-height:1.35;
  opacity:.95;
}
.ico{ width:18px; height:18px; border-radius:6px; display:inline-block; margin-top:2px; opacity:.9; background:rgba(255,255,255,.10); position:relative; }
.ico-body::after{ content:""; position:absolute; inset:4px; border-radius:6px; border:1px solid rgba(255,255,255,.30); }
.ico-glu::after{ content:""; position:absolute; left:4px; right:4px; top:4px; bottom:4px; border-radius:999px; border:1px solid rgba(255,255,255,.30); }
.ico-ego::after{ content:""; position:absolute; left:5px; right:5px; top:4px; bottom:6px; border-radius:3px; border:1px solid rgba(255,255,255,.30); }
.ico-micro::after{ content:""; position:absolute; left:4px; right:4px; top:7px; height:4px; border-radius:999px; background:rgba(76,175,80,.85); }
.ico-br::after{ content:""; position:absolute; left:4px; right:4px; top:4px; bottom:4px; border-radius:3px; border:1px dashed rgba(255,255,255,.30); }
.ico-vit::after{ content:""; position:absolute; left:4px; right:4px; top:4px; bottom:4px; border-radius:999px; border:1px solid rgba(255,255,255,.30); }
.ico-msg::after{ content:""; position:absolute; left:5px; right:5px; top:6px; height:6px; border-radius:999px; background:rgba(255,193,7,.60); }
.ico-pri::after{ content:""; position:absolute; left:5px; top:5px; width:8px; height:8px; border-radius:2px; background:rgba(76,175,80,.75); }


/* --- IA Cards extras (Bristol image + more life) --- */
.ia-bristol-row{display:flex; gap:12px; align-items:flex-start;}
.ia-bristol-img{width:92px; height:92px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 24px rgba(0,0,0,.35);}
.ia-bristol-info{flex:1; min-width:0;}