/* mihomegym — «gimnasio industrial»: chapa oscura, naranja de seguridad y plano de papel técnico */
:root {
  --bg: #111316; --bg2: #171A1E; --card: #1D2126; --line: #2C3239; --ink: #ECEEF1; --dim: #A9B1BB; --mute: #7D8691;
  --acc: #FF6A1A; --acc2: #FF8A45; --acc-ink: #1A0B02; --ok: #22C55E; --warn: #F5B82E; --bad: #EF4444;
  --paper: #F6F3EC; --paper-line: #E2DCCF; --paper-ink: #2A2F36;
  --r: 16px; --disp: "Bebas Neue", "Archivo", Impact, sans-serif; --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--sans); }
a { color: var(--acc2); }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .6rem; }
h2 { font: 400 clamp(2rem, 5vw, 2.6rem)/1 var(--disp); letter-spacing: .02em; }
.wrap { width: min(1320px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; background: var(--acc); color: var(--acc-ink); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

/* Cabecera */
.top { position: sticky; top: 0; z-index: 40; background: rgba(17,19,22,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font: 800 1.25rem var(--sans); letter-spacing: -.01em; }
.logo svg { width: 32px; height: 32px; flex: none; }
.logo b { color: var(--acc); font-weight: 900; }
.nav { display: flex; gap: .2rem; }
.nav a { color: var(--dim); text-decoration: none; font-weight: 600; font-size: .92rem; padding: .45rem .75rem; border-radius: 999px; }
.nav a:hover { color: #fff; background: var(--card); }

/* Héroe compacto: la herramienta tiene que verse sin bajar */
.hero { padding: 1.1rem 0 .4rem; background: radial-gradient(800px 260px at 85% -40%, rgba(255,106,26,.22), transparent 70%); }
.hero h1 { font: 400 clamp(2.4rem, 6vw, 3.6rem)/.95 var(--disp); letter-spacing: .02em; margin: 0; }
.hl { color: var(--acc); }
.sub { color: var(--dim); margin: .35rem 0 0; max-width: 46rem; }

/* Barra de la app */
.app { margin-top: .8rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; padding: .6rem .7rem; }
.room { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.room label { display: flex; align-items: center; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .25rem .5rem; }
.room label span { font-size: .78rem; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.room input { width: 4.2rem; background: transparent; border: 0; color: #fff; font: 700 1.05rem var(--sans); padding: .25rem 0; }
.room input:focus { outline: none; }
.room label:focus-within { border-color: var(--acc); }
.room em { font-style: normal; color: var(--mute); font-size: .85rem; }
.room select, .seg, .btn { font: 700 .9rem var(--sans); }
.room select { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }
.acts { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--dim); font: inherit; padding: .4rem .8rem; border-radius: 7px; cursor: pointer; }
.seg button.on { background: var(--acc); color: var(--acc-ink); }
.btn { border: 0; border-radius: 10px; background: var(--acc); color: var(--acc-ink); padding: .55rem .9rem; cursor: pointer; transition: transform .12s, background .12s; }
.btn:hover { background: var(--acc2); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--acc); }

/* Zona de trabajo: catálogo · plano · resumen */
.work { display: grid; grid-template-columns: 250px minmax(0, 1fr) 280px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--bg2); min-height: 560px; }
.catalog, .side { padding: .7rem; min-width: 0; }
.catalog { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; max-height: 76vh; }
.side { border-left: 1px solid var(--line); max-height: 76vh; overflow: auto; }
.ctabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.ctabs button { border: 1px solid var(--line); background: var(--card); color: var(--dim); font: 700 .78rem var(--sans); padding: .3rem .6rem; border-radius: 999px; cursor: pointer; }
.ctabs button.on { color: #111; background: var(--c, var(--acc)); border-color: transparent; }
.clist { display: grid; gap: .35rem; overflow: auto; padding-right: 2px; }
.ci { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .55rem; text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: .45rem .55rem; cursor: pointer; transition: border-color .12s, transform .12s; }
.ci:hover { border-color: var(--c); transform: translateX(2px); }
.ci i { display: block; width: 34px; height: 34px; border-radius: 9px; background: var(--c); position: relative; }
.ci i::after { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(17,19,22,.55); border-radius: 4px; }
.ci b { display: block; font-size: .86rem; font-weight: 700; line-height: 1.2; }
.ci small { color: var(--mute); font-size: .74rem; }
.ci .plus { color: var(--acc); font-weight: 900; font-size: 1.2rem; }
.chint { color: var(--mute); font-size: .78rem; margin: 0; }

.stage { position: relative; min-width: 0; background: #0C0E10; }
#plan { display: block; width: 100%; height: 100%; min-height: 520px; max-height: 76vh; touch-action: none; user-select: none; -webkit-user-select: none; }
.v3d { position: absolute; inset: 0; }
.v3d canvas { display: block; width: 100% !important; height: 100% !important; }
.v3d-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--dim); font-weight: 700; }
.v3d-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; pointer-events: none; background: rgba(23,26,30,.88); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; font-weight: 700; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.seltools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: .3rem; background: rgba(23,26,30,.95); border: 1px solid var(--line); border-radius: 14px; padding: .35rem .4rem .35rem .8rem; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); max-width: calc(100% - 24px); }
.seltools strong { font-size: .85rem; margin-right: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.seltools button { border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 700 .82rem var(--sans); padding: .45rem .65rem; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.seltools button:hover { border-color: var(--acc); }
.seltools .del:hover { border-color: var(--bad); color: #fff; background: var(--bad); }
.banner { position: absolute; top: 10px; left: 10px; right: 10px; background: rgba(255,106,26,.95); color: var(--acc-ink); font-weight: 700; font-size: .88rem; border-radius: 10px; padding: .5rem .8rem; display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.banner button { border: 0; background: rgba(0,0,0,.18); color: inherit; font: 800 .82rem var(--sans); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }

/* Plano (SVG, unidades = cm) */
#plan .paper { fill: var(--paper); }
#plan .g5 { stroke: var(--paper-line); stroke-width: 1; }
#plan .g1 { stroke: #D3CBBB; stroke-width: 1.6; }
#plan .wall { fill: none; stroke: #2A2F36; stroke-width: 7; }
#plan .dim { fill: #C9CED6; font: 700 15px var(--sans); }
#plan .dimline { stroke: #4B535E; stroke-width: 1.5; }
#plan .it { cursor: grab; }
#plan .it.drag { cursor: grabbing; }
#plan .cz { fill: var(--c); fill-opacity: .1; stroke: var(--c); stroke-opacity: .55; stroke-width: 1.6; stroke-dasharray: 7 5; }
#plan .fp { fill: var(--c); stroke: rgba(0,0,0,.45); stroke-width: 1.6; }
#plan .floor .fp { fill-opacity: .55; }
#plan .front { fill: rgba(17,19,22,.55); }
#plan .lbl { fill: #111316; font: 800 13px var(--sans); pointer-events: none; }
#plan .lbl2 { fill: rgba(17,19,22,.7); font: 600 11px var(--sans); pointer-events: none; }
#plan .it.sel .fp { stroke: #111316; stroke-width: 4; }
#plan .it.sel .cz { fill-opacity: .2; stroke-opacity: .95; }
#plan .it.warn .fp { stroke: var(--warn); stroke-width: 5; }
#plan .it.bad .fp { stroke: var(--bad); stroke-width: 6; }
#plan .empty { fill: #8A8577; font: 700 22px var(--sans); }

/* Panel lateral */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .8rem; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .6rem; }
.stats b { display: block; font: 400 1.7rem/1 var(--disp); letter-spacing: .02em; color: #fff; }
.stats span { font-size: .72rem; color: var(--mute); font-weight: 600; }
.stats .meter { grid-column: 1 / -1; }
.meter i { display: block; height: 8px; border-radius: 99px; background: var(--line); margin-top: .35rem; overflow: hidden; }
.meter i::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--ok), var(--warn) 70%, var(--bad)); background-size: 300% 100%; background-position: var(--bp, 0%) 0; border-radius: inherit; transition: width .3s; }
.side-h { font: 400 1.4rem/1 var(--disp); margin: .2rem 0 .4rem; }
.warns { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.warns li { font-size: .84rem; line-height: 1.35; padding: .45rem .55rem; border-radius: 10px; background: var(--card); border-left: 4px solid var(--warn); cursor: pointer; }
.warns li.bad { border-left-color: var(--bad); }
.warns li.ok { border-left-color: var(--ok); cursor: default; }
.detail { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem; font-size: .86rem; }
.detail h3 { font-size: 1rem; margin-bottom: .3rem; }
.detail p { margin: .3rem 0; color: var(--dim); }
.detail .row { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--line); padding: .25rem 0; }
.detail .row span { color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; color: var(--mute); font-size: .8rem; margin: .5rem .2rem 0; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .3rem; }
.lg.fp { background: var(--acc); }
.lg.cz { border: 2px dashed var(--acc); background: rgba(255,106,26,.12); }
.lg.bad { border: 3px solid var(--bad); }
.lg.warn { border: 3px solid var(--warn); }

/* Bloques de contenido */
.block { padding: 2.2rem 0 .5rem; }
.lead { color: var(--dim); max-width: 50rem; }
.ad-slot { margin: 1.4rem 0; min-height: 90px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--mute); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.shop { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
.shop-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.shop-t th { text-align: left; font-size: .75rem; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; padding: .4rem; border-bottom: 1px solid var(--line); }
.shop-t td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.shop-t input { width: 6rem; background: var(--card); border: 1px solid var(--line); color: #fff; border-radius: 8px; padding: .3rem .45rem; font: 700 .92rem var(--sans); }
.shop-t .amz { display: inline-block; white-space: nowrap; font-weight: 700; font-size: .82rem; color: var(--acc-ink); background: #FFB547; border-radius: 8px; padding: .3rem .55rem; text-decoration: none; }
.shop-t .empty td { color: var(--mute); text-align: center; padding: 1.2rem; }
.shop-x h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.xlist { display: flex; flex-wrap: wrap; gap: .4rem; }
.xlist label { display: flex; gap: .4rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .7rem; font-size: .86rem; cursor: pointer; }
.xlist input { accent-color: var(--acc); }
.shop-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem; background: linear-gradient(135deg, #2A1406, #3A1B07); border: 1px solid #5A2A0C; border-radius: 12px; }
.shop-total span { font-weight: 700; }
.shop-total b { font: 400 2.2rem/1 var(--disp); color: var(--acc); }
.disc { font-size: .78rem; color: var(--mute); margin: .7rem 0 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; }
.card h3 { font-size: 1.05rem; }
.card p { color: var(--dim); margin: 0; font-size: .95rem; }
.h3 { font-size: 1.2rem; margin-top: 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.dims { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dims th, .dims td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dims th { background: var(--bg2); color: var(--mute); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.note { color: var(--mute); font-size: .82rem; }
.story { margin: 2rem 0; padding: 1.2rem 1.3rem; border-radius: var(--r); background: linear-gradient(135deg, #1D2126, #23170F); border: 1px solid #3A2414; }
.story p { color: var(--dim); }
.story .by { color: var(--acc2); font-weight: 700; margin: 0; }
.faq details { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .5rem; padding: .2rem .9rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: .6rem 0; }
.faq p { color: var(--dim); margin: 0 0 .8rem; }
.foot { margin-top: 3rem; border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; color: var(--mute); font-size: .85rem; }
.foot-nav { display: flex; gap: 1rem; margin: .5rem 0; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); background: var(--ink); color: #111; font-weight: 700; padding: .65rem 1rem; border-radius: 12px; transition: transform .25s; z-index: 80; max-width: calc(100% - 32px); }
.toast.on { transform: translate(-50%, 0); }

/* Tablet y móvil */
@media (max-width: 1100px) {
  .work { grid-template-columns: 220px minmax(0, 1fr); }
  .side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
  .side-h { display: none; }
}
@media (max-width: 720px) {
  .nav a:not(:first-child) { display: none; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .catalog { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; order: 2; }
  .stage { order: 1; }
  .side { order: 3; }
  .clist { display: flex; overflow-x: auto; gap: .4rem; padding-bottom: .3rem; scroll-snap-type: x mandatory; }
  .ci { min-width: 210px; scroll-snap-align: start; }
  #plan { min-height: 0; height: 62vh; max-height: none; }
  .room input { width: 3.4rem; }
  .shop-t th:nth-child(4), .shop-t td:nth-child(4) { display: none; }
  .seltools strong { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* Página «Quién soy» (la genera _shared/autor.js con clases de las otras webs) */
.me-page { padding-left: 16px !important; padding-right: 16px !important; }
.me-page h1 { font: 400 clamp(2.2rem, 6vw, 3rem)/1 var(--disp); }

/* autor:start (generado por _shared/autor.js) */
.autor-wrap{max-width:760px;margin:0 auto;padding:0 1.25rem}
.autor{display:flex;gap:1rem;align-items:flex-start;margin:2.2rem 0 1.2rem;padding:1.1rem 1.2rem;background:var(--card);border:1px solid var(--line);border-left:5px solid #F2B134;border-radius:16px;text-align:left}
.autor-av,.me-av{flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#10231E;background:radial-gradient(circle at 30% 25%,#FFE3A3 0%,#F2B134 55%,#D9921A 100%)}
.autor-av{width:52px;height:52px;font-size:1.15rem}
.autor p{margin:0}.autor .autor-by{font-weight:700;color:var(--ink)}.autor .autor-by span{font-weight:500;color:var(--mute)}
.autor .autor-txt{color:var(--dim);margin:.3rem 0 .35rem}.autor .autor-more{font-size:.88rem}.autor a{color:var(--acc2);font-weight:700}
.me-hero{display:flex;align-items:center;gap:1.5rem;margin:.5rem 0 1.5rem;padding:1.6rem;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.me-av{width:108px;height:108px;font-size:2.4rem;letter-spacing:-.04em;box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.me-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc2);background:rgba(255,106,26,.14);padding:.25rem .7rem;border-radius:999px;margin-bottom:.6rem}
.me-hero h1{margin:0 0 .4rem}.me-hero p{margin:0 0 .8rem;color:var(--dim)}
.me-chips{list-style:none;padding:0!important;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}.me-chips li{margin:0!important;font-size:.84rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem}
.me-src{list-style:none;padding:0!important;margin:.8rem 0 1rem;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.me-src li{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between;margin:0!important;padding:.75rem 1.1rem;border-top:1px solid var(--line)}.me-src li:first-child{border-top:0}
.me-src strong{color:var(--ink)}.me-src span{color:var(--mute);font-size:.92rem}
.me-contact{margin:2rem 0 1rem;padding:1.2rem 1.3rem;border-radius:16px;background:#FFF3D6;border:1px solid #F5D98F}
.me-contact strong{display:block;font-size:1.1rem;color:#5A3B00;margin-bottom:.3rem}.me-contact p{margin:0;color:#5A3B00!important}.me-contact a{color:#5A3B00;font-weight:700}
.me-page{max-width:760px!important;margin-left:auto!important;margin-right:auto!important;padding-top:1.5rem;padding-bottom:2rem}
.me-page>p{margin:0 0 1rem;line-height:1.65}.me-page>h2{margin:2.2rem 0 .7rem;line-height:1.25}.me-page .me-hero p{line-height:1.6}
@media (max-width:640px){.me-hero{flex-direction:column;align-items:flex-start;padding:1.2rem}.me-av{width:84px;height:84px;font-size:1.9rem}}
/* autor:end */