/* PIEL FLUIDA: requiere <html class="v-fluid"> y ../../styles.css (tokens/fluid.css). Todo en calc(Nrem/16):
   a 1920 mide como el diseño; por debajo encoge (tope 14px a ≤1280), por encima crece (tope 18px a ≥2560).
   Cortes: @media en px de VENTANA (menú plegado <1280); @container para lo que depende del espacio. */
/* Velara DS · Plantillas de app · capa compartida (cromo, tarjetas, botones operativos, chips, grids compactos).
   Solo tokens --v-*. Valores de densidad tomados de VOMS y VPIM (nov 2026). */

:root{--side:calc(200rem/16)}
*{box-sizing:border-box}
body{margin:0;background:var(--v-app-bg);color:var(--v-text-primary);font-family:var(--v-font-sans);font-weight:300;font-size:calc(13rem/16)}
button{font-family:inherit}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
/* ---- cromo: siempre oscuro ---- */
.side{background:#0A0C10;color:#ECE4D3;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .logo{height:calc(56rem/16);display:flex;align-items:center;padding:0 calc(18rem/16);border-bottom:1px solid #262E3B}
.side .logo img{height:calc(15rem/16);filter:none}
.side nav{padding:calc(16rem/16) calc(10rem/16);display:flex;flex-direction:column;gap:calc(2rem/16);flex:1}
.side a{display:flex;align-items:center;gap:calc(10rem/16);padding:calc(8rem/16) calc(10rem/16);border-radius:calc(6rem/16);color:#B6C0BF;text-decoration:none;font-size:calc(11rem/16);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.side a:hover{background:rgba(58,68,84,.45);color:#F4EFE6}
.side a.on{background:rgba(201,169,97,.14);color:#D9C08A}
.side svg{width:calc(15rem/16);height:calc(15rem/16);flex:none}
.side .foot{border-top:1px solid #262E3B;padding:calc(12rem/16) calc(18rem/16);display:flex;justify-content:space-between;font-size:calc(10rem/16);letter-spacing:.1em;text-transform:uppercase;color:#94A2A1}
.top{height:calc(56rem/16);background:#0A0C10;color:#F4EFE6;display:flex;align-items:center;gap:calc(12rem/16);padding:0 calc(24rem/16);position:sticky;top:0;z-index:5}
.top .app-name{font-size:calc(12rem/16);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.top .app-name span{color:#94A2A1}
.chip-env{font-size:calc(9rem/16);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#FBBF24;border:1px solid rgba(245,158,11,.5);border-radius:calc(999rem/16);padding:calc(2rem/16) calc(7rem/16)}
.top .sp{flex:1}
.ibtn{width:calc(32rem/16);height:calc(32rem/16);border:1px solid #3A4454;border-radius:calc(6rem/16);background:transparent;color:#ECE4D3;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.user{display:flex;align-items:center;gap:calc(10rem/16);text-align:right;font-size:calc(11rem/16);line-height:1.3}
.user b{font-weight:500;display:block;font-size:calc(12rem/16)}
.avatar{width:calc(30rem/16);height:calc(30rem/16);border-radius:50%;border:1px solid #C9A961;display:flex;align-items:center;justify-content:center;color:#C9A961}
/* ---- contenido ---- */
main{padding:calc(20rem/16) calc(24rem/16) calc(48rem/16);display:flex;flex-direction:column;gap:calc(14rem/16);min-width:0}
.crumbs{display:flex;align-items:center;gap:calc(16rem/16);color:var(--v-text-tertiary);font-size:calc(12rem/16)}
.crumbs a{color:inherit;text-decoration:none;display:inline-flex;gap:calc(6rem/16);align-items:center}
.pager{display:inline-flex;gap:calc(6rem/16);align-items:center;font-family:var(--v-font-figures);font-size:calc(11rem/16)}
.head{display:flex;align-items:center;gap:calc(16rem/16);flex-wrap:wrap}
.head h1{margin:0;font-family:var(--v-font-figures);font-weight:700;font-size:calc(26rem/16);display:flex;align-items:center;gap:calc(10rem/16)}
.head .acts{margin-left:auto;display:flex;gap:calc(6rem/16);flex-wrap:wrap}
:root{--grid-fs:calc(12rem/16);--grid-th-fs:calc(10rem/16);--grid-pad:calc(6rem/16) calc(10rem/16)}
/* ---- BOTONES OPERATIVOS (VOMS lib/button-styles.ts · VPIM) ----
   Sin versales, Lexend 500, sin tracking, radio 8. El color del TEXTO lleva el significado; hover rellena.
   .ab  acción de cabecera / toolbar   · 30px · 12px · px 10
   .btn botón de formulario / modal    · 36px · 14px · px 16
   .bm  micro (popovers, paginador, celdas) · 24px · 10px · px 8
   .cta champagne · texto --v-on-cta (blanco desde nov 2026; contraste 2,25:1, por debajo de AA) */
.ab,.btn,.bm,.cta{display:inline-flex;align-items:center;justify-content:center;gap:calc(6rem/16);font-family:var(--v-font-sans);font-weight:500;letter-spacing:0;text-transform:none;border:1px solid var(--v-border-hover);background:var(--v-surface);color:var(--v-text-secondary);cursor:pointer;white-space:nowrap;text-decoration:none}
.ab{height:calc(30rem/16);padding:0 calc(10rem/16);font-size:calc(12rem/16);border-radius:calc(8rem/16)}
.btn{height:calc(36rem/16);padding:0 calc(16rem/16);font-size:calc(14rem/16);border-radius:calc(8rem/16)}
.bm{height:calc(24rem/16);padding:0 calc(8rem/16);font-size:calc(10rem/16);border-radius:calc(6rem/16)}
.ab:hover,.btn:hover,.bm:hover{background:var(--v-surface-hover);color:var(--v-text-primary)}
.ab.neg,.btn.neg,.bm.neg{color:var(--v-neg-strong-text);border-color:color-mix(in srgb,var(--v-neg-strong) 45%,transparent)}
.ab.pos,.btn.pos,.bm.pos{color:var(--v-pos-strong-text);border-color:color-mix(in srgb,var(--v-pos-strong) 45%,transparent)}
.ab.neg:hover,.btn.neg:hover{background:color-mix(in srgb,var(--v-neg-strong) 10%,transparent)}
.ab.pos:hover,.btn.pos:hover{background:color-mix(in srgb,var(--v-pos-strong) 10%,transparent)}
.btn.danger{background:var(--v-neg-strong);border-color:var(--v-neg-strong);color:var(--v-on-neg-strong)}
.ab.ghost,.bm.ghost{border-color:transparent;background:transparent}
.ab svg,.bm svg{width:calc(14rem/16);height:calc(14rem/16)}
.cta{height:calc(30rem/16);padding:0 calc(12rem/16);font-size:calc(12rem/16);border-radius:calc(8rem/16);border-color:var(--v-cta);background:var(--v-cta);color:var(--v-on-cta)}
.btn.cta{height:calc(36rem/16);padding:0 calc(16rem/16);font-size:calc(14rem/16)}
.cta:hover{background:var(--v-cta-hover);border-color:var(--v-cta-hover);color:var(--v-on-cta)}
.ab[disabled],.btn[disabled],.cta[disabled]{opacity:.45;cursor:not-allowed}
.notice{display:flex;align-items:center;gap:calc(10rem/16);padding:calc(10rem/16) calc(14rem/16);border-radius:calc(10rem/16);border:1px solid var(--v-accent-border);background:color-mix(in srgb,var(--v-accent) 8%,var(--v-surface));font-size:calc(12rem/16);font-weight:400}
.notice .cta{margin-left:auto}
/* tarjetas */
.card{background:var(--v-surface);border:1px solid var(--v-border);border-radius:calc(12rem/16);min-width:0}
.card>header,.card>summary>header{display:flex;align-items:center;gap:calc(8rem/16);padding:calc(14rem/16) calc(16rem/16);border-bottom:1px solid var(--v-border)}
.card>header h2,.card>summary>header h2{margin:0;font-size:calc(13rem/16);font-weight:500;letter-spacing:.02em}
.card>header svg,.card>summary>header svg{width:calc(14rem/16);height:calc(14rem/16);color:var(--v-text-tertiary)}
.card>header .r,.card>summary>header .r{margin-left:auto}
.cnt{font-family:var(--v-font-figures);font-size:calc(10rem/16);background:var(--v-surface-elevated);border-radius:calc(999rem/16);padding:1px calc(7rem/16);color:var(--v-text-tertiary)}
.body{padding:calc(14rem/16) calc(16rem/16)}
.grid3{display:grid;grid-template-columns:1.45fr .55fr 1fr;gap:calc(14rem/16)}
.lbl{font-size:calc(10rem/16);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--v-text-tertiary);display:flex;align-items:center;gap:calc(5rem/16);margin:0 0 calc(6rem/16)}
.kv{display:flex;flex-direction:column;gap:calc(2rem/16);margin-bottom:calc(10rem/16)}
.kv span{font-size:calc(11rem/16);color:var(--v-text-tertiary)}
.kv b{font-weight:300;font-size:calc(12rem/16);letter-spacing:.02em}
.split{display:grid;grid-template-columns:calc(100rem/16) 1fr;gap:calc(16rem/16)}
.split>div:first-child{border-right:1px solid var(--v-border);padding-right:calc(12rem/16)}
.addr{display:grid;grid-template-columns:1fr 1fr;gap:calc(10rem/16);margin-top:calc(10rem/16)}
.box{border:1px solid var(--v-border);border-radius:calc(8rem/16);padding:calc(10rem/16) calc(12rem/16);font-size:calc(12rem/16);line-height:1.6}
.box b{font-weight:400}
a.link{color:var(--v-accent-text);text-decoration:none;font-size:calc(12rem/16)}
.in{height:calc(28rem/16);border:1px solid var(--v-border-hover);border-radius:calc(6rem/16);background:var(--v-surface);padding:0 calc(10rem/16);font:inherit;font-size:calc(12rem/16);color:var(--v-text-primary);flex:1;min-width:0}
.row{display:flex;justify-content:space-between;align-items:center;padding:calc(4rem/16) 0;font-size:calc(12rem/16)}
.row .n{font-family:var(--v-font-figures)}
.total{border-top:1px solid var(--v-border);margin-top:calc(8rem/16);padding-top:calc(10rem/16);display:flex;justify-content:space-between;align-items:baseline;font-weight:500}
.total .n{font-family:var(--v-font-figures);font-weight:700;font-size:calc(18rem/16)}
.note{font-size:calc(10.5rem/16);color:var(--v-text-tertiary);text-align:right;margin:calc(6rem/16) 0 0}
.sep{border-top:1px solid var(--v-border);margin:calc(12rem/16) 0}
/* chips de estado · 18px · 10px · 400 (VOMS D9) · tinte + texto, nunca solo color */
.chip{display:inline-flex;align-items:center;height:calc(18rem/16);padding:0 calc(8rem/16);border-radius:calc(999rem/16);font-size:calc(10rem/16);font-weight:400;white-space:nowrap}
.chip.ok{background:var(--v-pos-strong);color:var(--v-on-pos-strong)}
.chip.okt{background:var(--v-pos-soft);color:var(--v-pos)}
.chip.info{background:var(--v-blue-soft);color:var(--v-blue-text)}
.chip.warn{background:var(--v-yellow-soft);color:var(--v-yellow)}
.chip.bad{background:var(--v-red-soft);color:var(--v-neg-strong-text)}
.chip.neu{background:var(--v-neutral-bg);color:var(--v-text-tertiary);border:1px solid var(--v-neutral-border)}
.chips{display:inline-flex;flex-direction:column;gap:calc(3rem/16);align-items:flex-start}
/* línea de progreso */
.steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:calc(10rem/16);padding:calc(6rem/16) calc(4rem/16) calc(14rem/16)}
.dot{width:calc(18rem/16);height:calc(18rem/16);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--v-border-hover)}
.dot.done{background:var(--v-pos-strong);border-color:var(--v-pos-strong);color:var(--v-on-pos-strong)}
.dot.part{border-color:var(--v-accent);background:var(--v-accent-soft)}
.bar{height:calc(1.5rem/16);background:var(--v-border-hover)}.bar.done{background:var(--v-pos-strong)}
.steplbl{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:calc(11rem/16);font-weight:400;margin-top:calc(-6rem/16)}
.steplbl span:nth-child(2){text-align:center}.steplbl span:last-child{text-align:right}
.steplbl .g{color:var(--v-pos)}.steplbl .a{color:var(--v-accent-text)}
.srow{display:flex;justify-content:space-between;align-items:center;padding:calc(6rem/16) 0;font-size:calc(10.5rem/16);letter-spacing:.1em;text-transform:uppercase;color:var(--v-text-tertiary)}
/* ---- GRID COMPACTO (VOMS/VPIM DataGrid) ----
   cuerpo 12px (VOMS a 1920) · [data-grid-text-11] 11px (VPIM) · cabecera 10px/600/.05em ink · celdas 6px 10px (~30px/fila)
   cabecera fija · cifras Geist tabulares alineadas a la derecha · columna clave (.key) ink 500 · seleccionada = tinte champagne */
table{width:100%;border-collapse:collapse;font-size:var(--grid-fs)}
[data-grid-text-11]{--grid-fs:calc(11rem/16)}
th{text-align:left;font-size:var(--grid-th-fs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--v-text-primary);padding:var(--grid-pad);border-bottom:1px solid var(--v-border);white-space:nowrap;background:var(--v-surface);position:sticky;top:0;z-index:1}
td{padding:var(--grid-pad);border-bottom:1px solid var(--v-border);vertical-align:middle;white-space:nowrap;color:var(--v-text-secondary);font-weight:300}
tbody tr:nth-child(even){background:var(--v-row-stripe)}
tbody tr:hover{background:var(--v-row-hover)}
tbody tr.sel{background:color-mix(in srgb,var(--v-accent) 12%,transparent)}
td.key{color:var(--v-text-primary);font-weight:500}
td.num,th.num{text-align:right;font-family:var(--v-font-figures);font-variant-numeric:tabular-nums}
td .chip,td .bm{font-size:calc(10rem/16)}
td b{font-weight:500}
.mono{font-family:var(--v-font-mono);font-size:calc(10.5rem/16);color:var(--v-text-tertiary)}
.thumb{width:calc(30rem/16);height:calc(30rem/16);border-radius:calc(6rem/16);background:var(--v-surface-elevated);border:1px solid var(--v-border)}
.sku{display:flex;gap:calc(10rem/16);align-items:center}
.tag{font-size:calc(9.5rem/16);border:1px solid var(--v-border);border-radius:calc(4rem/16);padding:1px calc(5rem/16);color:var(--v-text-tertiary);margin-left:calc(6rem/16)}
.ship{display:flex;align-items:center;gap:calc(12rem/16);border:1px solid var(--v-border);border-radius:calc(8rem/16);padding:calc(10rem/16) calc(14rem/16);font-size:calc(12rem/16)}
.ship .code{font-family:var(--v-font-figures);font-weight:600;color:var(--v-accent-text)}
.muted{color:var(--v-text-tertiary)}
.tgt{display:flex;flex-direction:column}.tgt small{color:var(--v-accent-text);font-size:calc(10.5rem/16)}
.vp{color:var(--v-text-tertiary);font-size:calc(11rem/16);white-space:nowrap}
details.card>summary{list-style:none;cursor:pointer}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary .chev{transform:rotate(90deg)}
.chev{transition:transform .15s}
.empty{padding:calc(14rem/16) calc(16rem/16);font-size:calc(12rem/16);color:var(--v-text-tertiary)}
.tablewrap{overflow-x:auto;padding:0 calc(8rem/16) calc(4rem/16)}

/* ======================================================================
   PATRONES DE LISTADO (VOMS OrdersPage · VPIM CatalogPage)
   ====================================================================== */
.page-title{margin:0;font-family:var(--v-font-serif);font-weight:400;font-size:calc(32rem/16);line-height:1.1;font-variant-numeric:lining-nums;display:flex;align-items:center;gap:calc(10rem/16)}
.page-title svg{width:calc(24rem/16);height:calc(24rem/16);color:var(--v-accent)}
.eyebrow{font-size:calc(11rem/16);letter-spacing:.16em;text-transform:uppercase;color:var(--v-text-tertiary)}
.phead{display:flex;align-items:center;gap:calc(12rem/16);flex-wrap:wrap}
.phead .r{margin-left:auto;display:flex;gap:calc(6rem/16);align-items:center}
/* filtros rápidos · pill 11px 500 + contador 10px */
.qpills{display:flex;gap:calc(6rem/16);flex-wrap:wrap;align-items:center}
.qp{display:inline-flex;align-items:center;gap:calc(6rem/16);height:calc(26rem/16);padding:0 calc(12rem/16);border-radius:calc(999rem/16);border:1px solid var(--v-border-hover);background:var(--v-surface);font:500 calc(11rem/16) var(--v-font-sans);color:var(--v-text-secondary);cursor:pointer}
.qp b{font:400 calc(10rem/16) var(--v-font-figures);padding:1px calc(6rem/16);border-radius:calc(999rem/16);background:var(--v-surface-elevated);color:var(--v-text-tertiary)}
.qp.on{border-color:var(--v-accent-border);background:color-mix(in srgb,var(--v-accent) 12%,var(--v-surface));color:var(--v-accent-text)}
.qp.on b{background:color-mix(in srgb,var(--v-accent) 22%,transparent);color:var(--v-accent-text)}
.qpills .r{margin-left:auto}
/* interruptor */
.sw{display:inline-flex;align-items:center;gap:calc(8rem/16);font-size:calc(11rem/16);color:var(--v-text-secondary);cursor:pointer}
.sw i{width:calc(28rem/16);height:calc(16rem/16);border-radius:calc(999rem/16);background:var(--v-border-hover);position:relative;transition:background .15s;flex:none}
.sw i::after{content:"";position:absolute;top:calc(2rem/16);left:calc(2rem/16);width:calc(12rem/16);height:calc(12rem/16);border-radius:50%;background:var(--v-surface);transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input{display:none}
.sw input:checked+i{background:var(--v-accent)}
.sw input:checked+i::after{transform:translateX(calc(12rem/16))}
/* barra de selección / acciones masivas */
.bulk{display:flex;align-items:center;gap:calc(10rem/16);padding:calc(6rem/16) calc(12rem/16);border-radius:calc(8rem/16);border:1px solid var(--v-accent-border);background:color-mix(in srgb,var(--v-accent) 8%,var(--v-surface));font-size:calc(11rem/16)}
.bulk .div{width:1px;height:calc(16rem/16);background:var(--v-border-hover)}
.bulk .r{margin-left:auto}
/* contenedor del grid */
.gshell{display:flex;flex-direction:column;background:var(--v-surface);border:1px solid var(--v-border);border-radius:calc(12rem/16);overflow:hidden;min-height:0}
.gtool{display:flex;align-items:center;gap:calc(6rem/16);padding:calc(6rem/16) calc(10rem/16);border-bottom:1px solid var(--v-border);flex-wrap:wrap}
.search{position:relative;width:calc(208rem/16)}
.search svg{position:absolute;left:calc(8rem/16);top:50%;transform:translateY(-50%);width:calc(12rem/16);height:calc(12rem/16);color:var(--v-text-tertiary)}
.search input{width:100%;height:calc(26rem/16);border:1px solid var(--v-border-hover);border-radius:calc(8rem/16);background:var(--v-surface);padding:0 calc(24rem/16) 0 calc(26rem/16);font:300 calc(11rem/16) var(--v-font-sans);color:var(--v-text-primary)}
.gsel{height:calc(24rem/16);border:1px solid var(--v-border-hover);border-radius:calc(8rem/16);background:var(--v-surface);padding:0 calc(6rem/16);font:400 calc(10rem/16) var(--v-font-sans);color:var(--v-text-secondary)}
.ib{width:calc(26rem/16);height:calc(26rem/16);display:inline-flex;align-items:center;justify-content:center;border-radius:calc(6rem/16);border:1px solid transparent;background:transparent;color:var(--v-text-tertiary);cursor:pointer}
.ib:hover{background:var(--v-surface-hover);color:var(--v-text-primary)}
.ib svg{width:calc(14rem/16);height:calc(14rem/16)}
.mpager{margin-left:auto;display:inline-flex;align-items:center;gap:calc(6rem/16);font:400 calc(10rem/16) var(--v-font-figures);color:var(--v-text-tertiary)}
.afbar{display:flex;align-items:center;gap:calc(6rem/16);padding:calc(6rem/16) calc(12rem/16);background:var(--v-surface-elevated);border-bottom:1px solid var(--v-border);flex-wrap:wrap}
.afbar .lab{font-size:calc(9rem/16);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text-tertiary)}
.af{display:inline-flex;align-items:center;gap:calc(4rem/16);height:calc(20rem/16);padding:0 calc(8rem/16);border-radius:calc(999rem/16);border:1px solid var(--v-border-hover);background:var(--v-surface);font-size:calc(10rem/16);color:var(--v-text-secondary)}
.af button{border:0;background:none;color:var(--v-text-tertiary);cursor:pointer;padding:0;font-size:calc(12rem/16);line-height:1}
.selall{padding:calc(6rem/16) calc(12rem/16);font-size:calc(11rem/16);text-align:center;background:color-mix(in srgb,var(--v-accent) 8%,var(--v-surface));border-bottom:1px solid var(--v-border)}
.selall a{color:var(--v-accent-text)}
.gscroll{overflow:auto;flex:1}
.gscroll table{table-layout:auto}
td.ck,th.ck{width:calc(40rem/16);text-align:center;padding-left:calc(12rem/16);padding-right:0}
.ck input{accent-color:var(--v-accent);width:calc(13rem/16);height:calc(13rem/16);margin:0}
th.pin,td.pin{position:sticky;right:0;background:var(--v-surface);box-shadow:inset 1px 0 0 var(--v-border)}
tbody tr:nth-child(even) td.pin{background:inherit}
.gfoot{display:flex;align-items:center;gap:calc(8rem/16);padding:calc(8rem/16) calc(12rem/16);border-top:1px solid var(--v-border);font-size:calc(11rem/16);color:var(--v-text-tertiary)}
.gfoot .r{margin-left:auto;display:flex;gap:calc(6rem/16)}
.gfoot .n{font-family:var(--v-font-figures)}

/* ======================================================================
   PATRONES DE CONFIGURACIÓN (VOMS /settings?tab= · VPIM /settings)
   ====================================================================== */
.settings{display:flex;gap:calc(24rem/16);align-items:flex-start}
.snav{width:calc(256rem/16);flex:none;position:sticky;top:calc(76rem/16)}
.snav h3{margin:0;padding:calc(14rem/16) calc(16rem/16);font-size:calc(14rem/16);font-weight:500;border-bottom:1px solid var(--v-border)}
.snav nav{padding:calc(6rem/16);display:flex;flex-direction:column;gap:calc(2rem/16)}
.snav a{display:grid;grid-template-columns:calc(16rem/16) 1fr;gap:calc(2rem/16) calc(10rem/16);padding:calc(10rem/16) calc(12rem/16);border-radius:calc(8rem/16);border-left:2px solid transparent;text-decoration:none;color:var(--v-text-secondary)}
.snav a svg{width:calc(16rem/16);height:calc(16rem/16);grid-row:span 2;margin-top:1px;color:var(--v-text-tertiary)}
.snav a b{font-size:calc(12rem/16);font-weight:500}
.snav a small{font-size:calc(10rem/16);color:var(--v-text-tertiary);font-weight:300}
.snav a:hover{background:var(--v-surface-hover)}
.snav a.on{border-left-color:var(--v-accent);background:color-mix(in srgb,var(--v-accent) 10%,transparent);color:var(--v-text-primary);border-radius:0 calc(8rem/16) calc(8rem/16) 0}
.snav a.on svg{color:var(--v-accent)}
.scontent{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(14rem/16)}
.shead h2{margin:0;font-size:calc(18rem/16);font-weight:600}
.shead p{margin:calc(4rem/16) 0 0;font-size:calc(12rem/16);color:var(--v-text-tertiary)}
.segs{display:inline-flex;gap:calc(2rem/16);padding:calc(2rem/16);border-radius:calc(8rem/16);background:var(--v-surface-elevated);border:1px solid var(--v-border);align-self:flex-start}
.segs button{height:calc(26rem/16);padding:0 calc(12rem/16);border:0;border-radius:calc(6rem/16);background:transparent;font:500 calc(12rem/16) var(--v-font-sans);color:var(--v-text-tertiary);cursor:pointer}
.segs button.on{background:var(--v-surface);color:var(--v-accent-text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ro{display:flex;gap:calc(8rem/16);align-items:center;padding:calc(8rem/16) calc(12rem/16);border-radius:calc(8rem/16);border:1px solid color-mix(in srgb,var(--v-yellow) 40%,transparent);background:var(--v-yellow-soft);color:var(--v-yellow);font-size:calc(11rem/16)}
.frow{display:grid;grid-template-columns:calc(220rem/16) 1fr;gap:calc(16rem/16);padding:calc(12rem/16) 0;border-bottom:1px solid var(--v-border);align-items:start}
.frow:last-child{border-bottom:0}
.frow label{font-size:calc(12rem/16);font-weight:500;color:var(--v-text-primary)}
.frow label small{display:block;font-size:calc(10rem/16);font-weight:300;color:var(--v-text-tertiary);margin-top:calc(3rem/16)}
.fin{height:calc(30rem/16);width:100%;max-width:calc(360rem/16);border:1px solid var(--v-border-hover);border-radius:calc(8rem/16);background:var(--v-surface);padding:0 calc(10rem/16);font:300 calc(12rem/16) var(--v-font-sans);color:var(--v-text-primary)}
.fin:focus{outline:2px solid var(--v-accent-ring);border-color:var(--v-accent)}
select.fin{padding-right:calc(6rem/16)}
.fhint{font-size:calc(10rem/16);color:var(--v-text-tertiary);margin-top:calc(4rem/16)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(10rem/16);max-width:calc(520rem/16)}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:calc(8rem/16);padding:calc(10rem/16) calc(16rem/16);border-top:1px solid var(--v-border);background:color-mix(in srgb,var(--v-surface) 92%,transparent);backdrop-filter:blur(calc(6rem/16));font-size:calc(11rem/16);color:var(--v-text-tertiary);border-radius:0 0 calc(12rem/16) calc(12rem/16)}
.savebar .r{margin-left:auto;display:flex;gap:calc(6rem/16)}
.danger{border-color:color-mix(in srgb,var(--v-neg-strong) 35%,transparent)}
.danger>header h2{color:var(--v-neg-strong-text)}
.drow{display:flex;align-items:center;gap:calc(16rem/16);padding:calc(12rem/16) calc(16rem/16);border-top:1px solid var(--v-border)}
.drow:first-of-type{border-top:0}
.drow div{flex:1}.drow b{font-size:calc(12rem/16);font-weight:500;display:block}.drow small{font-size:calc(11rem/16);color:var(--v-text-tertiary)}
/* ajustes */
th,td{line-height:calc(16rem/16)}
.frow label.sw{font-size:calc(12rem/16);font-weight:300;color:var(--v-text-secondary)}
td .bm{height:calc(18rem/16);padding:0 calc(6rem/16)}

/* ======================================================================
   PIEL FLUIDA · maquetación en anchos estrechos (VOMS spec 0238 D36)
   ====================================================================== */
main{container-type:inline-size;container-name:main}
.app>div{min-width:0}
/* ficha: 3 columnas desde 72rem · 48–72rem una a lo ancho y dos debajo · por debajo, una columna */
@container main (max-width:72rem){.grid3{grid-template-columns:1fr 1fr}.grid3>:first-child{grid-column:1/-1}}
@container main (max-width:48rem){.grid3{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split>div:first-child{border-right:0;padding-right:0}.addr{grid-template-columns:1fr}}
/* buscador flexible en vez de ancho fijo */
.search{width:auto;flex:0 1 calc(208rem/16);min-width:calc(140rem/16)}
.mpager{flex:none}
/* configuración: el menú de secciones pasa arriba cuando no cabe */
@container main (max-width:60rem){
  .settings{flex-direction:column;align-items:stretch}
  .snav{width:auto;position:static}
  .snav nav{flex-direction:row;flex-wrap:wrap}
  .snav a{grid-template-columns:calc(16rem/16) auto}.snav a small{display:none}
  .frow{grid-template-columns:1fr;gap:calc(6rem/16)}
}
/* menú lateral: se pliega solo por debajo de 1280px de VENTANA (px: una @media no ve la raíz fluida) */
@media (max-width:1279.98px){
  :root{--side:calc(64rem/16)}
  .side nav{padding:calc(16rem/16) calc(10rem/16)}
  .side a{font-size:0;justify-content:center;gap:0;padding:calc(9rem/16) 0}
  .side a svg{width:calc(16rem/16);height:calc(16rem/16)}
  .side .logo{justify-content:center;padding:0}
  .side .logo img{content:url(../../assets/velara-v.svg);height:calc(17.6rem/16)}
  .side .foot{justify-content:center;padding:calc(12rem/16) 0}
  .side .foot span{display:none}
  .side .foot #vl-back-index{font-size:0!important}
  .side .foot #vl-back-index::before{content:"←";font-size:calc(14rem/16)}
  .top{padding:0 calc(16rem/16)}
  .user>div:first-child{display:none}
}