/* ============================================================ HABLAR BIEN — hoja de estilo compartida (tema oscuro) Layout docs de 3 columnas: nav izq · lectura centro · riel der. Objetivo: llenar el ancho, nada de espacio vacío. Tipografía y fondos con jerarquía (infografía, no cajas planas). ============================================================ */ @font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Literata';src:url('fonts/literata-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Literata';src:url('fonts/literata-600.woff2') format('woff2');font-weight:600;font-display:swap} :root{ /* OSCURO por defecto: pizarra suave (no negro puro) */ --bg:#151a23; --panel:#1c2230; --panel2:#232a39; --panel3:#2b3343; --line:#313a4b; --line2:#3d4759; --txt:#e9ecf2; --muted:#9aa4b6; --dim:#7a8698; /* [2026-07-25] era #717c90: 4.14, por debajo de 4.5 */ --accent:#ff5a5f; --accent2:#4fc3f7; --suave:#5cd6a0; --medio:#ffce54; --atrevido:#ff6b6b; --her:#2b3543; --me:#3d2734; --topbar-h:54px; --side-w:266px; --rail-w:266px; --read:760px; --read-size:17px; --ui:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; --serif:'Literata',"Iowan Old Style","Palatino Linotype",Georgia,serif; } /* CLARO: papel sepia */ html[data-theme='light']{ --bg:#f3efe6; --panel:#fbf8f1; --panel2:#f1ece1; --panel3:#e8e1d2; --line:#ddd5c5; --line2:#cfc6b3; --txt:#2b2722; --muted:#68614f; --dim:#6f6a5e; /* [2026-07-25] --muted era #6f685c: 4.46 sobre las cajas de fondo con tinte (referencias bibliograficas), justo debajo de 4.5. --dim era #938b7c: 2.94 de contraste en el menu lateral (numeros de apartado y titulos de grupo). Oscurecido para pasar 4.5. */ --her:#e7e0d0; --me:#f4e6da; } /* COMPAT [2026-07-25]: variables que los SVG de los modulos usan y que nunca se definieron. Sin esto el navegador las pinta NEGRO -> texto y flechas invisibles sobre el tema oscuro. Apuntan a las variables reales, asi cambian solas al alternar claro/oscuro. */ :root{ --ink:var(--txt); /* tinta: titulos de diagrama, flechas, cajas */ --card:var(--panel2); /* relleno de cajas tipo tarjeta */ --panel-2:var(--panel2); /* misma que --panel2, escrita con guion de mas */ --bg-soft:var(--panel2); /* caja neutra */ --accent-soft:var(--panel3); /* caja con borde de acento */ --good:var(--suave); /* verde semantico */ --bad:var(--atrevido); /* rojo semantico */ --text-secondary:var(--muted); } /* acentos mas oscuros en claro para que contrasten sobre crema */ html[data-theme='light'] body.p-ora {--accent:#4a59cf;--accent2:#3a48b0} html[data-theme='light'] body.p-conv{--accent:#1f9d6b;--accent2:#15784f} html[data-theme='light'] body.p-citas{--accent:#df3a40;--accent2:#b51f24} html[data-theme='light'] body.p-pers{--accent:#b07d12;--accent2:#8a610c} html[data-theme='light'] body.p-apx {--accent:#8c4ebf;--accent2:#6e399f} html[data-theme='light'] body.p-psico{--accent:#6d3fd1;--accent2:#5630ad} html[data-theme='light'] body.p-cuerpo{--accent:#0e9e8e;--accent2:#0a7d70} html[data-theme='light'] body.p-story{--accent:#cf6a18;--accent2:#a3530f} html[data-theme='light'] body.p-nego{--accent:#d62f57;--accent2:#ad213f} html[data-theme='light'] body.p-escr{--accent:#0a8fd0;--accent2:#0870a3} html[data-theme='light'] a{color:var(--accent2)} html[data-theme='light'] .bubble{color:#2b2722} html[data-theme='light'] .book{color:#8a5a00;background:rgba(176,125,18,.12);border-color:rgba(176,125,18,.35)} html[data-theme='light'] .topbar{background:rgba(251,248,241,.92)} html[data-theme='light'] .prose>p{color:var(--txt)} /* acento por pilar (clase en ) */ body.p-ora {--accent:#7c8cff;--accent2:#aab4ff;--glow:124,140,255} body.p-conv {--accent:#48d39a;--accent2:#7be0b6;--glow:72,211,154} body.p-citas{--accent:#ff5a5f;--accent2:#ff9094;--glow:255,90,95} body.p-pers {--accent:#ffc24b;--accent2:#ffd87e;--glow:255,194,75} body.p-apx {--accent:#c792ea;--accent2:#dcb6f4;--glow:199,146,234} body.p-psico {--accent:#a78bfa;--accent2:#c4b3fb;--glow:167,139,250} body.p-cuerpo{--accent:#2dd4bf;--accent2:#7fe7da;--glow:45,212,191} body.p-story {--accent:#ff9a4d;--accent2:#ffba85;--glow:255,154,77} body.p-nego {--accent:#f7567c;--accent2:#fa8ca6;--glow:247,86,124} body.p-escr {--accent:#38bdf8;--accent2:#7dd3fc;--glow:56,189,248} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--ui);background:var(--bg);color:var(--txt);line-height:1.6; background-image:radial-gradient(1100px 520px at 100% -5%, rgba(var(--glow),.06), transparent 70%); background-attachment:fixed} a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline} /* ---------- BARRA SUPERIOR ---------- */ .topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:40; background:rgba(18,21,28,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:4px;padding:0 16px;overflow-x:auto} .topbar .home{font-weight:800;font-size:14.5px;color:var(--txt);white-space:nowrap; padding:7px 12px;border-radius:8px;margin-right:8px;letter-spacing:.2px} .topbar .home:hover{background:var(--panel2);text-decoration:none} .topbar .tnav{display:flex;gap:2px} .topbar .tlink{white-space:nowrap;font-size:12.5px;color:var(--muted); padding:6px 10px;border-radius:8px;border:1px solid transparent} .topbar .tlink:hover{background:var(--panel2);color:var(--txt);text-decoration:none} .topbar .tlink.active{color:#0c0e13;background:var(--accent);border-color:var(--accent);font-weight:700} .topbar .tlink.active .tnum{background:rgba(0,0,0,.22);color:#0c0e13} .topbar .tnum{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center; font-size:11px;border-radius:50%;background:var(--accent);color:#0c0e13;font-weight:800;margin-right:7px} /* controles de tema y tamano (los inyecta theme.js) */ .tb-ctrl{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:12px} .tb-ctrl button{background:var(--panel2);border:1px solid var(--line);color:var(--txt); border-radius:8px;min-width:30px;height:30px;padding:0 7px;font-size:13px;font-weight:600; cursor:pointer;font-family:var(--ui);display:inline-flex;align-items:center;justify-content:center} .tb-ctrl button:hover{border-color:var(--accent);color:var(--accent)} /* ---------- LAYOUT 3 COLUMNAS ---------- */ .wrap{padding-top:var(--topbar-h)} .sidebar{width:var(--side-w);background:linear-gradient(180deg,var(--panel),var(--bg)); border-right:1px solid var(--line);position:fixed;top:var(--topbar-h);bottom:0;left:0; overflow-y:auto;padding:16px 0} .content{margin-left:var(--side-w);margin-right:var(--rail-w);padding:34px 56px 110px;min-height:60vh} .rail{position:fixed;top:var(--topbar-h);bottom:0;right:0;width:var(--rail-w); background:linear-gradient(180deg,var(--bg),var(--panel));border-left:1px solid var(--line); overflow-y:auto;padding:24px 20px} /* [2026-07-07] FIX desborde horizontal: SVG/tablas de ancho fijo desbordaban la columna y empujaban el contenido bajo el sidebar fijo (recorte del inicio de cada linea). Clamp de anchos + guarda anti-scroll-horizontal. */ .content svg{max-width:100%;height:auto} .content .tbl,.content table{max-width:100%} .content pre,.content code{white-space:pre-wrap;word-break:break-word} .prose{overflow-wrap:break-word} body{overflow-x:hidden} .brand{padding:0 20px 14px;border-bottom:1px solid var(--line);margin-bottom:8px} .brand h1{font-size:15.5px;margin:0;color:var(--accent);letter-spacing:.3px} .brand p{font-size:12px;color:var(--muted);margin:6px 0 0} .nav-group{padding:4px 0} .nav-group h3{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:13px 20px 6px} .nav-link{display:block;padding:8px 20px;font-size:13.3px;color:var(--txt); border-left:3px solid transparent;cursor:pointer;transition:background .12s} .nav-link:hover{background:var(--panel2)} .nav-link.active{background:linear-gradient(90deg,rgba(var(--glow),.16),transparent); border-left-color:var(--accent);color:#fff;font-weight:600} .nav-link .n{color:var(--dim);font-size:11.5px;margin-right:8px;font-variant-numeric:tabular-nums} .nav-link.active .n{color:var(--accent2)} .badge{font-size:10px;padding:1px 7px;border-radius:20px;margin-left:6px;font-weight:700} .b-suave{background:rgba(92,214,160,.16);color:var(--suave)} .b-medio{background:rgba(255,206,84,.16);color:var(--medio)} .b-atrevido{background:rgba(255,107,107,.16);color:var(--atrevido)} /* ---------- RIEL DERECHO (progreso + libros) ---------- */ .rail h4{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 12px} .rail-prog{height:6px;background:var(--panel3);border-radius:6px;overflow:hidden;margin-bottom:7px} .rail-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:6px;transition:width .25s} .rail-count{font-size:12px;color:var(--muted);margin-bottom:18px} .rail-count b{color:var(--accent2)} .stepper{list-style:none;margin:0 0 22px;padding:0;position:relative} .stepper::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line2)} .step{position:relative;padding:5px 0 5px 20px;font-size:12.3px;color:var(--muted);cursor:pointer;line-height:1.35} .step::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%; background:var(--panel);border:2px solid var(--line2)} .step:hover{color:var(--txt)} .step.done::before{background:var(--accent2);border-color:var(--accent2)} .step.active{color:#fff;font-weight:600} .step.active::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--glow),.2)} .rail-books{display:flex;flex-direction:column;gap:7px} /* ---------- SECCIONES ---------- */ section{display:none;animation:fade .25s ease} section.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} .prose{max-width:1040px;margin:0 auto} /* el texto llena el ancho del contenedor (banda incluida): los parrafos llegan hasta el borde */ /* banda de cabecera por seccion */ .sec-head{margin:0 0 22px;padding:20px 24px;border-radius:14px;position:relative;overflow:hidden; background:linear-gradient(135deg,rgba(var(--glow),.14),rgba(var(--glow),.03)); border:1px solid rgba(var(--glow),.22)} .sec-head::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)} .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);font-weight:800} h2.sec-title{font-size:27px;margin:6px 0 6px;line-height:1.2;letter-spacing:-.3px} .sec-sub{color:var(--muted);margin:0;font-size:14.5px} .meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:12px 0 0} .meta .chip{background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:20px;padding:3px 11px} h3.block{font-size:18.5px;margin:30px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)} h4.sub{font-size:15.5px;margin:22px 0 6px;color:var(--accent2)} /* cuerpo de lectura: serif para contraste tipografico */ .prose p,.card p,.why,.tip,.warn,.opener,li{font-family:var(--serif)} .prose>p{font-size:var(--read-size);line-height:1.75;color:var(--txt);margin:13px 0; text-align:justify;-webkit-hyphens:auto;hyphens:auto} .card p,.opener,.why,.tip,.warn{text-align:justify;-webkit-hyphens:auto;hyphens:auto} .prose>ul.clean li,.prose>.why,.prose>.tip,.prose>.warn{font-size:calc(var(--read-size) - 1px)} .prose>p .lead,.lead{color:var(--txt)} /* placeholder de esqueleto */ .stub{border:1px dashed var(--line2);border-radius:12px;background:rgba(255,255,255,.025); padding:13px 17px;margin:16px 0;font-size:13.8px;color:var(--muted);font-family:var(--ui)} .stub b{color:var(--accent2)} /* ---------- COMPONENTES ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 19px;margin:14px 0} .card.alt{background:linear-gradient(135deg,var(--panel2),var(--panel))} .card .lvl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em} .card .ctx{color:var(--muted);font-size:13px;margin:2px 0 12px} .chat{display:flex;flex-direction:column;gap:7px;margin:12px 0} .bubble{max-width:82%;padding:9px 13px;border-radius:16px;font-size:14.5px;font-family:var(--ui)} .her{align-self:flex-start;background:var(--her);border-bottom-left-radius:4px} .me{align-self:flex-end;background:var(--me);border-bottom-right-radius:4px} .who{font-size:10px;color:var(--dim);margin-bottom:-2px;font-family:var(--ui)} .turn{display:flex;flex-direction:column} .turn.r{align-items:flex-end} .turn .who{align-self:flex-start} .turn.r .who{align-self:flex-end} .why{background:linear-gradient(135deg,rgba(79,195,247,.1),rgba(79,195,247,.03)); border-left:3px solid var(--accent2);padding:11px 15px;border-radius:0 9px 9px 0;font-size:14px;margin-top:13px} .why b{color:var(--accent2)} .tip{background:var(--panel2);border-radius:11px;padding:12px 16px;margin:11px 0;font-size:14px;border:1px solid var(--line)} .tip b{color:var(--accent)} .warn{border-left:3px solid var(--accent);background:rgba(var(--glow),.07); padding:11px 15px;border-radius:0 9px 9px 0;font-size:14px;margin:11px 0} .warn b{color:var(--accent)} .openers{margin:6px 0} .opener{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 15px;margin:9px 0;font-size:14.5px} .opener .tag{font-size:11px;color:var(--muted);display:block;margin-top:5px;font-family:var(--ui)} /* pasos numerados */ .steps{counter-reset:s;list-style:none;padding:0;margin:14px 0} .steps li{position:relative;padding:11px 0 11px 48px;border-bottom:1px solid var(--line); font-size:calc(var(--read-size) - 1px);text-align:left} .steps li:last-child{border-bottom:0} .steps li b{color:var(--accent2)} .steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:9px; width:30px;height:30px;border-radius:50%;background:var(--accent);color:#0c0e13;font-weight:800; display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:14px} /* recuadro de Psicologia (siempre morado, identidad propia) */ .psico{background:linear-gradient(135deg,rgba(199,146,234,.13),rgba(199,146,234,.03)); border-left:3px solid #c792ea;border-radius:0 10px 10px 0;padding:12px 16px 12px 46px; margin:14px 0;position:relative;font-size:calc(var(--read-size) - 1px);text-align:left} .psico::before{content:"🧠";position:absolute;left:14px;top:11px;font-size:18px} .psico b{color:#c792ea} html[data-theme='light'] .psico b{color:#7e43b3} /* frase clave (que decir exacto) */ .frase{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--medio); border-radius:8px;padding:9px 13px;margin:7px 0;font-size:calc(var(--read-size) - 1px)} .frase .q{font-weight:600} .frase .tag{display:block;font-size:11px;color:var(--muted);margin-top:3px;font-family:var(--ui)} .flag{font-size:11px;font-weight:700;color:var(--accent2);font-family:var(--ui);margin-right:5px} /* preguntas (quiz colapsable, nativo con details) */ .quiz{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:10px;margin:11px 0;overflow:hidden} .quiz summary{cursor:pointer;padding:13px 16px;font-weight:600;font-family:var(--ui); font-size:calc(var(--read-size) - 1px);list-style:none;display:flex;gap:10px;align-items:flex-start} .quiz summary::-webkit-details-marker{display:none} .quiz summary::before{content:"?";flex:0 0 23px;height:23px;border-radius:50%;background:var(--accent); color:#0c0e13;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:13px} .quiz[open] summary{border-bottom:1px solid var(--line)} .quiz[open] summary::before{content:"\2713";background:var(--accent2)} .quiz .qa{padding:12px 16px 14px 49px;font-size:calc(var(--read-size) - 1px);font-family:var(--serif)} .quiz .qa b{color:var(--accent2)} .quiz .qa .por{display:block;margin-top:8px;color:var(--muted);font-size:calc(var(--read-size) - 2px)} .qcount{display:inline-block;font-family:var(--ui);font-size:12px;color:var(--muted); background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 12px;margin:4px 0 10px} .book{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;font-family:var(--ui); color:var(--medio);background:rgba(255,206,84,.1);border:1px solid rgba(255,206,84,.25); border-radius:20px;padding:3px 11px;margin:2px 0} .book::before{content:"📖"} .rail-books .book{width:fit-content} .grid{display:grid;grid-template-columns:1fr 1fr;gap:13px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} ul.clean{padding-left:18px} ul.clean li{margin:6px 0;font-size:14.5px} .pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;font-family:var(--ui); background:var(--panel2);border:1px solid var(--line);color:var(--muted);margin:0 4px 4px 0} table.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.8px;font-family:var(--ui)} table.tbl th,table.tbl td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top} table.tbl th{background:var(--panel2);color:var(--txt);font-weight:700} table.tbl tr:nth-child(even) td{background:rgba(255,255,255,.018)} table.tbl tr:hover td{background:rgba(var(--glow),.05)} .pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)} .pager button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:10px; padding:10px 15px;font-size:13px;cursor:pointer;font-family:inherit;max-width:46%;text-align:left} .pager button:hover{border-color:var(--accent);color:var(--accent)} .pager button:disabled{opacity:.3;cursor:default} /* ---------- PORTADA (index) ---------- */ .page-center{max-width:1180px;margin:0 auto;padding:38px 40px 90px} .hero{background:linear-gradient(135deg,rgba(var(--glow),.16),rgba(var(--glow),.02)); border:1px solid rgba(var(--glow),.22);border-radius:18px;padding:34px 36px;margin-bottom:30px;position:relative;overflow:hidden} .hero::after{content:"🗣️";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:120px;opacity:.07} .hero .kick{color:var(--accent);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800} .hero h1{font-size:44px;margin:10px 0 8px;line-height:1.04;letter-spacing:-1px} .hero .lead{font-size:16.5px;color:var(--muted);max-width:640px;font-family:var(--serif)} .home-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start} .pillars{display:grid;grid-template-columns:1fr 1fr;gap:15px} .pcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:19px 21px;color:var(--txt);position:relative;overflow:hidden} .pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pc,var(--accent))} .pcard:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-3px);transition:.16s; box-shadow:0 10px 30px rgba(0,0,0,.3)} .pcard .pn{font-size:11.5px;font-weight:800;color:var(--pc,var(--accent));letter-spacing:.06em} .pcard:hover{border-color:var(--pc,var(--accent))} .pcard h3{margin:7px 0 7px;font-size:18.5px} .pcard p{margin:0;font-size:13.5px;color:var(--muted);font-family:var(--serif)} .side-panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:15px;padding:20px 22px;position:sticky;top:70px} .side-panel h3{margin:0 0 4px;font-size:16px} .side-panel .ph{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);font-weight:800;margin-bottom:14px} .startlist{list-style:none;margin:0;padding:0} .startlist li{padding:11px 0;border-bottom:1px solid var(--line);font-size:13.8px} .startlist li:last-child{border-bottom:0} .startlist a{font-weight:600} .startlist span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;font-family:var(--serif)} /* acentos de portada por pilar (la portada usa --apx; coloreamos cada pcard) */ .pcard.c1::before{background:#7c8cff}.pcard.c1 .pn,.pcard.c1:hover{border-color:#7c8cff}.pcard.c1 .pn{color:#7c8cff} .pcard.c2::before{background:#48d39a}.pcard.c2 .pn{color:#48d39a} .pcard.c3::before{background:#ff5a5f}.pcard.c3 .pn{color:#ff5a5f} .pcard.c4::before{background:#ffc24b}.pcard.c4 .pn{color:#ffc24b} /* ---------- MOVIL / ANGOSTO ---------- */ .burger{display:none;font-size:22px;cursor:pointer;background:none;border:none;color:var(--txt);padding:0 6px} @media(max-width:1240px){ .rail{display:none} .content{margin-right:0} } @media(max-width:980px){ .home-grid{grid-template-columns:1fr} .side-panel{position:static} } @media(max-width:880px){ .burger{display:inline-block;margin-right:4px} .sidebar{transform:translateX(-100%);transition:.25s;z-index:35;width:264px} .sidebar.open{transform:none} .content{margin-left:0;padding:22px 18px 80px} .pillars,.grid,.grid3{grid-template-columns:1fr} .bubble{max-width:90%} .hero h1{font-size:30px}.hero::after{display:none} .page-center{padding:22px 18px 70px} }