/* Documentation adopts the same surface and density rules as the product. */
.p-shell-preview { border-radius:16px; overflow:hidden; padding:0 !important; border:1px solid var(--p-border); }
.p-shell-preview-head { position:relative; z-index:1; display:flex; align-items:center; gap:12px; min-height:var(--p-app-header-height); padding:10px 16px; }
.p-shell-preview-brand { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:750; }
.p-shell-preview-search { flex:1; min-width:0; padding:10px 12px; border-radius:10px; background:var(--p-bg); color:var(--p-text-muted); font-size:11px; }
.p-shell-preview-body { display:grid; grid-template-columns:120px minmax(0,1fr); min-height:220px; }
.p-shell-preview-nav { display:flex; flex-direction:column; gap:20px; padding:24px 16px; font-size:11px; background:var(--p-surface); color:var(--p-text-muted); }
.p-shell-preview-nav strong { color:var(--p-emphasis); }
.p-shell-preview-content { padding:24px; }
.p-shell-preview-content>small { display:block; margin-bottom:16px; color:var(--p-text-muted); }
.p-shell-preview-content .p-card { padding:16px; font-size:12px; }
.p-shell-preview-content .p-card p { font-size:11px; color:var(--p-text-muted); margin:8px 0; }
@media(max-width:460px) { .p-shell-preview-head { flex-wrap:wrap; }.p-shell-preview-search { order:3; flex-basis:100%; }.p-shell-preview-head button { margin-left:auto; }.p-shell-preview-body { grid-template-columns:96px minmax(0,1fr); }.p-shell-preview-content { padding:20px 12px; } }
.ds-top { background:var(--p-surface); border:0; height:72px; }
.ds-sidebar { background:var(--p-surface); border:0; top:72px; height:calc(100dvh - 72px); }
.ds-nav-group>a:hover,.ds-nav-group>a[aria-current] { background:var(--p-highlight); color:var(--p-highlight-ink); }
.ds-section { padding-top:48px; padding-bottom:48px; }
.ds-section-head { margin-bottom:24px; }
.ds-section-head h2 { font-weight:700; letter-spacing:-.045em; }
.ds-section-head p { max-width:760px; }
.ds-note,.ds-reference,.ds-control-workbench,.ds-control-states>article,.ds-component { border:0; background:var(--p-surface); box-shadow:var(--p-elevation-card); }
.ds-reference { border-radius:18px; }
.ds-reference:hover { background:var(--p-highlight); color:var(--p-highlight-ink); }
.ds-reference:hover :is(p,span,h3) { color:inherit; }
.ds-reference h3 { font-size:18px; }
.ds-data-toolbar { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; }
.ds-data-toolbar .p-field { min-width:200px; }
.ds-data-playground { padding:16px; border-radius:24px; }
.ds-ticket-demo>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ds-ticket-demo h3 { font-weight:700; font-size:18px; }
.ds-ticket-demo ul { list-style:none; margin:0; padding:0; }
.ds-ticket-demo li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; font-size:13px; border-bottom:1px solid var(--p-border); }
.ds-ticket-demo .p-help { margin-top:16px; }
#datos .p-card p,#datos .p-card li { font-size:14px; line-height:22px; }
#datos .p-card h3 { font-size:18px; font-weight:700; margin-bottom:12px; }
#datos details { background:var(--p-surface); border-radius:16px; padding:16px; }
#datos summary { min-height:44px; display:flex; align-items:center; font-weight:600; }
@media(max-width:680px) { .ds-data-playground { padding:8px; }.ds-section { padding-top:32px; padding-bottom:32px; }.ds-data-toolbar { gap:12px; }.ds-data-toolbar .p-field { width:100%; } }

.ds-ticket-demo li { flex-wrap:wrap; }
.ds-ticket-demo li>span { flex:1; min-width:100px; }
.ds-ticket-demo li>.p-field { flex:1 0 100%; }
.ds-ticket-demo li>.p-field[hidden] { display:none; }