/* =====================================================================
   XIHU · Medicina Tradicional China
   Mismo lenguaje visual que la web del centro: negro de tinta, oro
   imperial y rojo bermellón, más los colores de los cinco elementos.
   ===================================================================== */

:root {
  --tinta: #14100f;
  --tinta-2: #0d0b0a;
  --tinta-3: #1b1614;
  --oro: #d9a441;
  --oro-claro: #efc463;
  --rojo: #c1272d;
  --papel: #fbf8f2;
  --texto: #e9e4db;
  --texto-suave: #a49c92;
  --linea: rgba(217, 164, 65, .18);
  --linea-fuerte: rgba(217, 164, 65, .34);

  /* Los cinco elementos 五行 */
  --madera: #4e9e52;
  --fuego: #d8382f;
  --tierra: #c99a2e;
  --metal: #9aa3ad;
  --agua: #2f5f96;

  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --chino: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;

  --radio: 14px;
  --alto-barra: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tinta);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--texto);
  background: var(--tinta);
  overflow-x: hidden;
  /* Deja espacio para la barra de abajo, y respeta la zona del iPhone */
  padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
}

/* Fondo: trama de líneas doradas muy tenues, como en la web */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(217,164,65,.055) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(90deg, rgba(217,164,65,.04) 0 1px, transparent 1px 92px);
  animation: trama 90s linear infinite;
}
@keyframes trama {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-92px, -92px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  html { scroll-behavior: auto; }
}

a { color: var(--oro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ====================================================== CABECERA */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: rgba(10, 9, 8, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca img { border-radius: 8px; flex: none; }
.marca span {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .06em;
  line-height: 1.1;
  color: #fff;
}
.marca small {
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: 2px;
}

.btn-instalar {
  flex: none;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  color: #14100f;
  background: linear-gradient(145deg, var(--oro-claro), #c99733);
  box-shadow: 0 6px 18px rgba(217, 164, 65, .4);
}
.btn-instalar:active { transform: scale(.96); }

/* ====================================================== AVISO OFFLINE */
.aviso-offline {
  position: sticky;
  top: 0;
  z-index: 40;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 12px;
  color: #14100f;
  background: var(--oro);
}

/* ====================================================== CONTENIDO */
main { max-width: 880px; margin: 0 auto; padding: 20px 16px 40px; }
.vista { animation: entrar .28s ease both; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: clamp(1.5rem, 5.4vw, 2.05rem);
  line-height: 1.25;
  margin: 6px 0 14px;
  color: #fff;
  letter-spacing: -.01em;
}
h1 .chino {
  display: block;
  font-family: var(--chino);
  font-size: 2.1rem;
  color: var(--oro);
  letter-spacing: .1em;
  line-height: 1;
  margin-bottom: 6px;
}
h2 { font-size: 1.12rem; margin: 0 0 12px; color: var(--oro); letter-spacing: .01em; }
h3 { font-size: .98rem; margin: 20px 0 8px; color: #fff; }
p { margin: 0 0 12px; }

.entrada { font-size: 1.02rem; color: #cdc6bb; }

/* ====================================================== PORTADA */
.portada { text-align: center; padding: 22px 0 26px; }
.portada .chino {
  font-family: var(--chino);
  font-size: 3.4rem;
  color: var(--oro);
  letter-spacing: .16em;
  line-height: 1;
  margin: 0 0 10px;
  text-shadow: 0 0 40px rgba(217, 164, 65, .28);
}
.portada h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.portada .entrada { max-width: 40ch; margin: 0 auto; }

/* ====================================================== REJILLA DE MENÚ */
.rejilla-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 8px 0 26px;
}
.ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .035);
  color: var(--texto);
  text-align: center;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.ficha:hover, .ficha:active {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--linea-fuerte);
  background: rgba(217, 164, 65, .1);
}
.ficha b {
  font-family: var(--chino);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--oro);
  line-height: 1;
}
.ficha span { font-size: .84rem; font-weight: 600; letter-spacing: .01em; }
.ficha--destacada {
  border-color: var(--linea-fuerte);
  background: rgba(217, 164, 65, .09);
}

/* ====================================================== PANELES */
.panel {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .032);
  padding: 20px 18px;
  margin: 0 0 16px;
}
.panel--aviso { border-left: 4px solid var(--oro); background: rgba(217, 164, 65, .07); }
.panel--obra { border-style: dashed; border-color: var(--linea-fuerte); }
.etiqueta-obra {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #14100f;
  background: var(--oro);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 14px;
}
.nota { font-size: .88rem; color: var(--texto-suave); font-style: italic; }

/* ====================================================== LISTAS */
.lista-num, .lista-check, .lista-estado { list-style: none; margin: 0; padding: 0; }
.lista-num li, .lista-check li, .lista-estado li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
}
.lista-num { counter-reset: n; }
.lista-num li { counter-increment: n; }
.lista-num li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 1px;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800;
  color: #14100f;
  background: var(--oro);
}
.lista-num li strong, .lista-check li strong { display: block; color: #fff; }
.lista-num li span { display: block; font-size: .92rem; color: var(--texto-suave); }

.lista-check li::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
  transform: rotate(-45deg);
}
.lista-check li { padding-left: 28px; margin-bottom: 11px; }

.lista-estado li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.lista-estado li.listo::before { background: var(--oro); box-shadow: 0 0 10px rgba(217,164,65,.7); }
.lista-estado li.haciendo::before { background: var(--fuego); box-shadow: 0 0 10px rgba(216,56,47,.6); }
.lista-estado li.falta::before { background: #4a4340; }
.lista-estado li { font-size: .93rem; }

/* ====================================================== TABLAS */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 340px;
}
table.tabla th, table.tabla td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(217, 164, 65, .13);
  vertical-align: top;
}
table.tabla th {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 700;
}
table.tabla td strong { color: #fff; }
table.tabla td span { font-size: .82rem; color: var(--texto-suave); }
table.tabla .c { text-align: center; color: var(--texto-suave); }
table.tabla tbody tr:hover { background: rgba(217, 164, 65, .05); }

/* ====================================================== CINCO ELEMENTOS */
.elementos { display: grid; gap: 14px; }
.elemento {
  border: 1px solid var(--linea);
  border-left: 5px solid var(--gris);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .032);
  padding: 16px 18px;
}
.elemento header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.elemento header b {
  font-family: var(--chino);
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
}
.elemento header h2 { margin: 0; font-size: 1.2rem; color: #fff; }
.elemento header span { font-size: .78rem; color: var(--texto-suave); letter-spacing: .08em; }
.elemento dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: .89rem; }
.elemento dt { color: var(--texto-suave); }
.elemento dd { margin: 0; color: var(--texto); }

.el-madera { border-left-color: var(--madera); }
.el-madera header b { color: var(--madera); }
.el-fuego { border-left-color: var(--fuego); }
.el-fuego header b { color: var(--fuego); }
.el-tierra { border-left-color: var(--tierra); }
.el-tierra header b { color: var(--tierra); }
.el-metal { border-left-color: var(--metal); }
.el-metal header b { color: var(--metal); }
.el-agua { border-left-color: var(--agua); }
.el-agua header b { color: #5b93d6; }

.ciclo {
  font-family: var(--chino);
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--oro);
  text-align: center;
  padding: 14px 8px;
  margin: 6px 0 12px;
  border-radius: 10px;
  background: rgba(217, 164, 65, .07);
  border: 1px solid var(--linea);
}
.ciclo span { color: var(--texto-suave); font-size: 1rem; }

/* ====================================================== TÉCNICAS */
.tecnica-panel { border-left: 4px solid var(--fuego); }
.tecnica-panel .etiqueta {
  font-family: var(--chino);
  font-size: 1.05rem;
  color: var(--oro);
  letter-spacing: .14em;
  margin: 0 0 4px;
}
.tecnica-panel .autor {
  font-size: .82rem;
  color: var(--texto-suave);
  margin-bottom: 12px;
  font-style: italic;
}
.tecnica-panel ul { margin: 0 0 12px; padding-left: 20px; }
.tecnica-panel ul li { margin-bottom: 8px; font-size: .93rem; }

/* ====================================================== VERSIÓN */
.version { text-align: center; font-size: .76rem; color: #6b645c; margin-top: 22px; }

/* ====================================================== BARRA INFERIOR */
.barra {
  /* FIJA: no se mueve al subir ni al bajar la página. */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--alto-barra) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10, 9, 8, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  /* Ya solo hay 5 botones, así que no hace falta desplazarla.
     Se quita el scroll para que no se mueva sola. */
  overflow: hidden;
  touch-action: manipulation;
}
.barra a {
  flex: 1;
  min-width: 0;
  min-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--texto-suave);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 0;
  transition: color .2s ease;
}
.barra a b {
  font-family: var(--chino);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1;
}
.barra a:hover { text-decoration: none; color: var(--texto); }
.barra a.activo { color: var(--oro); }
.barra a.activo b { text-shadow: 0 0 16px rgba(217, 164, 65, .55); }

/* ====================================================== ESCRITORIO */
@media (min-width: 780px) {
  main { padding: 34px 28px 60px; }
  .panel { padding: 26px 26px; }
  .elemento dl { grid-template-columns: 170px 1fr; }
  .barra a { font-size: .7rem; }
  .barra a b { font-size: 1.55rem; }
}

/* Marca de versión para comprobar que no se está viendo una copia vieja.
   Se quita cuando la app esté terminada. */
.version-prueba {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  color: #0d0b0a;
  background: #9fe8b0;
  border-radius: 8px;
  padding: 6px 11px;
  margin: 0 0 8px;
}

/* Rastro de estado del 3D: dice hasta dónde llegó todo. */
.estado3d {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .74rem;
  line-height: 1.5;
  color: #9fe8b0;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(159, 232, 176, .32);
  border-radius: 9px;
  padding: 8px 11px;
  margin: 0 0 14px;
  word-break: break-word;
}

/* =====================================================================
   VISOR DEL CUERPO EN 3D
   ===================================================================== */
.visor {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(217, 164, 65, .09) 0%, transparent 62%),
    linear-gradient(180deg, #191412 0%, #0c0a09 100%);
  overflow: hidden;
  margin-bottom: 14px;
}

.visor__lienzo {
  position: relative;
  width: 100%;
  height: 62vh;
  min-height: 330px;
  max-height: 560px;
  touch-action: none;
  cursor: grab;
}
.visor__lienzo canvas { display: block; width: 100%; height: 100%; }

.tres-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 26px;
  font-size: .92rem;
  color: var(--texto-suave);
  background: rgba(12, 10, 9, .82);
  z-index: 5;
}
.tres-error code {
  display: inline-block;
  margin-top: 8px;
  font-size: .76rem;
  color: #f0b9b9;
  background: rgba(193, 39, 45, .16);
  border: 1px solid rgba(193, 39, 45, .35);
  border-radius: 8px;
  padding: 7px 10px;
  max-width: 90%;
  word-break: break-word;
}

/* Panel de diagnóstico del 3D. Se puede quitar cuando todo funcione. */
.diag3d {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 6;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .66rem;
  line-height: 1.5;
  color: #9fe8b0;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(159, 232, 176, .3);
  border-radius: 7px;
  padding: 5px 8px;
  max-width: calc(100% - 16px);
  pointer-events: none;
  word-break: break-word;
}

/* =====================================================================
   ETIQUETAS DE LOS HITOS ANATÓMICOS
   Se proyectan sobre el cuerpo: tobillo, rodilla, codo, omóplato…
   Son las referencias con las que uno se guía para ubicar un punto.
   ===================================================================== */
.capa-etiquetas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 4;
}
.capa-etiquetas.visible { opacity: 1; }

.etiqueta-hito {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  color: #14100f;
  background: rgba(255, 217, 138, .95);
  border-radius: 6px;
  padding: 3px 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
  transition: opacity .2s ease;
}
.etiqueta-hito b {
  font-family: var(--chino);
  font-weight: 500;
  margin-left: 3px;
  opacity: .75;
}

@media (max-width: 560px) {
  .etiqueta-hito { font-size: .58rem; padding: 2px 6px; }
}

/* --- Botones de la vista --- */
.visor__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 12px;
  border-top: 1px solid var(--linea);
  background: rgba(0, 0, 0, .3);
}
.visor__barra button {
  flex: 1 1 auto;
  min-width: 72px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--texto);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .05);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.visor__barra button:hover { background: rgba(217, 164, 65, .14); border-color: var(--linea-fuerte); }
.visor__barra button:active { transform: scale(.97); }
.visor__barra button.activo {
  color: #14100f;
  background: var(--oro);
  border-color: var(--oro);
}

/* --- Filtro por meridiano --- */
.visor__filtro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 12px;
  background: rgba(0, 0, 0, .3);
}
.visor__filtro label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--texto-suave);
  white-space: nowrap;
}
.visor__filtro select {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: .84rem;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--texto);
  border: 1px solid var(--linea);
  background: #171311;
}

/* --- Ficha del punto elegido --- */
.ficha-punto {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(217, 164, 65, .09), rgba(255, 255, 255, .028));
  padding: 16px 18px;
  margin-bottom: 16px;
  animation: entrar .24s ease both;
}
.ficha-punto__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.ficha-punto__cabeza b {
  font-family: var(--chino);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  flex: none;
}
.ficha-punto__cabeza div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ficha-punto__cabeza strong { font-size: 1.1rem; color: #fff; }
.ficha-punto__cabeza span { font-size: .78rem; color: var(--texto-suave); }
.ficha-punto__cabeza em {
  flex: none;
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}
.ficha-punto dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.ficha-punto dt { color: var(--texto-suave); white-space: nowrap; }
.ficha-punto dd { margin: 0; }
.ficha-punto__cerrar {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--texto);
  border: 1px solid var(--linea-fuerte);
  background: transparent;
}
.ficha-punto__cerrar:hover { background: rgba(217, 164, 65, .14); }

@media (max-width: 430px) {
  .ficha-punto dl { grid-template-columns: 1fr; gap: 2px; }
  .ficha-punto dt { margin-top: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
}

/* --- Leyenda de los elementos --- */
.leyenda { list-style: none; margin: 12px 0 0; padding: 0; font-size: .88rem; }
.leyenda li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.leyenda i {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 9px currentColor;
}

/* =====================================================================
   EL ATLAS
   Las láminas del Atlas de Focks, organizadas por zona del cuerpo.
   ===================================================================== */
.atlas-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.atlas-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 8px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .035);
  color: var(--texto);
  font-family: var(--sans);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.atlas-zona:hover { border-color: var(--linea-fuerte); background: rgba(217, 164, 65, .1); }
.atlas-zona.activo {
  border-color: var(--oro);
  background: rgba(217, 164, 65, .16);
}
.atlas-zona b { font-family: var(--chino); font-size: 1.7rem; font-weight: 500; color: var(--oro); line-height: 1; }
.atlas-zona span { font-size: .82rem; font-weight: 700; }
.atlas-zona small { font-size: .68rem; color: var(--texto-suave); }

.atlas-grupos { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.atlas-grupo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .028);
  color: var(--texto);
  font-family: var(--sans);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.atlas-grupo:hover { background: rgba(217, 164, 65, .1); }
.atlas-grupo.activo { border-color: var(--oro); background: rgba(217, 164, 65, .15); }
.atlas-grupo strong { font-size: .88rem; color: #fff; }
.atlas-grupo small { flex: 1; font-size: .74rem; color: var(--texto-suave); }
.atlas-grupo em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  color: var(--oro);
  white-space: nowrap;
}

.atlas-visor {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: #0c0a09;
  margin-bottom: 16px;
}
.atlas-visor__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--linea);
  background: rgba(0, 0, 0, .35);
}
.atlas-visor__barra button {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 13px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--texto);
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .05);
}
.atlas-visor__barra button:hover { background: rgba(217, 164, 65, .16); border-color: var(--linea-fuerte); }
.atlas-pos {
  flex: 1;
  text-align: center;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .74rem;
  color: var(--texto-suave);
}
.atlas-lienzo {
  max-height: 72vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  place-items: start center;
  background: #14110f;
}
.atlas-lienzo img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
.atlas-lienzo img.acercada { width: 230%; cursor: zoom-out; }
.atlas-aviso {
  padding: 34px 22px;
  text-align: center;
  font-size: .9rem;
  color: var(--texto-suave);
}
.atlas-aviso code {
  display: inline-block;
  margin-top: 8px;
  font-size: .76rem;
  color: #f0b9b9;
  word-break: break-word;
}

@media (max-width: 480px) {
  .atlas-zonas { grid-template-columns: repeat(2, 1fr); }
  .atlas-zona b { font-size: 1.5rem; }
  .atlas-grupo small { display: none; }
}

/* =====================================================================
   LOS MERIDIANOS Y CANALES — cada uno con su numero clasico de puntos
   ===================================================================== */
.mer-total { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.mer-total__caja { display:flex; flex-direction:column; align-items:center; gap:1px; padding:12px 4px;
  border-radius:11px; border:1px solid var(--linea); background:rgba(217,164,65,.07); }
.mer-total__caja b { font-family:var(--chino); font-size:1.5rem; font-weight:700; color:var(--oro); line-height:1; }
.mer-total__caja span { font-size:.64rem; color:var(--texto-suave); text-align:center; }
.mer-grupo { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:22px 0 12px; font-size:1.05rem; color:#fff; }
.mer-grupo b { font-family:var(--chino); font-size:1.5rem; font-weight:500; color:var(--oro); }
.mer-grupo small { font-size:.74rem; color:var(--texto-suave); font-weight:400; }
.mer { border:1px solid var(--linea); border-left:4px solid var(--mc); border-radius:var(--radio);
  background:rgba(255,255,255,.03); padding:14px 16px; margin-bottom:11px; }
.mer__cab { display:flex; align-items:center; gap:11px; margin-bottom:9px; padding-bottom:9px;
  border-bottom:1px solid rgba(217,164,65,.13); }
.mer__chino { font-family:var(--chino); font-size:1.15rem; font-weight:500; color:var(--mc); line-height:1.2; flex:none; max-width:42%; }
.mer__nombre { display:flex; flex-direction:column; flex:1; min-width:0; }
.mer__nombre strong { font-size:1rem; color:#fff; }
.mer__nombre span { font-size:.72rem; color:var(--texto-suave); font-style:italic; }
.mer__puntos { flex:none; display:flex; flex-direction:column; align-items:center; font-style:normal;
  font-family:var(--chino); font-size:1.5rem; font-weight:700; color:var(--mc); line-height:1; }
.mer__puntos small { font-family:var(--sans); font-size:.58rem; color:var(--texto-suave); font-weight:500; }
.mer__nota { font-size:.86rem; color:#cdc6bb; margin:0 0 8px; }
.mer__rec { font-size:.76rem; color:var(--texto-suave); margin:0 0 6px; }
.mer__rec b { color:var(--oro); }
.mer__rec i { font-style:normal; color:var(--mc); opacity:.8; }
.mer__elem { font-size:.74rem; color:var(--texto-suave); margin:0; }
@media (max-width:430px) {
  .mer-total { grid-template-columns:repeat(2,1fr); }
  .mer__chino { font-size:1rem; max-width:100%; }
  .mer__cab { flex-wrap:wrap; }
}

/* ============ I CHING · TRIGRAMAS Y HEXAGRAMAS ============ */
.ich-trigramas { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:11px; margin-bottom:8px; }
.trig { display:flex; gap:12px; padding:14px; border-radius:var(--radio); border:1px solid var(--linea);
  border-left:4px solid var(--tc); background:rgba(255,255,255,.03); }
.trig__simbolo { font-size:2.6rem; line-height:1; color:var(--tc); flex:none; }
.trig__cuerpo { flex:1; min-width:0; }
.trig__cuerpo strong { display:block; font-family:var(--chino); font-size:1.15rem; color:#fff; }
.trig__cuerpo > span { display:block; font-size:.86rem; color:var(--oro); margin-bottom:7px; }
.trig dl { display:grid; grid-template-columns:auto 1fr; gap:2px 9px; margin:0; font-size:.74rem; }
.trig dt { color:var(--texto-suave); }
.trig dd { margin:0; color:#d8d2c8; }
.ich-pares { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.par { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; padding:12px 10px;
  border-radius:11px; border:1px solid var(--linea); background:rgba(217,164,65,.06); }
.par b { font-family:var(--chino); font-size:1.15rem; }
.par i { font-style:normal; color:var(--oro); font-size:1.1rem; }
.par small { width:100%; text-align:center; font-size:.68rem; color:var(--texto-suave); }
.ich-hex { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px; }
.hex { display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 5px; border-radius:9px;
  border:1px solid var(--linea); background:rgba(255,255,255,.028); text-align:center; }
.hex em { font-style:normal; font-size:.6rem; color:var(--texto-suave); font-family:ui-monospace,monospace; }
.hex b { font-family:var(--chino); font-size:1.05rem; color:var(--oro); line-height:1.15; }
.hex span { font-size:.62rem; color:#cdc6bb; }
.hex small { font-size:.58rem; color:var(--texto-suave); line-height:1.2; }
.bagua-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px; }
table.bagua { font-size:.76rem; min-width:520px; }
table.bagua th { font-family:var(--chino); font-size:1rem; text-align:center; padding:8px 6px; }
table.bagua td { text-align:center; font-family:ui-monospace,monospace; font-size:.74rem; padding:7px 5px; color:var(--oro); }
table.bagua tbody th { color:var(--texto-suave); font-family:var(--sans); font-size:.7rem; }

/* ============ NOMBRES DE LOS PUNTOS SOBRE EL 3D ============ */
.capa-nombres { position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0;
  transition:opacity .25s ease; z-index:5; }
.capa-nombres.visible { opacity:1; }
.etq-punto { position:absolute; top:0; left:0; white-space:nowrap; font-family:var(--chino);
  font-size:.7rem; font-weight:700; line-height:1.2; color:#fff; background:rgba(10,10,12,.86);
  border:1px solid var(--pc); border-radius:5px; padding:2px 6px;
  box-shadow:0 2px 9px rgba(0,0,0,.65); transition:opacity .15s ease; }
.etq-punto::after { content:''; position:absolute; left:50%; bottom:-5px; width:1px; height:5px;
  background:var(--pc); }

/* ============ FICHA FLOTANTE SOBRE EL VISOR ============ */
.ficha-flotante { position:absolute; left:10px; right:10px; bottom:10px; z-index:8;
  background:rgba(14,12,11,.96); border:1px solid var(--linea-fuerte); border-radius:12px;
  padding:13px 15px; box-shadow:0 10px 32px rgba(0,0,0,.7); backdrop-filter:blur(6px);
  /* La ficha no puede tapar el cuerpo entero: como mucho, la mitad del
     visor, y por dentro se desplaza con el dedo. */
  max-height:58%; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; }

/* El botón grande de cerrar, para el dedo */
.ff-cerrar-abajo { border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05);
  color:var(--texto-suave); border-radius:8px; padding:6px 12px; font:inherit;
  font-size:.75rem; font-weight:700; cursor:pointer; }
.ff-cerrar-abajo:hover { color:#fff; border-color:var(--oro); }
.ff-cerrar { position:absolute; top:6px; right:9px; border:0; background:none; color:var(--texto-suave);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 6px; }
.ff-cerrar:hover { color:#fff; }
.ff-cab { display:flex; align-items:center; gap:11px; margin-bottom:7px; }
.ff-cab b { font-family:var(--chino); font-size:1.7rem; font-weight:500; line-height:1; }
.ff-cab div { display:flex; flex-direction:column; }
.ff-cab strong { font-size:1rem; color:#fff; }
.ff-cab span { font-size:.72rem; color:var(--texto-suave); }
.ff-para { font-size:.85rem; color:#d8d2c8; margin:0 0 9px; }
.ff-pie { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.72rem; color:var(--texto-suave); }
.ff-atlas { color:var(--oro); font-weight:700; text-decoration:none; white-space:nowrap; }
.ff-atlas:hover { text-decoration:underline; }

/* =====================================================================
   LA FICHA DEL PUNTO · versión completa
   Muestra el meridiano, la categoría, la LOCALIZACIÓN ANATÓMICA,
   cómo se puntura y para qué sirve.
   ===================================================================== */
.ff-nombre { margin:0 0 9px; font-size:.92rem; color:#f0e9dd; font-weight:600; }
.ff-fila { margin:0 0 5px; font-size:.76rem; color:#cdc6bb; line-height:1.5; }
.ff-fila b { color:var(--oro-claro); margin-right:6px; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.04em; }
.ff-bloque { margin:9px 0 0; padding:9px 11px; border-radius:8px;
  background:rgba(0,0,0,.24); border-left:2px solid var(--oro); }
.ff-bloque b { display:block; margin-bottom:5px; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--oro-claro); }
.ff-bloque p { margin:0; font-size:.76rem; color:#d8d1c6; line-height:1.65; }
.ff-lista { margin:0; padding-left:16px; }
.ff-lista li { font-size:.74rem; color:#cdc6bb; line-height:1.55; margin-bottom:3px; }
.ff-nota { margin:9px 0 0; font-size:.7rem; color:#c9a86a; line-height:1.55; }
.ff-nota--ok { color:#8fc98f; }

/* El panel de controles del visor */
.visor__ayuda { margin:9px 3px 0; font-size:.7rem; color:var(--texto-suave);
  line-height:1.5; }
.visor__aislar { padding:7px 14px; border-radius:8px; border:1px solid var(--oro);
  background:rgba(217,164,65,.12); color:var(--oro-claro); font-size:.76rem;
  font-weight:600; cursor:pointer; transition:background .15s; }
.visor__aislar:hover { background:rgba(217,164,65,.25); }
.visor__aislar.activo { background:var(--oro); color:#1b1710; }
@media (max-width:520px) { .etq-punto { font-size:.62rem; padding:1px 5px; } }

/* ============ EL SISTEMA DEL DR. CHAO CHEN ============ */
.cc-pares { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.cc-par { padding:14px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.cc-par__num { display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:8px; font-family:var(--chino); }
.cc-par__num b { font-size:1.5rem; color:var(--oro); font-weight:700; }
.cc-par__num i { font-style:normal; color:var(--texto-suave); font-size:.9rem; }
.cc-par__num em { font-style:normal; font-size:1.5rem; color:#fff; font-weight:700; }
.cc-par__tri { text-align:center; font-family:var(--chino); font-size:1.15rem; color:#fff; margin-bottom:4px; }
.cc-par__tri i { font-style:normal; color:var(--oro); }
.cc-par__eje { text-align:center; font-size:.8rem; color:var(--oro); margin:0 0 4px; }
.cc-par__can { text-align:center; font-size:.72rem; color:var(--texto-suave); margin:0; }

.cc-canales { display:flex; flex-direction:column; gap:8px; }
.cc-canal { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--linea); border-left:4px solid var(--ccc); background:rgba(255,255,255,.03); }
.cc-canal__sim { font-size:2rem; line-height:1; color:var(--ccc); flex:none; }
.cc-canal__cuerpo { flex:1; min-width:0; }
.cc-canal__cuerpo strong { display:block; font-family:var(--chino); font-size:1.05rem; color:#fff; }
.cc-canal__cuerpo > span { display:block; font-size:.7rem; color:var(--texto-suave); }
.cc-canal__nota { font-size:.76rem; color:#cdc6bb; margin:4px 0 0; }
.cc-canal__bal { flex:none; display:flex; flex-direction:column; align-items:center; }
.cc-canal__bal small { font-size:.58rem; color:var(--texto-suave); }
.cc-canal__bal b { font-family:var(--chino); font-size:1.3rem; color:var(--oro); line-height:1; }

.cc-espejos { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px; }
.cc-espejo { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px;
  border-radius:11px; border:1px solid var(--linea); background:rgba(217,164,65,.07); font-size:.9rem; color:#fff; }
.cc-espejo i { font-style:normal; color:var(--oro); }

.cc-pasos { counter-reset:paso; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.cc-pasos li { counter-increment:paso; position:relative; padding:12px 14px 12px 48px;
  border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); font-size:.86rem; color:#d8d2c8; }
.cc-pasos li::before { content:counter(paso); position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  background:var(--rojo); color:#fff; font-weight:700; font-size:.8rem; }

.cc-texto p { font-size:.84rem; color:#cdc6bb; margin:0 0 9px; }
.cc-texto__mas summary { cursor:pointer; color:var(--oro); font-weight:700; font-size:.85rem; padding:10px 0; }
.cc-texto__mas p { margin-top:9px; }

@media (max-width:480px) {
  .cc-canal { flex-wrap:wrap; }
  .cc-canal__nota { width:100%; }
}

/* ============ BALANCE METHOD · DR. RICHARD TAN ============ */
.rt-pasos { display:flex; flex-direction:column; gap:10px; }
.rt-paso { display:flex; gap:14px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--linea); border-left:4px solid var(--oro); background:rgba(255,255,255,.03); }
.rt-paso > b { font-family:var(--chino); font-size:1.8rem; color:var(--oro); line-height:1; flex:none; }
.rt-paso strong { display:block; font-size:1rem; color:#fff; margin-bottom:3px; }
.rt-paso p { font-size:.84rem; color:#cdc6bb; margin:0 0 7px; }
.rt-paso ul { margin:0; padding-left:18px; font-size:.82rem; color:#d8d2c8; }
.rt-paso li { margin-bottom:3px; }

.rt-tabla { font-size:.76rem; }
.rt-tabla th { font-size:.72rem; }
.rt-tabla td, .rt-tabla th { padding:7px 8px; }
.rt-nota { font-size:.78rem; color:var(--texto-suave); margin:9px 0 0; font-style:italic; }
.rt-aviso { font-size:.8rem; color:#f0b9b9; margin:9px 0 0; }
.rt-sub { font-size:.95rem; color:var(--oro); margin:18px 0 9px; }

.rt-pulso { padding:13px 15px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:9px; }
.rt-pulso header { display:flex; align-items:baseline; gap:9px; margin-bottom:5px; }
.rt-pulso header b { font-family:var(--chino); font-size:1.15rem; color:var(--oro); }
.rt-pulso header span { font-size:.72rem; color:var(--texto-suave); }
.rt-pulso strong { display:block; font-size:.86rem; color:#fff; margin-bottom:3px; }
.rt-pulso p { font-size:.8rem; color:#cdc6bb; margin:0; }

.rt-global__item { padding:13px 15px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(217,164,65,.07); margin-bottom:9px; }
.rt-global__item strong { display:block; font-size:.92rem; color:#fff; margin-bottom:3px; }
.rt-global__item span { font-size:.8rem; color:var(--texto-suave); }

@media (max-width:480px) { .rt-tabla { font-size:.68rem; } .rt-tabla td, .rt-tabla th { padding:5px 5px; } }

/* =====================================================================
   ACUPUNTURA TUNG 董氏奇穴
   ===================================================================== */

.tg-tecnicas { display:flex; flex-direction:column; gap:10px; }
.tg-tecnica { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tg-tecnica header { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.tg-tecnica header b { font-family:var(--chino); font-size:1.35rem; color:var(--oro); line-height:1; }
.tg-tecnica header strong { font-size:.96rem; color:#fff; flex:1; }
.tg-tecnica header em { font-style:normal; font-size:.7rem; font-weight:700; padding:3px 8px;
  border-radius:20px; background:rgba(217,164,65,.16); color:var(--oro-claro); }
.tg-tecnica p { font-size:.82rem; color:#cdc6bb; margin:0 0 7px; }
.tg-tecnica dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:.79rem; }
.tg-tecnica dt { color:var(--oro); font-weight:700; white-space:nowrap; }
.tg-tecnica dd { margin:0; color:#cdc6bb; }

.tg-grupos { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:9px; }
.tg-grupo { padding:13px 12px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); text-align:center; cursor:pointer; }
.tg-grupo:hover { border-color:var(--linea-fuerte); background:rgba(217,164,65,.1); }
.tg-grupo b { display:block; font-size:1.5rem; color:var(--oro); line-height:1.1; font-weight:700; }
.tg-grupo span { display:block; font-size:.76rem; font-weight:700; color:#fff; margin-top:3px; }
.tg-grupo small { display:block; font-size:.67rem; color:var(--texto-suave); margin-top:2px; }
.tg-grupo em { display:block; font-style:normal; font-size:.66rem; color:var(--oro-claro); margin-top:5px; }

.tg-corresp { display:flex; flex-direction:column; gap:9px; }
.tg-corresp__item { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--oro); background:rgba(217,164,65,.06); }
.tg-corresp__item strong { display:block; font-size:.9rem; color:#fff; margin-bottom:5px; }
.tg-corresp__item p { font-size:.8rem; color:#cdc6bb; margin:0 0 6px; }
.tg-corresp__item em { font-style:normal; display:block; font-size:.78rem; color:var(--oro-claro);
  padding-top:6px; border-top:1px dashed var(--linea); }

.tg-sindromes { display:flex; flex-direction:column; gap:9px; }
.tg-sindrome { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tg-sindrome header { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.tg-sindrome header strong { font-size:.92rem; color:#fff; }
.tg-sindrome header em { font-style:italic; font-size:.74rem; color:var(--oro); }
.tg-sindrome p { font-size:.8rem; color:#cdc6bb; margin:0 0 8px; }
.tg-sindrome__puntos { display:flex; flex-wrap:wrap; gap:5px; }
.tg-chip { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px;
  background:rgba(217,164,65,.14); color:var(--oro-claro); border:1px solid var(--linea); cursor:pointer; }
.tg-chip:hover { background:rgba(217,164,65,.3); }

.tg-buscador { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.tg-buscador input { flex:1; padding:11px 14px; border-radius:11px; font-size:.9rem;
  border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05); color:var(--texto);
  font-family:inherit; min-width:0; }
.tg-buscador input:focus { outline:none; border-color:var(--oro); background:rgba(217,164,65,.09); }
.tg-buscador input::placeholder { color:var(--texto-suave); }
.tg-cuenta { font-size:.74rem; color:var(--texto-suave); white-space:nowrap; }

.tg-puntos { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.tg-punto { padding:10px 8px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:center; }
.tg-punto:hover { border-color:var(--oro); background:rgba(217,164,65,.12); }
.tg-punto b { display:block; font-size:.9rem; color:var(--oro-claro); font-weight:700; }
.tg-punto span { display:block; font-size:.66rem; color:var(--texto-suave); margin-top:2px; }
.tg-punto i { display:block; font-style:normal; font-size:.62rem; color:var(--texto-suave);
  margin-top:3px; opacity:.75; }
.tg-punto--dm b { color:var(--fuego); }
/* Puntos que el terapeuta escribió a mano en la ficha del paciente */
.tg-punto--mio { border-color:var(--oro); background:rgba(217,164,65,.18);
  box-shadow:0 0 0 1px var(--oro) inset; }
.tg-punto--mio b { color:var(--oro); }
.tg-punto--mio::after { content:'★ en su plan'; display:block; font-size:.58rem;
  color:var(--oro-claro); margin-top:3px; letter-spacing:.02em; }

.tg-ficha { margin-top:14px; padding:15px; border-radius:13px;
  border:1px solid var(--linea-fuerte); background:rgba(217,164,65,.08); }
.tg-ficha__cab { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.tg-ficha__cab b { font-family:var(--chino); font-size:1.5rem; color:var(--oro); }
.tg-ficha__cab div { flex:1; min-width:0; }
.tg-ficha__cab strong { display:block; font-size:1rem; color:#fff; }
.tg-ficha__cab span { font-size:.74rem; color:var(--texto-suave); }
.tg-ficha__cerrar { padding:6px 11px; border-radius:9px; border:1px solid var(--linea);
  background:transparent; color:var(--texto-suave); cursor:pointer; font-family:inherit; font-size:.78rem; }
.tg-ficha__cerrar:hover { background:rgba(217,164,65,.16); color:#fff; }
.tg-ficha img { width:100%; border-radius:10px; background:#fff; display:block; margin-bottom:11px; }
.tg-ficha__usos { display:flex; flex-wrap:wrap; gap:5px; }
.tg-ficha__usos span { font-size:.7rem; padding:3px 8px; border-radius:6px;
  background:rgba(255,255,255,.06); color:#cdc6bb; }
.tg-ficha__titulo { font-size:.76rem; color:var(--oro); font-weight:700; margin:12px 0 7px; }

.tg-sintomas { display:flex; flex-direction:column; gap:8px; }
.tg-sintoma { border:1px solid var(--linea); border-radius:11px; background:rgba(255,255,255,.03); overflow:hidden; }
.tg-sintoma summary { padding:12px 14px; cursor:pointer; display:flex; align-items:center; gap:9px;
  font-size:.86rem; font-weight:600; color:#fff; list-style:none; }
.tg-sintoma summary::-webkit-details-marker { display:none; }
.tg-sintoma summary:hover { background:rgba(217,164,65,.08); }
.tg-sintoma summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.tg-sintoma[open] summary::before { transform:rotate(90deg); }
.tg-sintoma summary em { font-style:normal; margin-left:auto; font-size:.68rem; color:var(--texto-suave);
  font-weight:400; white-space:nowrap; }
.tg-sintoma__cuerpo { padding:0 14px 14px; }
.tg-sintoma__puntos { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
.tg-sintoma__recetas { display:flex; flex-direction:column; gap:6px; }
.tg-receta { padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.28);
  border-left:3px solid var(--oro); }
.tg-receta b { font-size:.7rem; color:var(--oro); font-weight:700; margin-right:7px; }
.tg-receta code { font-size:.78rem; color:#e2ddd3; font-family:ui-monospace,monospace;
  word-break:break-word; line-height:1.5; }

.tg-autores { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }
.tg-autor { padding:13px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tg-autor b { display:block; font-size:1.25rem; color:var(--oro); font-weight:700; }
.tg-autor strong { display:block; font-size:.78rem; color:#fff; margin:3px 0; }
.tg-autor span { display:block; font-size:.72rem; color:var(--texto-suave); }
.tg-autor em { display:block; font-style:normal; font-size:.95rem; color:var(--oro-claro);
  font-weight:700; margin-top:5px; }

.tg-abrev { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.tg-abrev__item { padding:10px 12px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tg-abrev__item b { font-family:ui-monospace,monospace; font-size:.95rem; color:var(--oro-claro); }
.tg-abrev__item span { display:block; font-size:.74rem; color:#cdc6bb; margin-top:3px; }
.tg-fuente { font-size:.8rem; color:#cdc6bb; line-height:1.6; }
.tg-fuente code { font-size:.74rem; color:var(--texto-suave); }

@media (max-width:480px) {
  .tg-grupos { grid-template-columns:repeat(2,1fr); }
  .tg-puntos { grid-template-columns:repeat(2,1fr); }
  .tg-tecnica dl { grid-template-columns:1fr; gap:2px; }
  .tg-tecnica dt { margin-top:5px; }
}

/* =====================================================================
   FENG SHUI 風水
   ===================================================================== */

.fs-nota { font-size:.77rem; color:var(--texto-suave); margin:10px 0 0; line-height:1.6; }
.fs-nota strong { color:var(--oro-claro); }

/* --- calculadoras --- */
.fs-calcf { padding:15px; border-radius:13px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:14px; }
.fs-calcf__campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px; margin-bottom:12px; }
.fs-calcf__campos label { display:flex; flex-direction:column; gap:5px; }
.fs-calcf__campos span { font-size:.72rem; color:var(--oro); font-weight:700; }
.fs-calcf__campos input, .fs-calcf__campos select {
  padding:10px 11px; border-radius:10px; font-size:.92rem; font-family:inherit;
  border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05); color:var(--texto); width:100%; }
.fs-calcf__campos input:focus, .fs-calcf__campos select:focus {
  outline:none; border-color:var(--oro); background:rgba(217,164,65,.1); }
.fs-calcf__campos select option { background:var(--tinta-3); color:var(--texto); }
.fs-boton { width:100%; padding:13px; border-radius:11px; border:1px solid var(--oro);
  background:rgba(217,164,65,.16); color:var(--oro-claro); font-family:inherit;
  font-size:.9rem; font-weight:700; cursor:pointer; }
.fs-boton:hover { background:rgba(217,164,65,.28); }

/* --- resultado Kua --- */
.kua-resultado { padding:16px; border-radius:13px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:14px; }
.kua-cabeza { display:flex; align-items:center; gap:13px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--linea); }
.kua-cabeza b { font-size:2.4rem; color:var(--oro); line-height:1; font-weight:700; }
.kua-cabeza div { flex:1; }
.kua-cabeza strong { display:block; font-size:1.05rem; color:#fff; }
.kua-cabeza span { font-size:.78rem; color:var(--texto-suave); }
.kua-buenas, .kua-malas { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.kua-dir { padding:11px; border-radius:10px; border:1px solid var(--linea); background:rgba(255,255,255,.04); }
.kua-dir--buena { border-left:3px solid var(--madera); }
.kua-dir--mala { border-left:3px solid var(--rojo); }
.kua-dir b { display:block; font-size:.86rem; color:#fff; margin-bottom:2px; }
.kua-dir span { display:block; font-size:.7rem; color:var(--texto-suave); }
.kua-dir em { display:block; font-style:normal; font-size:.7rem; color:var(--oro-claro); margin-top:4px; }
.kua-titulo { font-size:.78rem; color:var(--oro); font-weight:700; margin:12px 0 7px; }

/* --- rueda del bagua --- */
.fs-rueda-caja { display:flex; justify-content:center; margin-bottom:14px; }
.fs-rueda { position:relative; width:min(340px,86vw); height:min(340px,86vw); }
.fs-rueda__centro { position:absolute; inset:36%; border-radius:50%;
  border:2px solid var(--oro); background:rgba(217,164,65,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.fs-rueda__centro b { font-family:var(--chino); font-size:1rem; color:var(--oro); }
.fs-rueda__centro span { font-size:.6rem; color:var(--texto-suave); }
.fs-rueda-sector { position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--linea-fuerte); background:rgba(0,0,0,.2); }
.fs-trig { position:absolute; width:23%; height:23%; border-radius:9px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--linea); background:rgba(20,16,15,.92); padding:3px; }
.fs-trig:hover, .fs-trig.activo { border-color:var(--oro); background:rgba(217,164,65,.22); }
.fs-trig b { font-size:1.15rem; color:var(--oro); line-height:1; }
.fs-trig span { font-size:.55rem; color:var(--texto-suave); text-align:center; line-height:1.15; }
.fs-trig i { font-style:normal; font-size:.52rem; color:var(--oro-claro); }

.fs-trigrama { padding:16px; border-radius:13px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:14px; }
.fs-trigrama__cab { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.fs-trigrama__cab > b { font-size:2rem; color:var(--oro); line-height:1; }
.fs-trigrama__cab div { flex:1; }
.fs-trigrama__cab strong { display:block; font-size:1.02rem; color:#fff; }
.fs-trigrama__cab span { font-size:.76rem; color:var(--texto-suave); }
.fs-datos { display:grid; grid-template-columns:auto 1fr; gap:6px 13px; font-size:.83rem; margin:0 0 12px; }
.fs-datos dt { color:var(--oro); font-weight:700; white-space:nowrap; }
.fs-datos dd { margin:0; color:#cdc6bb; }
.fs-cerrar { padding:6px 11px; border-radius:9px; border:1px solid var(--linea);
  background:transparent; color:var(--texto-suave); cursor:pointer; font-family:inherit; font-size:.76rem; }
.fs-cerrar:hover { background:rgba(217,164,65,.16); color:#fff; }

/* --- lo shu --- */
.fs-loshucaja { display:flex; justify-content:center; margin-bottom:10px; }
.fs-loshu { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:min(300px,84vw); }
.fs-loshucelda { aspect-ratio:1; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.04); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:5px; }
.fs-loshucelda b { font-size:1.7rem; line-height:1; font-weight:700; }
.fs-loshucelda span { font-size:.62rem; color:var(--texto-suave); margin-top:3px; text-align:center; line-height:1.2; }
.fs-loshucelda i { font-style:normal; font-size:1rem; margin-top:2px; }
.fs-loshucelda--centro { border-color:var(--oro); background:rgba(217,164,65,.16); }

/* --- 24 montañas --- */
.fs-montanas { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:6px; margin-bottom:12px; }
.fs-mont { padding:8px 4px; border-radius:9px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:center; }
.fs-mont:hover { border-color:var(--oro); background:rgba(217,164,65,.14); }
.fs-mont b { display:block; font-size:.88rem; color:var(--oro-claro); }
.fs-mont span { display:block; font-size:.58rem; color:var(--texto-suave); margin-top:2px; }
.fs-mont i { display:block; font-style:normal; font-size:.55rem; margin-top:2px; }
.fs-montana-detalle { padding:14px; border-radius:12px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:12px; font-size:.84rem; }
.fs-montana-detalle strong { color:var(--oro); }

/* --- elementos y ciclos --- */
.fs-ciclos { display:grid; grid-template-columns:1fr; gap:9px; margin-bottom:16px; }
.fs-ciclo { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--oro); background:rgba(217,164,65,.06); }
.fs-ciclo strong { display:block; font-size:.88rem; color:#fff; margin-bottom:5px; }
.fs-ciclo p { font-size:.8rem; color:#cdc6bb; margin:0 0 7px; line-height:1.55; }
.fs-ciclo code { display:block; font-size:.78rem; color:var(--oro-claro);
  background:rgba(0,0,0,.3); padding:8px 10px; border-radius:8px; line-height:1.6;
  font-family:ui-monospace,monospace; word-break:break-word; }
.fs-elementos { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; }
.fs-elem { padding:12px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.fs-elem b { display:flex; align-items:center; gap:7px; font-size:.92rem; color:#fff; margin-bottom:6px; }
.fs-elem b i { font-style:normal; font-family:var(--chino); font-size:1.1rem; }
.fs-elem span { display:block; font-size:.72rem; color:var(--texto-suave); line-height:1.5; }
.fs-elem em { display:block; font-style:normal; font-size:.7rem; color:var(--oro-claro); margin-top:5px; }

/* --- ba zhai --- */
.fs-bazhai { display:flex; flex-direction:column; gap:9px; }
.fs-grupo { padding:13px 15px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.fs-grupo strong { display:block; font-size:.9rem; color:#fff; margin-bottom:6px; }
.fs-grupo span { display:block; font-size:.78rem; color:var(--texto-suave); }
.fs-kua-lista { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fs-kua-chip { font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:20px;
  background:rgba(217,164,65,.16); color:var(--oro-claro); border:1px solid var(--linea); }

.fs-activacion { display:flex; flex-direction:column; gap:9px; }
.fs-act { padding:13px 15px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.fs-act--buena { border-left:3px solid var(--madera); }
.fs-act--mala { border-left:3px solid var(--rojo); }
.fs-act header { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fs-act header strong { font-size:.9rem; color:#fff; }
.fs-act header em { font-style:normal; font-size:.72rem; color:var(--oro); }
.fs-act header i { font-style:normal; font-family:var(--chino); color:var(--oro-claro); font-size:.85rem; }
.fs-act p { font-size:.8rem; color:#cdc6bb; margin:0 0 5px; line-height:1.55; }
.fs-act .remedio { padding:8px 10px; border-radius:8px; background:rgba(0,0,0,.28);
  font-size:.79rem; color:var(--texto); line-height:1.55; }

/* --- estrellas --- */
.fs-estrellas { display:flex; flex-direction:column; gap:9px; }
.fs-estrella { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); display:grid; grid-template-columns:auto 1fr; gap:13px; }
.fs-estrella__num { width:46px; height:46px; border-radius:11px; display:flex;
  flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--linea-fuerte); }
.fs-estrella__num b { font-size:1.35rem; line-height:1; font-weight:700; }
.fs-estrella__num span { font-size:.52rem; color:var(--texto-suave); }
.fs-estrella__info strong { display:block; font-size:.9rem; color:#fff; margin-bottom:2px; }
.fs-estrella__info em { font-style:normal; font-size:.72rem; color:var(--oro); }
.fs-estrella__info p { font-size:.78rem; color:#cdc6bb; margin:6px 0 0; line-height:1.5; }
.fs-estrella__info span { display:block; font-size:.73rem; color:var(--texto-suave); margin-top:4px; }
.fs-estrella--buena { border-left:3px solid var(--madera); }
.fs-estrella--mala { border-left:3px solid var(--rojo); }
.fs-estrella--peor { border-left:3px solid #8b1a1a; background:rgba(139,26,26,.1); }

/* --- escuela de la forma --- */
.fs-forma { display:flex; flex-direction:column; gap:10px; }
.fs-animales { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:9px; }
.fs-animal { padding:13px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); text-align:center; }
.fs-animal b { display:block; font-family:var(--chino); font-size:1.3rem; color:var(--oro); }
.fs-animal strong { display:block; font-size:.84rem; color:#fff; margin:5px 0 3px; }
.fs-animal span { display:block; font-size:.7rem; color:var(--texto-suave); }
.fs-animal p { font-size:.74rem; color:#cdc6bb; margin:6px 0 0; line-height:1.5; }
.fs-panel { padding:13px 15px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.fs-panel strong { display:block; font-size:.9rem; color:#fff; margin-bottom:6px; }
.fs-panel p { font-size:.8rem; color:#cdc6bb; margin:0 0 8px; line-height:1.55; }
.fs-panel ul { margin:0; padding-left:18px; }
.fs-panel li { font-size:.79rem; color:#cdc6bb; margin-bottom:4px; line-height:1.5; }

.fs-areas { display:flex; flex-direction:column; gap:8px; }
.fs-area { border:1px solid var(--linea); border-radius:11px; background:rgba(255,255,255,.03); overflow:hidden; }
.fs-area summary { padding:12px 14px; cursor:pointer; font-size:.86rem; font-weight:600; color:#fff; list-style:none; display:flex; gap:9px; }
.fs-area summary::-webkit-details-marker { display:none; }
.fs-area summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.fs-area[open] summary::before { transform:rotate(90deg); }
.fs-area summary:hover { background:rgba(217,164,65,.08); }
.fs-area__cuerpo { padding:0 14px 13px; }
.fs-area__cuerpo p { font-size:.79rem; color:#cdc6bb; margin:0 0 8px; }
.fs-area__cuerpo ul { margin:0; padding-left:18px; }
.fs-area__cuerpo li { font-size:.78rem; color:#cdc6bb; margin-bottom:4px; line-height:1.5; }

/* --- BAZI --- */
.fs-bazi-intro { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.bz-resultado { padding:16px; border-radius:13px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:16px; }
.bz-pilares { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px; }
.bz-pilar { border-radius:11px; border:1px solid var(--linea); background:rgba(0,0,0,.3);
  overflow:hidden; text-align:center; }
.bz-pilar__titulo { font-size:.62rem; color:var(--texto-suave); padding:5px 2px;
  background:rgba(217,164,65,.12); }
.bz-pilar__tronco, .bz-pilar__rama { padding:8px 3px; }
.bz-pilar__tronco { border-bottom:1px solid var(--linea); }
.bz-pilar__tronco b, .bz-pilar__rama b { display:block; font-family:var(--chino); font-size:1.5rem; line-height:1.1; }
.bz-pilar__tronco span, .bz-pilar__rama span { display:block; font-size:.56rem; color:var(--texto-suave); margin-top:2px; }
.bz-pilar--dia { border-color:var(--oro); }
.bz-pilar--dia .bz-pilar__titulo { background:rgba(217,164,65,.28); color:var(--oro-claro); }
.bz-conteo { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.bz-barra { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:9px; font-size:.78rem; }
.bz-barra__nombre { color:#fff; font-weight:600; }
.bz-barra__pista { height:16px; border-radius:8px; background:rgba(255,255,255,.07); overflow:hidden; }
.bz-barra__relleno { height:100%; border-radius:8px; transition:width .4s; }
.bz-barra__num { font-size:.76rem; color:var(--texto-suave); font-variant-numeric:tabular-nums; }
.bz-veredicto { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(0,0,0,.28); font-size:.83rem; color:#cdc6bb; line-height:1.65; }
.bz-veredicto strong { color:var(--oro-claro); }

.bz-troncos, .bz-ramas { display:grid; grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); gap:8px; margin-bottom:16px; }
.bz-car { padding:11px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.bz-car header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.bz-car header b { font-family:var(--chino); font-size:1.5rem; line-height:1; }
.bz-car header div { flex:1; min-width:0; }
.bz-car header strong { display:block; font-size:.84rem; color:#fff; }
.bz-car header span { font-size:.66rem; color:var(--texto-suave); }
.bz-car p { font-size:.73rem; color:#cdc6bb; margin:0 0 5px; line-height:1.5; }
.bz-car em { font-style:normal; font-size:.68rem; color:var(--oro-claro); display:block; }

.bz-analisis { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.bz-paso { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); display:flex; gap:12px; }
.bz-paso > b { width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:rgba(217,164,65,.2); color:var(--oro-claro); display:flex;
  align-items:center; justify-content:center; font-size:.8rem; }
.bz-paso strong { display:block; font-size:.85rem; color:#fff; margin-bottom:4px; }
.bz-paso p { font-size:.78rem; color:#cdc6bb; margin:0; line-height:1.55; }

.bz-ajustes { display:flex; flex-direction:column; gap:9px; }
.bz-ajuste { padding:13px 15px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.bz-ajuste header { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.bz-ajuste header b { font-family:var(--chino); font-size:1.35rem; line-height:1; }
.bz-ajuste header strong { font-size:.92rem; color:#fff; }
.bz-ajuste h4 { font-size:.75rem; color:var(--oro); margin:10px 0 5px; font-weight:700; }
.bz-ajuste p { font-size:.77rem; color:#cdc6bb; margin:0 0 6px; line-height:1.55; }
.bz-ajuste ul { margin:0 0 6px; padding-left:17px; }
.bz-ajuste li { font-size:.76rem; color:#cdc6bb; margin-bottom:3px; line-height:1.5; }
.bz-fuerte { border-left:3px solid var(--rojo); }
.bz-debil { border-left:3px solid var(--agua); }

.bz-diez { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.bz-dios { padding:11px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.bz-dios b { display:block; font-family:var(--chino); font-size:1.05rem; color:var(--oro); }
.bz-dios strong { display:block; font-size:.8rem; color:#fff; margin:4px 0 3px; }
.bz-dios span { display:block; font-size:.7rem; color:var(--texto-suave); line-height:1.45; }
.bz-dios em { display:block; font-style:normal; font-size:.7rem; color:#cdc6bb; margin-top:5px; line-height:1.45; }

.bz-trinos { display:flex; flex-direction:column; gap:8px; }
.bz-conf { padding:12px 14px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.bz-conf strong { display:block; font-size:.85rem; color:#fff; margin-bottom:5px; }
.bz-conf span { display:block; font-size:.75rem; color:var(--oro-claro); margin-bottom:4px; }
.bz-conf p { font-size:.76rem; color:#cdc6bb; margin:0; line-height:1.5; }

/* --- símbolos y reglas --- */
.fs-simbolos { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; margin-bottom:14px; }
.fs-simbolo { padding:12px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.fs-simbolo b { font-family:var(--chino); font-size:1.15rem; color:var(--oro); }
.fs-simbolo strong { display:block; font-size:.82rem; color:#fff; margin:4px 0; }
.fs-simbolo p { font-size:.73rem; color:#cdc6bb; margin:0; line-height:1.5; }
.fs-reglas { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(217,164,65,.06); }
.fs-reglas ol { margin:0; padding-left:20px; }
.fs-reglas li { font-size:.79rem; color:#cdc6bb; margin-bottom:6px; line-height:1.55; }

.fs-escuelas { display:flex; flex-direction:column; gap:8px; }
.fs-escuela { padding:12px 14px; border-radius:11px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.fs-escuela header { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.fs-escuela header strong { font-size:.87rem; color:#fff; }
.fs-escuela header i { font-style:normal; font-family:var(--chino); color:var(--oro); font-size:.9rem; }
.fs-escuela header em { font-style:normal; font-size:.66rem; padding:2px 7px; border-radius:20px;
  background:rgba(217,164,65,.16); color:var(--oro-claro); }
.fs-escuela p { font-size:.76rem; color:#cdc6bb; margin:0 0 3px; line-height:1.5; }
.fs-escuela p b { color:var(--texto-suave); font-weight:600; }
.fs-fuente { font-size:.8rem; color:#cdc6bb; line-height:1.65; }
.fs-fuente strong { color:#fff; }

@media (max-width:480px) {
  .kua-buenas, .kua-malas { grid-template-columns:1fr; }
  .bz-pilares { gap:5px; }
  .bz-pilar__tronco b, .bz-pilar__rama b { font-size:1.25rem; }
  .fs-montanas { grid-template-columns:repeat(4,1fr); }
  .fs-elementos { grid-template-columns:1fr 1fr; }
  .fs-simbolos { grid-template-columns:1fr 1fr; }
  .bz-troncos, .bz-ramas { grid-template-columns:1fr 1fr; }
}

/* =====================================================================
   DIETOTERAPIA CHINA 食療
   ===================================================================== */

/* --- rueda de las 5 naturalezas --- */
.dt-rueda-caja { display:flex; justify-content:center; margin-bottom:14px; }
.dt-rueda { position:relative; width:min(330px,88vw); height:min(330px,88vw); }
.dt-rueda__centro { position:absolute; inset:33%; border-radius:50%;
  border:2px solid var(--oro); background:rgba(217,164,65,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.dt-rueda__centro b { font-family:var(--chino); font-size:1.15rem; color:var(--oro); }
.dt-rueda__centro span { font-size:.58rem; color:var(--texto-suave); }
.dt-nat { position:absolute; width:28%; height:28%; border-radius:12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--linea); padding:3px; }
.dt-nat:hover, .dt-nat.activo { border-color:var(--oro); }
.dt-nat b { font-family:var(--chino); font-size:1.25rem; line-height:1; }
.dt-nat span { font-size:.56rem; color:var(--texto-suave); text-align:center; line-height:1.15; margin-top:2px; }
.dt-nat i { font-style:normal; font-size:.58rem; font-weight:700; margin-top:2px; }

.dt-naturaleza { padding:16px; border-radius:13px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:14px; }
.dt-naturaleza__cab { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dt-naturaleza__cab > b { font-size:2rem; line-height:1; }
.dt-naturaleza__cab div { flex:1; }
.dt-naturaleza__cab strong { display:block; font-size:1.05rem; color:#fff; }
.dt-naturaleza__cab span { font-size:.76rem; color:var(--texto-suave); }
.dt-cerrar { padding:6px 11px; border-radius:9px; border:1px solid var(--linea);
  background:transparent; color:var(--texto-suave); cursor:pointer; font-family:inherit; font-size:.76rem; }
.dt-cerrar:hover { background:rgba(217,164,65,.16); color:#fff; }
.dt-datos { display:grid; grid-template-columns:auto 1fr; gap:6px 13px; font-size:.83rem; margin:0 0 12px; }
.dt-datos dt { color:var(--oro); font-weight:700; white-space:nowrap; }
.dt-datos dd { margin:0; color:#cdc6bb; }
.dt-lista-alim { display:flex; flex-wrap:wrap; gap:5px; }
.dt-alim-chip { font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:20px;
  background:rgba(255,255,255,.07); color:#cdc6bb; border:1px solid var(--linea); cursor:pointer; }
.dt-alim-chip:hover { background:rgba(217,164,65,.2); color:#fff; }
.dt-vacio { font-size:.78rem; color:var(--texto-suave); font-style:italic; }

/* --- 5 sabores --- */
.dt-sabores { display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px; margin-bottom:14px; }
.dt-sab { padding:13px 12px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:center; }
.dt-sab:hover, .dt-sab.activo { border-color:var(--oro); background:rgba(217,164,65,.12); }
.dt-sab b { display:block; font-family:var(--chino); font-size:1.6rem; line-height:1; }
.dt-sab strong { display:block; font-size:.86rem; color:#fff; margin-top:4px; }
.dt-sab span { display:block; font-size:.68rem; color:var(--texto-suave); margin-top:2px; }
.dt-sab em { display:block; font-style:normal; font-size:.66rem; color:var(--oro-claro); margin-top:4px; }
.dt-sabor { padding:16px; border-radius:13px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); margin-bottom:14px; }

/* --- buscadores --- */
.dt-buscador { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.dt-buscador input { flex:1; padding:12px 14px; border-radius:11px; font-size:.9rem;
  border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05); color:var(--texto);
  font-family:inherit; min-width:0; }
.dt-buscador input:focus { outline:none; border-color:var(--oro); background:rgba(217,164,65,.09); }
.dt-buscador input::placeholder { color:var(--texto-suave); }
.dt-cuenta { font-size:.74rem; color:var(--texto-suave); white-space:nowrap; }

.dt-sugerencias { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dt-chip { font-size:.73rem; font-weight:600; padding:5px 11px; border-radius:20px;
  border:1px solid var(--linea); background:rgba(255,255,255,.05); color:#cdc6bb; cursor:pointer; }
.dt-chip:hover { background:rgba(217,164,65,.18); color:#fff; border-color:var(--oro); }

/* --- consulta "qué como si..." --- */
.dt-consulta { display:flex; flex-direction:column; gap:9px; }
.dt-resp { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.dt-resp--bueno { border-left:3px solid var(--madera); }
.dt-resp--malo { border-left:3px solid var(--rojo); }
.dt-resp--aviso { border-left:3px solid var(--oro); background:rgba(217,164,65,.08); }
.dt-resp strong { display:block; font-size:.88rem; color:#fff; margin-bottom:6px; }
.dt-resp p { font-size:.8rem; color:#cdc6bb; margin:0 0 6px; line-height:1.6; }
.dt-resp .dt-lista-alim { margin-top:7px; }

/* --- filtros --- */
.dt-filtros { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; padding:12px;
  border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.dt-filtro-grupo { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.dt-filtro-grupo > span { font-size:.7rem; color:var(--oro); font-weight:700;
  min-width:74px; padding-top:5px; }
.dt-filtro { font-size:.72rem; padding:5px 10px; border-radius:20px; cursor:pointer;
  border:1px solid var(--linea); background:transparent; color:#cdc6bb; font-family:inherit; }
.dt-filtro:hover { border-color:var(--linea-fuerte); }
.dt-filtro.activo { background:rgba(217,164,65,.22); color:#fff; border-color:var(--oro); font-weight:700; }
.dt-limpiar { font-size:.72rem; padding:5px 11px; border-radius:20px; cursor:pointer;
  border:1px solid var(--linea-fuerte); background:transparent; color:var(--texto-suave); font-family:inherit; }
.dt-limpiar:hover { color:#fff; background:rgba(217,164,65,.14); }

/* --- alimentos --- */
.dt-alimentos { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; }
.dt-alim { padding:11px 12px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; }
.dt-alim:hover { border-color:var(--oro); background:rgba(217,164,65,.1); }
.dt-alim b { display:block; font-size:.84rem; color:#fff; margin-bottom:5px; }
.dt-alim__tags { display:flex; flex-wrap:wrap; gap:4px; }
.dt-tag { font-size:.62rem; padding:2px 7px; border-radius:20px; font-weight:700; }
.dt-alim small { display:block; font-size:.64rem; color:var(--texto-suave); margin-top:5px; }

.dt-ficha { margin-top:14px; padding:16px; border-radius:13px;
  border:1px solid var(--linea-fuerte); background:rgba(217,164,65,.08); }
.dt-ficha__cab { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dt-ficha__cab > b { font-family:var(--chino); font-size:1.5rem; color:var(--oro); }
.dt-ficha__cab div { flex:1; min-width:0; }
.dt-ficha__cab strong { display:block; font-size:1.05rem; color:#fff; }
.dt-ficha__cab span { font-size:.75rem; color:var(--texto-suave); }
.dt-ficha__titulo { font-size:.76rem; color:var(--oro); font-weight:700; margin:13px 0 7px; }
.dt-ficha p { font-size:.81rem; color:#cdc6bb; margin:0 0 7px; line-height:1.65; }

/* --- síndromes --- */
.dt-sindromes { display:flex; flex-direction:column; gap:9px; }
.dt-sind { border:1px solid var(--linea); border-radius:12px; background:rgba(255,255,255,.03); overflow:hidden; }
.dt-sind summary { padding:13px 15px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dt-sind summary::-webkit-details-marker { display:none; }
.dt-sind summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.dt-sind[open] summary::before { transform:rotate(90deg); }
.dt-sind summary:hover { background:rgba(217,164,65,.08); }
.dt-sind summary strong { font-size:.87rem; color:#fff; }
.dt-sind summary em { font-style:normal; font-size:.68rem; color:var(--texto-suave); margin-left:auto; }
.dt-sind__cuerpo { padding:0 15px 15px; }
.dt-sind__bloque { margin-bottom:12px; }
.dt-sind__bloque h4 { font-size:.73rem; color:var(--oro); margin:0 0 5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.dt-sind__bloque p { font-size:.79rem; color:#cdc6bb; margin:0; line-height:1.65; }
.dt-sind__bloque--evitar h4 { color:#f0b9b9; }
.dt-patron { display:inline-block; font-size:.63rem; font-weight:700; padding:2px 8px;
  border-radius:20px; background:rgba(217,164,65,.18); color:var(--oro-claro); margin-right:4px; }

/* --- recetas --- */
.dt-recetas { display:flex; flex-direction:column; gap:9px; }
.dt-rec { border:1px solid var(--linea); border-radius:12px; background:rgba(255,255,255,.03); overflow:hidden; }
.dt-rec summary { padding:13px 15px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; }
.dt-rec summary::-webkit-details-marker { display:none; }
.dt-rec summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.dt-rec[open] summary::before { transform:rotate(90deg); }
.dt-rec summary:hover { background:rgba(217,164,65,.08); }
.dt-rec summary strong { font-size:.86rem; color:#fff; flex:1; }
.dt-rec summary em { font-style:normal; font-size:.68rem; color:var(--texto-suave); }
.dt-rec__cuerpo { padding:0 15px 15px; }
.dt-rec__item { padding:10px 12px; border-radius:9px; background:rgba(0,0,0,.28);
  border-left:3px solid var(--oro); margin-bottom:7px; }
.dt-rec__item b { display:block; font-size:.72rem; color:var(--oro); margin-bottom:4px; }
.dt-rec__item p { font-size:.78rem; color:#cdc6bb; margin:0 0 4px; line-height:1.6; }
.dt-rec__item p:last-child { margin:0; font-style:italic; color:var(--texto-suave); }

/* --- contraindicaciones --- */
.dt-contra { display:flex; flex-direction:column; gap:8px; }
.dt-contra__item { padding:13px 15px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--rojo); background:rgba(193,39,45,.07); }
.dt-contra__item strong { display:block; font-size:.84rem; color:#fff; margin-bottom:5px; }
.dt-contra__item p { font-size:.78rem; color:#cdc6bb; margin:0; line-height:1.6; }

/* --- elementos y reglas --- */
.dt-elementos { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:9px; margin-bottom:14px; }
.dt-elem { padding:13px; border-radius:12px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.dt-elem header { display:flex; align-items:baseline; gap:7px; margin-bottom:6px; }
.dt-elem header b { font-size:.9rem; color:#fff; }
.dt-elem header i { font-style:normal; font-size:.7rem; color:var(--oro-claro); }
.dt-elem p { font-size:.74rem; color:#cdc6bb; margin:0 0 6px; line-height:1.55; }
.dt-elem span { display:block; font-size:.7rem; color:var(--texto-suave); }

.dt-reglas { padding:15px 17px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(217,164,65,.06); margin-bottom:12px; }
.dt-regla { display:flex; gap:11px; margin-bottom:11px; }
.dt-regla:last-child { margin-bottom:0; }
.dt-regla > b { width:24px; height:24px; flex:0 0 24px; border-radius:50%;
  background:rgba(217,164,65,.2); color:var(--oro-claro); display:flex;
  align-items:center; justify-content:center; font-size:.74rem; }
.dt-regla strong { display:block; font-size:.83rem; color:#fff; margin-bottom:3px; }
.dt-regla p { font-size:.77rem; color:#cdc6bb; margin:0; line-height:1.55; }

.dt-avisos { display:flex; flex-direction:column; gap:8px; }
.dt-aviso { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.dt-aviso strong { display:block; font-size:.82rem; color:var(--oro-claro); margin-bottom:4px; }
.dt-aviso p { font-size:.77rem; color:#cdc6bb; margin:0; line-height:1.6; }
.dt-fuente { font-size:.8rem; color:#cdc6bb; line-height:1.65; }

@media (max-width:480px) {
  .dt-sabores { grid-template-columns:1fr 1fr; }
  .dt-alimentos { grid-template-columns:1fr 1fr; }
  .dt-elementos { grid-template-columns:1fr 1fr; }
  .dt-filtro-grupo > span { min-width:100%; padding-top:0; }
}

/* =====================================================================
   HISTORIA CLÍNICA INTEGRAL 醫
   ===================================================================== */

.hc-acciones { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hc-acciones--abajo { margin-top:18px; }
.hc-btn { padding:11px 15px; border-radius:11px; border:1px solid var(--linea-fuerte);
  background:rgba(255,255,255,.04); color:var(--texto); font-family:inherit;
  font-size:.82rem; font-weight:600; cursor:pointer; }
.hc-btn:hover { background:rgba(217,164,65,.14); border-color:var(--oro); }
.hc-btn--principal { background:rgba(217,164,65,.2); border-color:var(--oro); color:var(--oro-claro); }
.hc-btn--principal:hover { background:rgba(217,164,65,.34); }

.hc-aviso { padding:12px 15px; border-radius:11px; margin-bottom:13px; font-size:.82rem;
  border:1px solid var(--linea); background:rgba(255,255,255,.04); }
.hc-aviso--ok { border-left:3px solid var(--madera); color:#bfe3c1; }
.hc-aviso--mal { border-left:3px solid var(--rojo); color:#f0b9b9; }
.hc-aviso--info { border-left:3px solid var(--oro); color:var(--oro-claro); }

.hc-actual { padding:12px 15px; border-radius:11px; margin-bottom:13px;
  border:1px solid var(--oro); background:rgba(217,164,65,.12); font-size:.84rem; color:#fff; }
.hc-actual b { color:var(--oro-claro); }

/* --- índice --- */
.hc-indice { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:16px; }
.hc-indice__titulo { font-size:.72rem; color:var(--oro); font-weight:700; margin:0 0 9px;
  text-transform:uppercase; letter-spacing:.05em; }
.hc-indice__lista { display:flex; flex-wrap:wrap; gap:6px; }
.hc-indice__item { font-size:.71rem; padding:5px 10px; border-radius:20px; cursor:pointer;
  border:1px solid var(--linea); background:transparent; color:#cdc6bb; font-family:inherit; }
.hc-indice__item:hover { background:rgba(217,164,65,.2); color:#fff; border-color:var(--oro); }
.hc-indice__item.activo { background:rgba(217,164,65,.24); color:#fff; border-color:var(--oro); font-weight:700; }

/* --- secciones del formulario --- */
.hc-sec { border:1px solid var(--linea); border-radius:13px; background:rgba(255,255,255,.025);
  margin-bottom:14px; overflow:hidden; }
.hc-sec__cab { padding:14px 16px; background:rgba(217,164,65,.09); cursor:pointer;
  display:flex; align-items:center; gap:11px; }
.hc-sec__cab:hover { background:rgba(217,164,65,.15); }
.hc-sec__cab b { font-family:var(--chino); font-size:1.25rem; color:var(--oro); line-height:1; flex:0 0 auto; }
.hc-sec__cab div { flex:1; min-width:0; }
.hc-sec__cab strong { display:block; font-size:.92rem; color:#fff; }
.hc-sec__cab small { display:block; font-size:.72rem; color:var(--texto-suave); margin-top:2px; }
.hc-sec__cab em { font-style:normal; font-size:.68rem; color:var(--texto-suave);
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
.hc-sec__flecha { font-size:.8rem; color:var(--oro); transition:transform .18s; }
.hc-sec.cerrada .hc-sec__flecha { transform:rotate(-90deg); }
.hc-sec__cuerpo { padding:15px 16px; }
.hc-sec.cerrada .hc-sec__cuerpo { display:none; }
.hc-sec__desc { font-size:.77rem; color:var(--texto-suave); margin:0 0 13px; line-height:1.55; }

.hc-sub { border-top:1px dashed var(--linea); padding-top:14px; margin-top:14px; }
.hc-sub:first-child { border-top:0; padding-top:0; margin-top:0; }
.hc-sub__titulo { font-size:.82rem; color:var(--oro); font-weight:700; margin:0 0 4px; }
.hc-sub__desc { font-size:.74rem; color:var(--texto-suave); margin:0 0 11px; }

/* --- campos --- */
.hc-campos { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.hc-campo { display:flex; flex-direction:column; gap:5px; min-width:0; }
.hc-campo--ancho { grid-column:1/-1; }
.hc-campo--medio { grid-column:span 1; }
.hc-campo > label, .hc-campo__eti { font-size:.74rem; color:var(--oro); font-weight:700; }
.hc-campo__ayuda { font-size:.68rem; color:var(--texto-suave); line-height:1.45; margin-top:1px; }
.hc-campo__req { color:var(--rojo); margin-left:3px; }

.hc-campo input[type=text], .hc-campo input[type=number], .hc-campo input[type=date],
.hc-campo input[type=time], .hc-campo input[type=search], .hc-campo textarea, .hc-campo select {
  padding:10px 12px; border-radius:10px; font-size:.86rem; font-family:inherit;
  border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05);
  color:var(--texto); width:100%; }
.hc-campo input:focus, .hc-campo textarea:focus, .hc-campo select:focus {
  outline:none; border-color:var(--oro); background:rgba(217,164,65,.1); }
.hc-campo textarea { resize:vertical; line-height:1.6; }
.hc-campo select option { background:var(--tinta-3); color:var(--texto); }
.hc-campo input::placeholder, .hc-campo textarea::placeholder { color:var(--texto-suave); }

/* --- opciones (checkbox / radio) --- */
.hc-opciones { display:flex; flex-wrap:wrap; gap:6px; }
.hc-op { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:20px;
  border:1px solid var(--linea); background:rgba(255,255,255,.03); cursor:pointer;
  font-size:.74rem; color:#cdc6bb; user-select:none; }
.hc-op:hover { border-color:var(--linea-fuerte); background:rgba(217,164,65,.09); }
.hc-op input { margin:0; width:14px; height:14px; accent-color:var(--oro); cursor:pointer; }
.hc-op:has(input:checked) { background:rgba(217,164,65,.24); color:#fff; border-color:var(--oro); font-weight:600; }

/* --- tablas de antecedentes --- */
.hc-tabla-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -3px; }
.hc-tabla { width:100%; border-collapse:collapse; font-size:.78rem; }
.hc-tabla th { text-align:left; padding:8px 9px; font-size:.7rem; color:var(--oro);
  font-weight:700; border-bottom:1px solid var(--linea-fuerte); white-space:nowrap; }
.hc-tabla td { padding:7px 9px; border-bottom:1px solid var(--linea); vertical-align:middle; }
.hc-tabla tr:last-child td { border-bottom:0; }
.hc-tabla td:first-child { color:#cdc6bb; font-weight:600; white-space:nowrap; }
.hc-tabla input[type=text] { padding:7px 9px; font-size:.78rem; border-radius:8px;
  border:1px solid var(--linea); background:rgba(255,255,255,.05); color:var(--texto);
  font-family:inherit; width:100%; min-width:110px; }
.hc-tabla input[type=text]:focus { outline:none; border-color:var(--oro); }
.hc-tabla .hc-opciones { flex-wrap:nowrap; gap:4px; }
.hc-tabla .hc-op { padding:4px 8px; font-size:.7rem; }

/* --- rango de dolor --- */
.hc-rango { display:flex; align-items:center; gap:11px; }
.hc-rango input[type=range] { flex:1; accent-color:var(--oro); }
.hc-rango output { font-size:.88rem; font-weight:700; color:var(--oro-claro);
  min-width:26px; text-align:center; font-variant-numeric:tabular-nums; }

/* --- estructuras del Balance Global --- */
.hc-estructuras { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.hc-estr { padding:11px 12px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; }
.hc-estr:hover { border-color:var(--linea-fuerte); background:rgba(217,164,65,.09); }
.hc-estr.activo { border-color:var(--oro); background:rgba(217,164,65,.22); }
.hc-estr b { display:block; font-size:.92rem; color:var(--oro-claro); margin-bottom:3px; }
.hc-estr span { display:block; font-size:.7rem; color:var(--texto-suave); }
.hc-estr strong { display:block; font-size:.71rem; color:#cdc6bb; margin-top:4px; font-weight:600; }
.hc-estr p { font-size:.7rem; color:var(--texto-suave); margin:4px 0 0; line-height:1.45; }

/* --- números guía --- */
.hc-numguia { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; margin-bottom:12px; }
.hc-ng { padding:10px 4px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:center; }
.hc-ng:hover { border-color:var(--oro); background:rgba(217,164,65,.14); }
.hc-ng.activo { border-color:var(--oro); background:rgba(217,164,65,.26); }
.hc-ng b { display:block; font-size:1.05rem; color:var(--oro-claro); font-weight:700; }
.hc-nginfo { padding:13px 15px; border-radius:11px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.08); font-size:.8rem; }
.hc-nginfo p { margin:0 0 7px; color:#cdc6bb; line-height:1.6; }
.hc-nginfo p:last-child { margin:0; }

/* --- trigramas --- */
.hc-trigramas { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px; }
.hc-tri { padding:11px 12px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.hc-tri header { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.hc-tri header b { font-size:1.3rem; color:var(--oro); }
.hc-tri header strong { font-size:.8rem; color:#fff; }
.hc-tri em { font-style:normal; display:block; font-size:.68rem; color:var(--oro-claro); margin-bottom:4px; }
.hc-tri p { font-size:.71rem; color:#cdc6bb; margin:0; line-height:1.5; }

/* --- historial --- */
.hc-historial { margin-top:16px; padding:15px; border-radius:13px;
  border:1px solid var(--linea-fuerte); background:rgba(217,164,65,.07); }
.hc-historial h3 { font-size:.92rem; color:#fff; margin:0 0 11px; }
.hc-pac { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.04); margin-bottom:8px; display:flex; align-items:center; gap:11px; }
.hc-pac div { flex:1; min-width:0; }
.hc-pac strong { display:block; font-size:.86rem; color:#fff; }
.hc-pac span { font-size:.72rem; color:var(--texto-suave); }
.hc-pac button { padding:7px 12px; border-radius:9px; border:1px solid var(--linea);
  background:transparent; color:var(--texto); font-family:inherit; font-size:.75rem; cursor:pointer; }
.hc-pac button:hover { background:rgba(217,164,65,.17); border-color:var(--oro); }
.hc-pac button.hc-borrar:hover { background:rgba(193,39,45,.24); border-color:var(--rojo); color:#f0b9b9; }

@media (max-width:520px) {
  .hc-campos { grid-template-columns:1fr; }
  .hc-estructuras { grid-template-columns:1fr; }
  .hc-trigramas { grid-template-columns:1fr; }
  .hc-numguia { grid-template-columns:repeat(4,1fr); }
  .hc-btn { flex:1 1 46%; text-align:center; font-size:.78rem; }
}

/* --- al imprimir: todo abierto y sin adornos --- */
@media print {
  .barra, .cabecera, .hc-acciones, .hc-indice, .rejilla-menu, .menu { display:none !important; }
  .hc-sec.cerrada .hc-sec__cuerpo { display:block !important; }
  .hc-sec { break-inside:avoid; border-color:#999; background:#fff !important; }
  .hc-sec__cab { background:#eee !important; }
  body, .vista { background:#fff !important; color:#000 !important; }
  .hc-campo input, .hc-campo textarea, .hc-campo select {
    border:0 !important; border-bottom:1px solid #666 !important; background:#fff !important;
    color:#000 !important; }
}

/* =====================================================================
   DIAGNÓSTICO AUTOMÁTICO 診
   ===================================================================== */

.dg-selector { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.dg-selector label { font-size:.74rem; color:var(--oro); font-weight:700; }
.dg-selector select { padding:13px 14px; border-radius:11px; font-size:.92rem;
  font-family:inherit; border:1px solid var(--linea-fuerte);
  background:rgba(255,255,255,.05); color:var(--texto); width:100%; }
.dg-selector select:focus { outline:none; border-color:var(--oro); }
.dg-selector select option { background:var(--tinta-3); color:var(--texto); }

.dg-cuerpo { display:flex; flex-direction:column; gap:4px; }
.dg-vacio { font-size:.82rem; color:var(--texto-suave); font-style:italic; padding:14px 0; }
.dg-enlace { color:var(--oro-claro); font-weight:600; }

.dg-cab { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--oro); background:rgba(217,164,65,.12); margin-bottom:14px; }
.dg-cab div { flex:1; min-width:0; }
.dg-cab strong { display:block; font-size:1.05rem; color:#fff; }
.dg-cab span { font-size:.76rem; color:var(--texto-suave); }
.dg-imprimir { padding:8px 13px; border-radius:9px; border:1px solid var(--linea);
  background:transparent; color:var(--texto); font-family:inherit; font-size:.76rem; cursor:pointer; }
.dg-imprimir:hover { background:rgba(217,164,65,.18); }

.dg-resumen { padding:14px 16px; border-radius:12px; border:1px solid var(--linea-fuerte);
  background:rgba(217,164,65,.07); margin-bottom:16px; }
.dg-resumen p { font-size:.84rem; color:#cdc6bb; margin:0 0 7px; line-height:1.6; }
.dg-resumen p:last-child { margin:0; }
.dg-resumen b { color:#fff; }

.dg-titulo { display:flex; align-items:center; gap:10px; font-size:.95rem; color:#fff;
  margin:24px 0 12px; padding-bottom:9px; border-bottom:1px solid var(--linea-fuerte); }
.dg-titulo b { font-family:var(--chino); font-size:1.2rem; color:var(--oro); }
.dg-sub { font-size:.84rem; color:var(--oro); margin:16px 0 9px; font-weight:700; }
.dg-linea { font-size:.83rem; color:#cdc6bb; margin:11px 0; line-height:1.6; }

/* --- canales --- */
.dg-canales { display:flex; flex-direction:column; gap:9px; }
.dg-canal { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.dg-canal header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dg-canal header > b { font-size:1.2rem; }
.dg-canal header div { flex:1; min-width:0; }
.dg-canal header strong { display:block; font-size:.87rem; color:#fff; }
.dg-canal header span { font-size:.68rem; color:var(--texto-suave); }
.dg-canal header em { font-style:normal; font-size:1rem; font-weight:700; color:var(--oro-claro);
  font-variant-numeric:tabular-nums; }
.dg-barra { height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; }
.dg-barra__r { height:100%; border-radius:4px; transition:width .45s; }
.dg-evid { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.dg-evid span { font-size:.68rem; padding:3px 9px; border-radius:20px;
  background:rgba(255,255,255,.06); color:#cdc6bb; }

/* --- patrones --- */
.dg-pat { border:1px solid var(--linea); border-radius:12px; background:rgba(255,255,255,.03);
  overflow:hidden; margin-bottom:9px; }
.dg-pat summary { padding:12px 15px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dg-pat summary::-webkit-details-marker { display:none; }
.dg-pat summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.dg-pat[open] summary::before { transform:rotate(90deg); }
.dg-pat summary:hover { background:rgba(217,164,65,.08); }
.dg-pat summary strong { font-size:.88rem; color:#fff; }
.dg-pat summary em { font-style:normal; font-size:.72rem; color:var(--texto-suave); }
.dg-pat__cuerpo { padding:0 15px 15px; }
.dg-pat__cuerpo p { font-size:.8rem; color:#cdc6bb; margin:0 0 8px; line-height:1.65; }
.dg-clave { padding:9px 12px; border-radius:9px; background:rgba(217,164,65,.1);
  border-left:3px solid var(--oro); }
.dg-conf { font-style:normal; font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:20px; }
.dg-conf--alta { background:rgba(78,158,82,.25); color:#9fe0a2; }
.dg-conf--media { background:rgba(217,164,65,.25); color:var(--oro-claro); }
.dg-conf--baja { background:rgba(255,255,255,.1); color:var(--texto-suave); }

/* --- BaZi --- */
.dg-pilares { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px; }
.dg-pilar { border-radius:11px; border:1px solid var(--linea); background:rgba(0,0,0,.3); overflow:hidden; text-align:center; }
.dg-pilar--dia { border-color:var(--oro); }
.dg-pilar__t { font-size:.62rem; color:var(--texto-suave); padding:5px 2px; background:rgba(217,164,65,.12); }
.dg-pilar--dia .dg-pilar__t { background:rgba(217,164,65,.3); color:var(--oro-claro); font-weight:700; }
.dg-pilar__tr, .dg-pilar__ra { padding:8px 3px; }
.dg-pilar__tr { border-bottom:1px solid var(--linea); }
.dg-pilar__tr b, .dg-pilar__ra b { display:block; font-family:var(--chino); font-size:1.5rem; line-height:1.1; }
.dg-pilar__tr span, .dg-pilar__ra span { display:block; font-size:.56rem; color:var(--texto-suave); margin-top:2px; }

.dg-elementos { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.dg-el__cab { display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:.8rem; }
.dg-el__cab b { font-weight:700; }
.dg-el__cab span { font-size:.7rem; color:var(--texto-suave); }
.dg-el__cab em { margin-left:auto; }
.dg-el__det { font-size:.66rem; color:var(--texto-suave); margin-top:4px; }
.dg-marca { font-style:normal; font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:20px; }
.dg-marca--alta { background:rgba(193,39,45,.25); color:#f0b9b9; }
.dg-marca--baja { background:rgba(47,95,150,.35); color:#a8cdf0; }

.dg-caja { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:14px; }
.dg-caja--destacada { border-color:var(--oro); background:rgba(217,164,65,.1); }
.dg-caja p { font-size:.81rem; color:#cdc6bb; margin:0 0 8px; line-height:1.65; }
.dg-caja p:last-child { margin:0; }
.dg-caja b { color:#fff; }
.dg-chip { display:inline-block; font-size:.74rem; font-weight:700; padding:3px 11px;
  border-radius:20px; border:1px solid var(--linea-fuerte); color:#cdc6bb; margin:2px; }
.dg-chip--malo { border-color:rgba(193,39,45,.5); color:#f0b9b9; }

/* --- Feng Shui --- */
.dg-kua { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--oro); background:rgba(217,164,65,.12); margin-bottom:14px; }
.dg-kua > b { font-size:2.6rem; color:var(--oro); line-height:1; font-weight:700; }
.dg-kua div { flex:1; min-width:0; }
.dg-kua strong { display:block; font-size:1rem; color:#fff; }
.dg-kua span { display:block; font-size:.75rem; color:var(--texto-suave); margin-top:2px; }

.dg-rosa { display:flex; flex-direction:column; align-items:center; margin-bottom:16px; }
.dg-rosa__svg { width:min(260px,70vw); height:auto; }
.dg-rosa__leyenda { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.dg-rosa__leyenda span { display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--texto-suave); }
.dg-rosa__leyenda i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.dg-rosa__nota { font-size:.68rem; color:var(--texto-suave); margin:7px 0 0; font-style:italic; }

.dg-direcciones { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.dg-dirs__t { font-size:.78rem; font-weight:700; margin:0 0 7px; }
.dg-dirs__t--buena { color:#9fe0a2; }
.dg-dirs__t--mala { color:#f0b9b9; }
.dg-dir { padding:10px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:6px; }
.dg-dir--buena { border-left:3px solid var(--madera); }
.dg-dir--mala { border-left:3px solid var(--rojo); }
.dg-dir b { display:block; font-size:.86rem; color:#fff; }
.dg-dir span { display:block; font-size:.7rem; color:var(--oro-claro); margin-top:2px; }
.dg-dir em { display:block; font-style:normal; font-size:.72rem; color:#cdc6bb; margin-top:4px; }
.dg-dir small { display:block; font-size:.68rem; color:var(--texto-suave); margin-top:3px; }

/* --- pulsos y lengua --- */
.dg-hallazgos { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dg-hall { padding:11px 13px; border-radius:10px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.dg-hall--vacio { border-left:3px solid var(--agua); }
.dg-hall--pleno { border-left:3px solid var(--fuego); }
.dg-hall header { display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.dg-hall header b { font-size:.85rem; color:#fff; }
.dg-hall header em { font-style:normal; font-family:var(--chino); color:var(--oro); font-size:.9rem; }
.dg-hall p { font-size:.77rem; color:#cdc6bb; margin:0 0 4px; line-height:1.6; }
.dg-hall__org { color:var(--texto-suave) !important; font-size:.73rem !important; }

.dg-pos { display:flex; flex-direction:column; gap:7px; }
.dg-pos__i { padding:10px 12px; border-radius:9px; background:rgba(255,255,255,.04);
  border-left:3px solid var(--linea-fuerte); }
.dg-pos__i b { display:block; font-size:.79rem; color:#fff; }
.dg-pos__i span { display:block; font-size:.72rem; color:var(--oro-claro); margin-top:2px; }
.dg-pos__i em { display:block; font-style:normal; font-size:.71rem; color:var(--texto-suave); margin-top:3px; }

/* --- estructura y capas --- */
.dg-estr { padding:14px 16px; border-radius:12px; border:1px solid var(--oro);
  background:rgba(217,164,65,.12); margin-bottom:14px; }
.dg-estr > b { display:block; font-size:1rem; color:var(--oro-claro); margin-bottom:4px; }
.dg-estr > span { display:block; font-size:.75rem; color:#cdc6bb; margin-bottom:7px; }
.dg-estr p { font-size:.8rem; color:#cdc6bb; margin:0 0 6px; line-height:1.6; }

.dg-capas { display:flex; flex-direction:column; gap:7px; }
.dg-capa { padding:11px 13px; border-radius:10px; border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.dg-capa--marcada { border-color:var(--oro); background:rgba(217,164,65,.14); }
.dg-capa header { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.dg-capa header b { font-size:.84rem; color:#fff; }
.dg-capa header em { font-style:normal; font-family:var(--chino); color:var(--oro); font-size:.85rem; }
.dg-capa p { font-size:.75rem; color:#cdc6bb; margin:0; line-height:1.55; }

/* --- dieta --- */
.dg-dieta { border:1px solid var(--linea); border-radius:11px; background:rgba(255,255,255,.03);
  overflow:hidden; margin-bottom:8px; }
.dg-dieta summary { padding:11px 14px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:9px; }
.dg-dieta summary::-webkit-details-marker { display:none; }
.dg-dieta summary::before { content:'▸'; color:var(--oro); font-size:.8rem; transition:transform .15s; }
.dg-dieta[open] summary::before { transform:rotate(90deg); }
.dg-dieta summary:hover { background:rgba(217,164,65,.08); }
.dg-dieta summary strong { font-size:.84rem; color:#fff; flex:1; }
.dg-dieta summary em { font-style:normal; font-size:.7rem; color:var(--texto-suave); }
.dg-dieta__cuerpo { padding:0 14px 13px; }
.dg-dieta__cuerpo p { font-size:.77rem; color:#cdc6bb; margin:0 0 7px; line-height:1.6; }

@media (max-width:520px) {
  .dg-pilares { gap:5px; }
  .dg-pilar__tr b, .dg-pilar__ra b { font-size:1.25rem; }
}

@media print {
  .barra, .cabecera, .dg-selector, .dg-imprimir, .rejilla-menu { display:none !important; }
  .dg-pat, .dg-dieta { break-inside:avoid; }
  body, .vista { background:#fff !important; color:#000 !important; }
  .dg-cab, .dg-kua, .dg-estr { border-color:#999 !important; background:#f5f5f5 !important; }
}

/* --- campo de hora en 3 listas (más fácil que el reloj) --- */
.hc-hora { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.hc-hora select {
  padding:10px 8px; border-radius:10px; font-size:.88rem; font-family:inherit;
  border:1px solid var(--linea-fuerte); background:rgba(255,255,255,.05);
  color:var(--texto); cursor:pointer; }
.hc-hora select:focus { outline:none; border-color:var(--oro); background:rgba(217,164,65,.1); }
.hc-hora select option { background:var(--tinta-3); color:var(--texto); }
.hc-hora__h { flex:0 0 78px; }
.hc-hora__m { flex:0 0 78px; }
.hc-hora__a { flex:0 0 80px; }
.hc-hora__eco {
  display:block; width:100%; margin-top:2px;
  font-size:.72rem; color:var(--oro-claro); line-height:1.4; }

/* --- usos concretos de las direcciones (debajo de la rosa) --- */
.dg-rosa__usos {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  width:100%; max-width:380px; margin-top:12px; }
.dg-uso { padding:10px 12px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.04); }
.dg-uso b { display:block; font-size:.76rem; color:var(--oro-claro); margin-bottom:3px; }
.dg-uso span { display:block; font-size:.72rem; color:#cdc6bb; }
.dg-rosa__svg { width:min(300px,80vw); height:auto; }

@media (max-width:420px) { .dg-rosa__usos { grid-template-columns:1fr; } }

/* =====================================================================
   RECETA DE TRATAMIENTO 治
   ===================================================================== */

.tr-indice { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;
  padding:12px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tr-indice a { font-size:.72rem; padding:5px 11px; border-radius:20px;
  border:1px solid var(--linea); color:#cdc6bb; text-decoration:none; }
.tr-indice a:hover { background:rgba(217,164,65,.2); color:#fff; border-color:var(--oro); }

.tr-caja { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:13px; }
.tr-caja--destacada { border-color:var(--oro); background:rgba(217,164,65,.1); }
.tr-caja p { font-size:.81rem; color:#cdc6bb; margin:0 0 8px; line-height:1.65; }
.tr-caja p:last-child { margin:0; }
.tr-caja b { color:#fff; }

/* --- puntos Shu --- */
.tr-shu { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:7px; margin-bottom:14px; }
.tr-shu__i { padding:11px 6px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); text-align:center; }
.tr-shu__i b { display:block; font-size:.92rem; color:var(--oro-claro); font-weight:700; }
.tr-shu__i span { display:block; font-size:.64rem; color:#cdc6bb; margin-top:3px; }
.tr-shu__i em { display:block; font-style:normal; font-family:var(--chino); font-size:.72rem;
  color:var(--texto-suave); margin-top:2px; }
.tr-shu__i small { display:block; font-size:.62rem; color:var(--texto-suave); margin-top:4px; }

/* --- puntos de Tung --- */
.tr-puntos { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.tr-punto { padding:9px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.04); text-align:center; }
.tr-punto--dm { border-color:rgba(193,39,45,.45); background:rgba(193,39,45,.1); }
.tr-punto b { display:block; font-size:.88rem; color:var(--oro-claro); }
.tr-punto span { display:block; font-size:.66rem; color:var(--texto-suave); margin-top:2px; }
.tr-punto em { display:block; font-style:normal; font-size:.62rem; color:var(--texto-suave);
  margin-top:3px; opacity:.8; }

.tr-laminas { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; margin-bottom:14px; }
.tr-laminas figure { margin:0; }
.tr-laminas img { width:100%; border-radius:9px; background:#fff; display:block; }
.tr-laminas figcaption { font-size:.68rem; color:var(--texto-suave); text-align:center; margin-top:4px; }

/* --- Chao Chen --- */
.tr-cc { display:flex; flex-direction:column; gap:9px; margin-bottom:13px; }
.tr-cc__i { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tr-cc__i header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tr-cc__i header > b { font-size:1.4rem; color:var(--oro); }
.tr-cc__i header div { flex:1; min-width:0; }
.tr-cc__i header strong { display:block; font-size:.87rem; color:#fff; }
.tr-cc__i header span { display:block; font-size:.68rem; color:var(--texto-suave); }
.tr-cc__i p { font-size:.78rem; color:#cdc6bb; margin:0 0 5px; line-height:1.55; }

/* --- alimentos --- */
.tr-alims { display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:8px; margin-bottom:14px; }
.tr-alim { padding:10px 12px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tr-alim--bueno { border-left:3px solid var(--madera); }
.tr-alim--malo { border-left:3px solid var(--rojo); }
.tr-alim b { display:block; font-size:.82rem; color:#fff; margin-bottom:3px; }
.tr-alim span { display:block; font-size:.68rem; color:var(--texto-suave); }
.tr-alim em { display:block; font-style:normal; font-size:.68rem; color:var(--oro-claro); margin-top:3px; }
.tr-alim small { display:block; font-size:.66rem; color:var(--texto-suave); margin-top:4px; line-height:1.4; }

/* --- zonas de Feng Shui --- */
.tr-zonas { display:flex; flex-direction:column; gap:9px; margin-bottom:13px; }
.tr-zona { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tr-zona header { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.tr-zona header > b { font-size:1.2rem; }
.tr-zona header div { flex:1; min-width:0; }
.tr-zona header strong { display:block; font-size:.86rem; color:#fff; }
.tr-zona header span { display:block; font-size:.7rem; color:var(--texto-suave); }
.tr-zona p { font-size:.78rem; color:#cdc6bb; margin:0 0 5px; line-height:1.55; }

/* --- sonidos --- */
.tr-sonidos { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.tr-sonido { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.tr-sonido header { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.tr-sonido header > b { font-size:1.3rem; }
.tr-sonido header div { flex:1; min-width:0; }
.tr-sonido header strong { display:block; font-size:.86rem; color:#fff; }
.tr-sonido header span { display:block; font-size:.76rem; color:var(--oro-claro); font-weight:700; }
.tr-sonido p { font-size:.77rem; color:#cdc6bb; margin:0 0 5px; line-height:1.55; }

/* --- fuerza de Bagua Zhang --- */
.tr-fuerza { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:12px; }
.tr-fuerza header { display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.tr-fuerza header > b { font-size:1.7rem; color:var(--oro); }
.tr-fuerza header div { flex:1; min-width:0; }
.tr-fuerza header strong { display:block; font-size:.92rem; color:#fff; }
.tr-fuerza header span { display:block; font-size:.71rem; color:var(--texto-suave); }
.tr-fuerza p { font-size:.79rem; color:#cdc6bb; margin:0 0 7px; line-height:1.6; }

/* --- plan de seguimiento --- */
.tr-plan { display:flex; flex-direction:column; gap:8px; margin-bottom:13px; }
.tr-plan__i { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--oro); background:rgba(217,164,65,.07); }
.tr-plan__i b { display:block; font-size:.77rem; color:var(--oro); margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.03em; }
.tr-plan__i p { font-size:.8rem; color:#cdc6bb; margin:0; line-height:1.6; }

@media (max-width:520px) {
  .tr-alims { grid-template-columns:1fr 1fr; }
  .tr-laminas { grid-template-columns:1fr 1fr; }
  .tr-shu { grid-template-columns:repeat(3,1fr); }
}

@media print {
  .barra, .cabecera, .dg-selector, .dg-imprimir, .tr-indice, .rejilla-menu { display:none !important; }
  .dg-dieta, .tr-caja, .tr-zona { break-inside:avoid; }
  body, .vista { background:#fff !important; color:#000 !important; }
  .dg-titulo { color:#000 !important; border-color:#999 !important; }
  .dg-titulo b { color:#a67c00 !important; }
  .tr-plan__i { border-color:#999 !important; background:#f5f5f5 !important; }
}

/* =====================================================================
   RESUMEN INTEGRAL 總
   ===================================================================== */

.rs-sintesis { padding:16px 18px; border-radius:13px; border:1px solid var(--oro);
  background:rgba(217,164,65,.12); margin-bottom:16px; }
.rs-sintesis__t { font-size:.74rem; color:var(--oro); font-weight:700; margin:0 0 8px;
  text-transform:uppercase; letter-spacing:.05em; }
.rs-sintesis__txt { font-size:.88rem; color:#fff; margin:0; line-height:1.75; }
.rs-sintesis__aviso { font-size:.79rem; color:#f0b9b9; margin:10px 0 0;
  padding-top:9px; border-top:1px dashed var(--linea); }

.rs-falta { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--agua); background:rgba(47,95,150,.12); margin-bottom:16px; }
.rs-falta--aviso { border-left-color:var(--rojo); background:rgba(193,39,45,.1); }
.rs-falta__t { font-size:.83rem; color:#a8cdf0; font-weight:700; margin:0 0 8px; }
.rs-falta--aviso .rs-falta__t { color:#f0b9b9; }
.rs-falta p { font-size:.8rem; color:#cdc6bb; margin:0 0 7px; line-height:1.6; }
.rs-falta ul { margin:0; padding-left:19px; }
.rs-falta li { font-size:.79rem; color:#cdc6bb; margin-bottom:5px; line-height:1.55; }
.rs-falta b { color:#fff; }

.rs-caja { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin:13px 0; }
.rs-caja p { font-size:.81rem; color:#cdc6bb; margin:0 0 7px; line-height:1.65; }
.rs-caja p:last-child { margin:0; }
.rs-caja b { color:#fff; }

/* --- los 5 elementos --- */
.rs-el { display:flex; flex-direction:column; gap:10px; }
.rs-el__i { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.rs-el--saturado { background:rgba(193,39,45,.09); }
.rs-el--ausente { background:rgba(47,95,150,.14); }
.rs-el--debil { background:rgba(47,95,150,.08); }
.rs-el header { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.rs-el header b { font-size:.95rem; font-weight:700; }
.rs-el header em { font-style:normal; font-size:.72rem; color:var(--texto-suave); margin-left:auto; }
.rs-el header em.rs-yo { margin-left:0; color:var(--oro-claro); font-weight:700; }
.rs-marca { font-style:normal; font-size:.63rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.rs-marca--saturado { background:rgba(193,39,45,.3); color:#ffd0d0; }
.rs-marca--ausente { background:rgba(47,95,150,.45); color:#c8e4ff; }
.rs-marca--debil { background:rgba(47,95,150,.3); color:#a8cdf0; }
.rs-marca--presente { background:rgba(78,158,82,.3); color:#c8f0ca; }
.rs-marca--normal { background:rgba(255,255,255,.1); color:#cdc6bb; }
.rs-el__datos { font-size:.72rem; color:var(--texto-suave); margin:0 0 6px; }
.rs-el__sig { font-size:.78rem; color:#cdc6bb; margin:0 0 8px; line-height:1.6; font-style:italic; }
.rs-el__accion { font-size:.76rem; margin:8px 0 4px !important; }
.rs-el__accion--mas { color:#bfe3c1; }
.rs-el__accion--menos { color:#f0b9b9; }
.rs-el ul { margin:0 0 4px; padding-left:18px; }
.rs-el li { font-size:.77rem; color:#cdc6bb; margin-bottom:3px; line-height:1.5; }

/* --- direcciones --- */
.rs-kua { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--oro); background:rgba(217,164,65,.12); margin-bottom:14px; }
.rs-kua > b { font-size:2.4rem; color:var(--oro); line-height:1; font-weight:700; }
.rs-kua div { flex:1; min-width:0; }
.rs-kua strong { display:block; font-size:1rem; color:#fff; }
.rs-kua span { display:block; font-size:.75rem; color:var(--texto-suave); margin-top:2px; }

.rs-dirs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:13px; }
.rs-dirs__t { font-size:.78rem; font-weight:700; margin:0 0 8px; }
.rs-dirs__col--buena .rs-dirs__t { color:#9fe0a2; }
.rs-dirs__col--mala .rs-dirs__t { color:#f0b9b9; }
.rs-dir { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:7px; }
.rs-dir--buena { border-left:3px solid var(--madera); }
.rs-dir--mala { border-left:3px solid var(--rojo); }
.rs-dir b { display:block; font-size:.87rem; color:#fff; }
.rs-dir span { display:block; font-size:.7rem; color:var(--oro-claro); margin-top:2px; }
.rs-dir em { display:block; font-style:normal; font-size:.74rem; color:#cdc6bb; margin-top:4px; }
.rs-dir small { display:block; font-size:.69rem; color:var(--texto-suave); margin-top:3px; line-height:1.45; }

/* --- sistemas de puntos --- */
.rs-sistema { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); margin-bottom:11px; }
.rs-sistema--destacado { border-color:var(--oro); background:rgba(217,164,65,.09); }
.rs-sistema--suyo { border-color:var(--madera); background:rgba(78,158,82,.09); }
.rs-sistema__t { font-size:.82rem; color:var(--oro); font-weight:700; margin:0 0 9px;
  text-transform:uppercase; letter-spacing:.03em; }
.rs-sistema p { font-size:.8rem; color:#cdc6bb; margin:0 0 7px; line-height:1.65; }
.rs-sistema b { color:#fff; }
.rs-sistema ul { margin:0; padding-left:19px; }
.rs-sistema li { font-size:.79rem; color:#cdc6bb; margin-bottom:4px; line-height:1.55; }

@media (max-width:560px) {
  .rs-dirs { grid-template-columns:1fr; }
  .rs-el header em { margin-left:0; }
}

@media print {
  .barra, .cabecera, .dg-selector, .dg-imprimir, .rejilla-menu { display:none !important; }
  .rs-el__i, .rs-sistema, .rs-dir, .rs-caja { break-inside:avoid; }
  body, .vista { background:#fff !important; color:#000 !important; }
  .dg-titulo { color:#000 !important; border-color:#999 !important; }
  .rs-sintesis { border-color:#999 !important; background:#f5f5f5 !important; }
  .rs-sintesis__txt { color:#000 !important; }
}

/* =====================================================================
   PANTALLA DE INTEGRACIÓN · 五行 臟腑 辨證
   Elemento → Zang y Fu → patrón → síndrome → alimento → punto.
   Todo en español. Los caracteres chinos van al lado, no en lugar del
   nombre: el terapeuta lee "Hígado", no "Gān".
   ===================================================================== */

.dg-caja-fila { display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-bottom:16px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.dg-caja-fila label { font-size:.82rem; color:var(--texto-suave); }
.dg-caja-fila select { flex:1; min-width:190px; padding:8px 11px; border-radius:9px;
  border:1px solid var(--linea-fuerte); background:rgba(0,0,0,.32); color:inherit; font-size:.85rem; }

/* --- los cinco elementos --- */
.in-elementos { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:13px; }
.in-elemento { padding:14px; border-radius:13px; border:1px solid var(--linea);
  border-top:3px solid var(--el); background:rgba(255,255,255,.028); }
.in-elemento header { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.in-elemento header b { font-size:1.5rem; line-height:1; }
.in-elemento header strong { display:block; font-size:1.02rem; color:var(--el); }
.in-elemento header span { display:block; font-size:.74rem; color:var(--texto-suave); }

.in-organos { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
.in-organo { padding:9px; border-radius:9px; text-align:center; border:1px solid var(--linea); }
.in-organo--zang { background:rgba(217,164,65,.10); border-color:rgba(217,164,65,.34); }
.in-organo--fu { background:rgba(255,255,255,.045); }
.in-organo small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:3px; }
.in-organo b { display:block; font-size:.86rem; }
.in-organo span { display:block; font-size:.68rem; color:var(--texto-suave); margin-top:1px; }

.in-datos { margin:0; font-size:.76rem; }
.in-datos dt { color:var(--oro); font-weight:700; margin-top:7px; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.03em; }
.in-datos dd { margin:2px 0 0; color:#cdc6bb; line-height:1.5; }

/* --- los dos ciclos --- */
.in-ciclos { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px; }

/* --- los cinco sabores --- */
.in-sabores { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:11px; }
.in-sabor { padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.03);
  border:1px solid var(--linea); }
.in-sabor b { font-size:.94rem; }
.in-sabor span { font-size:.72rem; color:var(--texto-suave); margin-left:7px; }
.in-sabor small { display:block; font-size:.68rem; color:var(--oro-claro); margin:3px 0 5px; }
.in-sabor p { margin:0; font-size:.76rem; color:#cdc6bb; line-height:1.5; }

/* --- los patrones --- */
.in-patrones { display:flex; flex-direction:column; gap:9px; }
.in-patron { border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--el); background:rgba(255,255,255,.028); }
.in-patron--mio { border-color:var(--oro); box-shadow:0 0 0 2px rgba(217,164,65,.26); }
.in-patron > summary { display:flex; align-items:center; gap:11px; padding:12px 14px;
  cursor:pointer; list-style:none; }
.in-patron > summary::-webkit-details-marker { display:none; }
.in-patron > summary > b { font-size:1.16rem; color:var(--el); min-width:38px; }
.in-patron > summary > div { flex:1; }
.in-patron > summary strong { display:block; font-size:.92rem; }
.in-patron > summary span { display:block; font-size:.72rem; color:var(--texto-suave); }
.in-patron > summary i { font-style:normal; font-size:.68rem; color:var(--oro-claro);
  text-align:right; max-width:44%; }
.in-patron__cuerpo { padding:4px 15px 15px; font-size:.81rem; line-height:1.6; }
.in-patron__cuerpo > p { margin:7px 0; }
.in-nota { padding:9px 11px; border-radius:9px; background:rgba(217,164,65,.09);
  border-left:3px solid var(--oro); font-size:.78rem; color:#e8dcc4; }

/* --- Zang y Fu dentro del patrón --- */
.in-zf { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:9px 0; }
.in-zf__i { padding:9px 11px; border-radius:9px; border:1px solid var(--linea); text-align:center; }
.in-zf__i--zang { background:rgba(217,164,65,.11); border-color:rgba(217,164,65,.36); }
.in-zf__i--fu { background:rgba(255,255,255,.045); }
.in-zf__i small { display:block; font-size:.57rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:3px; }
.in-zf__i b { display:block; font-size:.85rem; }
.in-zf__i span { display:block; font-size:.68rem; color:var(--texto-suave); }

.in-sub { margin:20px 0 9px; font-size:.95rem; font-weight:700; }
.in-sindromes { display:flex; flex-direction:column; gap:7px; }

/* --- buscador de alimentos --- */
.in-filtros { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:9px; margin-bottom:11px; }
.in-filtros input, .in-filtros select { padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea-fuerte); background:rgba(0,0,0,.32); color:inherit; font-size:.82rem; }
.dg-cuenta { font-size:.76rem; color:var(--texto-suave); margin:0 0 9px; }

.in-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:9px; }
.in-alim { border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--el); background:rgba(255,255,255,.03); }
.in-alim > summary { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:10px 12px; cursor:pointer; list-style:none; }
.in-alim > summary::-webkit-details-marker { display:none; }
.in-alim > summary b { font-size:.85rem; }
.in-alim > summary span { font-size:.66rem; color:var(--texto-suave); }
.in-alim > summary em { font-style:normal; font-size:.68rem; color:var(--oro-claro); margin-left:auto; }
.in-alim > summary i { font-style:normal; font-size:.8rem; }
.in-alim__cuerpo { padding:2px 12px 12px; font-size:.76rem; line-height:1.58; }
.in-alim__cuerpo p { margin:5px 0; }

@media (max-width:640px) {
  .in-organos { grid-template-columns:1fr; }
  .in-filtros { grid-template-columns:1fr 1fr; }
  .in-elementos, .in-lista { grid-template-columns:1fr; }
  .in-patron > summary { flex-wrap:wrap; }
  .in-patron > summary i { max-width:100%; text-align:left; }
}

/* =====================================================================
   PANTALLA DE LOS 60 PUNTOS SHU ANTIGUOS · 五輸穴
   ===================================================================== */

.sh-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:12px; }
.sh-cat { padding:13px; border-radius:12px; border:1px solid var(--linea);
  border-top:3px solid var(--oro); background:rgba(255,255,255,.028); }
.sh-cat header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sh-cat header b { font-size:1.5rem; color:var(--oro); line-height:1; }
.sh-cat header strong { display:block; font-size:.96rem; }
.sh-cat header span { display:block; font-size:.72rem; color:var(--texto-suave); }
.sh-cat__img { font-size:.8rem; font-style:italic; color:var(--oro-claro); margin:0 0 7px; line-height:1.5; }
.sh-cat__uso { font-size:.78rem; color:#cdc6bb; margin:0; line-height:1.6; }

/* --- canales --- */
.sh-canales { display:flex; flex-direction:column; gap:9px; }
.sh-canal { border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--el); background:rgba(255,255,255,.028); }
.sh-canal > summary { display:flex; align-items:center; gap:11px; padding:12px 14px;
  cursor:pointer; list-style:none; }
.sh-canal > summary::-webkit-details-marker { display:none; }
.sh-canal > summary > b { font-size:1.2rem; color:var(--el); min-width:34px; }
.sh-canal > summary > div { flex:1; }
.sh-canal > summary strong { display:block; font-size:.93rem; }
.sh-canal > summary span { display:block; font-size:.72rem; color:var(--texto-suave); }
.sh-canal > summary i { font-style:normal; font-size:.7rem; color:var(--oro-claro); }
.sh-canal__cuerpo { padding:4px 13px 14px; display:flex; flex-direction:column; gap:10px; }

/* --- un punto --- */
.sh-punto { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  border-left:3px solid var(--elp); background:rgba(0,0,0,.2); }
.sh-punto__cab { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px; }
.sh-punto__cab > b { font-size:.98rem; font-weight:700; }
.sh-punto__cat { font-size:.68rem; color:var(--texto-suave); }
.sh-punto__el { font-size:.72rem; font-weight:700; color:var(--elp); margin-left:auto; }
.sh-punto__fuente { font-size:.6rem; font-weight:700; letter-spacing:.05em;
  padding:2px 7px; border-radius:20px; background:rgba(217,164,65,.2);
  border:1px solid rgba(217,164,65,.5); color:var(--oro-claro); }
.sh-punto__nombre { font-size:.83rem; margin:2px 0 6px; }
.sh-punto__int { font-size:.66rem; color:var(--texto-suave); margin:0 0 5px; }
.sh-punto__func { margin:0; padding-left:17px; font-size:.77rem; color:#cdc6bb; line-height:1.6; }
.sh-punto__func li { margin:1px 0; }

/* --- la matriz --- */
.sh-selector { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:12px; }
.sh-selector label { display:flex; flex-direction:column; gap:5px;
  font-size:.76rem; color:var(--texto-suave); }
.sh-selector select { padding:9px 11px; border-radius:9px; border:1px solid var(--linea-fuerte);
  background:rgba(0,0,0,.32); color:inherit; font-size:.85rem; }

.sh-res { padding:13px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(217,164,65,.06); }
.sh-res__tit { font-size:.86rem; margin:0 0 11px; }
.sh-res__i { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  border-left:3px solid var(--elp); background:rgba(0,0,0,.2); margin-bottom:9px; }
.sh-res__i header { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.sh-res__i header b { font-size:.98rem; }
.sh-res__i header span { font-size:.68rem; color:var(--texto-suave); }
.sh-res__i header em { font-style:normal; font-size:.7rem; color:var(--oro);
  margin-left:auto; font-weight:700; }

/* --- calculadora --- */
.sh-calc { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:12px; }
.sh-calc__fila { display:flex; flex-direction:column; gap:6px; }
.sh-calc__fila label { font-size:.78rem; font-weight:700; color:var(--oro); }
.sh-calc__fila select { padding:7px; border-radius:9px; border:1px solid var(--linea-fuerte);
  background:rgba(0,0,0,.32); color:inherit; font-size:.83rem; }
.sh-calc__fila small { font-size:.68rem; color:var(--texto-suave); }

.sh-plan { margin-top:15px; display:flex; flex-direction:column; gap:13px; }
.sh-plan__bloque { padding:14px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.sh-plan__bloque h4 { margin:0 0 8px; font-size:.95rem; }
.sh-plan__bloque > p { font-size:.82rem; line-height:1.6; margin:6px 0; }
.sh-plan__puntos { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:9px; margin-top:9px; }
.sh-plan__p { padding:10px 12px; border-radius:10px; border:1px solid var(--linea);
  border-left:3px solid var(--elp); background:rgba(0,0,0,.2); }
.sh-plan__p > b { font-size:.92rem; }
.sh-plan__p > span { font-size:.76rem; margin-left:6px; }
.sh-plan__p > small { display:block; font-size:.66rem; color:var(--oro-claro); margin:2px 0 5px; }

@media (max-width:640px) {
  .sh-cats { grid-template-columns:1fr; }
  .sh-selector, .sh-calc { grid-template-columns:1fr; }
  .sh-plan__puntos { grid-template-columns:1fr; }
}

/* =====================================================================
   CORRECCIÓN POR SHU ANTIGUOS dentro del Tratamiento
   ===================================================================== */

.sh-fuerzas { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr));
  gap:9px; margin-bottom:14px; }
.sh-fuerza { position:relative; padding:10px 12px; border-radius:10px;
  border:1px solid var(--linea); background:rgba(255,255,255,.03); overflow:hidden; }
.sh-fuerza > b { display:block; font-size:.84rem; color:var(--el); }
.sh-fuerza > span { display:block; font-size:.7rem; color:var(--texto-suave); margin-bottom:5px; }
.sh-fuerza > i { display:block; height:5px; border-radius:3px; background:var(--el); opacity:.75; }
.sh-fuerza--sobra { border-color:rgba(193,39,45,.55); background:rgba(193,39,45,.08); }
.sh-fuerza--falta { border-color:rgba(217,164,65,.5); background:rgba(217,164,65,.08); }
.sh-fuerza__tag { position:absolute; top:8px; right:9px; font-style:normal;
  font-size:.56rem; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:20px; }
.sh-fuerza__tag--sobra { background:rgba(193,39,45,.3); color:#f0b9b9; }
.sh-fuerza__tag--falta { background:rgba(217,164,65,.26); color:var(--oro-claro); }

.sh-bloque { padding:14px; border-radius:12px; margin:13px 0;
  border:1px solid var(--linea); background:rgba(255,255,255,.03); }
.sh-bloque--frenar { border-left:3px solid #c1272d; }
.sh-bloque--subir { border-left:3px solid var(--oro); }
.sh-bloque h4 { margin:0 0 6px; font-size:.95rem; }
.sh-bloque__exp { font-size:.82rem; line-height:1.6; margin:0 0 4px; color:#cdc6bb; }
.sh-plan__razon { font-size:.74rem; color:var(--oro-claro); margin:4px 0 5px; line-height:1.5; }

/* =====================================================================
   CHAO CHEN + SHU ANTIGUOS dentro del Tratamiento
   ===================================================================== */

.cc-shu__tri { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:9px; margin:11px 0; }
.cc-shu__tri-i { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); text-align:center; }
.cc-shu__tri-i--eq { border-color:rgba(217,164,65,.45); background:rgba(217,164,65,.09); }
.cc-shu__tri-i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:4px; }
.cc-shu__tri-i b { display:block; font-size:.95rem; }
.cc-shu__tri-i span { display:block; font-size:.72rem; color:var(--texto-suave); margin-top:2px; }
.cc-shu__tri-i em { display:block; font-style:normal; font-size:.68rem;
  color:var(--oro-claro); margin-top:4px; }

@media (max-width:640px) {
  .cc-shu__tri { grid-template-columns:1fr; }
}

/* Los vasos extraordinarios con puntos propios (Ren Mai y Du Mai) */
.sh-vaso { font-size:.79rem; line-height:1.6; margin:0 0 11px; padding:10px 12px;
  border-radius:9px; background:rgba(217,164,65,.07);
  border-left:3px solid var(--oro); color:#e8dcc4; }

/* =====================================================================
   LOS CICLOS DE LOS CINCO ELEMENTOS dentro del Tratamiento (生 剋 乘 侮)
   ===================================================================== */

.cx-bloque { padding:14px; border-radius:12px; margin:13px 0;
  border:1px solid var(--linea); border-left:3px solid var(--el);
  background:rgba(255,255,255,.03); }
.cx-bloque h4 { margin:0 0 9px; font-size:.96rem; }
.cx-frase { font-size:.84rem; margin:9px 0 3px; }
.cx-clin { font-size:.79rem; line-height:1.65; color:#cdc6bb; margin:0 0 6px; }
.cx-cita { font-size:.75rem; line-height:1.6; color:var(--oro-claro);
  font-style:italic; margin:5px 0 4px; padding-left:11px;
  border-left:2px solid rgba(217,164,65,.4); }

.cx-cadena { display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:11px; padding:9px 11px; border-radius:9px;
  background:rgba(0,0,0,.24); font-size:.73rem; }
.cx-cadena span { padding:3px 8px; border-radius:20px;
  border:1px solid var(--linea); white-space:nowrap; }
.cx-cadena span.cx-yo { border-color:var(--el); color:var(--el); font-weight:700; }
.cx-cadena em { font-style:normal; color:var(--texto-suave); font-size:.66rem;
  margin-left:3px; }
.cx-cadena i { font-style:normal; color:var(--texto-suave); }

@media (max-width:640px) {
  .cx-cadena { font-size:.68rem; gap:4px; }
}

/* Hexagrama del I Ching y su punto correspondiente */
.ix-hex { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ix-hex__i { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); text-align:center; }
.ix-hex__i--punto { border-color:rgba(217,164,65,.5); background:rgba(217,164,65,.1); }
.ix-hex__i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:4px; }
.ix-hex__i b { display:block; font-size:.98rem; }
.ix-hex__i span { display:block; font-size:.74rem; color:var(--texto-suave); margin-top:2px; }
.ix-hex__i em { display:block; font-style:normal; font-size:.68rem;
  color:var(--oro-claro); margin-top:4px; }
@media (max-width:640px) { .ix-hex { grid-template-columns:1fr; } }

/* Las 6 lineas del hexagrama y su punto */
.ix-lineas { display:flex; flex-direction:column; gap:7px; margin:9px 0; }
.ix-linea { display:grid; grid-template-columns:52px 1fr 130px; gap:11px;
  align-items:center; padding:9px 12px; border-radius:10px;
  border:1px solid var(--linea); background:rgba(0,0,0,.2); }
.ix-linea--vacia { opacity:.5; }
.ix-linea__yao { text-align:center; }
.ix-linea__yao b { display:block; font-size:1.05rem; color:var(--oro); line-height:1; }
.ix-linea__yao small { display:block; font-size:.62rem; color:var(--texto-suave); }
.ix-linea__cat b { display:block; font-size:.82rem; }
.ix-linea__cat small { display:block; font-size:.66rem; color:var(--texto-suave); }
.ix-linea__punto { text-align:right; }
.ix-linea__punto b { display:block; font-size:.94rem; color:var(--oro-claro); }
.ix-linea__punto span { display:block; font-size:.7rem; color:var(--texto-suave); }
.ix-linea .sh-punto__func { grid-column:2 / -1; margin-top:4px; font-size:.72rem; }
@media (max-width:640px) {
  .ix-linea { grid-template-columns:44px 1fr 96px; gap:8px; font-size:.9rem; }
}

/* El punto resonador del dia */
.dia-cab { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.dia-cab__i { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); text-align:center; }
.dia-cab__i--punto { border-color:rgba(217,164,65,.55); background:rgba(217,164,65,.11); }
.dia-cab__i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:4px; }
.dia-cab__i b { display:block; font-size:.96rem; }
.dia-cab__i span { display:block; font-size:.72rem; color:var(--texto-suave); margin-top:2px; }
.dia-cab__i em { display:block; font-style:normal; font-size:.68rem;
  color:var(--oro-claro); margin-top:4px; }
@media (max-width:640px) { .dia-cab { grid-template-columns:1fr 1fr; } }

/* Lista de proximos dias del resonador */
.dia-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.dia-lista__i { padding:9px 11px; border-radius:9px; border:1px solid var(--linea);
  background:rgba(0,0,0,.2); }
.dia-lista__i--hoy { border-color:var(--oro); background:rgba(217,164,65,.13); }
.dia-lista__i b { display:block; font-size:.76rem; color:var(--oro); }
.dia-lista__i span { display:block; font-size:.7rem; color:var(--texto-suave); }
.dia-lista__i em { display:block; font-style:normal; font-size:.86rem;
  font-weight:700; margin-top:3px; }
.dia-lista__i small { display:block; font-size:.66rem; color:var(--texto-suave); }

/* =====================================================================
   HOROSCOPO CHINO · 生肖
   ===================================================================== */
.ho-lista { display:flex; flex-direction:column; gap:9px; }
.ho-animal { border-radius:12px; border:1px solid var(--linea);
  border-left:3px solid var(--el); background:rgba(255,255,255,.028); }
.ho-animal > summary { display:flex; align-items:center; gap:11px; padding:12px 14px;
  cursor:pointer; list-style:none; }
.ho-animal > summary::-webkit-details-marker { display:none; }
.ho-animal > summary > b { font-size:1.5rem; color:var(--el); min-width:38px; text-align:center; }
.ho-animal > summary > div { flex:1; }
.ho-animal > summary strong { display:block; font-size:.96rem; }
.ho-animal > summary span { display:block; font-size:.72rem; color:var(--texto-suave); }
.ho-animal > summary i { font-style:normal; font-size:.7rem; color:var(--oro-claro); }
.ho-animal__cuerpo { padding:4px 15px 15px; font-size:.81rem; line-height:1.6; }

.ho-fechas { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:9px; margin:9px 0; }
.ho-fechas > div { padding:9px 11px; border-radius:9px; border:1px solid var(--linea);
  background:rgba(0,0,0,.2); }
.ho-fechas small { display:block; font-size:.57rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:3px; }
.ho-fechas b { display:block; font-size:.79rem; }
.ho-fechas span { display:block; font-size:.68rem; color:var(--texto-suave); }

.ho-rasgo { font-size:.86rem; margin:8px 0 10px; color:var(--oro-claro); font-style:italic; }
.ho-cols { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:9px 0; }
.ho-col { padding:11px 13px; border-radius:10px; border:1px solid var(--linea); }
.ho-col--bueno { background:rgba(120,180,120,.07); border-color:rgba(120,180,120,.3); }
.ho-col--malo { background:rgba(193,39,45,.06); border-color:rgba(193,39,45,.3); }
.ho-col b { display:block; font-size:.8rem; margin-bottom:5px; }
.ho-col--bueno b { color:#bfe3c1; }
.ho-col--malo b { color:#f0b9b9; }
.ho-col ul { margin:0; padding-left:17px; font-size:.78rem; color:#cdc6bb; line-height:1.6; }
.ho-compat { font-size:.78rem; margin:10px 0 0; }

.ho-elementos { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:12px; }
.ho-elemento { padding:13px; border-radius:12px; border:1px solid var(--linea);
  border-top:3px solid var(--el); background:rgba(255,255,255,.028); }
.ho-elemento header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ho-elemento header b { font-size:1.4rem; line-height:1; }
.ho-elemento header strong { display:block; font-size:.95rem; color:var(--el); }
.ho-elemento header span { display:block; font-size:.72rem; color:var(--texto-suave); }
.ho-elemento p { font-size:.79rem; line-height:1.6; margin:6px 0; color:#cdc6bb; }
.ho-el-rasgo { color:var(--el) !important; font-weight:700; font-size:.82rem !important; }
.ho-el-cuidado { color:var(--oro-claro) !important; }

.ho-60 { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:7px; }
.ho-60__i { padding:8px 10px; border-radius:9px; border:1px solid var(--linea);
  border-left:3px solid var(--el); background:rgba(0,0,0,.2); }
.ho-60__i b { display:block; font-size:.78rem; color:var(--oro); }
.ho-60__i span { display:block; font-size:.68rem; color:var(--texto-suave); }
.ho-60__i em { display:block; font-style:normal; font-size:.72rem; margin-top:2px; }

.ho-res { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ho-res__i { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); text-align:center; }
.ho-res__i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:4px; }
.ho-res__i b { display:block; font-size:.94rem; }
.ho-res__i span { display:block; font-size:.72rem; color:var(--texto-suave); margin-top:2px; }

@media (max-width:640px) {
  .ho-cols { grid-template-columns:1fr; }
  .ho-elementos, .ho-lista { grid-template-columns:1fr; }
  .ho-animal > summary { flex-wrap:wrap; }
}

/* Marca T/D del tablero de resonadores */
.dia-cab__i--marca { grid-column:1 / -1; }
.dia-cab__i--tonificar { border-color:rgba(193,39,45,.55); background:rgba(193,39,45,.1); }
.dia-cab__i--dispersar { border-color:rgba(120,120,130,.6); background:rgba(120,120,130,.1); }
.dia-cab__i--marca span { font-size:.74rem !important; line-height:1.5; margin-top:5px; }

/* =====================================================================
   LA BARRA DE ABAJO EN EL CELULAR
   ---------------------------------------------------------------------
   Tenía 17 botones en flex:1, así que en un celular cada uno quedaba en
   21px y el carácter chino (1.42rem ≈ 23px) se cortaba.
   Ahora: ancho mínimo por botón + la barra se desplaza en horizontal.
   Se añade también un degradado a la derecha, para que se VEA que hay
   más botones y se pueda deslizar.
   ===================================================================== */
@media (max-width: 780px) {
  .barra {
    justify-content: flex-start;
    /* el degradado avisa que hay más a la derecha */
    background-image: linear-gradient(to left,
      rgba(10,9,8,.97) 0, rgba(10,9,8,.97) 62%, rgba(10,9,8,0) 100%);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 26px 100%;
    background-color: rgba(10,9,8,.97);
  }
  .barra a {
    min-width: 56px;
    padding: 0 5px;
  }
  .barra a b {
    font-size: 1.24rem;
  }
  .barra a span {
    font-size: .58rem;
    white-space: nowrap;
  }
  /* El último botón necesita espacio para el degradado */
  .barra::after {
    content: '';
    flex: 0 0 22px;
  }
}
@media (max-width: 380px) {
  .barra a { min-width: 50px; }
  .barra a b { font-size: 1.15rem; }
  .barra a span { font-size: .54rem; }
}

/* =====================================================================
   EL MENÚ COMPLETO · un botón que despliega todas las secciones
   ---------------------------------------------------------------------
   Con 17 botones la barra no cabía en el celular. Ahora la barra tiene
   los 4 principales más un botón «Todo», que abre este menú con el
   carácter chino, su pinyin y la traducción al español de cada sección.
   ===================================================================== */
.barra__mas {
  flex: 1;
  min-width: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: transparent; border: 0; cursor: pointer;
  color: var(--texto-suave); font-size: .66rem; font-weight: 600;
  letter-spacing: .02em; font-family: inherit;
  transition: color .2s ease;
}
.barra__mas b { font-size: 1.42rem; line-height: 1; font-weight: 400; }
.barra__mas:hover, .barra__mas.abierto { color: var(--oro); }
.barra__mas.abierto b { text-shadow: 0 0 16px rgba(217,164,65,.55); }

.menu-todo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  /* El panel se movía de izquierda a derecha por el flex del contenedor.
     Ahora se ancla abajo y centrado con position, no con flex. */
  display: block;
  overflow: hidden;
  overscroll-behavior: contain;
}
.menu-todo[hidden] { display: none; }
.menu-todo__caja {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 760px; max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--fondo, #0d0c0b);
  border: 1px solid var(--linea-fuerte);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: subirMenu .22s ease;
}
@keyframes subirMenu {
  from { transform: translateX(-50%) translateY(14px); opacity: .6 }
  to   { transform: translateX(-50%) translateY(0); opacity: 1 }
}

.menu-todo__cab {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px 12px; border-bottom: 1px solid var(--linea);
}
.menu-todo__cab > div { flex: 1; }
.menu-todo__cab strong { display: block; font-size: 1rem; }
.menu-todo__cab span { display: block; font-size: .74rem; color: var(--texto-suave); }
.menu-todo__cerrar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); background: rgba(255,255,255,.05);
  color: inherit; font-size: 1rem; cursor: pointer;
}
.menu-todo__cerrar:hover { border-color: var(--oro); color: var(--oro); }

.menu-todo__rejilla {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 13px 15px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 9px;
}
.menu-todo__rejilla a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--linea); background: rgba(255,255,255,.03);
  text-decoration: none; color: inherit;
}
.menu-todo__rejilla a:hover { border-color: var(--oro); background: rgba(217,164,65,.09); }
.menu-todo__rejilla a > b {
  font-family: var(--chino); font-size: 1.5rem; font-weight: 500;
  color: var(--oro-claro); min-width: 34px; text-align: center; line-height: 1;
}
.menu-todo__rejilla a > div { min-width: 0; }
.menu-todo__rejilla strong { display: block; font-size: .88rem; }
.menu-todo__rejilla span { display: block; font-size: .71rem; color: var(--texto-suave); line-height: 1.4; }

@media (max-width: 560px) {
  .menu-todo__caja { max-height: 88vh; border-radius: 16px 16px 0 0; }
  .menu-todo__rejilla { grid-template-columns: 1fr; }
}

/* El botón «Todo» marcado cuando la sección está dentro del menú */
.barra__mas.activo { color: var(--oro); }
.barra__mas.activo b { text-shadow: 0 0 16px rgba(217,164,65,.55); }
.menu-todo__rejilla a.activo { border-color: var(--oro); background: rgba(217,164,65,.13); }

/* =====================================================================
   LA BARRA CON 5 BOTONES · ajustes
   ---------------------------------------------------------------------
   Ya no hay que desplazarla: solo son 5. Se asegura que quede fija
   abajo, que el chino se vea completo y que el botón «Todo» mida igual.
   ===================================================================== */
.barra a, .barra__mas {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
}
.barra a b, .barra__mas b {
  font-size: 1.42rem;
  line-height: 1;
}
.barra a span, .barra__mas span {
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (max-width: 420px) {
  .barra a b, .barra__mas b { font-size: 1.3rem; }
  .barra a span, .barra__mas span { font-size: .58rem; }
}
@media (max-width: 340px) {
  .barra a b, .barra__mas b { font-size: 1.16rem; }
  .barra a span, .barra__mas span { font-size: .53rem; }
}

/* El panel del menú: que no se mueva ni con el scroll de atrás */
.menu-todo__rejilla { overscroll-behavior: contain; }

/* =====================================================================
   EXPORTAR A EXCEL
   ===================================================================== */
.hc-excel {
  margin: 16px 0 6px; padding: 15px 16px; border-radius: 13px;
  border: 1px solid rgba(120, 170, 120, .35);
  background: rgba(120, 170, 120, .06);
}
.hc-excel__tit { margin: 0 0 11px; }
.hc-excel__tit b { display: block; font-size: .95rem; color: #bfe3c1; margin-bottom: 4px; }
.hc-excel__tit span { display: block; font-size: .78rem; color: var(--texto-suave); line-height: 1.55; }
.hc-btn--excel {
  border-color: rgba(120, 170, 120, .5) !important;
  background: rgba(120, 170, 120, .12) !important;
}
.hc-btn--excel:hover { border-color: #8fc98f !important; background: rgba(120,170,120,.22) !important; }
.hc-excel__nota {
  margin: 11px 0 0; font-size: .74rem; color: var(--texto-suave); line-height: 1.55;
  padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,.2);
  border-left: 3px solid rgba(217,164,65,.5);
}

/* Botón Actualizar de la cabecera: recarga sin usar el teclado */
.btn-actualizar {
  margin-left: auto; margin-right: 8px;
  padding: 7px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--linea-fuerte);
  background: rgba(255,255,255,.05);
  color: var(--texto-suave); font-size: .74rem; font-weight: 600;
  font-family: inherit; white-space: nowrap;
  transition: all .2s ease;
}
.btn-actualizar:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }
.btn-actualizar:disabled { opacity: .6; cursor: wait; }
@media (max-width: 380px) { .btn-actualizar { font-size: .68rem; padding: 6px 9px; } }

/* =====================================================================
   LA RECETA · solo los puntos a punturar
   ---------------------------------------------------------------------
   La pantalla que el terapeuta tiene delante mientras trabaja.
   Una tabla por sistema: punto, chino, pinyin, español, acción, qué trata.
   ===================================================================== */
.rc-cab { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:11px; margin-bottom:14px; }
.rc-cab__i { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); }
.rc-cab__i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:4px; }
.rc-cab__i b { display:block; font-size:1rem; }
.rc-cab__i span { display:block; font-size:.74rem; color:var(--texto-suave); margin-top:3px; line-height:1.5; }
.rc-cab__i--accion { border-color:rgba(217,164,65,.55); background:rgba(217,164,65,.1); }
.rc-cab__i--moxa { border-color:rgba(193,39,45,.55); background:rgba(193,39,45,.1); }

.rc-capas { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.rc-capa { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.rc-capa b { display:block; font-size:.92rem; color:var(--oro); }
.rc-capa span { display:block; font-size:.7rem; color:var(--texto-suave); margin-bottom:4px; }
.rc-capa p { margin:0; font-size:.78rem; line-height:1.55; color:#cdc6bb; }
.rc-capa em { display:block; font-style:normal; font-size:.68rem;
  color:var(--oro-claro); margin-top:5px; }

.rc-titulo { margin:24px 0 10px; font-size:1.02rem; font-weight:700;
  padding-bottom:8px; border-bottom:1px solid var(--linea-fuerte); }
.rc-titulo b { font-family:var(--chino); color:var(--oro); margin-right:8px; font-weight:500; }
.rc-nota { font-size:.78rem; color:var(--texto-suave); line-height:1.6; margin:0 0 11px; }
.rc-vacio { font-size:.8rem; color:var(--texto-suave); padding:13px;
  border-radius:10px; background:rgba(255,255,255,.03); border:1px dashed var(--linea); }

.rc-tabla { width:100%; border-collapse:collapse; font-size:.78rem; }
.rc-tabla th { text-align:left; padding:8px 9px; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--oro);
  border-bottom:1px solid var(--linea-fuerte); white-space:nowrap; }
.rc-tabla td { padding:8px 9px; border-bottom:1px solid var(--linea); vertical-align:top; }
.rc-tabla tr:hover td { background:rgba(217,164,65,.05); }
.rc-tabla__grupo td { background:rgba(217,164,65,.13) !important; font-weight:700;
  color:var(--oro-claro); font-size:.76rem; }
.rc-cod { font-weight:700; color:var(--oro-claro); white-space:nowrap; }
.rc-ch { font-family:var(--chino); font-size:1.06rem; white-space:nowrap; }
.rc-acc { white-space:nowrap; font-weight:700; color:var(--oro); }
.rc-func { font-size:.73rem; color:var(--texto-suave); line-height:1.5; }

.rc-laminas { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; }
.rc-laminas figure { margin:0; }
.rc-laminas img { width:100%; border-radius:8px; border:1px solid var(--linea); display:block; }
.rc-laminas figcaption { font-size:.68rem; text-align:center; color:var(--oro-claro); margin-top:3px; }

@media (max-width:640px) {
  .rc-tabla { font-size:.72rem; }
  .rc-tabla th, .rc-tabla td { padding:6px 5px; }
  .rc-ch { font-size:.96rem; }
  .rc-func { display:none; }
}

/* Los DOS hexagramas de Chao Chen: el del desequilibrio y el contrario */
.cc-dos { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:11px 0; }
.cc-dos__i { padding:13px 15px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(0,0,0,.22); text-align:center; }
.cc-dos__i--mal { border-color:rgba(193,39,45,.45); background:rgba(193,39,45,.07); }
.cc-dos__i--bueno { border-color:rgba(120,180,120,.5); background:rgba(120,180,120,.08); }
.cc-dos__i small { display:block; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--texto-suave); margin-bottom:5px; }
.cc-dos__i b { display:block; font-size:1rem; }
.cc-dos__i--bueno b { color:#bfe3c1; }
.cc-dos__i--mal b { color:#f0b9b9; }
.cc-dos__i span { display:block; font-size:.76rem; color:var(--oro-claro); margin-top:2px; }
.cc-dos__i em { display:block; font-style:normal; font-size:.7rem;
  color:var(--texto-suave); margin-top:4px; }
.cc-dos__i p { margin:8px 0 0; font-size:.74rem; color:var(--texto-suave); line-height:1.5; }

/* EL PUNTO A PUNZURAR, destacado */
.rc-principal { margin:13px 0; border-radius:12px; border:2px solid var(--oro);
  background:rgba(217,164,65,.1); overflow:hidden; }
.rc-principal__cab { display:flex; align-items:baseline; gap:9px; padding:9px 15px;
  background:rgba(217,164,65,.18); border-bottom:1px solid rgba(217,164,65,.3); }
.rc-principal__cab b { font-size:.72rem; letter-spacing:.06em; color:var(--oro); }
.rc-principal__cab span { font-size:.68rem; color:var(--texto-suave); }
.rc-principal__cuerpo { display:flex; align-items:center; gap:15px; padding:14px 15px 6px; flex-wrap:wrap; }
.rc-principal__cod { font-size:1.5rem; color:var(--oro); font-weight:700; line-height:1; }
.rc-principal__ch { display:block; font-family:var(--chino); font-size:1.4rem; line-height:1.1; }
.rc-principal__cuerpo strong { display:block; font-size:.92rem; }
.rc-principal__cuerpo em { display:block; font-style:normal; font-size:.78rem; color:var(--texto-suave); }
.rc-principal__datos { margin-left:auto; text-align:right; }
.rc-principal__datos small { display:block; font-size:.72rem; color:var(--oro-claro); }
.rc-principal__razon { margin:8px 15px 0; font-size:.8rem; line-height:1.6; color:#e8dcc4; }
.rc-principal__func { margin:7px 15px 14px; font-size:.78rem; line-height:1.6; color:#cdc6bb; }
.rc-tabla__elegido td { background:rgba(217,164,65,.16) !important; font-weight:700; }
.rc-tabla__elegido td.rc-cod { color:var(--oro); }

@media (max-width:640px) {
  .cc-dos { grid-template-columns:1fr; }
  .rc-principal__cuerpo { gap:10px; }
  .rc-principal__datos { margin-left:0; text-align:left; }
}

/* =====================================================================
   ALIMENTOS DE COLOMBIA
   ===================================================================== */
.al-filtros { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:9px; margin-bottom:11px; }
.al-filtros input, .al-filtros select { padding:9px 11px; border-radius:9px;
  border:1px solid var(--linea-fuerte); background:rgba(0,0,0,.32); color:inherit; font-size:.82rem; }

.al-grupo { margin:22px 0 10px; font-size:.98rem; font-weight:700;
  padding-bottom:7px; border-bottom:1px solid var(--linea-fuerte); }
.al-grupo b { font-size:1.1rem; margin-right:8px; }
.al-grupo small { font-weight:400; font-size:.72rem; color:var(--texto-suave); margin-left:9px; }

.al-rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:9px; }
.al-item { border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--nat); background:rgba(255,255,255,.03); }
.al-item > summary { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:10px 12px; cursor:pointer; list-style:none; }
.al-item > summary::-webkit-details-marker { display:none; }
.al-item > summary b { font-size:.85rem; }
.al-item > summary em { font-style:normal; font-size:.68rem; color:var(--oro-claro); margin-left:auto; }
.al-item > summary i { font-style:normal; font-size:.8rem; color:var(--texto-suave); cursor:help; }
.al-item__cuerpo { padding:2px 12px 12px; font-size:.76rem; line-height:1.6; }
.al-item__cuerpo p { margin:5px 0; }
.al-latino { font-size:.72rem; color:var(--texto-suave); }
.al-consejo { color:var(--oro-claro); }
.al-aviso { color:var(--texto-suave); font-size:.72rem; font-style:italic;
  padding-top:5px; border-top:1px dashed var(--linea); }
.al-texto { color:#8fc98f; font-size:.72rem; padding-top:5px; border-top:1px dashed var(--linea); }

@media (max-width:700px) {
  .al-filtros { grid-template-columns:1fr 1fr; }
  .al-rejilla { grid-template-columns:1fr; }
}

/* =====================================================================
   BALANCE METHOD · RICHARD TAN + WANG JU-YI
   Las 12 estructuras: los 4 canales con su rango, los puntos Shu que
   caen dentro, y el aporte de palpación de Wang.
   ===================================================================== */
.bal-canales { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }
.bal-canal { padding:10px 12px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.02); border-left:3px solid var(--texto-suave); }
.bal-canal--afectado { border-left-color:var(--oro); background:rgba(217,164,65,.07); }
.bal-canal__cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-bottom:7px; }
.bal-canal__cab b { font-size:1rem; color:var(--oro-claro); min-width:30px; }
.bal-canal__cab span { font-size:.79rem; color:#e2dbd0; }
.bal-canal__cab em { font-style:normal; font-size:.7rem; color:var(--texto-suave); margin-left:auto; }
.bal-marca { font-style:normal; font-size:.62rem; letter-spacing:.03em; text-transform:uppercase;
  color:#1b1710; background:var(--oro); padding:1px 6px; border-radius:9px; }
.bal-shu { display:flex; flex-wrap:wrap; gap:5px; }
.bal-shu__i { display:flex; flex-direction:column; padding:4px 8px; border-radius:8px;
  border:1px solid var(--linea); background:rgba(0,0,0,.22); min-width:74px; }
.bal-shu__i b { font-size:.78rem; color:#f0e9dd; }
.bal-shu__i em { font-style:normal; font-size:.7rem; color:var(--oro-claro); }
.bal-shu__i small { font-size:.62rem; color:var(--texto-suave); }
.bal-canal__nota { margin:6px 0 0; font-size:.68rem; color:var(--texto-suave); line-height:1.5; }

.wang-caja { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid #7fa8c9; background:rgba(127,168,201,.06); margin-top:8px; }
.wang-caja__palp { margin:0 0 8px; font-size:.79rem; line-height:1.65; color:#d8d1c6; }
.wang-caja__sub { margin:0 0 5px; font-size:.71rem; color:#9dc0dd; text-transform:uppercase;
  letter-spacing:.04em; }
.wang-signos { margin:0 0 8px; padding-left:17px; }
.wang-signos li { font-size:.75rem; color:#cdc6bb; line-height:1.6; margin-bottom:3px; }
.wang-clave { margin:0 0 8px; padding:8px 10px; border-radius:8px;
  background:rgba(217,164,65,.12); border:1px solid rgba(217,164,65,.3);
  font-size:.78rem; color:#efd9a8; line-height:1.6; }
.wang-caja__aporte { margin:0; font-size:.76rem; color:var(--texto-suave);
  line-height:1.65; padding-top:7px; border-top:1px dashed var(--linea); }
.wang-tabla { display:flex; flex-direction:column; gap:5px; }
.wang-tabla__f { display:grid; grid-template-columns:170px 1fr; gap:9px; padding:5px 8px;
  border-radius:7px; background:rgba(0,0,0,.18); }
.wang-tabla__f b { font-size:.72rem; color:var(--oro-claro); }
.wang-tabla__f span { font-size:.72rem; color:#cdc6bb; line-height:1.5; }

.pat-bloque { padding:9px 11px; border-radius:9px; border:1px solid var(--linea);
  background:rgba(255,255,255,.02); margin-bottom:7px; }
.pat-bloque--suyo { border-color:rgba(217,164,65,.4); background:rgba(217,164,65,.08); }
.pat-bloque__cab { margin:0 0 5px; font-size:.78rem; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:6px; }
.pat-bloque__cab em { font-style:normal; color:var(--oro-claro); }
.pat-lista { margin:0; padding-left:17px; }
.pat-lista li { font-size:.74rem; color:#cdc6bb; line-height:1.55; margin-bottom:2px; }
.pat-otros { margin-top:9px; }
.pat-otros > summary { font-size:.74rem; color:var(--texto-suave); cursor:pointer; padding:5px 0; }

@media (max-width:700px) {
  .bal-canales { grid-template-columns:1fr; }
  .wang-tabla__f { grid-template-columns:1fr; gap:2px; }
}

/* Marcar los canales a mano cuando el diagnóstico no da ninguno */
.bal-manual { margin-top:11px; padding-top:10px; border-top:1px dashed var(--linea); }
.bal-manual__t { margin:0 0 8px; font-size:.78rem; color:var(--oro-claro); }
.bal-manual__lista { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:11px; }
.bal-manual__i { display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:8px;
  border:1px solid var(--linea); background:rgba(0,0,0,.2); cursor:pointer; font-size:.74rem;
  color:#cdc6bb; transition:border-color .15s, background .15s; }
.bal-manual__i:hover { border-color:var(--oro); background:rgba(217,164,65,.1); }
.bal-manual__i input { accent-color:var(--oro); cursor:pointer; }
.bal-manual__i b { color:var(--oro-claro); font-size:.76rem; }
.bal-manual__btn { width:100%; padding:10px; border-radius:9px; border:1px solid var(--oro);
  background:rgba(217,164,65,.16); color:var(--oro-claro); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:background .15s; }
.bal-manual__btn:hover { background:rgba(217,164,65,.3); }

@media (max-width:700px) {
  .bal-manual__lista { grid-template-columns:1fr 1fr; }
}

/* =====================================================================
   EL DIBUJO DE LA ESTRUCTURA
   Los 4 canales en las 4 esquinas y el símbolo al centro, igual que en
   las diapositivas: aspa ✕ para las divisiones, cuadrado ▢ para los
   elementos.
   ===================================================================== */
.est-dibujo { margin:6px 0 14px; padding:14px; border-radius:13px;
  border:1px solid var(--linea); background:rgba(0,0,0,.25); }
.est-dibujo__t { margin:0 0 12px; text-align:center; font-size:.83rem; color:var(--oro-claro);
  font-weight:600; }
.est-dibujo__caja { position:relative; display:grid;
  grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto;
  gap:10px; align-items:center; justify-items:center; max-width:430px; margin:0 auto; }
.est-canal { display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 13px; border-radius:9px; border:1px solid var(--linea);
  background:rgba(255,255,255,.04); min-width:76px; }
.est-canal b { font-size:.95rem; color:var(--oro-claro); }
.est-canal span { font-size:.72rem; color:var(--texto-suave); }
.est-canal--si { grid-area:1/1; }
.est-canal--sd { grid-area:1/3; }
.est-canal--ii { grid-area:3/1; }
.est-canal--id { grid-area:3/3; }
.est-simbolo { grid-area:2/2; position:relative; width:100%; aspect-ratio:1/1;
  max-width:120px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; border:2px solid var(--oro); background:rgba(217,164,65,.08); }
.est-simbolo--cuadro { border-radius:0; }
.est-simbolo span { font-size:2.7rem; line-height:1; color:var(--oro-claro); }
.est-simbolo em { font-style:normal; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--texto-suave); margin-top:2px; }
.est-dibujo__nota { margin:12px 0 0; text-align:center; font-size:.72rem;
  color:var(--texto-suave); }

/* =====================================================================
   TONIFICAR O DISPERSAR
   ===================================================================== */
.accion { margin:0 0 14px; padding:13px 15px; border-radius:12px;
  border:1px solid var(--linea); border-left:3px solid var(--oro);
  background:rgba(217,164,65,.06); }
.accion__cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; margin-bottom:6px; }
.accion__etiq { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-suave); }
.accion__val { font-size:1.12rem; font-weight:700; }
.accion__exp { margin:0 0 10px; font-size:.79rem; color:#d8d1c6; line-height:1.6; }
.accion__fila { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.accion__c { display:flex; flex-direction:column; gap:3px; padding:9px 11px;
  border-radius:9px; background:rgba(0,0,0,.24); border:1px solid var(--linea); }
.accion__c b { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--texto-suave); }
.accion__c span { font-size:.83rem; color:var(--oro-claro); font-weight:600; }
.accion__c small { font-size:.7rem; color:var(--texto-suave); line-height:1.5; }
.accion__det { margin-top:10px; }
.accion__det > summary { font-size:.73rem; color:var(--texto-suave); cursor:pointer; padding:4px 0; }

@media (max-width:700px) {
  .est-dibujo__caja { max-width:100%; gap:7px; }
  .est-canal { min-width:60px; padding:6px 9px; }
  .est-canal b { font-size:.85rem; }
  .est-simbolo span { font-size:2rem; }
  .accion__fila { grid-template-columns:1fr; }
}

/* =====================================================================
   CHAO CHEN · LA LÍNEA ELEGIDA
   Del hexagrama de equilibrio, cuál de las 6 líneas se puntura.
   ===================================================================== */
.ix-linea--elegida { border-color:var(--oro) !important;
  background:rgba(217,164,65,.13) !important;
  box-shadow:0 0 0 1px var(--oro); }
.cc-elegido { display:block; font-style:normal; font-size:.66rem; margin-top:3px;
  color:var(--oro-claro); font-weight:600; letter-spacing:.02em; }

/* =====================================================================
   ¿EN QUÉ MANO Y EN QUÉ PIE?  ·  EL EQUILIBRIO YIN Y YANG
   ===================================================================== */
.lado-aviso { padding:10px 13px; border-radius:10px; margin:6px 0 12px;
  background:rgba(224,138,106,.14); border:1px solid rgba(224,138,106,.4);
  font-size:.79rem; line-height:1.6; color:#f0cdbd; }
.lado-aviso--suave { background:rgba(127,168,201,.1); border-color:rgba(127,168,201,.35);
  color:#c9dced; }

.lado-dibujo { display:grid; grid-template-columns:1fr auto 1fr; gap:11px;
  align-items:start; margin-bottom:13px; }
.lado-miembro { padding:11px 13px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.03); }
.lado-miembro__cab { display:flex; align-items:center; gap:7px; margin-bottom:9px;
  padding-bottom:7px; border-bottom:1px dashed var(--linea); }
.lado-miembro__cab span { font-size:1.15rem; }
.lado-miembro__cab b { font-size:.79rem; color:var(--oro-claro); letter-spacing:.04em; }
.lado-miembro__cab em { font-style:normal; font-size:.66rem; color:var(--texto-suave); margin-left:auto; }

.lado-punto { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  padding:7px 9px; border-radius:8px; background:rgba(0,0,0,.2);
  border:1px solid var(--linea); margin-bottom:6px; }
.lado-punto b { font-size:.9rem; color:var(--oro-claro); min-width:26px; }
.lado-punto span { font-size:.74rem; color:#ded7cc; }
.lado-punto em { font-style:normal; font-size:.68rem; color:var(--texto-suave); margin-left:auto; }
.lado-punto small { display:block; width:100%; font-size:.66rem; color:var(--texto-suave); }
.lado-vacio { margin:0; font-size:.72rem; color:var(--texto-suave); font-style:italic; }

.lado-centro { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; padding:0 5px; align-self:center; }
.lado-centro__i { display:flex; flex-direction:column; align-items:center; gap:1px; }
.lado-centro__i b { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--texto-suave); }
.lado-centro__i span { font-size:.78rem; color:var(--oro-claro); font-weight:600; }
.lado-centro__eje { font-size:1.25rem; color:var(--oro); line-height:1; }
.lado-centro__nota { margin:0; font-size:.6rem; color:var(--texto-suave); }

.lado-dinamico { padding:11px 13px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid #7fa8c9; background:rgba(127,168,201,.06); margin-bottom:12px; }
.lado-dinamico__t { margin:0 0 8px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.04em; color:#9dc0dd; }
.lado-dinamico__f { display:grid; grid-template-columns:44px 100px 22px 1fr; gap:7px;
  align-items:center; padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.06); }
.lado-dinamico__f:last-child { border-bottom:0; }
.lado-dinamico__f b { font-size:.82rem; color:var(--oro-claro); }
.lado-dinamico__f span { font-size:.72rem; color:#cdc6bb; }
.lado-dinamico__f i { font-style:normal; color:var(--oro); text-align:center; }
.lado-dinamico__f em { font-style:normal; font-size:.72rem; color:#9dc0dd; }

.lado-regla { display:grid; grid-template-columns:150px 1fr; gap:9px;
  padding:7px 9px; border-radius:8px; background:rgba(0,0,0,.18); margin-bottom:5px; }
.lado-regla b { font-size:.72rem; color:var(--oro-claro); }
.lado-regla span { font-size:.72rem; color:#cdc6bb; line-height:1.55; }

@media (max-width:700px) {
  .lado-dibujo { grid-template-columns:1fr; }
  .lado-centro { flex-direction:row; gap:9px; padding:7px 0; }
  .lado-centro__eje { transform:rotate(90deg); }
  .lado-dinamico__f { grid-template-columns:38px 1fr; }
  .lado-dinamico__f i { display:none; }
  .lado-regla { grid-template-columns:1fr; gap:3px; }
}

/* =====================================================================
   LOS DOS CRITERIOS PARA ELEGIR EL LADO
   Criterio 1: la zona espejo (por altura).  Criterio 2: Yin y Yang.
   ===================================================================== */
.crit { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  margin-bottom:12px; }
.crit--espejo { border-left:3px solid #7fa8c9; background:rgba(127,168,201,.06); }
.crit--dinamico { border-left:3px solid var(--oro); background:rgba(217,164,65,.06); }
.crit__cab { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.crit__n { display:flex; align-items:center; justify-content:center; width:26px;
  height:26px; border-radius:50%; font-size:.82rem; font-weight:700; flex-shrink:0; }
.crit--espejo .crit__n { background:#7fa8c9; color:#0e1216; }
.crit--dinamico .crit__n { background:var(--oro); color:#1b1710; }
.crit__cab b { display:block; font-size:.86rem; color:#e8e1d6; }
.crit__cab small { display:block; font-size:.7rem; color:var(--texto-suave); }
.crit__exp { margin:0 0 11px; font-size:.77rem; color:#cdc6bb; line-height:1.6; }
.crit__canal { padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.22);
  border:1px solid var(--linea); margin-bottom:7px; }
.crit__canal-cab { display:flex; align-items:baseline; gap:7px; margin-bottom:6px;
  padding-bottom:5px; border-bottom:1px dashed var(--linea); }
.crit__canal-cab b { font-size:.88rem; color:var(--oro-claro); }
.crit__canal-cab span { font-size:.75rem; color:#ded7cc; }
.crit__canal-cab em { font-style:normal; font-size:.7rem; color:var(--texto-suave); margin-left:auto; }
.crit__fila { display:grid; grid-template-columns:52px 1fr 18px 1fr auto; gap:7px;
  align-items:center; padding:4px 0; font-size:.74rem; }
.crit__fila b { color:var(--oro-claro); }
.crit__fila span { color:#ded7cc; }
.crit__fila i { font-style:normal; color:var(--oro); text-align:center; }
.crit__fila em { font-style:normal; color:#9dc0dd; }
.crit__fila small { font-size:.66rem; color:var(--texto-suave); }
.crit__fila--din { grid-template-columns:50px 92px 20px 1fr; padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.06); }
.crit__fila--din:last-of-type { border-bottom:0; }
.crit__nota { margin:9px 0 0; font-size:.72rem; color:var(--texto-suave);
  line-height:1.55; padding-top:7px; border-top:1px dashed var(--linea); }

.imagen-tabla { display:flex; flex-direction:column; gap:3px; }
.imagen-tabla__f { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:7px;
  padding:5px 8px; border-radius:7px; background:rgba(0,0,0,.18); }
.imagen-tabla__f span { font-size:.72rem; color:#cdc6bb; }
.imagen-tabla__f--cab { background:rgba(217,164,65,.14); }
.imagen-tabla__f--cab b { font-size:.7rem; color:var(--oro-claro); text-transform:uppercase;
  letter-spacing:.04em; }

/* =====================================================================
   LOS CINCO ELEMENTOS · LA LEY Y EL PUNTO ÚNICO
   ===================================================================== */
.sh-ley { margin:0 0 9px; font-size:.76rem; color:#cdc6bb; line-height:1.55; }
.sh-ley b { color:var(--oro-claro); }
.sh-punto-unico { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  border-left:4px solid var(--elp, var(--oro)); background:rgba(0,0,0,.22); }
.sh-punto-unico__cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin-bottom:7px; padding-bottom:6px; border-bottom:1px dashed var(--linea); }
.sh-punto-unico__cab b { font-size:1.05rem; color:var(--oro-claro); }
.sh-punto-unico__cab span { font-size:.85rem; color:#e2dbd0; }
.sh-punto-unico__cab em { font-style:normal; font-size:.72rem; color:var(--texto-suave); }
.sh-punto-unico__datos { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:7px; }
.sh-punto-unico__datos small { font-size:.69rem; padding:3px 8px; border-radius:20px;
  background:rgba(255,255,255,.06); border:1px solid var(--linea); color:#cdc6bb; }
.sh-punto-unico__datos small b { color:var(--oro-claro); }
.sh-punto-unico__datos small i { font-style:normal; color:var(--texto-suave); }
.sh-punto-unico__razon { margin:0; font-size:.75rem; color:#bfb8ae; line-height:1.6; }

/* =====================================================================
   LA LENGUA · EL ESQUEMA
   ===================================================================== */
.lg-cuerpo, .pu-cuerpo { padding:2px 0 30px; }
.lg-cab h2, .pu-cab h2 { margin:0 0 8px; font-size:1.35rem; color:#f0e9dd; }
.lg-cab h2 b, .pu-cab h2 b { color:var(--oro); font-size:1.6rem; margin-right:8px; }
.lg-cab p, .pu-cab p { margin:0 0 18px; font-size:.84rem; color:var(--texto-suave); line-height:1.65; }

.lg-titulo { margin:24px 0 11px; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--oro-claro); padding-bottom:6px;
  border-bottom:1px solid var(--linea); }
.lg-nota { font-size:.75rem; color:var(--texto-suave); line-height:1.6; margin:0 0 11px; }
.lg-fuente { margin:26px 0 0; padding-top:12px; border-top:1px dashed var(--linea);
  font-size:.69rem; color:var(--texto-suave); line-height:1.6; font-style:italic; }

/* --- el dibujo de la lengua --- */
.lg-esquema { display:flex; flex-direction:column; align-items:center; margin:6px 0 18px; }
.lg-svg { width:100%; max-width:300px; height:auto; }
.lg-svg__t { font-size:13px; font-weight:700; fill:#5a2a2a; letter-spacing:.04em;
  font-family:system-ui,sans-serif; }
.lg-svg__or { font-size:11px; fill:#7a3a3a; font-family:system-ui,sans-serif; }
.lg-esquema__nota { margin:11px 0 0; text-align:center; font-size:.73rem;
  color:var(--texto-suave); max-width:380px; line-height:1.6; }

/* --- las zonas --- */
.lg-zonas { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lg-zona { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--el, var(--oro)); background:rgba(255,255,255,.025); }
.lg-zona__cab { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.lg-zona__cab b { font-size:.95rem; color:#f0e9dd; }
.lg-zona__cab span { font-size:.75rem; color:var(--oro-claro); }
.lg-zona__or { margin:0 0 6px; font-size:.78rem; color:var(--el, var(--oro)); }
.lg-zona__que { margin:0 0 8px; font-size:.75rem; color:#bfb8ae; line-height:1.55; }
.lg-zona__sig { margin:0; padding-left:16px; }
.lg-zona__sig li { font-size:.72rem; color:var(--texto-suave); line-height:1.55; margin-bottom:3px; }
.lg-zona__sig li b { color:#d8d1c6; }

/* --- los colores --- */
.lg-colores { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.lg-color { display:flex; gap:10px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--linea); background:rgba(255,255,255,.025); }
.lg-color__muestra { width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.2); }
.lg-color b { font-size:.82rem; color:#e8e1d6; }
.lg-color small { font-size:.72rem; color:var(--oro-claro); margin-left:7px; }
.lg-color p { margin:4px 0 0; font-size:.72rem; color:var(--texto-suave); line-height:1.55; }

/* --- tablas --- */
.lg-tabla { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.lg-tabla__f { display:grid; grid-template-columns:170px 1fr; gap:11px;
  padding:7px 11px; border-radius:8px; background:rgba(0,0,0,.18); }
.lg-tabla__f b { font-size:.75rem; color:var(--oro-claro); }
.lg-tabla__f span { font-size:.75rem; color:#cdc6bb; line-height:1.55; }
.lg-tabla__f--cab { background:rgba(217,164,65,.14); }
.lg-tabla__f--cab b { text-transform:uppercase; font-size:.68rem; letter-spacing:.04em; }

/* --- cajas y bloques --- */
.lg-caja { padding:11px 14px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(217,164,65,.06); margin-bottom:12px; }
.lg-caja__exp { margin:0; font-size:.78rem; color:#cdc6bb; line-height:1.65; }

.lg-tres { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lg-bloque { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.lg-bloque h4 { margin:0 0 8px; font-size:.8rem; color:var(--oro-claro);
  text-transform:uppercase; letter-spacing:.04em; }
.lg-bloque p { margin:0 0 6px; font-size:.72rem; color:var(--texto-suave); line-height:1.55; }
.lg-bloque p b { color:#d8d1c6; }

/* --- pasos --- */
.lg-pasos { display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }
.lg-paso { display:flex; gap:11px; align-items:flex-start; padding:8px 11px;
  border-radius:9px; background:rgba(0,0,0,.18); }
.lg-paso b { display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--oro); color:#1b1710;
  font-size:.72rem; flex-shrink:0; }
.lg-paso span { font-size:.76rem; color:#cdc6bb; line-height:1.6; }

/* --- las fichas del libro de Alcocer --- */
.lg-familias { display:flex; flex-direction:column; gap:8px; }
.lg-familia { padding:10px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.02); }
.lg-familia > summary { display:flex; align-items:baseline; gap:9px; cursor:pointer;
  padding:3px 0; }
.lg-familia > summary strong { font-size:.84rem; color:#e8e1d6; }
.lg-familia > summary em { font-style:normal; font-size:.69rem; color:var(--texto-suave);
  margin-left:auto; }
.lg-familia__cuerpo { margin-top:9px; padding-top:9px; border-top:1px dashed var(--linea);
  display:flex; flex-direction:column; gap:8px; }
.lg-ficha { padding:9px 11px; border-radius:8px; background:rgba(0,0,0,.2); }
.lg-ficha__t { margin:0 0 5px; font-size:.77rem; color:var(--oro-claro); }
.lg-ficha__t b { color:var(--texto-suave); }
.lg-ficha__s { margin:0 0 4px; font-size:.71rem; color:var(--texto-suave); line-height:1.55; }
.lg-ficha__s b { color:#9dc0dd; }
.lg-ficha__s--sin b { color:#c9a0dd; }

@media (max-width:700px) {
  .lg-zonas, .lg-colores, .lg-tres { grid-template-columns:1fr; }
  .lg-tabla__f { grid-template-columns:1fr; gap:3px; }
}

/* =====================================================================
   EL PULSO · EL ESQUEMA
   ===================================================================== */
.pu-esquema { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.pu-mano { padding:13px 15px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.pu-mano__t { margin:0 0 3px; text-align:center; font-size:.83rem; font-weight:700;
  color:var(--oro-claro); letter-spacing:.03em; }
.pu-mano__sub { margin:0 0 12px; text-align:center; font-size:.7rem;
  color:var(--texto-suave); }
.pu-posiciones { display:flex; flex-direction:column; gap:9px; }
.pu-pos { padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.2);
  border:1px solid var(--linea); }
.pu-pos__cab { display:flex; align-items:baseline; gap:8px; margin-bottom:7px; }
.pu-pos__cab b { font-size:.8rem; color:#f0e9dd; }
.pu-pos__cab em { font-style:normal; font-size:.67rem; color:var(--texto-suave);
  margin-left:auto; }
.pu-nivel { display:grid; grid-template-columns:auto 1fr; gap:2px 9px;
  padding:6px 9px; border-radius:7px; margin-bottom:5px; align-items:baseline; }
.pu-nivel--sup { background:rgba(127,168,201,.13); border-left:3px solid #7fa8c9; }
.pu-nivel--prof { background:rgba(180,140,110,.13); border-left:3px solid #b48c6e; }
.pu-nivel small { grid-column:1/-1; font-size:.62rem; color:var(--texto-suave);
  text-transform:uppercase; letter-spacing:.03em; }
.pu-nivel b { font-size:.79rem; color:#e8e1d6; }
.pu-nivel span { font-size:.68rem; color:var(--texto-suave); }
.pu-nota { margin:0 0 6px; font-size:.75rem; color:var(--texto-suave);
  line-height:1.65; text-align:center; }

.pu-tres { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pu-caja { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  border-left:3px solid var(--oro); background:rgba(255,255,255,.025); }
.pu-caja__cab { display:flex; align-items:baseline; gap:7px; margin-bottom:7px; }
.pu-caja__cab b { font-size:.95rem; color:var(--oro-claro); }
.pu-caja__cab span { font-size:.76rem; color:#ded7cc; }
.pu-caja__cab em { font-style:normal; font-size:.67rem; color:var(--texto-suave);
  margin-left:auto; }
.pu-caja__donde, .pu-caja__sig { margin:0 0 6px; font-size:.73rem; color:#cdc6bb;
  line-height:1.6; }
.pu-caja__nota { margin:0; font-size:.69rem; color:var(--texto-suave); font-style:italic; }

.pu-niveles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.pu-nivel-caja { padding:12px 14px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.pu-nivel-caja__cab { display:flex; align-items:center; gap:7px; margin-bottom:8px;
  padding-bottom:7px; border-bottom:1px dashed var(--linea); flex-wrap:wrap; }
.pu-nivel-caja__cab span { font-size:1.05rem; }
.pu-nivel-caja__cab b { font-size:.92rem; color:var(--oro-claro); }
.pu-nivel-caja__ch { font-size:.8rem; color:#ded7cc; }
.pu-nivel-caja__cab em { font-style:normal; font-size:.66rem; color:var(--texto-suave);
  margin-left:auto; }
.pu-nivel-caja p { margin:0 0 6px; font-size:.72rem; color:var(--texto-suave); line-height:1.6; }
.pu-nivel-caja p b { color:#d8d1c6; }
.pu-nivel-caja__sig { color:#9dc0dd !important; }
.pu-nivel-caja__dom { padding-top:6px; border-top:1px dashed var(--linea); }

.pu-detalle { padding:11px 14px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(0,0,0,.18); margin-bottom:8px; }
.pu-detalle p { margin:0 0 6px; font-size:.75rem; color:#cdc6bb; line-height:1.6; }
.pu-detalle p:last-child { margin:0; }

.pu-grupo { margin-bottom:16px; }
.pu-grupo h4 { margin:0 0 9px; font-size:.78rem; color:var(--oro-claro);
  text-transform:uppercase; letter-spacing:.04em; }
.pu-pulsos { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pu-pulso { padding:11px 13px; border-radius:10px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.pu-pulso__cab { display:flex; align-items:baseline; gap:7px; margin-bottom:6px;
  padding-bottom:5px; border-bottom:1px dashed var(--linea); }
.pu-pulso__cab b { font-size:.86rem; color:var(--oro-claro); }
.pu-pulso__cab span { font-size:.82rem; color:#e2dbd0; }
.pu-pulso__cab em { font-style:normal; font-size:.68rem; color:var(--texto-suave);
  margin-left:auto; }
.pu-pulso__siente, .pu-pulso__sig { margin:0 0 5px; font-size:.72rem; line-height:1.55; }
.pu-pulso__siente { color:#9dc0dd; }
.pu-pulso__siente b { color:#7fa8c9; }
.pu-pulso__sig { color:var(--texto-suave); }
.pu-pulso__sig b { color:var(--oro-claro); }

.pu-lectura { padding:12px 15px; border-radius:11px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.pu-lectura p { margin:0 0 7px; font-size:.76rem; color:#cdc6bb; line-height:1.65; }
.pu-lectura p:last-child { margin:0; }
.pu-lectura__regla { padding:9px 12px; border-radius:9px; background:rgba(217,164,65,.12);
  border:1px solid rgba(217,164,65,.3); color:#efd9a8 !important; font-weight:600; }

@media (max-width:700px) {
  .pu-esquema, .pu-tres, .pu-niveles, .pu-pulsos { grid-template-columns:1fr; }
  .pu-nivel { grid-template-columns:1fr; }
  .pu-nivel b, .pu-nivel span { grid-column:1; }
}

/* =====================================================================
   LAS TRES VISTAS DEL CUERPO · como el póster de meridianos
   ===================================================================== */
.vt-cuerpo { padding:2px 0 30px; }
.vt-cab h2 { margin:0 0 8px; font-size:1.35rem; color:#f0e9dd; }
.vt-cab h2 b { color:var(--oro); font-size:1.6rem; margin-right:8px; }
.vt-cab p { margin:0 0 18px; font-size:.84rem; color:var(--texto-suave); line-height:1.65; }
.vt-sep { margin:30px 0 12px; font-size:.8rem; color:var(--oro-claro);
  text-transform:uppercase; letter-spacing:.06em; padding-bottom:7px;
  border-bottom:1px solid var(--linea); }
.vt-cargando { padding:22px; text-align:center; font-size:.82rem; color:var(--texto-suave); }

.vt-leyenda { display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
  margin-bottom:18px; padding:13px 15px; border-radius:12px;
  border:1px solid var(--linea); background:rgba(255,255,255,.025); }
.vt-leyenda__i { display:flex; align-items:center; gap:6px; font-size:.73rem; }
.vt-leyenda__c { width:13px; height:13px; border-radius:3px; flex-shrink:0;
  border:1px solid rgba(0,0,0,.4); }
.vt-leyenda__i b { color:var(--oro-claro); min-width:26px; }
.vt-leyenda__i span { color:#ded7cc; }
.vt-leyenda__i em { font-style:normal; color:var(--texto-suave); font-size:.66rem;
  margin-left:auto; }

.vt-vistas { display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-bottom:20px; }
.vt-vista { padding:11px 9px 9px; border-radius:12px; border:1px solid var(--linea);
  background:linear-gradient(180deg, rgba(20,24,30,.9), rgba(12,15,19,.95)); }
.vt-vista__cab { display:flex; align-items:baseline; gap:7px; margin-bottom:3px;
  padding:0 4px; }
.vt-vista__cab b { font-size:.76rem; color:var(--oro-claro); letter-spacing:.04em; }
.vt-vista__cab span { font-size:.74rem; color:#ded7cc; }
.vt-vista__cab em { font-style:normal; font-size:.64rem; color:var(--texto-suave);
  margin-left:auto; }
.vt-vista__sub { margin:0 0 9px; padding:0 4px; font-size:.66rem; color:var(--texto-suave); }
.vt-svg { width:100%; height:auto; display:block; }
.vt-silueta { fill:rgba(190,150,130,.16); stroke:rgba(200,170,150,.35);
  stroke-width:1.4; stroke-linejoin:round; }

/* El cuerpo de verdad, medido del modelo Z-Anatomy */
.vt-cuerpo-forma { fill:rgba(196,150,120,.22); stroke:rgba(214,178,148,.55);
  stroke-width:1.6; stroke-linejoin:round; }
.vt-hueso { fill:rgba(240,232,220,.6); stroke:none; }

.vt-regla { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(217,164,65,.06); margin-bottom:18px; }
.vt-regla__t { margin:0 0 7px; font-size:.8rem; color:var(--oro-claro);
  font-weight:600; }
.vt-regla__d { margin:0 0 11px; font-size:.76rem; color:#cdc6bb; line-height:1.65; }
.vt-regla__tabla { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.vt-regla__f { display:grid; grid-template-columns:70px 1fr; gap:8px;
  padding:6px 9px; border-radius:7px; background:rgba(0,0,0,.2); }
.vt-regla__f b { font-size:.73rem; color:var(--oro-claro); }
.vt-regla__f span { font-size:.73rem; color:#cdc6bb; }

.vt-principales { padding:14px 16px; border-radius:12px; border:1px solid var(--linea);
  background:rgba(255,255,255,.025); }
.vt-principales__rejilla { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.vt-principal { display:flex; flex-direction:column; gap:2px; padding:8px 10px;
  border-radius:8px; background:rgba(0,0,0,.22); border:1px solid var(--linea); }
.vt-principal b { font-size:.82rem; color:var(--oro-claro); }
.vt-principal span { font-size:.72rem; color:#ded7cc; }
.vt-principal em { font-style:normal; font-size:.68rem; color:var(--texto-suave); }

@media (max-width:900px) {
  .vt-vistas { grid-template-columns:1fr; }
  .vt-leyenda { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .vt-regla__tabla, .vt-principales__rejilla { grid-template-columns:1fr; }
}

@media (max-width:700px) {
  .crit__fila { grid-template-columns:44px 1fr; gap:3px; }
  .crit__fila i, .crit__fila small { display:none; }
  .crit__fila em { grid-column:2; font-size:.7rem; }
  .crit__fila--din { grid-template-columns:44px 1fr; }
  .imagen-tabla__f { grid-template-columns:1fr; gap:2px; }
  .imagen-tabla__f--cab { display:none; }
}

/* =====================================================================
   EL AVISO DE VERSIÓN VIEJA
   ---------------------------------------------------------------------
   Cuando el navegador sigue mostrando una copia guardada, los botones
   nuevos no aparecen y uno no sabe por qué. Este aviso lo dice claro y
   trae el botón para actualizar.
   ===================================================================== */
.aviso-version {
  position:fixed; left:12px; right:12px; bottom:12px; z-index:9999;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:linear-gradient(180deg,#3a2a08,#241a05);
  border:1px solid var(--oro); border-radius:12px;
  padding:12px 14px; box-shadow:0 12px 40px rgba(0,0,0,.8);
}
.aviso-version strong { color:var(--oro); font-size:.9rem; }
.aviso-version span { color:#e8e0d2; font-size:.78rem; flex:1; min-width:180px; }
.aviso-version button {
  border:0; border-radius:8px; padding:9px 16px; font:inherit;
  font-size:.8rem; font-weight:800; cursor:pointer;
  background:var(--oro); color:#1a1408;
}
.aviso-version button:hover { filter:brightness(1.12); }
.aviso-version button:disabled { opacity:.6; cursor:wait; }

/* El botón «Actualizar» de la cabecera, cuando hay versión nueva.
   Late despacio para que se note sin ser molesto. */
.btn-actualizar--nuevo {
  background:var(--oro) !important; color:#1a1408 !important;
  border-color:var(--oro) !important; font-weight:800;
  animation:latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow:0 0 0 0 rgba(217,164,65,.65); }
  50%      { box-shadow:0 0 0 9px rgba(217,164,65,0); }
}
@media (prefers-reduced-motion:reduce) {
  .btn-actualizar--nuevo { animation:none; }
}