/* Numerología 22/9 — mapa, casitas y panel de lectura.
 * Cada número tiene un tono fijo (el mismo 20 se ve igual en todo el mapa, como en el
 * método de Mónica). Escala derivada de la paleta del sitio; en oscuro se aclara. */
/* ── Diagrama: todo lo que se ve se ajusta aquí (fuentes, tamaños, pesos, colores). ──
   El PDF replica estos valores desde app/Libraries/Numerologia/Estilo.php. */
:root {
  --nm-font: 'Montserrat', sans-serif;      /* fuente de todo el diagrama */
  --nm-num-font: var(--nm-font);  --nm-num-size: 30px;  --nm-num-weight: 500;   /* número central */
  --nm-maestro-size: 20px;                                                        /* 26/8, 30/3… */
  --nm-etq-font: var(--nm-font);  --nm-etq-size: 9px;   --nm-etq-weight: 500;  --nm-etq-spacing: .6px;   /* PP, MADRE… */
  --nm-oreja-font: var(--nm-font); --nm-oreja-size: 11px; --nm-oreja-weight: 600;                          /* complementos */
  --nm-rotulo-font: var(--nm-font); --nm-rotulo-size: 17px; --nm-rotulo-weight: 800; --nm-rotulo-spacing: 5px; /* EL ESPEJO / LA MÁSCARA */
  --nm-linea-width: 1.2px; --nm-figura-width: 1.6px; --nm-marco-width: 1.5px;
  --ln-arriba: #2E7D4F; --ln-abajo: #7A1E3A; --marco: #B8943F;
 --num-1: #7A5C2E; --num-2: #2F5D50; --num-3: #8A3B5C; --num-4: #4A4E8C; --num-5: #B8943F; --num-6: #5C7A3A; --num-7: #7B4B9A; --num-8: #A63D2F; --num-9: #C9784A; --num-10: #3E7CA6; --num-11: #B0303A; --num-12: #2E6B8A; --num-13: #1F3A6E; --num-14: #2A8C8C; --num-15: #B5861A; --num-16: #256B3B; --num-17: #8E2C7A; --num-18: #6B5E2A; --num-19: #D07A1F; --num-20: #7B3FBF; --num-21: #7A1E1E; --num-22: #3A3A6A; --num-26_8: #6C3FA0; --num-30_3: #1F6FD0; --num-33_6: #1F9A9A; --num-40_4: #C03FA0; --num-0: #8C8478; }
html.dark { --ln-arriba: #6FBF8A; --ln-abajo: #C9607E; --marco: #D4AF55; --num-1: #B1A085; --num-2: #86A199; --num-3: #BB8DA0; --num-4: #9698BC; --num-5: #D5C08F; --num-6: #A0B18C; --num-7: #B296C4; --num-8: #CB8E86; --num-9: #DFB096; --num-10: #8FB3CB; --num-11: #D1868C; --num-12: #85A9BB; --num-13: #7D8CAA; --num-14: #83BCBC; --num-15: #D4B87A; --num-16: #80A98D; --num-17: #BD84B1; --num-18: #A9A183; --num-19: #E3B17D; --num-20: #B28FD9; --num-21: #B17C7C; --num-22: #8C8CA8; --num-26_8: #A98FC7; --num-30_3: #7DABE3; --num-33_6: #7DC4C4; --num-40_4: #DA8FC7; --num-0: #BCB7B0; }
#numerologia .n-1 { --nc: var(--num-1); } #numerologia .n-2 { --nc: var(--num-2); } #numerologia .n-3 { --nc: var(--num-3); } #numerologia .n-4 { --nc: var(--num-4); } #numerologia .n-5 { --nc: var(--num-5); } #numerologia .n-6 { --nc: var(--num-6); } #numerologia .n-7 { --nc: var(--num-7); } #numerologia .n-8 { --nc: var(--num-8); } #numerologia .n-9 { --nc: var(--num-9); } #numerologia .n-10 { --nc: var(--num-10); } #numerologia .n-11 { --nc: var(--num-11); } #numerologia .n-12 { --nc: var(--num-12); } #numerologia .n-13 { --nc: var(--num-13); } #numerologia .n-14 { --nc: var(--num-14); } #numerologia .n-15 { --nc: var(--num-15); } #numerologia .n-16 { --nc: var(--num-16); } #numerologia .n-17 { --nc: var(--num-17); } #numerologia .n-18 { --nc: var(--num-18); } #numerologia .n-19 { --nc: var(--num-19); } #numerologia .n-20 { --nc: var(--num-20); } #numerologia .n-21 { --nc: var(--num-21); } #numerologia .n-22 { --nc: var(--num-22); } #numerologia .n-26_8 { --nc: var(--num-26_8); } #numerologia .n-30_3 { --nc: var(--num-30_3); } #numerologia .n-33_6 { --nc: var(--num-33_6); } #numerologia .n-40_4 { --nc: var(--num-40_4); } #numerologia .n-0 { --nc: var(--num-0); }
#numerologia .n-0 { --nc: var(--num-0); }
.nm-cab { display: flex; gap: 18px; align-items: center; padding: 20px 22px; }
.nm-cab-icono { width: 64px; height: 64px; flex: 0 0 64px; }
.nm-form .form-control-lg { font-size: 1rem; }
.nm-mapa-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.nm-mapa-link { text-decoration: none; min-width: 0; }
.nm-tabs .nav-link { color: var(--c-texto2); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; }
.nm-tabs .nav-link.active { background: var(--c-boton); color: var(--c-boton-txt); }
.nm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.nm-lienzo { padding: 12px; }
.nm-lienzo svg { width: 100%; height: auto; display: block; }
.nm-detalle summary { cursor: pointer; }
.nm-panel { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow: auto; padding: 20px 22px; }
.nm-panel-vacio { padding: 30px 0; text-align: center; }
.nm-p-cab, .nm-num-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.nm-p-clave { font-family: var(--fuente-titulo); font-size: 1.1rem; font-weight: 700; color: var(--dorado-os); border: 1px solid var(--c-borde2); border-radius: 6px; padding: 6px 10px; min-width: 52px; text-align: center; }
html.dark .nm-p-clave { color: var(--dorado-cl); }
.nm-p-nombre { font-family: var(--fuente-titulo); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.nm-p-formula { font-size: .8rem; }
.nm-nota { font-size: .8rem; margin: -6px 0 10px; }
.nm-num-cab { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-borde); }
.nm-num-grande { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 700; color: var(--nc, var(--c-texto)); line-height: 1; }
.nm-num-titulo { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.nm-texto { font-size: .92rem; line-height: 1.55; }
.nm-texto p { margin-bottom: .6rem; }
.nm-texto-puesto { font-style: italic; color: var(--c-texto2); border-left: 3px solid var(--dorado); padding-left: 12px; }
.nm-ciclos { padding: 16px 18px; }
.nm-ciclo { margin-bottom: 12px; }
.nm-ciclo-titulo { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto2); font-weight: 600; margin-bottom: 4px; }
.nm-ciclo-linea { display: flex; align-items: center; gap: 6px; font-size: .9rem; margin-bottom: 2px; }
.nm-ciclo-k { font-weight: 700; min-width: 2em; }
.nm-num-btn { font-family: var(--fuente-titulo); font-weight: 700; border: 1.5px solid var(--nc, var(--c-borde2)); color: var(--nc, var(--c-texto)); background: transparent; border-radius: 999px; padding: 1px 10px; line-height: 1.4; }
.nm-num-btn:hover, .nm-num-btn:focus { background: var(--nc); color: #fff; outline: none; }
/* SVG base 22 */
.nm-svg .ln { stroke: var(--c-borde2); stroke-width: var(--nm-linea-width); }
.nm-svg .ln.arriba { stroke: var(--ln-arriba); }
.nm-svg .ln.abajo { stroke: var(--ln-abajo); }
.nm-svg .marco { fill: none; stroke: var(--marco); stroke-width: var(--nm-marco-width); }
.nm-svg .rotulo { font-family: var(--nm-rotulo-font); font-size: var(--nm-rotulo-size); font-weight: var(--nm-rotulo-weight); letter-spacing: var(--nm-rotulo-spacing); text-transform: uppercase; fill: var(--c-texto); }
.nm-svg .p { cursor: pointer; outline: none; }
.nm-svg .p .fig { fill: var(--c-card); stroke: var(--nc); stroke-width: var(--nm-figura-width); transition: stroke-width .15s, fill .15s; }
.nm-svg .p:hover .fig, .nm-svg .p:focus .fig { stroke-width: 3; }
.nm-svg .p .num { font-family: var(--nm-num-font); font-size: var(--nm-num-size); font-weight: var(--nm-num-weight); fill: var(--nc); }
.nm-svg .p .num.maestro { font-size: var(--nm-maestro-size); }
.nm-svg .p .etq { font-family: var(--nm-etq-font); font-size: var(--nm-etq-size); font-weight: var(--nm-etq-weight); letter-spacing: var(--nm-etq-spacing); text-transform: uppercase; fill: var(--c-texto2); }
.nm-svg .p.sel .fig { fill: var(--nc); }
.nm-svg .p.sel .num, .nm-svg .p.sel .etq { fill: #fff; }
.nm-svg .oreja { cursor: pointer; outline: none; }
.nm-svg .oreja circle { fill: var(--c-card); stroke: var(--nc); stroke-width: 1.2; }
.nm-svg .oreja text { font-family: var(--nm-oreja-font); font-size: var(--nm-oreja-size); font-weight: var(--nm-oreja-weight); fill: var(--nc); }
.nm-svg .oreja:hover circle, .nm-svg .oreja:focus circle, .nm-svg .oreja.sel circle { fill: var(--nc); }
.nm-svg .oreja:hover text, .nm-svg .oreja:focus text, .nm-svg .oreja.sel text { fill: #fff; }
/* Casitas base 9: el color es el nivel, no el número */
.nm-casitas .casa { cursor: pointer; outline: none; --cf: var(--c-card); --cs: var(--dorado); --ct: var(--c-texto); --cl: var(--beige-dd); }
.nm-casitas .casa.nivel-bajo { --cf: #EBCB7A; --cs: #C98A2B; --ct: #3B2A08; --cl: #C98A2B; }
.nm-casitas .casa.nivel-critico { --cf: #A63D2F; --cs: #7A2A20; --ct: #FFFFFF; --cl: #7A2A20; }
.nm-casitas .casa.nivel-vacio { --cf: #D8D2C8; --cs: #B9B2A6; --ct: #5B5248; --cl: #B9B2A6; }
html.dark .nm-casitas .casa { --cl: #2A2217; }
html.dark .nm-casitas .casa.nivel-vacio { --cf: #3A342C; --cs: #5B5248; --ct: #B3A797; --cl: #2A2217; }
.nm-casitas .cara { fill: var(--cf); stroke: var(--cs); stroke-width: 1.5; transition: stroke-width .15s; }
.nm-casitas .lado { fill: var(--cl); }
.nm-casitas .casa:hover .cara, .nm-casitas .casa:focus .cara, .nm-casitas .casa.sel .cara { stroke-width: 4; }
.nm-casitas .etq { font-family: var(--fuente); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; fill: var(--ct); }
.nm-casitas .num { font-family: var(--fuente-titulo); font-size: 46px; font-weight: 700; fill: var(--ct); }
.nm-casitas .pct { font-family: var(--fuente); font-size: 11px; fill: var(--ct); opacity: .85; }
@media (max-width: 991px) {
  .nm-grid { grid-template-columns: 1fr; }
  .nm-panel { position: static; max-height: none; }
  .nm-tabs { margin-left: 0 !important; width: 100%; }
}