/* ===== from style_10.css ===== */
\n:root{\n  --paper: #EEE7D6;\n  --paper-2: #E4DAC2;\n  --ink: #22201B;\n  --ink-soft: #524C3F;\n  --line: #C9BC9C;\n  --seal: #A7311F;\n  --seal-soft: #C4573F;\n\n  --tierra: #A9782E;\n  --metal: #7C8074;\n  --madera: #3E6B52;\n  --fuego: #B23A2E;\n  --agua: #2A5468;\n\n  --font-display: \"Fraunces\", serif;\n  --font-body: \"Spectral\", serif;\n  --font-mono: \"JetBrains Mono\", monospace;\n}\n\n*{box-sizing:border-box;}\nhtml,body{margin:0;padding:0;}\nbody{\n  background:\n    radial-gradient(1200px 700px at 15% -10%, #F3ECD9 0%, transparent 60%),\n    var(--paper);\n  color:var(--ink);\n  font-family:var(--font-body);\n  font-size:16px;\n  line-height:1.5;\n  -webkit-font-smoothing:antialiased;\n}\n\n.texture{\n  position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;\n  background-image:\n    repeating-linear-gradient(0deg, rgba(34,32,27,0.015) 0px, rgba(34,32,27,0.015) 1px, transparent 1px, transparent 3px);\n}\n\n#app{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px 80px;}\n\n/* ---------- HEADER ---------- */\nheader.hero{\n  padding:56px 0 34px;\n  border-bottom:1px solid var(--line);\n  margin-bottom:36px;\n}\n.eyebrow{\n  font-family:var(--font-mono);\n  font-size:11.5px;\n  letter-spacing:.16em;\n  text-transform:uppercase;\n  color:var(--seal);\n  display:flex; align-items:center; gap:10px;\n  margin-bottom:18px;\n}\n.eyebrow::before{\n  content:\"\";\n  width:22px; height:1px; background:var(--seal);\n  display:inline-block;\n}\nh1.title{\n  font-family:var(--font-display);\n  font-optical-sizing:auto;\n  font-weight:600;\n  font-size:clamp(34px,5vw,58px);\n  line-height:1.02;\n  margin:0 0 14px;\n  letter-spacing:-0.01em;\n}\nh1.title em{\n  font-style:italic;\n  font-weight:400;\n  color:var(--seal);\n}\np.subtitle{\n  font-family:var(--font-body);\n  font-size:17px;\n  color:var(--ink-soft);\n  max-width:640px;\n  margin:0;\n}\n.hero-meta{\n  margin-top:26px;\n  display:flex; gap:28px; flex-wrap:wrap;\n  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);\n  text-transform:uppercase; letter-spacing:.05em;\n}\n.hero-meta b{color:var(--ink); font-weight:600;}\n\n/* ---------- SEARCH ---------- */\n.search-panel{\n  margin-bottom:40px;\n}\n.search-label{\n  font-family:var(--font-mono);\n  font-size:11px; text-transform:uppercase; letter-spacing:.1em;\n  color:var(--ink-soft); margin-bottom:10px; display:block;\n}\n.search-box{\n  position:relative;\n  display:flex; align-items:center;\n  background:var(--paper-2);\n  border:1px solid var(--line);\n  border-radius:2px;\n  padding:4px 4px 4px 18px;\n}\n.search-box:focus-within{\n  border-color:var(--seal);\n}\n.search-box svg{flex:none; color:var(--ink-soft);}\n#symptomInput{\n  flex:1;\n  border:none; background:transparent; outline:none;\n  font-family:var(--font-body); font-size:17px; color:var(--ink);\n  padding:14px 10px;\n}\n#symptomInput::placeholder{color:#9c9481; font-style:italic;}\n.clear-btn{\n  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;\n  letter-spacing:.05em; color:var(--ink-soft); background:transparent; border:1px solid var(--line);\n  padding:9px 14px; cursor:pointer; border-radius:2px; white-space:nowrap;\n}\n.clear-btn:hover{border-color:var(--seal); color:var(--seal);}\n\n.suggest-list{\n  position:absolute; left:0; right:0; top:calc(100% + 6px);\n  background:var(--paper); border:1px solid var(--line); border-radius:2px;\n  max-height:280px; overflow-y:auto; z-index:20;\n  box-shadow:0 12px 28px rgba(34,32,27,.14);\n}\n.suggest-item{\n  padding:10px 18px; cursor:pointer; font-size:14.5px;\n  border-bottom:1px solid rgba(201,188,156,.4);\n  display:flex; justify-content:space-between; gap:10px;\n}\n.suggest-item:last-child{border-bottom:none;}\n.suggest-item:hover, .suggest-item.active{background:var(--paper-2);}\n.suggest-item .tag{font-family:var(--font-mono); font-size:10px; color:var(--ink-soft); text-transform:uppercase;}\n\n.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}\n.chip{\n  display:flex; align-items:center; gap:8px;\n  background:var(--ink); color:var(--paper);\n  font-family:var(--font-mono); font-size:12px;\n  padding:7px 8px 7px 14px; border-radius:2px;\n}\n.chip button{\n  background:none; border:none; color:var(--paper); opacity:.6; cursor:pointer;\n  font-size:14px; line-height:1; padding:2px;\n}\n.chip button:hover{opacity:1;}\n\n.quick-symptoms{margin-top:18px;}\n.quick-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}\n.quick-title{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}\n.quick-groups{display:flex; flex-direction:column; gap:14px; max-height:2000px; overflow:hidden; transition:max-height .3s ease;}\n.quick-groups.collapsed{max-height:108px; overflow:hidden; position:relative;}\n.quick-groups.collapsed::after{\n  content:\"\"; position:absolute; left:0; right:0; bottom:0; height:44px;\n  background:linear-gradient(180deg, transparent, var(--paper));\n}\n.quick-group-title{\n  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;\n  color:var(--seal); margin-bottom:7px;\n}\n.quick-tags{display:flex; flex-wrap:wrap; gap:7px;}\n.quick-tag{\n  font-family:var(--font-body); font-size:13px; color:var(--ink-soft);\n  border:1px solid var(--line); padding:5px 12px; border-radius:20px; cursor:pointer;\n  background:transparent;\n}\n.quick-tag:hover{border-color:var(--seal); color:var(--seal);}\n\n/* ---------- RESULTS ---------- */\n.section-heading{\n  display:flex; align-items:baseline; justify-content:space-between;\n  margin-bottom:18px; gap:16px; flex-wrap:wrap;\n}\n.section-heading h2{\n  font-family:var(--font-display); font-weight:600; font-size:22px; margin:0;\n}\n.section-heading .count{\n  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;\n}\n\n.results-grid{\n  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px;\n  margin-bottom:48px;\n}\n.result-card{\n  background:var(--paper-2);\n  border:1px solid var(--line);\n  border-radius:3px;\n  padding:20px 20px 18px;\n  cursor:pointer;\n  transition:border-color .15s, transform .15s;\n  position:relative;\n  overflow:hidden;\n}\n.result-card:hover{border-color:var(--ink); transform:translateY(-2px);}\n.result-card::before{\n  content:\"\";\n  position:absolute; left:0; top:0; bottom:0; width:4px;\n  background:var(--elcolor,var(--seal));\n}\n.rc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}\n.rc-organ{font-family:var(--font-display); font-weight:600; font-size:19px;}\n.rc-type{\n  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;\n  padding:4px 9px; border-radius:20px; white-space:nowrap;\n}\n.rc-type.tonificar{background:rgba(62,107,82,.15); color:var(--madera);}\n.rc-type.dispersar{background:rgba(178,58,46,.15); color:var(--seal);}\n.rc-note{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); margin-bottom:10px;}\n.rc-match{font-size:13.5px; color:var(--ink-soft); font-style:italic; margin-bottom:12px; min-height:36px;}\n\n.exact-card{border-color:var(--seal); box-shadow:0 2px 14px rgba(178,58,46,.08);}\n.exact-card::before{width:6px;}\n.exact-badge{\n  display:inline-block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase;\n  letter-spacing:.06em; color:var(--seal); background:rgba(178,58,46,.1);\n  padding:4px 10px; border-radius:20px; margin-bottom:12px;\n}\n.rc-syndrome-name{font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:8px; color:var(--ink);}\n.rc-points{display:flex; gap:6px; flex-wrap:wrap;}\n.rc-point-pill{\n  font-family:var(--font-mono); font-size:11px; border:1px solid var(--line);\n  padding:3px 8px; border-radius:20px; color:var(--ink-soft);\n}\n.rc-score{\n  position:absolute; top:16px; right:16px;\n  font-family:var(--font-mono); font-size:10px; color:var(--ink-soft);\n}\n\n.empty-state{\n  padding:60px 20px; text-align:center; color:var(--ink-soft);\n  border:1px dashed var(--line); border-radius:3px; margin-bottom:48px;\n}\n.empty-state .big{font-family:var(--font-display); font-size:20px; color:var(--ink); margin-bottom:8px;}\n\n/* ---------- BROWSE ALL ---------- */\n.browse-toggle{\n  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;\n  color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:0;\n  border-bottom:1px dotted var(--ink-soft);\n}\n.browse-toggle:hover{color:var(--seal); border-color:var(--seal);}\n\n.organ-table{\n  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:20px;\n}\n.organ-row{\n  display:flex; align-items:center; justify-content:space-between;\n  border:1px solid var(--line); border-radius:3px; padding:14px 16px;\n  background:var(--paper-2);\n}\n.organ-row .name{font-family:var(--font-display); font-weight:600; font-size:16px;}\n.organ-row .note{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}\n.organ-actions{display:flex; gap:6px;}\n.mini-btn{\n  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;\n  padding:6px 10px; border-radius:2px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--ink-soft);\n}\n.mini-btn:hover{border-color:var(--ink); color:var(--ink);}\n\n/* ---------- ACCORDION PANELS (los 24 módulos / síntomas / síndromes) ---------- */\n/* Las tres secciones-índice comparten el mismo comportamiento: colapsadas\n   por defecto, se despliegan al pulsar \"explorar\" en su encabezado. */\n.accordion-panel{display:none; margin-bottom:48px;}\n.organ-table.open{display:grid;}\n.symptom-index.open{display:flex;}\n.syndrome-list.open{display:grid;}\n\n/* ---------- SYMPTOM INDEX ---------- */\n.symptom-index{\n  flex-wrap:wrap; gap:8px; margin-top:20px;\n}\n.symptom-pill{\n  font-family:var(--font-body); font-size:13px; color:var(--ink-soft); text-align:left;\n  border:1px solid var(--line); padding:6px 13px; border-radius:20px; cursor:pointer;\n  background:var(--paper-2);\n}\n.symptom-pill:hover{border-color:var(--seal); color:var(--seal); background:var(--paper);}\n\n/* ---------- 24 SÍNDROMES LIST ---------- */\n.syndrome-list{\n  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px;\n  margin-top:20px;\n}\n.syndrome-row{\n  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;\n  border:1px solid var(--line); border-radius:3px; padding:14px 16px 14px 20px;\n  background:var(--paper-2); cursor:pointer; position:relative; overflow:hidden;\n  transition:border-color .15s, transform .15s;\n}\n.syndrome-row:hover{border-color:var(--ink); transform:translateY(-1px);}\n.syndrome-row::before{\n  content:\"\"; position:absolute; left:0; top:0; bottom:0; width:4px;\n  background:var(--srcolor,var(--seal));\n}\n.syndrome-row .sr-name{font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1.3; margin-bottom:6px;}\n.syndrome-row .sr-note{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);}\n.syndrome-row .rc-type{flex:none; margin-top:2px;}\n.sr-related-label{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); opacity:.75; margin-top:9px;}\n.sr-related{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;}\n.sr-related-pill{\n  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em;\n  color:var(--ink-soft); border:1px dashed var(--line); padding:3px 8px; border-radius:20px;\n}\n\n/* ---------- DETAIL MODAL ---------- */\n.overlay{\n  position:fixed; inset:0; background:rgba(20,18,14,.55); z-index:100;\n  display:flex; align-items:flex-start; justify-content:center;\n  padding:40px 20px; overflow-y:auto;\n}\n.detail{\n  background:var(--paper); max-width:820px; width:100%; border-radius:4px;\n  border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.35);\n  animation:rise .25s ease-out;\n}\n@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}\n\n.detail-head{\n  padding:32px 36px 22px;\n  border-bottom:1px solid var(--line);\n  position:relative;\n  background:linear-gradient(180deg, var(--paper-2), var(--paper));\n}\n.detail-close{\n  position:absolute; top:20px; right:24px;\n  background:none; border:none; font-size:22px; color:var(--ink-soft); cursor:pointer; line-height:1;\n}\n.detail-close:hover{color:var(--seal);}\n.detail-kicker{\n  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);\n  margin-bottom:8px;\n}\n.detail-title{font-family:var(--font-display); font-weight:600; font-size:32px; margin:0 0 6px;}\n.detail-title .type-tag{\n  font-size:14px; vertical-align:middle; margin-left:12px;\n  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em;\n  padding:4px 10px; border-radius:20px;\n}\n.type-tag.tonificar{background:rgba(62,107,82,.15); color:var(--madera);}\n.type-tag.dispersar{background:rgba(178,58,46,.15); color:var(--seal);}\n.detail-sub{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);}\n\n.detail-body{padding:30px 36px 40px;}\n.detail-section{margin-bottom:32px;}\n.detail-section h3{\n  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;\n  color:var(--seal); margin:0 0 14px;\n  display:flex; align-items:center; gap:10px;\n}\n.detail-section h3::after{content:\"\"; flex:1; height:1px; background:var(--line);}\n\n/* staff visualization */\n.staff-wrap{padding:26px 10px 10px; overflow-x:auto;}\n.staff-svg{display:block; margin:0 auto;}\n.staff-legend{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:16px;}\n.staff-legend span{\n  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);\n  display:flex; align-items:center; gap:6px;\n}\n.staff-legend .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}\n\n.point-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}\n.point-card{\n  border:1px solid var(--line); border-radius:3px; padding:14px 16px;\n  background:var(--paper-2); position:relative;\n}\n.point-card.principal{border-color:var(--seal); background:rgba(178,58,46,.06);}\n.point-card .pc-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}\n.point-card .pc-code{font-family:var(--font-mono); font-weight:600; font-size:15px;}\n.point-card .pc-pos{\n  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;\n  padding:2px 7px; border-radius:20px; color:#fff;\n}\n.point-card .pc-hanzi{font-size:15px; color:var(--ink-soft); margin-bottom:2px;}\n.point-card .pc-trans{font-style:italic; font-size:13px; color:var(--ink-soft); margin-bottom:8px;}\n.point-card .pc-funcs{list-style:none; margin:0; padding:0; font-size:13px;}\n.point-card .pc-funcs li{padding:2px 0 2px 14px; position:relative;}\n.point-card .pc-funcs li::before{content:\"—\"; position:absolute; left:0; color:var(--ink-soft);}\n.point-card .pc-badge{\n  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--seal);\n  letter-spacing:.06em; margin-top:8px;\n}\n\n.prose{font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--ink);}\n.tag-list{display:flex; flex-wrap:wrap; gap:8px;}\n.tag-pill{\n  font-size:13px; border:1px solid var(--line); border-radius:20px; padding:6px 13px;\n  background:var(--paper-2);\n}\n.tag-pill.excess{border-color:rgba(178,58,46,.4);}\n\n.integrative{\n  background:var(--paper-2); border-left:3px solid var(--seal);\n  padding:18px 20px; border-radius:0 3px 3px 0;\n  font-family:var(--font-body); font-size:15px; line-height:1.7;\n}\n.integrative b{color:var(--seal);}\n\nfooter.appfoot{\n  margin-top:60px; padding-top:24px; border-top:1px solid var(--line);\n  font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);\n  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;\n}\n\n@media (max-width:640px){\n  header.hero{padding:38px 0 26px;}\n  .detail-head, .detail-body{padding-left:22px; padding-right:22px;}\n}\n\n