/* DEEC Studio · panel administrativo: Herramientas → Identidad visual.
   Hoja compartida (sin media): la pantalla es responsiva con cuadrículas auto-fit y no necesita reglas propias de móvil ni de escritorio
   (excepción documentada en docs/arquitectura/30-identidad-visual.md, igual que admin-links.css y admin-rows.css). */
.th{display:grid;gap:18px;min-width:0}
.th-intro{margin:0;color:var(--muted);font-size:14px}
.th-tabs{margin-bottom:0}
.th-tabs .tab{flex:1 1 auto;padding:12px 10px;white-space:normal;text-align:center}
.th-dot{display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--warn-s)}
.th-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.th-card .card__b{padding:18px 20px}
.th-sub{font-size:13px;color:var(--muted)}
.th-h3{margin:20px 0 8px;font-size:14px;font-weight:600;color:var(--fg)}
.th-note{margin:12px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.th-lnk{padding:0;border:0;background:none;color:var(--acc);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.th-i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.th-i--s{width:14px;height:14px;stroke-width:2.4}

/* Estado: activa · pendiente · guardada */
.th-st{display:flex;flex-wrap:wrap;gap:8px}
.th-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:13px;line-height:1.35;background:var(--g100);color:var(--text)}
.th-chip b{font-weight:600;color:var(--fg);letter-spacing:.02em}
.th-chip--act{border:1px solid var(--line-strong);background:var(--card)}
.th-chip--pend{background:var(--warn-l);color:var(--warn);font-weight:500}
.th-chip--pend i{width:8px;height:8px;border-radius:50%;background:var(--warn-s)}
.th-chip--ok,.th-chip--saved{background:var(--ok-l);color:var(--ok);font-weight:500}

/* Modos y paletas: tarjetas seleccionables */
.th-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.th-mode,.th-pal{position:relative;display:grid;gap:6px;align-content:start;justify-items:start;padding:16px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.th-mode b,.th-pal b{color:var(--fg);font-weight:600;font-size:15px}
.th-mode span,.th-pal span{font-size:13px;line-height:1.45}
.th-mode .th-i{color:var(--acc)}
.th-mode:hover,.th-pal:hover:not([aria-disabled=true]){border-color:var(--acc)}
.th-mode.on,.th-pal.on{border-color:var(--acc);background:var(--acc-l);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.th-mode:focus-visible,.th-pal:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.th-now{font-size:12.5px;color:var(--muted)}
.th-tag{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 10px;border-radius:99px;background:var(--acc);color:var(--accfg);font-style:normal;font-size:12px;font-weight:600}
.th-tag--soft{background:var(--g100);color:var(--text);font-weight:500}
.th-pals{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px}
.th-pal[aria-disabled=true]{cursor:default}
.th-pal[aria-disabled=true]:not(.used){opacity:.55}
.th-pal.used{border-style:dashed;border-color:var(--acc)}
.th-mini{position:relative;display:block;width:100%;height:84px;border:1px solid var(--line-strong);border-radius:7px;overflow:hidden}
.th-mini__sb{position:absolute;left:0;top:0;bottom:0;width:22%}
.th-mini__c{position:absolute;left:30%;top:12px;right:10px;display:grid;gap:5px;padding:8px;border-radius:5px;box-shadow:0 0 0 1px rgba(128,128,128,.25)}
.th-mini__c i{display:block;height:5px;border-radius:3px}
.th-mini__c i:first-child{width:46%;height:7px}
.th-mini__d{position:absolute;left:30%;bottom:9px;display:flex;gap:5px}
.th-mini__d i{width:12px;height:12px;border-radius:50%}

/* Colores personalizados */
.th-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px;margin-top:14px}
.th-col{display:grid;gap:6px}
.th-col label{display:grid;gap:1px}
.th-col label b{color:var(--fg);font-weight:600;font-size:14px}
.th-col label small{color:var(--muted);font-size:12.5px}
.th-col__in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.th-col input[type=color]{width:46px;height:40px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);cursor:pointer}
.th-hex{width:112px;min-height:40px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--fg);font:500 14px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.th-hex:focus{border-color:var(--acc);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.th-def{font-size:12.5px;color:var(--muted)}
.th-cl-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.th-cl-list li{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);flex-wrap:wrap}
.th-cs{display:grid;place-items:center;width:36px;height:30px;border:1px solid var(--line-strong);border-radius:6px;font-weight:700;font-size:14px;flex:none}
.th-cl{flex:1 1 180px;display:grid;font-size:14px;color:var(--fg)}
.th-cl small{color:var(--muted);font-size:12.5px}
.th-cl-list b.num{font-size:14px;color:var(--fg)}
.th-warn{display:none;margin:12px 0 0;padding:10px 12px;border-radius:var(--r);background:var(--bad-l);color:var(--bad);font-size:13.5px;font-weight:500}
.th-warn.on{display:block}

/* Acciones */
.th-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.th-conf{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--text)}
.th-open{margin-left:auto}

/* Vista previa: todo se pinta con los tokens locales del contenedor (.tpv), nunca con los del documento */
.th-pvw{padding:0!important}
.tpv{--pv-r:8px;display:block;margin:0;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--bg2);color:var(--text);font-size:14px;line-height:1.5;container-type:inline-size}
.tpv h4{margin:0;font-size:16px;font-weight:600;color:var(--fg)}
.tpv .btn{cursor:default;pointer-events:none}
.tpv a{cursor:default}
.tpv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;min-width:0}
.tpv-row>*{max-width:100%}
.tpv-link{color:var(--acc);font-weight:500}
.tpv-link i{font-style:normal;margin-left:4px}
.tpv-focus{outline:2px solid var(--focus);outline-offset:1px}
.tpv--admin{display:grid;grid-template-columns:minmax(120px,26%) minmax(0,1fr)}
.tpv-sb{display:grid;align-content:start;gap:2px;padding:14px 10px;background:var(--sb-bg);border-right:1px solid var(--sb-line)}
.tpv-logo{padding:2px 8px 10px;font-size:15px;letter-spacing:.2em;color:var(--sb-fg-strong)}
.tpv-sep{padding:8px 8px 3px;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-muted)}
.tpv-sb a{padding:6px 8px;border-radius:var(--r);font-size:13px;color:var(--sb-fg)}
.tpv-sb a.on{background:var(--sb-on);color:var(--sb-onfg);font-weight:500}
.tpv-main{display:grid;gap:12px;align-content:start;min-width:0;padding:14px}
.tpv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tpv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.tpv-kpi{display:grid;gap:2px;padding:12px 14px;border-radius:8px;background:var(--kpi-b);color:var(--kpifg)}
.tpv-kpi small{color:color-mix(in srgb,var(--kpifg) 82%,transparent);font-size:12px}
.tpv-kpi b{font-size:22px;font-weight:300;color:var(--kpifg)}
.tpv-tabs{margin:0;overflow:hidden;pointer-events:none}
.tpv-tabs .tab{flex:1 1 auto;padding:8px 8px;font-size:13px;text-align:center}
.tpv-filters{display:flex;gap:8px;align-items:center}
.tpv-in{flex:1;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--muted);font-size:13px}
.tpv .tw{border:1px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden}
.tpv table{width:100%;font-size:13px}
.tpv th,.tpv td{padding:8px 10px}
.tpv .bar{min-width:70px}
.tpv-pend{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;background:var(--pend-l);color:var(--pend);font-size:12px;font-weight:500}
.tpv-modal{border:1px solid var(--line);border-radius:8px;background:var(--card);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--shadow) 45%,transparent);overflow:hidden}
.tpv-modal__h{padding:10px 14px;border-bottom:1px solid var(--line);font-weight:600;color:var(--fg)}
.tpv-modal__b{padding:12px 14px}
.tpv-toast{justify-self:start;padding:9px 16px;border-radius:var(--r);background:var(--fg);color:var(--fgfg);font-size:13px}
@container (max-width:520px){.tpv th:nth-child(3),.tpv td:nth-child(3){display:none}.tpv--admin{grid-template-columns:minmax(0,1fr)}.tpv-sb{display:flex;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--sb-line)}.tpv-sep{display:none}}

/* Vista previa del sitio público */
.tpv--site{background:var(--bg)}
.tps-nav,.tps-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px}
.tps-nav{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent)}
.tps-nav b,.tps-foot b{color:var(--fg);letter-spacing:.06em}
.tps-nav span:not(.btn),.tps-foot span{display:flex;gap:16px;font-size:13px}
.tps-nav a{color:var(--text)}
.tps-hero{padding:34px 18px 26px;background:var(--bg2)}
.tps-hero small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:600}
.tps-hero h4{margin:8px 0;max-width:20ch;font-size:clamp(22px,5cqi,34px);font-weight:300;line-height:1.15;letter-spacing:-.02em}
.tps-hero p{max-width:46ch;margin:0;color:var(--text)}
.tps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:18px}
.tps-grid article{display:grid;gap:6px;justify-items:start;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.tps-grid article i{width:34px;height:34px;border-radius:9px;background:var(--acc-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent)}
.tps-grid article b{color:var(--fg)}
.tps-grid article p{margin:0;font-size:13px}
.tps-feat{background:var(--inv-bg)!important;border-color:var(--inv-bg)!important}
.tps-feat b{color:var(--inv-fg)!important}.tps-feat p{color:color-mix(in srgb,var(--inv-fg) 80%,transparent)}
.tps-feat i{background:var(--inv-acc)!important}
.tps-form{display:grid;gap:4px;padding:6px 18px 20px}
.tps-form .fld{max-width:340px}
.tps-foot{background:var(--inv-bg);color:var(--inv-fg)}
.tps-foot b{color:var(--inv-fg)}
.tps-foot a{color:var(--inv-acc)}