/* ===================== playground: componentes de la app sobre los tokens del sitio =====================
   Los selectores (.panel, .card, .chip, .bar, .row, .grid, .kv, .fields…) los usa el motor de la
   página (js/mini.js + template) y no se renombran; solo cambia su aspecto. */
body{ font-size:.92rem }
.pg-nav{ position:sticky; top:var(--header-h); z-index:40; background:rgb(var(--canvas)); border-bottom:1px solid rgb(var(--line)) }
.pg-nav .wrap{ display:flex; align-items:center; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-block:.55rem }
.pg-nav nav{ display:flex; gap:.35rem }
.pg-nav nav button{ background:transparent; border:1px solid transparent; padding:.42rem .85rem; border-radius:var(--r-lg); color:rgb(var(--fg-muted)); cursor:pointer; font:inherit; font-size:.84rem; font-weight:600; white-space:nowrap }
.pg-nav nav button.active{ background:rgb(var(--fg)); color:rgb(var(--canvas)) }
.pg-nav nav button:hover:not(.active){ background:rgb(var(--subtle)); color:rgb(var(--fg)) }
.pg-nav .toggle{ margin-left:auto; border:1px solid rgb(var(--line)); background:transparent; color:rgb(var(--fg-muted)); border-radius:var(--r-lg); width:34px; height:34px; cursor:pointer; flex:none }
/* misma columna enmarcada que la portada: 1216px con reglas laterales */
main{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 4rem; border-inline:1px solid rgb(var(--line)) }
@media (max-width:calc(76rem + 4rem)){ main{ border-inline:0 } }
.tab{ display:none } .tab.active{ display:block }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem } @media (max-width:1000px){ .grid{ grid-template-columns:minmax(0,1fr) } }
.panel{ background:rgb(var(--raised)); border:1px solid rgb(var(--line)); border-radius:var(--r-lg); padding:1rem 1.1rem; min-width:0 }
.panel h2{ font-family:var(--f-mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--fg-faint)); margin:0 0 .75rem; line-height:1.4 }
textarea,pre,code,.mono{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:-.03em }
textarea{ width:100%; min-height:280px; border:1px solid rgb(var(--line)); border-radius:var(--r-lg); padding:.75rem; background:rgb(var(--subtle)); color:rgb(var(--fg)); resize:vertical; white-space:pre; overflow:auto; line-height:1.6 }
textarea:focus{ outline:none; border-color:rgb(var(--accent)); box-shadow:0 0 0 3px rgb(var(--accent) / .18) }
pre{ background:rgb(var(--slab)); color:rgb(var(--on-slab)); border-radius:var(--r-lg); padding:.85rem; overflow:auto; max-height:440px; margin:0; white-space:pre; line-height:1.65 }
select,input[type=text],input[type=number]{ font:inherit; font-size:.86rem; padding:.42rem .6rem; border:1px solid rgb(var(--line)); border-radius:var(--r-lg); background:rgb(var(--canvas)); color:rgb(var(--fg)) }
label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; color:rgb(var(--fg-muted)) }
button.primary{ background:rgb(var(--fg)); color:rgb(var(--canvas)); border:none; padding:.5rem 1rem; border-radius:var(--r-lg); cursor:pointer; font:inherit; font-size:.86rem; font-weight:650 }
button.primary:hover{ background:rgb(var(--accent-strong)); color:#fff }
button.ghost{ background:transparent; border:1px solid rgb(var(--line)); padding:.45rem .85rem; border-radius:var(--r-lg); cursor:pointer; font:inherit; font-size:.84rem; color:rgb(var(--fg)) }
button.ghost:hover{ background:rgb(var(--subtle)) }
.row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem }
.chips{ display:flex; gap:.4rem; flex-wrap:wrap }
.chip{ background:rgb(var(--accent-soft)); color:rgb(var(--accent-strong)); padding:.1rem .55rem; border-radius:999px; font-size:.72rem; font-family:var(--f-mono); letter-spacing:-.02em }
.ok{ color:rgb(var(--ok)); font-weight:650 } .err{ color:rgb(var(--danger)) } .muted{ color:rgb(var(--fg-muted)) }
ul.errors{ margin:.6rem 0 0; padding-left:1.1rem; font-family:var(--f-mono); font-size:.78rem; letter-spacing:-.02em } ul.errors li{ color:rgb(var(--danger)); margin-top:.2rem }
table{ border-collapse:collapse; width:100%; font-size:.84rem } th,td{ text-align:left; padding:.45rem .6rem; border-bottom:1px solid rgb(var(--line)); vertical-align:top } th{ color:rgb(var(--fg-muted)); font-weight:600; font-size:.7rem; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.06em }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem }
.card{ border:1px solid rgb(var(--line)); border-radius:var(--r-lg); padding:1.15rem 1.2rem 1rem; background:rgb(var(--raised)); cursor:pointer; transition:border-color var(--d-fast); display:flex; flex-direction:column; gap:.35rem; min-width:0 }
.card:hover{ border-color:rgb(var(--accent)) }
.card h3{ margin:0; font-family:var(--f-mono); font-size:1rem; font-weight:700; letter-spacing:-.04em; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem }
/* la chip del dominio va en su propia línea, sin partirse */
.card h3 .chip{ font-size:.66rem; font-weight:500; letter-spacing:0; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; padding:.15rem .6rem }
.card>div:nth-child(2){ font-size:.95rem; font-weight:600; letter-spacing:-.015em; line-height:1.3 }
.card .muted{ font-size:.72rem !important; margin:.1rem 0 .5rem !important }
/* la firma se parte solo en los separadores `|`, nunca a mitad de un campo */
.card .sig{ font-size:.7rem; line-height:1.6; color:rgb(var(--fg-muted)); font-family:var(--f-mono); word-break:normal; overflow-wrap:anywhere; background:rgb(var(--subtle)); border:1px solid rgb(var(--line)); border-radius:var(--r-sm); padding:.55rem .65rem; flex:1 }
.card::after{ content:"Abrir en el editor →"; font-size:.74rem; font-weight:600; color:rgb(var(--accent-strong)); margin-top:.75rem; opacity:.75 }
.card:hover::after{ opacity:1 }
.bar{ height:18px; background:rgb(var(--bar)); border-radius:var(--r-sm) } .bar.mini{ background:rgb(var(--accent)) }
.kv{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem .8rem; font-size:.84rem }
.fields .frow{ display:grid; grid-template-columns:1.2fr 1fr 1.6fr auto; gap:.4rem; margin-bottom:.4rem; align-items:center }
.note{ font-size:.84rem; color:rgb(var(--fg-muted)); max-width:80ch; margin-bottom:1rem; line-height:1.6 }
.note code{ background:rgb(var(--subtle)); border:1px solid rgb(var(--line)); border-radius:var(--r-sm); padding:0 .3rem }
.highlight{ background:rgb(var(--danger) / .18) }
.legend{ display:flex; gap:.9rem; flex-wrap:wrap; font-size:.74rem; color:rgb(var(--fg-muted)); font-family:var(--f-mono); margin-top:.6rem }
svg text{ fill:rgb(var(--fg)) }
details summary{ cursor:pointer; font-size:.86rem; color:rgb(var(--fg-muted)) }
details[open] summary{ margin-bottom:.5rem }
.pg-intro{ border-bottom:1px solid rgb(var(--line)); padding:2.5rem 0 1.75rem; margin-bottom:1.75rem; display:grid; gap:1rem 3rem; align-items:end }
@media (min-width:900px){ .pg-intro{ grid-template-columns:minmax(0,1fr) auto } }
.pg-intro h1{ font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:.7rem }
.pg-intro p{ color:rgb(var(--fg-muted)); max-width:62ch; font-size:1.02rem; line-height:1.6 }
.pg-intro .meta{ font-family:var(--f-mono); font-size:.7rem; color:rgb(var(--fg-faint)); letter-spacing:-.02em; line-height:1.8; border:1px solid rgb(var(--line)); border-radius:var(--r-lg); padding:.6rem .85rem; white-space:nowrap }
.note{ max-width:72ch }