/* Composición de los componentes canónicos; institucional en Regal Navy. */
.demo-work{display:grid;gap:24px}
.demo-intro{display:grid;gap:12px}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.demo-card{padding:24px;display:grid;gap:12px;min-width:0}
.demo-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-work .stack{--acc-start:var(--vt-navy-claro);--acc-end:var(--vt-navy-claro)}
#demo-role{--sel-start:var(--vt-navy-claro);--sel-end:var(--vt-navy-claro)}
.demo-work .integration-options{max-width:100%;grid-auto-columns:minmax(0,1fr)}
.demo-work .integration-options .vt-btn{padding-inline:16px;white-space:normal}
.demo-work textarea{display:block;width:100%;min-height:110px;padding:16px;border:0;border-radius:20px;background:var(--vt-blanco);resize:vertical}
.demo-work select,.demo-work input{max-width:100%}
.demo-table-wrap{overflow:auto;max-width:100%}
.demo-work table{width:100%;border-collapse:collapse;color:var(--vt-gris);font-size:14px}
.demo-work th,.demo-work td{padding:12px;text-align:left;border-bottom:1px solid #002f6c1c;vertical-align:top}
.demo-work th{color:var(--vt-navy)}
.demo-work .demo-note{font-size:12px;line-height:20px}
.demo-view{display:grid;gap:24px;min-width:0}
.demo-work [role=status]{line-height:1.7}
@media(max-width:700px){.demo-grid{grid-template-columns:minmax(0,1fr)}.demo-work .integration-options{grid-auto-flow:row;width:100%}.demo-work .integration{width:100%}}
@media print{.vt-sidebar,.vt-area-bar,.vt-footer,.demo-controls{display:none}.vt-columna{margin:0;padding:0}.demo-view[hidden]{display:block}.demo-work{border:0}}