/* ConLupa v21 · "Papel y tinta" (docs/rediseno-v21.md). Se carga DESPUÉS de site.css y de los estilos de cada página:
   solo cambia colores, no mueve nada. Al cambiarlo, subir el ?v= en todas las páginas. */

/* ── paleta clara ── */
:root{
  --navy:#1E2433; --navy-2:#262E42;                       /* tinta: bandas oscuras y pie */
  --ink:#2B4EFF; --ink-dark:#1E3AD6; --on-ink:#FFFFFF;    /* acento: botones y enlaces */
  --sky:#E8EDFF;                                          /* tinte del acento */
  --bg:#F5F1E8; --bg2:#EDE7DA;                            /* la mesa (papel) */
  --card:#FFFDF9; --surface:#FFFDF9;                      /* las hojas */
  --line:#E5DDCB; --line-2:#D4C8B0;
  --text:#1E2433; --heading:#141A2A; --muted:#5A6072; --notice:#1E2433;
  --peach:#E8603C;                                        /* acento cálido secundario */
  --okbg:#EDF7F0; --okline:#C9E6D2;
  --dot:rgba(30,36,51,.12); --glass:rgba(255,253,249,.78); --glass-edge:rgba(255,255,255,.8);
  /* color por tema (fondo de tarjeta / borde e ícono) */
  --t-aprende:#FFF4D6; --t-aprende-2:#9A7300;
  --t-contratos:#E8EDFF; --t-contratos-2:#2B4EFF;
  --t-alquileres:#E6F4EA; --t-alquileres-2:#257A4B;
  --t-consorcios:#F1E9FF; --t-consorcios-2:#6A3FE0;
  --t-trabajo:#FFEDE3; --t-trabajo-2:#B8481F;
  --t-consumo:#E3F6F8; --t-consumo-2:#0B7688;
  --t-digital:#FDE7EC; --t-digital-2:#B8274E;
}
/* ── paleta oscura (tinta de noche) ── */
:root[data-theme=dark]{
  --navy:#0E1119; --navy-2:#151A26;
  --ink:#7B93FF; --ink-dark:#9AAEFF; --on-ink:#0B1030; --sky:#1F2747;
  --bg:#12151F; --bg2:#171B27; --card:#1C2130; --surface:#1C2130;
  --line:#2A3043; --line-2:#363D54;
  --text:#E8EAF1; --heading:#F4F5FA; --muted:#A7ADC0; --notice:#E8EAF1;
  --peach:#F08A68; --okbg:#13261C; --okline:#244A33;
  --dot:rgba(232,234,241,.08); --glass:rgba(28,33,48,.78); --glass-edge:rgba(255,255,255,.06);
  --t-aprende:#2E2810; --t-aprende-2:#F2CF5B; --t-contratos:#1F2747; --t-contratos-2:#9AAEFF;
  --t-alquileres:#15291D; --t-alquileres-2:#7FD3A0; --t-consorcios:#251C3D; --t-consorcios-2:#B9A3FF;
  --t-trabajo:#33201A; --t-trabajo-2:#F5A285; --t-consumo:#11292D; --t-consumo-2:#6FD0DE;
  --t-digital:#331822; --t-digital-2:#F59AB2;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --navy:#0E1119; --navy-2:#151A26;
  --ink:#7B93FF; --ink-dark:#9AAEFF; --on-ink:#0B1030; --sky:#1F2747;
  --bg:#12151F; --bg2:#171B27; --card:#1C2130; --surface:#1C2130;
  --line:#2A3043; --line-2:#363D54;
  --text:#E8EAF1; --heading:#F4F5FA; --muted:#A7ADC0; --notice:#E8EAF1;
  --peach:#F08A68; --okbg:#13261C; --okline:#244A33;
  --dot:rgba(232,234,241,.08); --glass:rgba(28,33,48,.78); --glass-edge:rgba(255,255,255,.06);
  --t-aprende:#2E2810; --t-aprende-2:#F2CF5B; --t-contratos:#1F2747; --t-contratos-2:#9AAEFF;
  --t-alquileres:#15291D; --t-alquileres-2:#7FD3A0; --t-consorcios:#251C3D; --t-consorcios-2:#B9A3FF;
  --t-trabajo:#33201A; --t-trabajo-2:#F5A285; --t-consumo:#11292D; --t-consumo-2:#6FD0DE;
  --t-digital:#331822; --t-digital-2:#F59AB2;
}}

/* ── portada v20: sus variables propias, con la misma paleta (oscura por defecto, clara según el sistema o el botón) ── */
body.v20{
  --bg:#12151F; --bg-2:#171B27; --surface:#1C2130; --surface-2:#232838;
  --border:rgba(232,234,241,.09); --border-strong:rgba(232,234,241,.16);
  --fg:#E8EAF1; --fg-muted:#A7ADC0; --fg-faint:#6E7489;
  --accent:#7B93FF; --accent-hover:#9AAEFF; --on-accent:#0B1030; --accent-glow:rgba(123,147,255,.32);
}
:root[data-theme=light] body.v20{
  --bg:#F5F1E8; --bg-2:#EDE7DA; --surface:#FFFDF9; --surface-2:#F7F3EA;
  --border:rgba(30,36,51,.10); --border-strong:rgba(30,36,51,.18);
  --fg:#1E2433; --fg-muted:#5A6072; --fg-faint:#8A8F9E;
  --accent:#2B4EFF; --accent-hover:#1E3AD6; --on-accent:#FFFFFF; --accent-glow:rgba(43,78,255,.22);
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) body.v20{
  --bg:#F5F1E8; --bg-2:#EDE7DA; --surface:#FFFDF9; --surface-2:#F7F3EA;
  --border:rgba(30,36,51,.10); --border-strong:rgba(30,36,51,.18);
  --fg:#1E2433; --fg-muted:#5A6072; --fg-faint:#8A8F9E;
  --accent:#2B4EFF; --accent-hover:#1E3AD6; --on-accent:#FFFFFF; --accent-glow:rgba(43,78,255,.22);
}}

/* ── piezas con colores fijos del diseño anterior ── */
.btn-primary{background:var(--ink);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--ink) 80%,transparent)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--ink-dark)}}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent)}
footer.site{background:var(--navy);color:#C9CEDC}
footer.site a{color:#E8EAF1}
.logo{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='18' fill='%231E2433'/><circle cx='27' cy='27' r='14' fill='none' stroke='white' stroke-width='5'/><path d='M37.5 37.5 49 49' stroke='white' stroke-width='7' stroke-linecap='round'/><path d='M20.5 27.5l4.5 4.5 8.5-9' fill='none' stroke='%23FFD84D' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/cover no-repeat}

/* ── la mesa: grilla de puntos en todas las páginas (ya existía; ahora con la tinta nueva) ── */
body{background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px}

/* ── resaltador: el gesto de la marca ── */
mark,.resaltado{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--yellow) 70%,transparent) 55%);color:inherit;padding:0 .1em}

/* ── solapas por tema (solapas.js) ── */
.solapas{position:sticky;top:var(--solapas-top,4.1rem);z-index:29;background:var(--bg);border-bottom:1px solid var(--line)}
/* translúcida solo donde hay desenfoque (escritorio); en el celular, opaca para que no se transparente el contenido */
@supports (backdrop-filter:blur(1px)){@media (hover:hover) and (pointer:fine){.solapas{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.3) blur(8px)}}}
.solapas .wrap{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding-top:.45rem;padding-bottom:.45rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.solapas .wrap::-webkit-scrollbar{display:none}
.solapas a{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .85rem;border-radius:999px;color:var(--muted);font:600 .93rem var(--body);text-decoration:none;border:1px solid transparent;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.solapas a .pt{width:.55rem;height:.55rem;border-radius:50%;background:var(--c,var(--line-2))}
.solapas a[aria-current=page]{background:var(--surface);color:var(--heading);border-color:var(--line);box-shadow:0 1px 2px rgba(30,36,51,.06)}
@media (hover:hover) and (pointer:fine){.solapas a:hover{color:var(--heading);background:color-mix(in srgb,var(--surface) 70%,transparent)}}
.solapas a:active{transform:scale(.97)}
.solapas a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ── tablero de tema (plantilla: tema-plantilla.html) ── */
.tablero{max-width:72rem;padding-bottom:4rem}
.tab-head{padding:2.4rem 0 1rem}
.tab-head .kick{display:inline-flex;align-items:center;gap:.45rem;font:700 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--tc-2);background:var(--tc);padding:.3rem .7rem;border-radius:999px;margin:0}
.tab-head h1{font:800 clamp(2rem,5vw,3.2rem)/1.04 var(--display);color:var(--heading);margin:.6rem 0 .4rem;letter-spacing:-.01em}
.tab-head p{color:var(--muted);font-size:1.1rem;max-width:42rem;margin:0}
.tab-dato{margin-top:.9rem;font-size:.92rem;color:var(--text);max-width:42rem}
.tab-dato mark{margin-right:.35rem}
.tab-dato:empty{display:none}
.tab-sec{margin-top:1.8rem}
.tab-sec>h2{display:flex;align-items:baseline;gap:.6rem;font:700 1.25rem var(--display);color:var(--heading);margin:0 0 .7rem}
.tab-sec>h2 small{font:500 .9rem var(--body);color:var(--muted)}
.bento{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.bento .hoja{grid-column:span 1}
@media (min-width:760px){.bento .hoja.grande{grid-column:span 2}}
.hoja{position:relative;display:flex;flex-direction:column;gap:.45rem;min-width:0;padding:1.1rem 1.15rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);text-decoration:none;box-shadow:0 1px 2px rgba(30,36,51,.05);transition:border-color 180ms var(--ease-out),transform 180ms var(--ease-out)}
.hoja .ic{width:2.4rem;height:2.4rem;border-radius:11px;display:grid;place-items:center;background:var(--tc);color:var(--tc-2)}
.hoja b{font:700 1.08rem var(--body);color:var(--heading);overflow-wrap:anywhere}
.hoja p{margin:0;color:var(--muted);font-size:.95rem;overflow-wrap:break-word}
.hoja .ir{margin-top:auto;padding-top:.3rem;font-weight:700;color:var(--ink);font-size:.93rem}
.hoja.grande{background:color-mix(in srgb,var(--tc) 55%,var(--surface));border-color:color-mix(in srgb,var(--tc-2) 25%,var(--line))}
@media (hover:hover) and (pointer:fine){a.hoja:hover{border-color:var(--tc-2);transform:translateY(-2px)}}
a.hoja:active{transform:scale(.99)}
a.hoja:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fijate{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.fijate a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:52px;padding:.7rem 1rem;border-radius:14px;border:1px dashed var(--line-2);color:var(--heading);font-weight:600;text-decoration:none;background:color-mix(in srgb,var(--surface) 60%,transparent)}
@media (hover:hover) and (pointer:fine){.fijate a:hover{border-style:solid;border-color:var(--tc-2)}}
.paso{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;counter-reset:paso}
.paso li{counter-increment:paso;display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start}
.paso li::before{content:counter(paso);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--tc);color:var(--tc-2);font-weight:800}
.paso li a{color:var(--ink);font-weight:600}
.tab-fuentes{margin-top:2rem;padding:1rem 1.15rem;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:.9rem;color:var(--muted)}
/* colores por tema: cada tablero define --tc / --tc-2 con data-tema */
[data-tema=aprende]{--tc:var(--t-aprende);--tc-2:var(--t-aprende-2)} [data-tema=contratos]{--tc:var(--t-contratos);--tc-2:var(--t-contratos-2)}
[data-tema=alquileres]{--tc:var(--t-alquileres);--tc-2:var(--t-alquileres-2)} [data-tema=consorcios]{--tc:var(--t-consorcios);--tc-2:var(--t-consorcios-2)}
[data-tema=trabajo]{--tc:var(--t-trabajo);--tc-2:var(--t-trabajo-2)} [data-tema=consumo]{--tc:var(--t-consumo);--tc-2:var(--t-consumo-2)}
[data-tema=digital]{--tc:var(--t-digital);--tc-2:var(--t-digital-2)}
@media (prefers-reduced-motion:reduce){.hoja,.solapas a{transition:none}}
@media print{.solapas{display:none!important}}

/* ── v21 fase 4 · "Fijate si…" ── */
.fj-indice{margin:0 0 1.2rem}
.fj{padding:1.4rem;margin:0 0 1rem;scroll-margin-top:7.5rem;border-top:4px solid var(--tc-2,var(--ink))}
.fj h2{font:700 1.2rem var(--body);color:var(--heading);margin:0 0 .8rem}
.fj form{display:grid;gap:.8rem}
.fj form .btn{justify-self:start}
.fj input,.fj select{font-size:16px}
.fj-res:empty{display:none}
.fj-res{margin-top:1rem}
.fj-r{border:1px solid var(--line);border-left:6px solid var(--muted);border-radius:12px;padding:.9rem 1rem;background:var(--surface)}
.fj-r.si{border-left-color:var(--green)} .fj-r.ojo{border-left-color:var(--amber)} .fj-r.no{border-left-color:var(--red)}
.fj-r b{display:block;font-size:1.08rem;color:var(--heading)}
.fj-r p{margin:.35rem 0 0}
.fj-r .fj-ley{font-size:.85rem;color:var(--muted)}
.fj-r .btn{margin-top:.7rem}

/* ── glosario: términos para tocar ── */
.glo{all:unset;cursor:help;color:inherit;text-decoration:underline dotted color-mix(in srgb,var(--ink) 60%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;border-radius:3px}
.glo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.glo[aria-expanded=true]{background:color-mix(in srgb,var(--yellow) 45%,transparent)}
.glo-pop{position:fixed;z-index:80;padding:.85rem 1rem;border-radius:14px;background:var(--surface);color:var(--text);border:1px solid var(--line-2);box-shadow:0 18px 40px -18px rgba(30,36,51,.45);font-size:.95rem;animation:glo-in 160ms var(--ease-out)}
@keyframes glo-in{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.glo-pop{animation:none}}
.glo-pop b{display:block;color:var(--heading)}
.glo-pop p{margin:.3rem 0 0}
.glo-pop .glo-ref,.glo-item .glo-ref{font-size:.82rem;color:var(--muted)}
.glo-pop a{display:inline-block;margin-top:.5rem;color:var(--ink);font-weight:700}
.glosario{max-width:52rem;padding-bottom:4rem}
.glo-lista{margin:1rem 0 0;display:grid;gap:.6rem}
.glo-item{padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);scroll-margin-top:7.5rem}
.glo-item:target{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 20%,transparent)}
.glo-item dt{font-weight:700;color:var(--heading)}
.glo-item dd{margin:.25rem 0 0}

/* ── sello "Verificado" ── */
.sello mark{font-weight:600}
.ask-sello{font-size:.85rem;color:var(--muted);margin:.5rem 0 0}
.ask-sello:empty{display:none}@media print{.glo{text-decoration:none}.glo-pop{display:none!important}}

/* ── v21 fase 5 · Mis proyectos como mesa personal ── */
.mesa{max-width:64rem;padding-bottom:4rem}
.mesa-sec{margin-top:1.8rem}
.mesa-sec>h2{font:700 1.25rem var(--display);color:var(--heading);margin:0 0 .7rem}
.mesa-plazos{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pl{border:1px solid var(--line);border-left:6px solid var(--green);border-radius:14px;padding:.85rem 1rem;background:var(--surface)}
.pl.pronto{border-left-color:var(--amber)} .pl.vencido{border-left-color:var(--red)} .pl.hecho{border-left-color:var(--line-2);opacity:.75}
.pl-top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.pl-top b{color:var(--heading);overflow-wrap:anywhere;min-width:0}
.pl-est{flex:none;font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pl.pronto .pl-est{color:#8a6100} .pl.vencido .pl-est{color:var(--red)} .pl:not(.pronto):not(.vencido):not(.hecho) .pl-est{color:var(--green)}
.pl p{margin:.3rem 0 0}
.pl-acc{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.7rem}
.pl-del{margin-left:auto;background:none;border:0;color:var(--muted);font:500 .85rem var(--body);cursor:pointer;text-decoration:underline;min-height:44px;padding:0 .3rem}
.mesa-nuevo{margin-top:.9rem;border:1px dashed var(--line-2);border-radius:14px;padding:.4rem 1rem;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.mesa-nuevo summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:44px;display:flex;align-items:center}
.mesa-nuevo form{display:grid;gap:.6rem;padding-bottom:.8rem}
.mesa-nuevo input{font-size:16px}
.mesa-nuevo .btn{justify-self:start}
#nuevoErr:empty{display:none}
.mesa-vacio{list-style:none;padding:1rem 1.1rem;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted);grid-column:1/-1}
.pj-k{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tc-2,var(--ink))}
.pj-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pj-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
.mesa .hoja .pl-acc{margin-top:auto;padding-top:.4rem}
.mesa-nota{margin-top:2rem;text-align:center}
/* botones "Guardar en Mis proyectos" / "Agregar a mi calendario" (plazos.js) */
.pl-btns{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.7rem}
.pl-btns .fine:empty{display:none}
.pl-btns .fine{flex-basis:100%;margin:0}
/* aviso de plazos en el encabezado (cmdk.js) */
.pj-aviso{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;background:var(--red);color:#fff;font:700 .72rem var(--body);vertical-align:.1em}
.menu-btn{position:relative}
.menu-btn .pj-aviso{position:absolute;top:-4px;right:-4px}