/* VIVARGO ONE · A / Grafito. Copiar este bloque completo como vivargo-one.css.
   ORDEN: 1 tokens, 2 base, 3 componentes, 4 layout, 5 utilidades.
   A: lateral. B: lanzador superior. C: espacio de trabajo por perfil. */
/* 1. TOKENS */
:root {
  --vo-color-brand:#FF0000;
  --vo-color-ink:#231F20;
  --vo-color-silver:#C0C0C0;
  --vo-color-white:#FFFFFF;
  --vo-color-action:#B5121B;
  --vo-color-action-hover:#900E16;
  --vo-color-action-soft:#FFF0F0;
  --vo-color-background:#F5F6F8;
  --vo-color-surface:#FFFFFF;
  --vo-color-text:#231F20;
  --vo-color-muted:#60616D;
  --vo-color-border:#DDE0E4;
  --vo-color-control:#85858F;
  --vo-color-success:#14633D;
  --vo-color-success-soft:#E8F5ED;
  --vo-color-warning:#805200;
  --vo-color-warning-soft:#FFF4D6;
  --vo-color-error:#9F174B;
  --vo-color-error-soft:#FDECF2;
  --vo-color-info:#165A8A;
  --vo-color-info-soft:#EAF3FA;
  --vo-color-neutral:#53535D;
  --vo-color-neutral-soft:#EEEFF2;
  --vo-color-focus:#165A8A;
  --vo-color-sidebar:#231F20;
  --vo-color-sidebar-text:#FFFFFF;
  --vo-color-sidebar-muted:#C0C0C0;
  --vo-color-sidebar-active:#3D3739;
  --vo-color-header:#FFFFFF;
  --vo-color-header-text:#231F20;
  --vo-color-overlay:rgb(35 31 32 / 55%);
  --vo-font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --vo-font-xs:12px;
  --vo-font-sm:13px;
  --vo-font-md:14px;
  --vo-font-lg:16px;
  --vo-font-xl:20px;
  --vo-font-2xl:24px;
  --vo-font-3xl:32px;
  --vo-font-regular:400;
  --vo-font-medium:600;
  --vo-font-bold:700;
  --vo-line-body:1.45;
  --vo-line-heading:1.2;
  --vo-space-0:0;
  --vo-space-1:4px;
  --vo-space-2:8px;
  --vo-space-3:12px;
  --vo-space-4:16px;
  --vo-space-5:20px;
  --vo-space-6:24px;
  --vo-space-8:32px;
  --vo-space-10:40px;
  --vo-space-12:48px;
  --vo-radius-sm:3px;
  --vo-radius-md:6px;
  --vo-radius-lg:10px;
  --vo-radius-pill:999px;
  --vo-border-width:1px;
  --vo-focus-width:3px;
  --vo-shadow-sm:0 1px 3px rgb(35 31 32 / 6%);
  --vo-shadow-md:0 8px 28px rgb(35 31 32 / 12%);
  --vo-shadow-lg:0 24px 64px rgb(35 31 32 / 22%);
  --vo-z-sticky:10;
  --vo-z-header:20;
  --vo-z-drawer:40;
  --vo-z-toast:60;
  --vo-duration-fast:140ms;
  --vo-duration-normal:220ms;
  --vo-easing:ease-out;
  --vo-control-height:40px;
  --vo-touch-target:48px;
  --vo-table-row:48px;
  --vo-table-row-compact:36px;
  --vo-icon-sm:16px;
  --vo-icon-md:20px;
  --vo-icon-lg:24px;
  --vo-sidebar-width:232px;
  --vo-sidebar-collapsed:76px;
  --vo-index-width:204px;
  --vo-header-height:64px;
  --vo-content-max:1680px;
  --vo-chart-height:200px;
}
/* 2. BASE */
*{box-sizing:border-box}
html{font-family:var(--vo-font-family);font-size:var(--vo-font-md);color:var(--vo-color-text);background:var(--vo-color-background);line-height:var(--vo-line-body);scroll-behavior:smooth}
body{margin:0}
body[data-drawer-open="true"]{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button,a{ -webkit-tap-highlight-color:transparent}
a{color:var(--vo-color-action);text-underline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0}
h1{font-size:var(--vo-font-2xl);line-height:var(--vo-line-heading);letter-spacing:-.6px}
h1[tabindex="-1"]:focus{outline:0}
h2{font-size:var(--vo-font-xl);line-height:var(--vo-line-heading)}
h3{font-size:var(--vo-font-lg)}
small{font-size:var(--vo-font-xs)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:var(--vo-font-bold);margin-bottom:var(--vo-space-3)}
:focus-visible{outline:var(--vo-focus-width) solid var(--vo-color-focus);outline-offset:3px}
[hidden]{display:none!important}
::selection{background:var(--vo-color-info-soft);color:var(--vo-color-ink)}
/* 3. COMPONENTES */
.vo-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--vo-space-2);min-height:var(--vo-control-height);padding:var(--vo-space-2) var(--vo-space-4);border:var(--vo-border-width) solid var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text);font-weight:var(--vo-font-medium);text-decoration:none;line-height:var(--vo-line-heading);transition:background var(--vo-duration-fast) var(--vo-easing),box-shadow var(--vo-duration-fast) var(--vo-easing)}
.vo-btn:hover{background:var(--vo-color-neutral-soft)}
.vo-btn:active,.vo-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.vo-btn--primary{background:var(--vo-color-action);border-color:var(--vo-color-action);color:var(--vo-color-white)}
.vo-btn--primary:hover{background:var(--vo-color-action-hover);border-color:var(--vo-color-action-hover)}
.vo-btn--secondary{background:var(--vo-color-surface)}
.vo-btn--tertiary{border-color:transparent;background:transparent;color:var(--vo-color-action)}
.vo-btn--danger{background:var(--vo-color-error);color:var(--vo-color-white);border-color:var(--vo-color-error)}
.vo-btn--danger:hover{box-shadow:inset 0 0 0 2px var(--vo-color-white);background:var(--vo-color-error)}
.vo-btn--icon{width:var(--vo-control-height);padding:var(--vo-space-2);flex-shrink:0}
.vo-btn--small{min-height:32px;padding:var(--vo-space-1) var(--vo-space-2);font-size:var(--vo-font-sm)}
.vo-btn:disabled{background:var(--vo-color-neutral-soft);color:var(--vo-color-muted);border-color:var(--vo-color-border);box-shadow:none}
.vo-btn[aria-busy="true"]{cursor:progress}
.vo-btn__spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:vo-spin .8s linear infinite}
.vo-segment{display:flex;gap:var(--vo-space-1);padding:var(--vo-space-1);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);background:var(--vo-color-background)}
.vo-segment .vo-btn{min-height:32px;font-size:var(--vo-font-xs);padding:var(--vo-space-2) var(--vo-space-3);border:0;background:transparent}
.vo-segment .vo-btn[aria-pressed="true"]{background:var(--vo-color-ink);color:var(--vo-color-white);box-shadow:none}
.vo-icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--vo-icon-sm);line-height:1;flex-shrink:0}
.vo-panel{background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);padding:var(--vo-space-6);box-shadow:var(--vo-shadow-sm);min-width:0}
.vo-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-3);margin-bottom:var(--vo-space-5)}
.vo-panel--flush{padding:0;overflow:hidden}
.vo-panel--flush>.vo-panel__head{padding:var(--vo-space-5);margin:0}
.vo-eyebrow{font-size:var(--vo-font-xs);letter-spacing:1.1px;text-transform:uppercase;font-weight:var(--vo-font-bold);color:var(--vo-color-muted)}
.vo-section-title{margin-bottom:var(--vo-space-4)}
.vo-muted{color:var(--vo-color-muted)}
.vo-field{display:flex;flex-direction:column;gap:var(--vo-space-2);min-width:0;font-size:var(--vo-font-sm)}
.vo-field>label,.vo-field>span:first-child{font-weight:var(--vo-font-medium)}
.vo-input,.vo-select,.vo-textarea{width:100%;min-height:var(--vo-control-height);padding:var(--vo-space-2) var(--vo-space-3);border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text)}
.vo-input::placeholder,.vo-textarea::placeholder{color:var(--vo-color-muted);opacity:1}
.vo-input:hover,.vo-select:hover,.vo-textarea:hover{border-color:var(--vo-color-text)}
.vo-input[aria-invalid="true"],.vo-textarea[aria-invalid="true"]{border:2px solid var(--vo-color-error);background:var(--vo-color-error-soft)}
.vo-input:disabled,.vo-select:disabled{background:var(--vo-color-neutral-soft);color:var(--vo-color-muted)}
.vo-textarea{resize:vertical;min-height:100px}
.vo-input-group{display:flex;align-items:center;border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-md);overflow:hidden;background:var(--vo-color-surface)}
.vo-input-group>span{padding:0 var(--vo-space-3);color:var(--vo-color-muted)}
.vo-input-group .vo-input{border:0;border-radius:0}
.vo-input-group:focus-within{outline:3px solid var(--vo-color-focus);outline-offset:3px}
.vo-input-group .vo-input:focus-visible{outline:0}
.vo-field__error{color:var(--vo-color-error);font-size:var(--vo-font-sm)}
.vo-check{display:inline-flex;gap:var(--vo-space-2);align-items:center;min-height:var(--vo-control-height);cursor:pointer}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--vo-color-action);flex-shrink:0}
.vo-switch{display:flex;align-items:center;gap:var(--vo-space-3);min-height:var(--vo-touch-target)}
.vo-switch input{appearance:none;width:40px;height:24px;border-radius:var(--vo-radius-pill);background:var(--vo-color-muted);position:relative;border:1px solid var(--vo-color-control);cursor:pointer}
.vo-switch input:before{content:"";display:block;width:18px;height:18px;background:var(--vo-color-white);border-radius:50%;position:absolute;top:2px;left:2px}
.vo-switch input:checked{background:var(--vo-color-action);border-color:var(--vo-color-action)}
.vo-switch input:checked:before{left:18px}
.vo-dropzone{border:1px dashed var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-background);padding:var(--vo-space-6);display:flex;flex-direction:column;gap:var(--vo-space-2);align-items:center;text-align:center}
.vo-dropzone input{max-width:100%;font-size:var(--vo-font-sm)}
.vo-dropzone--over{background:var(--vo-color-info-soft);border:2px solid var(--vo-color-info)}
.vo-attachment{display:flex;align-items:center;gap:var(--vo-space-3);padding:var(--vo-space-3);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);overflow-wrap:anywhere}
.vo-badge{display:inline-flex;align-items:center;gap:var(--vo-space-1);font-size:var(--vo-font-xs);font-weight:var(--vo-font-medium);white-space:nowrap;border-radius:var(--vo-radius-pill);padding:var(--vo-space-1) var(--vo-space-2);background:var(--vo-color-neutral-soft);color:var(--vo-color-neutral)}
.vo-badge--success{background:var(--vo-color-success-soft);color:var(--vo-color-success)}
.vo-badge--warning{background:var(--vo-color-warning-soft);color:var(--vo-color-warning)}
.vo-badge--error{background:var(--vo-color-error-soft);color:var(--vo-color-error)}
.vo-badge--info{background:var(--vo-color-info-soft);color:var(--vo-color-info)}
.vo-badge--neutral{background:var(--vo-color-neutral-soft);color:var(--vo-color-neutral)}
.vo-alert{display:flex;align-items:flex-start;gap:var(--vo-space-3);padding:var(--vo-space-3) var(--vo-space-4);border-radius:var(--vo-radius-md);background:var(--vo-color-info-soft);color:var(--vo-color-info);border-left:3px solid currentColor;font-size:var(--vo-font-sm)}
.vo-alert--info{background:var(--vo-color-info-soft);color:var(--vo-color-info)}
.vo-alert--warning{background:var(--vo-color-warning-soft);color:var(--vo-color-warning)}
.vo-alert--error{background:var(--vo-color-error-soft);color:var(--vo-color-error)}
.vo-alert--success{background:var(--vo-color-success-soft);color:var(--vo-color-success)}
.vo-alert .vo-icon{margin-top:2px}
.vo-alert button{margin-left:auto}
.vo-filterbar{display:flex;align-items:end;gap:var(--vo-space-3);padding:var(--vo-space-4) var(--vo-space-5);border-bottom:1px solid var(--vo-color-border);flex-wrap:wrap}
.vo-filterbar .vo-field{flex:1;min-width:140px}
.vo-filterbar .vo-field:first-child{flex:2;min-width:180px}
.vo-chip{display:inline-flex;align-items:center;gap:var(--vo-space-2);padding:var(--vo-space-1) var(--vo-space-2);border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-pill);font-size:var(--vo-font-xs);background:var(--vo-color-surface)}
.vo-chip button{border:0;background:transparent;color:inherit;min-width:24px;min-height:24px;border-radius:50%}
.vo-table-wrap{width:100%;overflow:auto;max-height:536px;position:relative;isolation:isolate;overscroll-behavior-x:contain}
.vo-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--vo-font-sm);text-align:left}
.vo-table caption{text-align:left;padding:var(--vo-space-3) var(--vo-space-4);font-size:var(--vo-font-xs);color:var(--vo-color-muted)}
.vo-table th,.vo-table td{padding:var(--vo-space-3);border-bottom:1px solid var(--vo-color-border);height:var(--vo-table-row);white-space:nowrap;background:var(--vo-color-surface)}
.vo-table th{font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold);color:var(--vo-color-muted);background:var(--vo-color-background);position:sticky;top:0;z-index:2}
.vo-table tbody th{position:static}
.vo-table th button{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:var(--vo-space-2);padding:0;font-weight:inherit}
.vo-table tbody tr:hover td{background:var(--vo-color-background)}
.vo-table tbody tr[aria-selected="true"] td{background:var(--vo-color-action-soft)}
.vo-table tfoot td{font-weight:var(--vo-font-bold);background:var(--vo-color-background);position:sticky;bottom:0;z-index:2}
.vo-table--compact th,.vo-table--compact td{height:var(--vo-table-row-compact);padding:var(--vo-space-1) var(--vo-space-3)}
.vo-table--compact .vo-btn--small{min-height:var(--vo-space-6);width:var(--vo-space-6);padding:var(--vo-space-0)}
.vo-table--compact .vo-table__wraptext{white-space:nowrap!important}
.vo-table--compact .vo-table__wraptext small,.vo-table--compact .vo-table__wraptext br{display:none}
.vo-table--compact .vo-badge{padding-block:0;min-height:var(--vo-space-5)}
.vo-table__select{position:sticky;left:0;width:44px;min-width:44px;z-index:3}
.vo-table__code{position:sticky;left:44px;min-width:158px;z-index:3;border-right:1px solid var(--vo-color-border)}
.vo-table th.vo-table__select,.vo-table th.vo-table__code{z-index:5}
.vo-table__num{text-align:right;font-variant-numeric:tabular-nums}
.vo-table__detail td{white-space:normal;background:var(--vo-color-info-soft)!important}
.vo-table__link{border:0;background:transparent;color:var(--vo-color-action);text-decoration:underline;text-underline-offset:3px;padding:0;font-weight:var(--vo-font-medium)}
.vo-table__actions{display:flex;gap:var(--vo-space-1)}
.vo-table__wraptext{white-space:normal!important;min-width:220px}
.vo-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-3);padding:var(--vo-space-4) var(--vo-space-5);flex-wrap:wrap;font-size:var(--vo-font-sm)}
.vo-bulk{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-3);padding:var(--vo-space-3) var(--vo-space-5);background:var(--vo-color-info-soft);color:var(--vo-color-info);flex-wrap:wrap}
.vo-kpi{padding:var(--vo-space-5);background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg)}
.vo-kpi__value{display:block;font-size:var(--vo-font-3xl);font-weight:var(--vo-font-bold);letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:var(--vo-space-2) 0}
.vo-kpi__label{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-3);font-size:var(--vo-font-sm);color:var(--vo-color-muted)}
.vo-tabs{display:flex;border-bottom:1px solid var(--vo-color-border);gap:var(--vo-space-5);overflow:auto}
.vo-tab{min-height:var(--vo-touch-target);padding:var(--vo-space-3) var(--vo-space-1);border:0;border-bottom:3px solid transparent;white-space:nowrap;background:transparent;color:var(--vo-color-muted);font-weight:var(--vo-font-medium)}
.vo-tab[aria-selected="true"],.vo-tab[aria-pressed="true"]{color:var(--vo-color-action);border-bottom-color:var(--vo-color-action)}
.vo-timeline{list-style:none;padding:0;margin:0}
.vo-timeline li{position:relative;margin-left:var(--vo-space-4);padding:0 0 var(--vo-space-6) var(--vo-space-8);border-left:1px solid var(--vo-color-border)}
.vo-timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.vo-timeline__dot{position:absolute;left:-14px;top:0;background:var(--vo-color-success-soft);color:var(--vo-color-success);width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.vo-timeline__dot--pending{background:var(--vo-color-warning-soft);color:var(--vo-color-warning)}
.vo-timeline__signature{margin-top:var(--vo-space-2);padding:var(--vo-space-3);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-sm);font-size:var(--vo-font-xs);color:var(--vo-color-muted)}
.vo-steps{display:flex;gap:var(--vo-space-2);list-style:none;padding:0;margin:0;flex-wrap:wrap}
.vo-step{display:flex;align-items:center;gap:var(--vo-space-2);font-size:var(--vo-font-sm);color:var(--vo-color-muted)}
.vo-step span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--vo-color-control);background:var(--vo-color-surface)}
.vo-step[aria-current="step"]{color:var(--vo-color-action);font-weight:var(--vo-font-bold)}
.vo-step[aria-current="step"] span{background:var(--vo-color-action);color:var(--vo-color-white);border-color:var(--vo-color-action)}
.vo-empty{text-align:center;padding:var(--vo-space-10);display:flex;flex-direction:column;align-items:center;gap:var(--vo-space-3)}
.vo-empty>.vo-icon{font-size:var(--vo-font-3xl);color:var(--vo-color-muted)}
.vo-skeleton{height:20px;border-radius:var(--vo-radius-sm);background:linear-gradient(90deg,var(--vo-color-neutral-soft),var(--vo-color-border),var(--vo-color-neutral-soft));background-size:200% 100%;animation:vo-shimmer 1.7s ease infinite}
.vo-avatar{width:32px;height:32px;border-radius:50%;background:var(--vo-color-neutral-soft);color:var(--vo-color-text);display:inline-grid;place-items:center;font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold);flex-shrink:0}
.vo-dialog{width:min(580px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);padding:var(--vo-space-6);background:var(--vo-color-surface);color:var(--vo-color-text);box-shadow:var(--vo-shadow-lg)}
.vo-dialog::backdrop{background:var(--vo-color-overlay)}
.vo-dialog__head{display:flex;justify-content:space-between;gap:var(--vo-space-4);align-items:center;margin-bottom:var(--vo-space-5)}
.vo-dialog__footer{display:flex;justify-content:flex-end;gap:var(--vo-space-3);margin-top:var(--vo-space-6);flex-wrap:wrap}
.vo-search-dialog{width:min(720px,calc(100% - 32px));padding:0}
.vo-search-dialog .vo-dialog__head{padding:var(--vo-space-5);margin:0;border-bottom:1px solid var(--vo-color-border)}
.vo-search-results{max-height:52dvh;overflow:auto;padding:var(--vo-space-2)}
.vo-search-result{display:flex;align-items:center;gap:var(--vo-space-3);width:100%;text-align:left;padding:var(--vo-space-3);border:0;border-radius:var(--vo-radius-md);background:transparent;color:var(--vo-color-text)}
.vo-search-result:hover,.vo-search-result:focus{background:var(--vo-color-info-soft)}
.vo-search-result small{display:block;color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
.vo-toast-region{position:fixed;bottom:var(--vo-space-6);right:var(--vo-space-6);z-index:var(--vo-z-toast);max-width:min(420px,calc(100% - 32px));pointer-events:none}
.vo-toast{padding:var(--vo-space-4);border-radius:var(--vo-radius-md);box-shadow:var(--vo-shadow-md);background:var(--vo-color-ink);color:var(--vo-color-white);display:flex;align-items:center;gap:var(--vo-space-3);margin-top:var(--vo-space-2);pointer-events:auto}
.vo-toast button{border:0;color:var(--vo-color-white);background:transparent}
.vo-logo{display:block;width:150px;min-width:57px}
.vo-logo-box{padding:var(--vo-space-5) var(--vo-space-6);display:flex;align-items:center;justify-content:center;min-height:104px}
.vo-logo-box--light{background:var(--vo-color-white);border-radius:var(--vo-radius-md)}
.vo-isotype{width:30px;max-height:44px;object-fit:contain}
.vo-brand-lockup{display:flex;align-items:center;gap:var(--vo-space-3)}
.vo-code{font-family:Consolas,monospace;font-size:var(--vo-font-xs);background:var(--vo-color-background);color:var(--vo-color-text);border-radius:var(--vo-radius-sm);padding:var(--vo-space-1);overflow-wrap:anywhere}
.vo-swatch{height:52px;border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);margin-bottom:var(--vo-space-2)}
.vo-token-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--vo-space-4)}
.vo-statline{display:flex;justify-content:space-between;gap:var(--vo-space-4);padding:var(--vo-space-3) 0;border-bottom:1px solid var(--vo-color-border)}
.vo-module-card{display:flex;align-items:flex-start;gap:var(--vo-space-4);padding:var(--vo-space-5);background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);text-align:left;color:var(--vo-color-text)}
.vo-module-card>.vo-icon{padding:var(--vo-space-3);background:var(--vo-color-background);border-radius:var(--vo-radius-md);font-size:var(--vo-icon-lg)}
.vo-module-card:hover{border-color:var(--vo-color-control);box-shadow:var(--vo-shadow-sm)}
.vo-module-card p{font-size:var(--vo-font-xs);color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
.vo-chart{width:100%;height:auto;display:block}
.vo-chart__bar{fill:var(--vo-color-action)}
.vo-chart__bar--muted{fill:var(--vo-color-ink)}
.vo-chart__grid{stroke:var(--vo-color-border);stroke-width:1}
.vo-chart text{fill:var(--vo-color-muted);font:var(--vo-font-2xl) var(--vo-font-family)}
.vo-progress{height:12px;background:var(--vo-color-neutral-soft);border-radius:var(--vo-radius-pill);overflow:hidden}
.vo-progress__bar{height:100%;background:var(--vo-color-action)}
.vo-phone{width:360px;max-width:100%;margin:0 auto;background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);overflow:hidden;box-shadow:var(--vo-shadow-md)}
.vo-phone__header{padding:var(--vo-space-4);background:var(--vo-color-ink);color:var(--vo-color-white);display:flex;align-items:center;gap:var(--vo-space-3)}
.vo-phone__body{padding:var(--vo-space-4);display:flex;flex-direction:column;gap:var(--vo-space-5)}
.vo-phone .vo-btn,.vo-phone .vo-check,.vo-phone .vo-input{min-height:var(--vo-touch-target)}
.vo-phone .vo-input,.vo-phone .vo-field{font-size:var(--vo-font-lg)}
.vo-phone .vo-check{align-items:flex-start;padding:var(--vo-space-3);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);font-size:var(--vo-font-lg)}
.vo-phone .vo-check input{width:24px;height:24px}
.vo-signature{width:100%;height:144px;border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-md);touch-action:none;background:var(--vo-color-white)}
.vo-photo{max-height:180px;object-fit:contain;width:100%;background:var(--vo-color-background)}
/* 4. LAYOUT */
.vo-studio-bar{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:var(--vo-space-4);padding:var(--vo-space-3) var(--vo-space-5);background:var(--vo-color-surface);border-bottom:1px solid var(--vo-color-border)}
.vo-studio-title{font-size:var(--vo-font-sm);font-weight:var(--vo-font-bold)}
.vo-studio-title span{font-weight:var(--vo-font-regular);color:var(--vo-color-muted);display:block;font-size:var(--vo-font-xs)}
.vo-studio{display:grid;grid-template-columns:var(--vo-index-width) minmax(0,1fr);min-height:calc(100dvh - 68px)}
.vo-index{background:var(--vo-color-surface);border-right:1px solid var(--vo-color-border);padding:var(--vo-space-5) var(--vo-space-3)}
.vo-index__group{margin-bottom:var(--vo-space-6)}
.vo-index__title{padding:0 var(--vo-space-3);margin-bottom:var(--vo-space-2);font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold);text-transform:uppercase;letter-spacing:.7px;color:var(--vo-color-muted)}
.vo-index__link{display:flex;align-items:center;gap:var(--vo-space-2);width:100%;text-align:left;min-height:38px;padding:var(--vo-space-2) var(--vo-space-3);border:0;border-radius:var(--vo-radius-md);background:transparent;color:var(--vo-color-muted);font-size:var(--vo-font-sm)}
.vo-index__link:hover{background:var(--vo-color-background);color:var(--vo-color-text)}
.vo-index__link[aria-current="page"]{background:var(--vo-color-action-soft);color:var(--vo-color-action);font-weight:var(--vo-font-bold)}
.vo-index__number{font-size:var(--vo-font-xs);min-width:18px;color:inherit;opacity:.85}
.vo-index__note{border-top:1px solid var(--vo-color-border);padding:var(--vo-space-4) var(--vo-space-3);color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
.vo-workbench{min-width:0}
.vo-direction-note{padding:var(--vo-space-3) var(--vo-space-6);font-size:var(--vo-font-xs);color:var(--vo-color-muted);display:flex;align-items:center;gap:var(--vo-space-2);border-bottom:1px solid var(--vo-color-border);background:var(--vo-color-surface)}
.vo-direction-note strong{color:var(--vo-color-text)}
.vo-app{display:grid;grid-template-columns:var(--vo-sidebar-width) minmax(0,1fr);min-height:calc(100dvh - 110px)}
.vo-app--collapsed{grid-template-columns:var(--vo-sidebar-collapsed) minmax(0,1fr)}
.vo-sidebar{background:var(--vo-color-sidebar);color:var(--vo-color-sidebar-text);min-width:0;display:flex;flex-direction:column}
.vo-sidebar--open{display:flex;position:fixed;inset:0 auto 0 0;width:280px;max-width:calc(100% - 48px);z-index:calc(var(--vo-z-drawer) + 1);box-shadow:var(--vo-shadow-lg)}
.vo-sidebar--open .vo-sidebar__nav{max-height:calc(100dvh - 200px)}
[data-direction="a"] .vo-sidebar :focus-visible,.vo-login__visual :focus-visible,.vo-phone__header :focus-visible,[data-direction="b"] .vo-app-header :focus-visible{outline-color:var(--vo-color-white)}
.vo-sidebar__product{text-align:center;font-size:var(--vo-font-xs);letter-spacing:2px;color:var(--vo-color-sidebar-muted);padding-bottom:var(--vo-space-5)}
.vo-sidebar__nav{padding:0 var(--vo-space-3) var(--vo-space-5);overflow:auto;max-height:calc(100dvh - 220px);scrollbar-width:thin;flex:1}
.vo-nav-module{margin-bottom:var(--vo-space-1)}
.vo-nav-module>button{display:flex;align-items:center;gap:var(--vo-space-3);padding:var(--vo-space-3);width:100%;min-height:44px;border:0;background:transparent;text-align:left;color:var(--vo-color-sidebar-text);border-radius:var(--vo-radius-md);font-size:var(--vo-font-sm)}
.vo-nav-module>button:hover,.vo-nav-module>button[aria-expanded="true"]{background:var(--vo-color-sidebar-active)}
.vo-nav-module>button .vo-icon:last-child{margin-left:auto;font-size:var(--vo-font-xs)}
.vo-nav-group{padding-left:var(--vo-space-4);margin:var(--vo-space-1) 0}
.vo-nav-group>button{display:flex;align-items:center;gap:var(--vo-space-2);border:0;background:transparent;color:var(--vo-color-sidebar-muted);padding:var(--vo-space-2);width:100%;text-align:left;font-size:var(--vo-font-xs);min-height:32px}
.vo-nav-view{display:block;width:calc(100% - 12px);margin-left:var(--vo-space-3);padding:var(--vo-space-2) var(--vo-space-3);border:0;border-left:1px solid var(--vo-color-sidebar-muted);color:var(--vo-color-sidebar-muted);background:transparent;text-align:left;font-size:var(--vo-font-xs);min-height:32px}
.vo-nav-view:hover{color:var(--vo-color-sidebar-text);background:var(--vo-color-sidebar-active)}
.vo-nav-view[aria-current="page"]{color:var(--vo-color-sidebar-text);background:var(--vo-color-sidebar-active);border-left:3px solid var(--vo-color-brand);font-weight:var(--vo-font-bold)}
.vo-sidebar__foot{padding:var(--vo-space-4);border-top:1px solid var(--vo-color-sidebar-active);display:flex;align-items:center;gap:var(--vo-space-2);color:var(--vo-color-sidebar-muted);font-size:var(--vo-font-xs)}
.vo-app--collapsed .vo-logo,.vo-app--collapsed .vo-sidebar__product,.vo-app--collapsed .vo-nav-label,.vo-app--collapsed .vo-nav-children,.vo-app--collapsed .vo-sidebar__foot span{display:none}
.vo-app--collapsed .vo-logo-box{padding:var(--vo-space-5);min-height:104px}
.vo-app--collapsed .vo-nav-module>button{justify-content:center}
.vo-app--collapsed .vo-nav-module>button .vo-icon:last-child{display:none}
.vo-app--collapsed .vo-nav-module>button>.vo-icon:first-child{display:inline-flex;font-size:var(--vo-icon-md);margin:0}
.vo-app-main{min-width:0}
.vo-app-header{min-height:var(--vo-header-height);padding:var(--vo-space-3) var(--vo-space-6);display:flex;align-items:center;gap:var(--vo-space-3);background:var(--vo-color-header);color:var(--vo-color-header-text);border-bottom:1px solid var(--vo-color-border)}
.vo-app-header__search{display:flex;align-items:center;gap:var(--vo-space-2);border:0;background:transparent;color:inherit;min-height:40px;text-align:left;font-size:var(--vo-font-sm)}
.vo-app-header__spacer{flex:1}
.vo-app-header .vo-select{width:auto;max-width:190px;min-height:36px;font-size:var(--vo-font-xs)}
.vo-header-icon{border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}
.vo-user-wrap{position:relative}
.vo-user-menu{position:absolute;top:48px;right:0;min-width:240px;z-index:var(--vo-z-header);padding:var(--vo-space-4);background:var(--vo-color-surface);color:var(--vo-color-text);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);box-shadow:var(--vo-shadow-md)}
.vo-content{padding:var(--vo-space-6);max-width:var(--vo-content-max);margin:0 auto;min-width:0}
.vo-breadcrumb{display:flex;gap:var(--vo-space-2);align-items:center;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 var(--vo-space-5);font-size:var(--vo-font-xs);color:var(--vo-color-muted)}
.vo-breadcrumb li{display:flex;gap:var(--vo-space-2);align-items:center}
.vo-breadcrumb li+li:before{content:"/";color:var(--vo-color-control)}
.vo-breadcrumb button{padding:0;border:0;background:transparent;color:var(--vo-color-muted)}
.vo-page-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-4);margin-bottom:var(--vo-space-6)}
.vo-page-heading p{margin-top:var(--vo-space-2);color:var(--vo-color-muted);font-size:var(--vo-font-sm)}
.vo-page-heading__actions{display:flex;align-items:center;gap:var(--vo-space-2);flex-wrap:wrap}
.vo-guide{padding:var(--vo-space-8);max-width:1600px;margin:0 auto}
.vo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--vo-space-5)}
.vo-grid>*{min-width:0}
.vo-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vo-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vo-grid--detail{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}
.vo-stack{display:flex;flex-direction:column;gap:var(--vo-space-5);min-width:0}
.vo-row{display:flex;align-items:center;gap:var(--vo-space-3);flex-wrap:wrap}
.vo-actionbar{position:sticky;bottom:0;z-index:var(--vo-z-sticky);display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-3);padding:var(--vo-space-4) var(--vo-space-6);background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);box-shadow:var(--vo-shadow-md);flex-wrap:wrap}
.vo-login{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1fr);min-height:720px;background:var(--vo-color-surface)}
.vo-login__visual{background:var(--vo-color-ink);color:var(--vo-color-white);padding:var(--vo-space-12);display:flex;flex-direction:column;justify-content:space-between;gap:var(--vo-space-8);overflow:hidden}
.vo-login__visual .vo-logo{width:190px}
.vo-login__visual h2{font-size:40px;letter-spacing:-1.3px;line-height:1.1;max-width:390px}
.vo-login__visual p{color:var(--vo-color-silver);max-width:380px}
.vo-login__visual .vo-eyebrow{color:var(--vo-color-silver)}
.vo-login__graphic{width:100%;min-height:140px;max-height:220px}
.vo-login__form{display:flex;flex-direction:column;justify-content:center;padding:var(--vo-space-12);max-width:540px;width:100%;margin:auto}
.vo-login__divider{display:flex;align-items:center;gap:var(--vo-space-3);color:var(--vo-color-muted);font-size:var(--vo-font-xs);margin:var(--vo-space-6) 0}
.vo-login__divider:before,.vo-login__divider:after{content:"";height:1px;background:var(--vo-color-border);flex:1}
.vo-menu-demos{display:grid;grid-template-columns:1fr 100px 1fr;gap:var(--vo-space-5)}
.vo-mini-menu{background:var(--vo-color-sidebar);color:var(--vo-color-sidebar-text);border-radius:var(--vo-radius-lg);padding:var(--vo-space-5);min-height:280px}
.vo-menu-demo-view{display:block;padding:var(--vo-space-3);color:inherit;text-decoration:none;background:var(--vo-color-sidebar-active);border:0;width:100%;text-align:left;margin-top:var(--vo-space-1);border-radius:var(--vo-radius-sm)}
.vo-drawer-backdrop{position:fixed;inset:0;background:var(--vo-color-overlay);z-index:var(--vo-z-drawer);border:0}
[data-direction="b"]{
  --vo-color-background:#F7F7F4;
  --vo-color-sidebar:#FFFFFF;
  --vo-color-sidebar-text:#231F20;
  --vo-color-sidebar-muted:#60616D;
  --vo-color-sidebar-active:#EEEFF2;
  --vo-color-header:#231F20;
  --vo-color-header-text:#FFFFFF;
  --vo-radius-md:3px;
  --vo-radius-lg:3px;
  --vo-shadow-sm:none;
}
[data-direction="b"] .vo-sidebar{border-right:1px solid var(--vo-color-border)}
[data-direction="b"] .vo-app-header{border-top:4px solid var(--vo-color-brand)}
[data-direction="b"] .vo-kpi{border-top:3px solid var(--vo-color-ink)}
[data-direction="b"] .vo-nav-view[aria-current="page"]{color:var(--vo-color-action)}
[data-direction="c"]{
  --vo-color-background:#F5F6F8;
  --vo-color-header:#FFFFFF;
  --vo-color-header-text:#231F20;
  --vo-radius-md:8px;
  --vo-radius-lg:12px;
  --vo-shadow-sm:0 2px 6px rgb(35 31 32 / 4%);
  --vo-header-height:72px;
}
/* 5. UTILIDADES */
.vo-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vo-skip{position:fixed;top:var(--vo-space-2);left:var(--vo-space-2);z-index:100;transform:translateY(-150%);padding:var(--vo-space-3);background:var(--vo-color-white);color:var(--vo-color-action)}
.vo-skip:focus{transform:translateY(0)}
.vo-num{font-variant-numeric:tabular-nums;text-align:right}
.vo-full{width:100%}
.vo-mt{margin-top:var(--vo-space-5)}
.vo-mb{margin-bottom:var(--vo-space-5)}
.vo-flex-1{flex:1;min-width:0}
.vo-nowrap{white-space:nowrap}
progress{accent-color:var(--vo-color-action);height:var(--vo-space-4)}
#form-lines td:first-child{min-width:280px}
#form-lines td:nth-child(2),#form-lines td:nth-child(3){min-width:120px}
.vo-text-error{color:var(--vo-color-error)}
.vo-text-success{color:var(--vo-color-success)}
.vo-mobile-only{display:none}
.vo-print-only{display:none}
@keyframes vo-spin{to{transform:rotate(360deg)}}
@keyframes vo-shimmer{to{background-position:-200% 0}}
@media(min-width:1700px){.vo-content{padding:var(--vo-space-8)}}
@media(max-width:1200px){
  :root{--vo-index-width:180px;--vo-sidebar-width:208px}
  .vo-app-header{padding:var(--vo-space-3) var(--vo-space-4)}
  .vo-app-header__search span,.vo-app-header__search kbd{display:none}
  .vo-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vo-grid--detail{grid-template-columns:1fr}
  .vo-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vo-login__visual{padding:var(--vo-space-8)}
  .vo-login__form{padding:var(--vo-space-8)}
}
@media(max-width:1023px){
  .vo-studio{grid-template-columns:1fr}
  .vo-index{display:none}
  .vo-index--open{display:block;position:fixed;inset:0 auto 0 0;width:260px;overflow:auto;z-index:calc(var(--vo-z-drawer) + 1);box-shadow:var(--vo-shadow-lg)}
  .vo-index-toggle{display:inline-flex!important}
  .vo-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vo-login{grid-template-columns:1fr 1fr}
  .vo-login__visual h2{font-size:var(--vo-font-3xl)}
}
@media(max-width:900px){
  .vo-app,.vo-app--collapsed{grid-template-columns:1fr}
  .vo-sidebar{display:none}
  .vo-sidebar--open{display:flex;position:fixed;inset:0 auto 0 0;width:280px;max-width:calc(100% - 48px);z-index:calc(var(--vo-z-drawer) + 1);box-shadow:var(--vo-shadow-lg)}
  .vo-sidebar--open .vo-sidebar__nav{max-height:calc(100dvh - 200px)}
  .vo-sidebar--open .vo-mobile-only{display:inline-flex}
  .vo-app--collapsed .vo-sidebar--open .vo-logo,.vo-app--collapsed .vo-sidebar--open .vo-nav-label,.vo-app--collapsed .vo-sidebar--open .vo-nav-children{display:block}
  .vo-app--collapsed .vo-sidebar--open .vo-nav-module>button{justify-content:flex-start}
  .vo-grid--detail{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .vo-studio-bar{flex-wrap:wrap;gap:var(--vo-space-2);padding:var(--vo-space-3)}
  .vo-studio-bar>.vo-segment{width:100%}
  .vo-studio-bar>.vo-segment .vo-btn{flex:1}
  .vo-studio-title{font-size:var(--vo-font-xs)}
  .vo-direction-note{padding:var(--vo-space-3);align-items:flex-start}
  .vo-app-header{display:grid;grid-template-columns:44px 44px minmax(0,1fr) 48px 44px;gap:var(--vo-space-1);padding:var(--vo-space-2) var(--vo-space-3)}
  .vo-app-header__spacer{display:none}
  .vo-app-header .vo-select{width:100%;min-width:0;max-width:none;min-height:44px;padding:var(--vo-space-1)}
  .vo-header-icon{width:44px;height:44px}
  .vo-app-header__search{min-height:44px}
  .vo-content,.vo-guide{padding:var(--vo-space-4)}
  .vo-page-heading{align-items:flex-start;flex-direction:column;margin-bottom:var(--vo-space-5)}
  .vo-page-heading__actions{width:100%}
  .vo-page-heading__actions .vo-btn--primary{margin-left:auto}
  .vo-grid,.vo-grid--3,.vo-grid--4,.vo-grid--detail{grid-template-columns:minmax(0,1fr)}
  .vo-panel{padding:var(--vo-space-4)}
  .vo-panel--flush{padding:0}
  .vo-panel__head{flex-wrap:wrap}
  .vo-kpi{padding:var(--vo-space-4)}
  .vo-kpi__value{font-size:var(--vo-font-2xl)}
  .vo-filterbar{padding:var(--vo-space-4)}
  .vo-filterbar .vo-field{min-width:100%;flex:1}
  .vo-actionbar{padding:var(--vo-space-3);gap:var(--vo-space-2)}
  .vo-actionbar>.vo-row{width:100%;justify-content:flex-end}
  .vo-actionbar small{font-size:var(--vo-font-xs)}
  .vo-btn{min-height:44px}
  .vo-btn--small{min-height:44px}
  .vo-table--compact .vo-btn--small{min-height:44px;width:44px}
  .vo-check{min-height:44px}
  .vo-input,.vo-select{min-height:44px}
  .vo-table__select{width:40px;min-width:40px}
  .vo-table__code{left:40px;min-width:132px}
  .vo-table th,.vo-table td{padding:var(--vo-space-2)}
  .vo-login{grid-template-columns:1fr;min-height:auto}
  .vo-login__visual{padding:var(--vo-space-6);gap:var(--vo-space-6)}
  .vo-login__visual h2{font-size:var(--vo-font-2xl)}
  .vo-login__graphic{display:none}
  .vo-login__form{padding:var(--vo-space-6)}
  .vo-menu-demos{grid-template-columns:1fr}
  .vo-menu-demos .vo-mini-menu{min-height:0}
  .vo-breadcrumb{font-size:var(--vo-font-xs)}
  .vo-phone{border-radius:var(--vo-radius-md);box-shadow:none}
  .vo-mobile-only{display:inline-flex}
  .vo-desktop-only{display:none!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
  .vo-studio-bar,.vo-index,.vo-sidebar,.vo-app-header,.vo-direction-note,.vo-page-heading__actions,.vo-actionbar,.vo-filterbar,.vo-pagination,.vo-toast-region{display:none!important}
  .vo-studio,.vo-app{display:block}
  .vo-content{padding:0}
  .vo-table-wrap{max-height:none;overflow:visible}
  .vo-print-only{display:block}
  .vo-panel{box-shadow:none;break-inside:avoid}
}
/* 6. ARQUITECTURAS ALTERNATIVAS. El índice pertenece al muestrario. */
.vo-studio{grid-template-columns:minmax(0,1fr)}
.vo-index{display:none}
.vo-index--open{display:block;position:fixed;inset:0 auto 0 0;width:280px;max-width:calc(100% - 32px);overflow:auto;z-index:calc(var(--vo-z-drawer) + 1);box-shadow:var(--vo-shadow-lg)}
.vo-preview-nav{display:flex;gap:var(--vo-space-1);padding:var(--vo-space-2) var(--vo-space-5);overflow-x:auto;background:var(--vo-color-surface);border-bottom:1px solid var(--vo-color-border)}
.vo-preview-nav :is(button,a){min-height:40px;white-space:nowrap;padding:var(--vo-space-2) var(--vo-space-3);background:transparent;color:var(--vo-color-muted);border:0;border-radius:var(--vo-radius-sm);font-size:var(--vo-font-xs)}
.vo-preview-nav :is(button,a)[aria-current="page"]{background:var(--vo-color-action-soft);color:var(--vo-color-action);font-weight:700}
.vo-app--launcher,.vo-app--workspace{display:block}
.vo-topbar{display:flex;align-items:stretch;min-width:0;background:var(--vo-color-header);color:var(--vo-color-header-text);border-bottom:1px solid var(--vo-color-border)}
.vo-topbar>.vo-app-header{flex:1;min-width:0;border:0}
.vo-top-brand{display:flex;align-items:center;gap:var(--vo-space-4);padding:20px 24px;border:0;background:transparent;color:inherit;flex-shrink:0}
.vo-top-brand img{display:block;width:110px}
.vo-top-brand span{font-size:var(--vo-font-xs);letter-spacing:2px;border-left:1px solid var(--vo-color-control);padding-left:var(--vo-space-4)}
.vo-context-nav,.vo-work-nav{display:flex;align-items:center;gap:var(--vo-space-3);padding:var(--vo-space-3) var(--vo-space-6);background:var(--vo-color-surface);border-bottom:1px solid var(--vo-color-border);min-width:0}
.vo-context-title{display:flex;align-items:center;gap:var(--vo-space-2);border:0;background:transparent;color:var(--vo-color-text);font-weight:700;min-height:44px;max-width:300px;text-align:left}
.vo-context-nav .vo-select{width:auto;max-width:270px;min-width:0}
.vo-work-nav{gap:var(--vo-space-6);padding-block:0}
.vo-work-nav :is(button,a){display:flex;align-items:center;gap:var(--vo-space-2);min-height:52px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--vo-color-muted);font-weight:600;white-space:nowrap}
.vo-work-nav :is(button,a)[aria-current="page"]{border-bottom-color:var(--vo-color-action);color:var(--vo-color-action)}
.vo-work-nav :is(button,a):last-child{margin-left:auto}
.vo-bottom-nav{display:none}
.vo-launcher-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-6);padding:var(--vo-space-8) 0;border-bottom:2px solid var(--vo-color-ink)}
.vo-launcher-intro h1{font-size:36px;margin:var(--vo-space-4) 0}
.vo-launcher-intro p{color:var(--vo-color-muted)}
.vo-launcher-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--vo-space-4)}
.vo-app-tile{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:var(--vo-space-3);padding:var(--vo-space-6);min-height:176px;border:1px solid var(--vo-color-control);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left;border-radius:var(--vo-radius-lg)}
.vo-app-tile:hover{border-color:var(--vo-color-action);background:var(--vo-color-action-soft)}
.vo-app-tile strong{font-size:var(--vo-font-lg)}
.vo-app-tile small{color:var(--vo-color-muted)}
.vo-app-tile__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--vo-color-neutral-soft);border-radius:var(--vo-radius-md)}
.vo-app-tile__icon .vo-icon{font-size:22px}
.vo-app-tile__arrow{position:absolute;top:24px;right:24px;color:var(--vo-color-muted)}
.vo-workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--vo-space-6);padding:var(--vo-space-4) 0 var(--vo-space-3)}
.vo-workspace-heading h1{font-size:32px;margin:var(--vo-space-3) 0}
.vo-workspace-heading .vo-field{min-width:220px}
.vo-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--vo-space-6)}
.vo-priority-card{display:flex;align-items:flex-start;flex-direction:column;gap:var(--vo-space-4);background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-left:4px solid var(--vo-color-action);border-radius:var(--vo-radius-lg);padding:var(--vo-space-8)}
.vo-priority-card>.vo-row{width:100%;justify-content:space-between}
.vo-priority-card h2{font-size:28px}
.vo-priority-card p{color:var(--vo-color-muted)}
.vo-task-row{display:flex;align-items:center;gap:var(--vo-space-4);width:100%;padding:var(--vo-space-5);border:0;border-top:1px solid var(--vo-color-border);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left}
.vo-task-row:hover{background:var(--vo-color-background)}
.vo-task-row>span:nth-child(2){flex:1;min-width:0}
.vo-task-row small{display:block;color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
.vo-task-icon{display:grid;place-items:center;width:40px;min-width:40px;height:40px;background:var(--vo-color-neutral-soft);border-radius:var(--vo-radius-md);color:var(--vo-color-muted)}
.vo-task-row__end{display:flex;align-items:flex-end;flex-direction:column;gap:var(--vo-space-2);font-variant-numeric:tabular-nums}
.vo-module-dialog{width:min(1100px,calc(100% - 32px));max-width:none;max-height:90dvh}
.vo-catalog-columns{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:var(--vo-space-5);margin-top:var(--vo-space-6)}
.vo-catalog-columns>section{min-width:0}
.vo-catalog-columns h3{font-size:var(--vo-font-xs);text-transform:uppercase;color:var(--vo-color-muted);margin-bottom:var(--vo-space-3)}
.vo-catalog-item{display:flex;align-items:center;gap:var(--vo-space-2);width:100%;min-height:44px;padding:var(--vo-space-3);border:0;border-bottom:1px solid var(--vo-color-border);background:transparent;color:var(--vo-color-text);text-align:left}
.vo-catalog-item:hover{background:var(--vo-color-background)}
.vo-catalog-item[aria-pressed="true"]{background:var(--vo-color-action-soft);color:var(--vo-color-action);font-weight:700;border-left:3px solid var(--vo-color-action)}
[data-direction="b"] .vo-topbar{border-top:4px solid var(--vo-color-brand)}
[data-direction="b"] .vo-topbar :focus-visible{outline-color:var(--vo-color-white)}
[data-direction="b"] .vo-topbar .vo-user-menu :focus-visible{outline-color:var(--vo-color-focus)}
[data-direction="b"] .vo-login{grid-template-columns:minmax(360px,1fr) minmax(280px,1fr)}
[data-direction="b"] .vo-login__form{grid-column:1;grid-row:1}
[data-direction="b"] .vo-login__visual{grid-column:2}
[data-direction="c"] .vo-login{max-width:1000px;margin:var(--vo-space-8) auto;border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);overflow:hidden;min-height:620px}
[data-direction="c"] .vo-login__graphic{display:none}
[data-direction="c"] .vo-table thead th{background:var(--vo-color-neutral-soft)}
@media(min-width:1600px){.vo-app--workspace .vo-content{max-width:1480px}}
@media(max-width:1100px){.vo-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vo-workspace-grid{grid-template-columns:minmax(0,1fr) 280px}.vo-context-nav{flex-wrap:wrap}.vo-top-brand{padding:20px 16px}.vo-top-brand span{display:none}}
@media(max-width:800px){.vo-workspace-grid{grid-template-columns:minmax(0,1fr)}.vo-workspace-heading{flex-wrap:wrap}.vo-workspace-heading .vo-field{width:100%}.vo-launcher-intro{align-items:flex-start;flex-direction:column}.vo-launcher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vo-work-nav{gap:var(--vo-space-4);overflow-x:auto}.vo-topbar{flex-wrap:wrap}.vo-top-brand{width:100%;justify-content:flex-start;padding:16px 24px}.vo-topbar>.vo-app-header{width:100%}.vo-catalog-columns{grid-template-columns:minmax(0,1fr)}.vo-catalog-columns>section:first-child{max-height:240px;overflow:auto}.vo-catalog-columns>section:nth-child(2){max-height:200px;overflow:auto}}
@media(max-width:600px){.vo-preview-nav{padding-inline:var(--vo-space-3)}.vo-preview-nav :is(button,a){min-height:44px}.vo-direction-note{padding:var(--vo-space-3);align-items:flex-start}.vo-studio-bar>.vo-segment .vo-btn{min-height:44px;padding:8px 4px}.vo-studio-bar .vo-row>.vo-btn{min-height:44px}.vo-top-brand{justify-content:space-between}.vo-top-brand span{display:block}.vo-context-nav{padding:var(--vo-space-3);gap:var(--vo-space-2)}.vo-context-title{max-width:100%;flex:1}.vo-context-nav .vo-select{width:100%;max-width:none;min-height:44px}.vo-context-nav>.vo-btn{min-height:44px}.vo-work-nav{display:none}.vo-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:var(--vo-z-header);padding:4px 4px max(4px,env(safe-area-inset-bottom));background:var(--vo-color-surface);border-top:1px solid var(--vo-color-control);box-shadow:var(--vo-shadow-md)}.vo-bottom-nav :is(button,a){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;border:0;border-radius:var(--vo-radius-md);color:var(--vo-color-muted);background:transparent;font-size:var(--vo-font-xs)}.vo-bottom-nav :is(button,a)[aria-current="page"]{background:var(--vo-color-action-soft);color:var(--vo-color-action);font-weight:700}.vo-app--workspace{padding-bottom:76px}.vo-app--workspace .vo-actionbar{bottom:68px}.vo-launcher-grid{gap:var(--vo-space-3)}.vo-app-tile{min-height:170px;padding:var(--vo-space-4)}.vo-app-tile strong{font-size:var(--vo-font-sm)}.vo-app-tile__arrow{top:16px;right:16px}.vo-launcher-intro{padding-block:var(--vo-space-4)}.vo-launcher-intro h1,.vo-workspace-heading h1{font-size:28px}.vo-priority-card{padding:var(--vo-space-5)}.vo-priority-card h2{font-size:24px}.vo-task-row{flex-wrap:wrap;padding:var(--vo-space-4);gap:var(--vo-space-3)}.vo-task-row__end{width:100%;align-items:flex-start;margin-left:52px}.vo-task-row>.vo-icon:last-child{display:none}.vo-module-dialog{width:calc(100% - 16px);max-height:94dvh;padding:var(--vo-space-4)}.vo-catalog-item{min-height:48px}.vo-catalog-columns{gap:var(--vo-space-6)}[data-direction="b"] .vo-login,[data-direction="c"] .vo-login{display:flex;flex-direction:column;margin:0;border-radius:0}[data-direction="b"] .vo-login__visual{order:0}[data-direction="b"] .vo-login__form{order:1}}
@media print{.vo-preview-nav,.vo-topbar,.vo-context-nav,.vo-work-nav,.vo-bottom-nav{display:none!important}}

.vo-top-brand,.vo-work-nav a,.vo-bottom-nav a,.vo-catalog-item{text-decoration:none}
[data-direction="c"] :focus{scroll-margin-bottom:90px}
.vo-studio-bar{flex-wrap:wrap}
.vo-access-switch{display:flex;flex-direction:column;gap:var(--vo-space-1);font-size:var(--vo-font-xs);color:var(--vo-color-muted)}
.vo-access-switch .vo-select{min-height:36px;font-size:var(--vo-font-xs);max-width:260px}
.vo-access-context{display:flex;align-items:center;gap:var(--vo-space-2);flex-wrap:wrap;font-size:var(--vo-font-xs);padding:var(--vo-space-3) var(--vo-space-4);border:1px solid var(--vo-color-border);background:var(--vo-color-surface);color:var(--vo-color-muted);border-radius:var(--vo-radius-md)}
.vo-access-context strong{color:var(--vo-color-text)}
.vo-access-context small{margin-left:auto}
.vo-country-access{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vo-space-3)}
.vo-country-access button{display:flex;flex-direction:column;gap:var(--vo-space-2);padding:var(--vo-space-4);border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text);min-height:64px}
.vo-country-access button[aria-pressed="true"]{background:var(--vo-color-action-soft);border-color:var(--vo-color-action);color:var(--vo-color-action)}
.vo-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--vo-space-3)}
.vo-area-card{display:flex;align-items:center;gap:var(--vo-space-4);padding:var(--vo-space-5);min-height:96px;border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left}
.vo-area-card>.vo-icon:first-child{font-size:24px}
.vo-area-card>span{flex:1;min-width:0}
.vo-area-card strong,.vo-area-card small{display:block}
.vo-area-card small{color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
.vo-area-card[aria-pressed="true"]{border-color:var(--vo-color-action);box-shadow:inset 0 -3px 0 var(--vo-color-action);background:var(--vo-color-action-soft);color:var(--vo-color-action)}
.vo-area-card:hover{border-color:var(--vo-color-action)}
.vo-area-modules{display:flex;flex-direction:column}
.vo-area-module{display:flex;align-items:center;gap:var(--vo-space-4);padding:var(--vo-space-4);min-height:76px;border:0;border-top:1px solid var(--vo-color-border);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left}
.vo-area-module:hover{background:var(--vo-color-background)}
.vo-area-module>span:nth-child(2){flex:1;min-width:0}
.vo-area-module>span:last-child{display:flex;align-items:center;gap:var(--vo-space-2);color:var(--vo-color-action);font-size:var(--vo-font-xs)}
.vo-area-module small{display:block;color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
@media(max-width:1100px){.vo-area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.vo-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vo-area-card{padding:var(--vo-space-4);gap:var(--vo-space-3)}}
@media(max-width:600px){.vo-access-switch{width:100%}.vo-access-switch .vo-select{max-width:none;min-height:44px}.vo-access-context small{margin-left:0}.vo-area-card{flex-wrap:wrap;gap:var(--vo-space-2)}.vo-area-card>.vo-icon:last-child{display:none}.vo-area-card strong{font-size:var(--vo-font-sm)}.vo-area-module{padding-inline:0;gap:var(--vo-space-3)}.vo-area-module>span:last-child{font-size:0}.vo-country-access{gap:var(--vo-space-2)}.vo-country-access button{padding:var(--vo-space-3)}}


/* Propuesta nueva: login a pantalla completa (requiere revisión de diseño) */
.vo-login--pagina{min-height:100vh;min-height:100dvh}
.vo-login--pagina .vo-login__graphic{max-height:420px}
.vo-login__video{display:block;height:auto;object-fit:contain;object-position:left bottom}
.vo-login--pagina .vo-login__visual .vo-logo-box{justify-content:flex-start;padding-inline:0}
.vo-login__top{display:flex;align-items:center;justify-content:space-between;gap:var(--vo-space-4);margin-bottom:var(--vo-space-6)}
.vo-login__top .vo-logo{width:150px}
.vo-login__idioma{width:auto;max-width:130px;min-height:32px;padding:var(--vo-space-1) var(--vo-space-2);font-size:var(--vo-font-xs)}
.vo-login__sso{width:100%;justify-content:center}
.vo-login__paises{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vo-space-2) var(--vo-space-5);margin:0;padding:0;list-style:none;color:var(--vo-color-silver);font-size:var(--vo-font-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.vo-login__paises li{display:flex;align-items:center;gap:var(--vo-space-2)}
.vo-login__bandera{width:24px;height:16px;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb, var(--vo-color-white) 25%, transparent)}
.vo-login__ayuda{padding-inline:0;align-self:flex-start}

/* Menú y cáscara B (S/4 Factor). Extensiones literales del bloque vo-menu-maqueta de
   docs/diseno/pantallas/menu-aprobado.html, sin las reglas de la franja de revisión de la maqueta.
   Cambios: rgb(255 255 255 / N%) se expresa con el token --vo-color-white (mismo color); pestañas, píldoras,
   migas y mosaicos aceptan a o button con el mismo aspecto, porque llevan a una URL. */
.vo-context-switch{cursor:default;display:flex;align-items:center;gap:var(--vo-space-2);min-height:40px;max-width:290px;padding:var(--vo-space-1) var(--vo-space-3);border:1px solid color-mix(in srgb, var(--vo-color-white) 35%, transparent);border-radius:var(--vo-radius-md);background:transparent;color:inherit;text-align:left}
.vo-context-switch>span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.vo-context-switch strong{font-size:var(--vo-font-sm)}
.vo-context-switch small{font-size:var(--vo-font-xs);color:var(--vo-color-silver);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-flag{width:24px;height:16px;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px color-mix(in srgb, var(--vo-color-white) 30%, transparent)}
.vo-user-menu{display:flex;flex-direction:column;gap:var(--vo-space-3);min-width:280px}
.vo-user-menu .vo-btn{justify-content:flex-start}
.vo-user-ctx{display:flex;align-items:center;gap:var(--vo-space-2);padding:var(--vo-space-3) 0;border-block:1px solid var(--vo-color-border);font-size:var(--vo-font-sm)}
.vo-user-ctx .vo-flag{box-shadow:0 0 0 1px var(--vo-color-border)}
.vo-breadcrumb li :is(a,button){color:var(--vo-color-muted);font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.vo-breadcrumb li:first-child :is(a,button){text-decoration:none}
.vo-catalog-item[aria-current="page"]{font-weight:700;color:var(--vo-color-action)}
.vo-search-result>span{flex:1;min-width:0}
.vo-search-result{text-decoration:none}
/* Hallazgos de la revisión del menú (2026-10-22) */
.vo-search-dialog{margin-top:8dvh}
div.vo-context-switch{border-color:transparent}
button.vo-context-switch{cursor:pointer;font:inherit}
button.vo-context-switch:hover{border-color:color-mix(in srgb, var(--vo-color-white) 70%, transparent)}
[data-direction="b"] .vo-topbar .vo-top-brand:focus-visible{outline-offset:-4px}
.vo-space-nav :is(a,button):focus-visible{outline-offset:-4px}
.vo-search-result[aria-selected="true"]{background:var(--vo-color-info-soft);outline:2px solid var(--vo-color-focus);outline-offset:-2px}
@media(max-width:800px){.vo-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .vo-app-header__search span,.vo-app-header__search kbd{display:none}
 .vo-app-header__search{justify-content:center;width:44px}
 .vo-context-switch{max-width:none;width:100%;min-height:44px;padding-inline:var(--vo-space-2)}
 .vo-context-switch small,.vo-context-switch>.vo-icon{display:none}
 .vo-context-switch strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .vo-area-grid{grid-template-columns:minmax(0,1fr)}
 .vo-area-card{min-height:64px;padding:var(--vo-space-4)}
 .vo-user-menu{position:fixed;top:auto;left:8px;right:8px;min-width:0}
}
.vo-top-brand img:first-child{width:auto;height:30px}
.vo-top-brand__product{height:27px;width:auto;padding-left:var(--vo-space-4);border-left:1px solid var(--vo-color-control)}
@media(max-width:1100px){.vo-top-brand__product{display:none}}
@media(max-width:600px){.vo-top-brand__product{display:block;padding-left:0;border-left:0;height:26px}
 .vo-top-brand img:first-child{height:26px}}
.vo-app-header__search kbd{opacity:0;transition:opacity var(--vo-duration-fast) var(--vo-easing)}
.vo-app-header__search:hover kbd,.vo-app-header__search:focus-visible kbd{opacity:1}
.vo-app-tile{flex-direction:row;align-items:center;gap:var(--vo-space-3);min-height:64px;padding:var(--vo-space-3) var(--vo-space-4)}
.vo-app-tile>span:first-child{width:36px;height:36px;flex-shrink:0}
.vo-app-tile>span:first-child .vo-icon{font-size:20px}
.vo-app-tile strong{font-size:var(--vo-font-md);display:block}
.vo-app-tile small{font-size:var(--vo-font-xs)}
.vo-app-tile>.vo-icon:last-child{display:none}
.vo-catalog-item>span>small{display:block;font-size:var(--vo-font-xs);color:var(--vo-color-muted);font-weight:400}
.vo-catalog-columns>section:first-child{max-height:60dvh;overflow:auto}
@media(max-width:600px){.vo-app-header{grid-template-columns:44px minmax(0,1fr) 48px 44px}}
.vo-context-nav[hidden]{display:none}
.vo-context-nav .vo-context-title{cursor:default}
.vo-breadcrumb li:first-child :is(a,button){text-decoration:none;display:flex;gap:var(--vo-space-1);align-items:center}
.vo-space-nav{display:flex;align-items:stretch;gap:var(--vo-space-1);padding:0 var(--vo-space-6);background:var(--vo-color-surface);border-bottom:1px solid var(--vo-color-border);overflow-x:auto}
.vo-space-nav[hidden]{display:none}
.vo-space-nav :is(a,button){display:flex;text-decoration:none;align-items:center;gap:var(--vo-space-2);min-height:48px;padding:0 var(--vo-space-4);border:0;border-bottom:3px solid transparent;background:transparent;color:var(--vo-color-muted);font-weight:600;white-space:nowrap}
.vo-space-nav :is(a,button):hover{color:var(--vo-color-text)}
.vo-space-nav :is(a,button)[aria-current="page"]{color:var(--vo-color-action);border-bottom-color:var(--vo-color-action)}
.vo-page-nav{display:flex;flex-wrap:wrap;gap:var(--vo-space-2);margin-bottom:var(--vo-space-5)}
.vo-page-nav :is(a,button){display:flex;text-decoration:none;align-items:center;gap:var(--vo-space-2);min-height:36px;padding:0 var(--vo-space-3);border:1px solid var(--vo-color-control);border-radius:var(--vo-radius-pill);background:var(--vo-color-surface);color:var(--vo-color-text);font-size:var(--vo-font-sm)}
.vo-page-nav :is(a,button)[aria-current="page"]{background:var(--vo-color-ink);border-color:var(--vo-color-ink);color:var(--vo-color-white)}
.vo-page-h2{display:flex;align-items:center;gap:var(--vo-space-2);font-size:var(--vo-font-xl)}
.vo-page-heading{margin-bottom:var(--vo-space-4)}
.vo-section{margin-bottom:var(--vo-space-6)}
.vo-section h3{font-size:var(--vo-font-sm);color:var(--vo-color-muted);font-weight:600;margin-bottom:var(--vo-space-3);padding-bottom:var(--vo-space-2);border-bottom:1px solid var(--vo-color-border)}
.vo-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--vo-space-3)}
.vo-tile{position:relative;display:flex;text-decoration:none;flex-direction:column;justify-content:space-between;gap:var(--vo-space-2);min-height:84px;padding:var(--vo-space-3) var(--vo-space-4);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left}
.vo-tile:hover{border-color:var(--vo-color-action);background:var(--vo-color-action-soft)}
.vo-tile>span{font-weight:700}
.vo-tile>small{font-size:var(--vo-font-xs);color:var(--vo-color-muted)}
.vo-tile__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--vo-radius-md);background:var(--vo-color-action-soft);color:var(--vo-color-action);font-size:20px;flex-shrink:0}
.vo-tile__icon--ink{background:var(--vo-color-neutral-soft);color:var(--vo-color-ink)}
.vo-tile{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--vo-space-3);min-height:72px;flex-wrap:wrap}
.vo-tile>span{flex:1;min-width:0;padding-right:0;font-size:var(--vo-font-md)}
.vo-tile>small{width:100%;padding-left:52px;margin-top:calc(-1 * var(--vo-space-1))}
.vo-tile:hover{border-color:var(--vo-color-action);box-shadow:var(--vo-shadow-md);background:var(--vo-color-surface)}
.vo-greeting{margin:var(--vo-space-2) 0 var(--vo-space-6)}
.vo-greeting h1{font-size:28px}
.vo-greeting p{color:var(--vo-color-muted);margin-top:var(--vo-space-1)}
.vo-section h3{color:var(--vo-color-text);font-size:var(--vo-font-md);border-bottom:2px solid var(--vo-color-ink)}
.vo-page-h2 .vo-tile__icon{width:36px;height:36px;font-size:18px}
.vo-space-nav :is(a,button) .vo-icon{font-size:16px}
.vo-page-nav :is(a,button) .vo-icon{color:var(--vo-color-action)}
.vo-page-nav :is(a,button)[aria-current="page"] .vo-icon{color:var(--vo-color-white)}
.vo-tile--area{min-height:88px}
@media(max-width:600px){.vo-space-nav{padding:0 var(--vo-space-3)}.vo-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vo-tile{min-height:96px}}

/* Usuarios y accesos (S/4 Factor). Extensiones de docs/diseno/pantallas/usuarios-aprobado.html con prefijo vo-
   y solo tokens. Las clases sin prefijo de la maqueta se resolvieron con el catálogo (vo-input, vo-select,
   vo-table, vo-dialog, vo-badge, vo-steps, vo-progress, vo-tile__icon, vo-grid, vo-row, vo-input-group).
   Inicio del bloque vo-usuarios-y-accesos (marcador de la prueba que cruza el bloque con componentes.md). */
.vo-master-detail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--vo-space-5);align-items:start}
.vo-side-list{background:var(--vo-color-surface);border:1px solid var(--vo-color-border);position:sticky;top:var(--vo-space-4)}
.vo-side-list__search{padding:var(--vo-space-3);border-bottom:1px solid var(--vo-color-border);display:flex;flex-direction:column;gap:var(--vo-space-2)}
.vo-side-list__filter{display:flex;gap:var(--vo-space-2);align-items:center;font-size:var(--vo-font-sm);color:var(--vo-color-muted);cursor:pointer;min-height:var(--vo-space-6)}
.vo-side-list__select{display:none}
.vo-side-list__list{list-style:none;margin:0;padding:0;max-height:calc(100dvh - 300px);overflow:auto}
.vo-side-list__item{display:grid;grid-template-columns:1fr auto;gap:2px var(--vo-space-2);width:100%;text-align:left;padding:var(--vo-space-3) var(--vo-space-4);border:0;border-left:3px solid transparent;border-bottom:1px solid var(--vo-color-neutral-soft);background:transparent;color:var(--vo-color-text);text-decoration:none;font-size:var(--vo-font-md)}
.vo-side-list__item:hover{background:var(--vo-color-background)}
.vo-side-list__item[aria-current="true"],.vo-side-list__item[aria-current="page"]{border-left-color:var(--vo-color-action);background:var(--vo-color-action-soft)}
.vo-side-list__name{font-weight:var(--vo-font-bold);display:flex;align-items:center;gap:var(--vo-space-2);min-width:0}
.vo-side-list__meta{font-size:var(--vo-font-xs);color:var(--vo-color-muted);display:flex;align-items:center;gap:var(--vo-space-1);white-space:nowrap}
.vo-side-list__sub{grid-column:1/-1;font-size:var(--vo-font-xs);color:var(--vo-color-muted);display:flex;gap:var(--vo-space-2);align-items:center;flex-wrap:wrap}
.vo-side-list__item--inactive .vo-side-list__name{color:var(--vo-color-muted)}
.vo-side-list__foot{padding:var(--vo-space-3) var(--vo-space-4);font-size:var(--vo-font-xs);color:var(--vo-color-muted);border-top:1px solid var(--vo-color-border)}
.vo-side-list__empty{padding:var(--vo-space-6) var(--vo-space-4);text-align:center;color:var(--vo-color-muted);font-size:var(--vo-font-sm)}
.vo-detail{background:var(--vo-color-surface);border:1px solid var(--vo-color-border);min-width:0}
.vo-detail__head{display:flex;justify-content:space-between;gap:var(--vo-space-4);padding:var(--vo-space-5) var(--vo-space-6) var(--vo-space-4);flex-wrap:wrap}
.vo-detail__head>div:first-child{min-width:0;flex:1}
.vo-detail__title{display:flex;align-items:center;gap:var(--vo-space-3);flex-wrap:wrap}
.vo-detail__title h2{margin:0;font-size:var(--vo-font-xl)}
.vo-detail__code{font-size:var(--vo-font-xs);color:var(--vo-color-muted);border:1px solid var(--vo-color-border);padding:1px var(--vo-space-2);border-radius:var(--vo-radius-md)}
.vo-detail__desc{margin:var(--vo-space-2) 0 0;color:var(--vo-color-muted);font-size:var(--vo-font-sm);max-width:70ch;overflow-wrap:anywhere}
.vo-detail__stats{display:flex;gap:var(--vo-space-5);margin-top:var(--vo-space-3);font-size:var(--vo-font-sm);flex-wrap:wrap}
.vo-detail__stats b{font-size:var(--vo-font-lg)}
.vo-detail__stats b.vo-detail__stats-text{font-size:var(--vo-font-sm)}
.vo-detail__actions{display:flex;gap:var(--vo-space-2);align-items:flex-start;flex-wrap:wrap}
.vo-detail__head .vo-alert{margin-top:var(--vo-space-3)}
.vo-detail .vo-tabs{padding:0 var(--vo-space-6)}
.vo-detail__panel{padding:var(--vo-space-5) var(--vo-space-6)}
.vo-detail__panel>.vo-alert{margin-bottom:var(--vo-space-3)}
.vo-detail__hint{font-size:var(--vo-font-xs);color:var(--vo-color-muted);margin:0 0 var(--vo-space-3);display:flex;gap:var(--vo-space-2);align-items:center}
.vo-detail__toolbar{display:flex;gap:var(--vo-space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--vo-space-3)}
.vo-detail__toolbar .vo-input-group{flex:1;min-width:220px;max-width:360px}
.vo-detail__toolbar-sum{margin-left:auto;font-size:var(--vo-font-sm);color:var(--vo-color-muted)}
.vo-perm-matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:var(--vo-font-sm)}
.vo-perm-matrix th,.vo-perm-matrix td{border-bottom:1px solid var(--vo-color-neutral-soft);padding:0 var(--vo-space-3);height:40px;text-align:left;background:var(--vo-color-surface);white-space:nowrap}
.vo-perm-matrix thead th{position:sticky;top:0;z-index:3;background:var(--vo-color-ink);color:var(--vo-color-white);font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold);height:44px;border-bottom:0}
.vo-perm-matrix thead th small{display:block;font-weight:var(--vo-font-regular);color:var(--vo-color-silver);font-size:11px}
.vo-perm-matrix__name{min-width:300px}
.vo-perm-matrix__act{width:84px;text-align:center!important}
.vo-perm-matrix__area th{background:var(--vo-color-background);color:var(--vo-color-muted);font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold);height:30px;letter-spacing:.2px}
.vo-perm-matrix__module td,.vo-perm-matrix__module th{border-top:1px solid var(--vo-color-border);height:48px}
.vo-perm-matrix__module .vo-perm-matrix__name{font-weight:var(--vo-font-bold)}
.vo-perm-matrix__toggle{display:flex;align-items:center;gap:var(--vo-space-2);width:100%;border:0;background:transparent;padding:0;color:inherit;text-align:left;font-weight:var(--vo-font-bold);min-height:40px}
.vo-perm-matrix__toggle .vo-tile__icon{width:28px;height:28px;font-size:var(--vo-icon-sm)}
.vo-perm-matrix__chevron{transition:transform var(--vo-duration-fast) var(--vo-easing);color:var(--vo-color-muted)}
.vo-perm-matrix__toggle[aria-expanded="false"] .vo-perm-matrix__chevron{transform:rotate(-90deg)}
.vo-perm-matrix__progress{margin-left:auto;font-size:var(--vo-font-xs);color:var(--vo-color-muted);font-weight:var(--vo-font-regular);display:flex;align-items:center;gap:var(--vo-space-2)}
.vo-perm-matrix__progress progress{width:56px;height:4px;accent-color:var(--vo-color-action)}
.vo-perm-matrix__group th{font-size:var(--vo-font-xs);color:var(--vo-color-muted);font-weight:var(--vo-font-medium);height:28px;padding-left:52px}
.vo-perm-matrix__view .vo-perm-matrix__name{padding-left:52px;font-weight:var(--vo-font-regular)}
.vo-perm-matrix__view:hover td,.vo-perm-matrix__view:hover th{background:var(--vo-color-background)}
.vo-perm-matrix__view--changed .vo-perm-matrix__name{box-shadow:inset 3px 0 0 var(--vo-color-warning)}
.vo-perm-matrix__na{color:var(--vo-color-silver)}
.vo-perm-check{appearance:none;width:22px;height:22px;border:1.5px solid var(--vo-color-control);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);display:inline-grid;place-items:center;cursor:pointer;margin:0;vertical-align:middle;flex-shrink:0}
.vo-perm-check:checked{background:var(--vo-color-action);border-color:var(--vo-color-action)}
.vo-perm-check:checked:after{content:"";width:6px;height:11px;border:solid var(--vo-color-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.vo-perm-check:indeterminate{border-color:var(--vo-color-action);background:var(--vo-color-action-soft)}
.vo-perm-check:indeterminate:after{content:"";width:10px;height:2px;background:var(--vo-color-action)}
.vo-perm-check:disabled{cursor:not-allowed;opacity:.55}
.vo-perm-check--added{box-shadow:0 0 0 3px var(--vo-color-success-soft)}
.vo-perm-check--removed{box-shadow:0 0 0 3px var(--vo-color-warning-soft)}
.vo-access-matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;font-size:var(--vo-font-sm)}
.vo-access-matrix th,.vo-access-matrix td{border-bottom:1px solid var(--vo-color-neutral-soft);height:44px;padding:0 var(--vo-space-3);background:var(--vo-color-surface)}
.vo-access-matrix thead th{background:var(--vo-color-ink);color:var(--vo-color-white);font-size:var(--vo-font-xs);text-align:center;height:auto;padding:var(--vo-space-2)}
.vo-access-matrix thead tr:first-child th{border-bottom:1px solid color-mix(in srgb, var(--vo-color-white) 20%, transparent)}
.vo-access-matrix thead th.vo-access-matrix__role{text-align:left}
.vo-access-matrix__country{font-weight:var(--vo-font-bold)}
.vo-access-matrix__company{font-weight:var(--vo-font-regular);color:var(--vo-color-silver);font-size:11px;max-width:120px;display:inline-block;white-space:normal}
.vo-access-matrix__cell{text-align:center;width:120px}
.vo-access-matrix tbody th{text-align:left;font-weight:var(--vo-font-medium)}
.vo-access-matrix tbody th small{display:block;color:var(--vo-color-muted);font-weight:var(--vo-font-regular);font-size:var(--vo-font-xs)}
.vo-access-matrix__warn{color:var(--vo-color-warning);margin-left:4px;font-size:14px;vertical-align:middle;cursor:help}
.vo-access-matrix__row--assigned th{box-shadow:inset 3px 0 0 var(--vo-color-action)}
.vo-changes-bar{position:fixed;left:0;right:0;bottom:0;background:var(--vo-color-ink);color:var(--vo-color-white);display:flex;align-items:center;gap:var(--vo-space-4);padding:var(--vo-space-3) var(--vo-space-6);transform:translateY(110%);transition:transform var(--vo-duration-normal) var(--vo-easing);z-index:var(--vo-z-header)}
.vo-changes-bar--visible{transform:none}
.vo-changes-bar__text{display:flex;align-items:center;gap:var(--vo-space-2)}
.vo-changes-bar__text small{color:var(--vo-color-silver)}
.vo-changes-bar__actions{margin-left:auto;display:flex;gap:var(--vo-space-2)}
.vo-changes-bar .vo-btn{border-color:color-mix(in srgb, var(--vo-color-white) 40%, transparent);background:transparent;color:var(--vo-color-white)}
.vo-changes-bar .vo-btn--primary{background:var(--vo-color-action);border-color:var(--vo-color-action)}
.vo-changes-bar :focus-visible{outline-color:var(--vo-color-white)}
.vo-change-list{list-style:none;margin:0 0 var(--vo-space-4);padding:0;max-height:260px;overflow:auto;border:1px solid var(--vo-color-border)}
.vo-change-list li{display:flex;gap:var(--vo-space-3);align-items:center;padding:var(--vo-space-2) var(--vo-space-3);border-bottom:1px solid var(--vo-color-neutral-soft);font-size:var(--vo-font-sm);overflow-wrap:anywhere}
.vo-change-list li:last-child{border-bottom:0}
.vo-change-list__tag{font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold)}
.vo-change-list__tag--add{color:var(--vo-color-success)}
.vo-change-list__tag--remove{color:var(--vo-color-error)}
.vo-change-list small{color:var(--vo-color-muted)}
.vo-history{list-style:none;margin:0;padding:0}
.vo-history>li{display:grid;grid-template-columns:150px 1fr;gap:var(--vo-space-4);padding:var(--vo-space-3) 0;border-bottom:1px solid var(--vo-color-neutral-soft);font-size:var(--vo-font-sm)}
.vo-history time{color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
.vo-history__add{color:var(--vo-color-success)}
.vo-history__remove{color:var(--vo-color-error)}
.vo-history__views{list-style:none;margin:var(--vo-space-2) 0 0;padding:0}
.vo-history__views li{display:block;padding:var(--vo-space-1) 0 var(--vo-space-1) var(--vo-space-3);border:0;border-left:2px solid var(--vo-color-neutral-soft)}
.vo-history__views small{color:var(--vo-color-muted)}
.vo-option-card{display:grid;grid-template-columns:1fr 1fr;gap:var(--vo-space-3);margin-bottom:var(--vo-space-5)}
.vo-option-card label{display:flex;gap:var(--vo-space-3);align-items:flex-start;border:1px solid var(--vo-color-border);padding:var(--vo-space-3) var(--vo-space-4);cursor:pointer;border-radius:var(--vo-radius-md);font-size:var(--vo-font-sm)}
.vo-option-card label b{display:block;margin-bottom:2px}
.vo-option-card label:has(input:checked){border-color:var(--vo-color-action);background:var(--vo-color-action-soft)}
.vo-option-card input{margin-top:3px}
.vo-secret{display:flex;gap:var(--vo-space-2);align-items:center;justify-content:space-between;background:var(--vo-color-background);border:1px dashed var(--vo-color-control);padding:var(--vo-space-3) var(--vo-space-4);font-family:Consolas,"Courier New",monospace;font-size:var(--vo-font-lg);letter-spacing:1px;overflow-wrap:anywhere}
.vo-dialog--wide{width:min(860px,calc(100% - 32px))}
@media(max-width:980px){
  .vo-master-detail{grid-template-columns:1fr}
  .vo-side-list{position:static}
  .vo-side-list__list,.vo-side-list__filter,.vo-side-list__foot,.vo-side-list__search>.vo-input{display:none}
  .vo-side-list__select{display:block}
  .vo-perm-matrix__name{position:sticky;left:0;z-index:2}
  .vo-perm-matrix thead .vo-perm-matrix__name{z-index:4}
  .vo-detail__head,.vo-detail__panel{padding-left:var(--vo-space-4);padding-right:var(--vo-space-4)}
  .vo-detail .vo-tabs{padding:0 var(--vo-space-4)}
}
@media(max-width:600px){
  .vo-history>li{grid-template-columns:1fr}
  .vo-changes-bar{flex-wrap:wrap;padding:var(--vo-space-3)}
  .vo-changes-bar__actions{margin-left:0;width:100%}
  .vo-changes-bar__actions .vo-btn{flex:1}
  .vo-option-card{grid-template-columns:1fr}
  .vo-detail__stats{gap:var(--vo-space-3)}
}
/* Fin del bloque vo-usuarios-y-accesos */

/* Mesa de Ayuda (S/4 Factor). Piezas de docs/especificaciones/mesa-de-ayuda.md §4, con el comportamiento de
   docs/diseno/pantallas/mesa-de-ayuda-aprobado.html y mesa-de-ayuda-bandeja-aprobado.html, solo con tokens. Las clases
   sin prefijo de las maquetas se resolvieron con el catálogo (vo-tabs, vo-segment, vo-badge, vo-input, vo-textarea,
   vo-btn, vo-alert, vo-dialog, vo-detail, vo-table, vo-filterbar, vo-pagination, vo-empty, vo-text-error).
   Inicio del bloque vo-mesa-de-ayuda (marcador de la prueba que cruza el bloque con componentes.md). */
/* Esquina inferior derecha reservada para la burbuja (spec D2 y D17): los avisos pasan arriba a la derecha, bajo la
   cabecera (que no es fija), en todo el sistema. */
.vo-toast-region{top:calc(var(--vo-header-height) + var(--vo-space-6));bottom:auto}
/* Con el chat abierto en escritorio, los avisos salen a su izquierda para no tapar su cabecera. */
body:has(.vo-chat:not([hidden])) .vo-toast-region{right:calc(390px + 2 * var(--vo-space-6));max-width:min(420px,calc(100% - 390px - 3 * var(--vo-space-6)))}
.vo-help-fab{position:fixed;right:var(--vo-space-6);bottom:var(--vo-space-6);z-index:calc(var(--vo-z-header) + 1);display:flex;align-items:center;gap:var(--vo-space-2);min-height:52px;padding:0 var(--vo-space-5) 0 var(--vo-space-4);border:0;border-radius:var(--vo-radius-pill);background:var(--vo-color-action);color:var(--vo-color-white);font-weight:var(--vo-font-bold);box-shadow:var(--vo-shadow-md);transition:bottom var(--vo-duration-normal) var(--vo-easing)}
.vo-help-fab:hover{background:var(--vo-color-action-hover)}
.vo-help-fab .vo-icon{font-size:var(--vo-icon-md)}
.vo-help-fab[aria-expanded="true"]{display:none}
.vo-help-fab__count{position:absolute;top:calc(-1 * var(--vo-space-1));right:calc(-1 * var(--vo-space-1));display:grid;place-items:center;min-width:20px;height:20px;padding:0 var(--vo-space-1);border:2px solid var(--vo-color-surface);border-radius:var(--vo-radius-pill);background:var(--vo-color-ink);color:var(--vo-color-white);font-size:11px;font-variant-numeric:tabular-nums}
/* Con la barra de cambios visible, la burbuja y el chat suben y quedan encima de ella (spec D17). La reserva es el alto
   de la barra: relleno vertical más un botón; en celular, más la fila del texto, porque los botones bajan de línea. */
body:has(.vo-changes-bar--visible) :is(.vo-help-fab,.vo-chat){bottom:calc(var(--vo-control-height) + 2 * var(--vo-space-3) + var(--vo-space-4))}
body:has(.vo-changes-bar--visible) .vo-chat{max-height:calc(100dvh - 110px - var(--vo-control-height) - 2 * var(--vo-space-3) - var(--vo-space-4) + var(--vo-space-6))}
.vo-chat{position:fixed;right:var(--vo-space-6);bottom:var(--vo-space-6);z-index:calc(var(--vo-z-header) + 2);display:flex;flex-direction:column;width:390px;max-width:calc(100% - 2 * var(--vo-space-6));height:620px;max-height:calc(100dvh - 110px);overflow:hidden;background:var(--vo-color-surface);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);box-shadow:var(--vo-shadow-lg);transition:bottom var(--vo-duration-normal) var(--vo-easing)}
.vo-chat__head{display:flex;align-items:center;gap:var(--vo-space-3);padding:var(--vo-space-3) var(--vo-space-4);background:var(--vo-color-ink);color:var(--vo-color-white)}
.vo-chat__head strong{display:block;font-size:var(--vo-font-md)}
.vo-chat__head small{display:block;color:var(--vo-color-silver)}
.vo-chat__head .vo-btn{margin-left:auto;border:0;background:transparent;color:var(--vo-color-white)}
.vo-chat__head .vo-btn:hover{background:color-mix(in srgb, var(--vo-color-white) 12%, transparent)}
.vo-chat__head :focus-visible{outline-color:var(--vo-color-white)}
.vo-chat__icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:var(--vo-radius-pill);background:color-mix(in srgb, var(--vo-color-white) 14%, transparent);font-size:var(--vo-icon-sm)}
.vo-chat .vo-tabs{gap:0;flex-shrink:0}
.vo-chat .vo-tab{flex:1}
.vo-chat__body{display:flex;flex:1;flex-direction:column;min-height:0}
.vo-chat__bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--vo-space-2);padding:var(--vo-space-3) var(--vo-space-4);border-bottom:1px solid var(--vo-color-border)}
.vo-chat__bar>div{flex:1;min-width:0;font-size:var(--vo-font-sm)}
.vo-chat__messages{flex:1;overflow-y:auto;padding:var(--vo-space-4)}
.vo-chat__context{align-self:center;padding:2px var(--vo-space-3);border-radius:var(--vo-radius-pill);background:var(--vo-color-background);color:var(--vo-color-muted);font-size:var(--vo-font-xs);text-align:center}
.vo-chat__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--vo-space-3);padding:var(--vo-space-3) var(--vo-space-4);border-top:1px solid var(--vo-color-border);color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
.vo-chat-thread{display:flex;flex-direction:column;gap:var(--vo-space-2)}
.vo-chat-thread>*{flex-shrink:0}
/* Mensajes: el emisor da el aspecto; vo-chat-msg--own los lleva a la derecha, en grafito, para quien está mirando
   (el usuario en su chat, TI en la Bandeja). */
.vo-chat-msg{align-self:flex-start;max-width:85%;padding:var(--vo-space-2) var(--vo-space-3);border-radius:var(--vo-radius-lg);border-bottom-left-radius:var(--vo-radius-sm);background:var(--vo-color-neutral-soft);color:var(--vo-color-text);font-size:var(--vo-font-md);white-space:pre-line;overflow-wrap:anywhere}
.vo-chat-msg__who{display:block;margin-bottom:2px;color:var(--vo-color-muted);font-size:11px;font-weight:var(--vo-font-bold)}
.vo-chat-msg--tip{max-width:92%;background:var(--vo-color-info-soft);border:1px solid var(--vo-color-info)}
.vo-chat-msg--tip b{color:var(--vo-color-info)}
.vo-chat-msg--ti{background:var(--vo-color-surface);border:1px solid var(--vo-color-border)}
.vo-chat-msg--own{align-self:flex-end;border-radius:var(--vo-radius-lg);border-bottom-right-radius:var(--vo-radius-sm);background:var(--vo-color-ink);color:var(--vo-color-white);border-color:var(--vo-color-ink)}
.vo-chat-msg--own .vo-chat-msg__who{color:var(--vo-color-silver)}
.vo-chat-msg--note{align-self:flex-end;max-width:90%;border-radius:var(--vo-radius-lg);border-bottom-right-radius:var(--vo-radius-sm);background:var(--vo-color-warning-soft);border:1px dashed var(--vo-color-warning);color:var(--vo-color-text)}
.vo-chat-msg--system{align-self:center;max-width:100%;padding:2px;background:transparent;color:var(--vo-color-muted);font-size:var(--vo-font-xs);text-align:center}
.vo-chat-typing{align-self:flex-start;display:flex;gap:var(--vo-space-1);padding:var(--vo-space-3) var(--vo-space-4);border-radius:var(--vo-radius-lg);background:var(--vo-color-neutral-soft)}
.vo-chat-typing span{width:6px;height:6px;border-radius:var(--vo-radius-pill);background:var(--vo-color-control);animation:vo-chat-typing 1s infinite}
.vo-chat-typing span:nth-child(2){animation-delay:.15s}
.vo-chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes vo-chat-typing{0%,80%,100%{opacity:.3}40%{opacity:1}}
.vo-chat-options{display:flex;flex-wrap:wrap;gap:var(--vo-space-2);padding:0 var(--vo-space-4) var(--vo-space-3)}
.vo-chat-option{min-height:36px;padding:var(--vo-space-1) var(--vo-space-3);border:1px solid var(--vo-color-action);border-radius:var(--vo-radius-pill);background:var(--vo-color-surface);color:var(--vo-color-action);font-size:var(--vo-font-sm);text-align:left}
.vo-chat-option:hover{background:var(--vo-color-action-soft)}
.vo-chat-option--primary{background:var(--vo-color-action);color:var(--vo-color-white);font-weight:var(--vo-font-bold)}
.vo-chat-option--primary:hover{background:var(--vo-color-action-hover)}
.vo-chat-summary{align-self:stretch;overflow:hidden;border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-lg);font-size:var(--vo-font-sm)}
.vo-chat-summary__head{display:flex;justify-content:space-between;align-items:center;gap:var(--vo-space-2);padding:var(--vo-space-2) var(--vo-space-3);background:var(--vo-color-background);font-weight:var(--vo-font-bold)}
.vo-chat-summary dl{margin:0;padding:var(--vo-space-1) var(--vo-space-3) var(--vo-space-2)}
.vo-chat-summary dt{margin-top:var(--vo-space-2);color:var(--vo-color-muted);font-size:11px}
.vo-chat-summary dd{margin:2px 0 0;overflow-wrap:anywhere}
.vo-chat-ticket{align-self:stretch;padding:var(--vo-space-4) var(--vo-space-3);border:1px solid var(--vo-color-success);border-radius:var(--vo-radius-lg);background:var(--vo-color-success-soft);text-align:center}
.vo-chat-ticket__label{color:var(--vo-color-success);font-size:var(--vo-font-xs);font-weight:var(--vo-font-bold)}
.vo-chat-ticket__number{margin:var(--vo-space-1) 0 var(--vo-space-2);font-size:var(--vo-font-2xl);font-weight:var(--vo-font-bold);letter-spacing:.5px;font-variant-numeric:tabular-nums}
.vo-chat-ticket p{margin:0 0 var(--vo-space-3);color:var(--vo-color-muted);font-size:var(--vo-font-sm)}
.vo-chat-composer{display:flex;gap:var(--vo-space-2);padding:var(--vo-space-3);border-top:1px solid var(--vo-color-border)}
.vo-chat-composer>.vo-input{flex:1;min-width:0}
.vo-chat-composer--note :is(.vo-input,.vo-textarea){background:var(--vo-color-warning-soft);border-color:var(--vo-color-warning)}
.vo-ticket-list{flex:1;overflow-y:auto;margin:0;padding:0;list-style:none}
.vo-ticket-row{display:block;width:100%;padding:var(--vo-space-3) var(--vo-space-4);border:0;border-bottom:1px solid var(--vo-color-border);background:transparent;color:var(--vo-color-text);text-align:left}
.vo-ticket-row:hover{background:var(--vo-color-background)}
.vo-ticket-row:focus-visible{outline-offset:-3px}
.vo-ticket-row__top{display:flex;justify-content:space-between;align-items:center;gap:var(--vo-space-2)}
.vo-ticket-row__code{font-weight:var(--vo-font-bold);font-variant-numeric:tabular-nums}
.vo-ticket-row__title{display:block;margin:2px 0;overflow-wrap:anywhere}
.vo-ticket-row__meta{display:block;color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
.vo-ticket-row--attention .vo-ticket-row__code::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:var(--vo-radius-pill);background:var(--vo-color-error);vertical-align:1px}
.vo-ticket-row--new{background:var(--vo-color-action-soft)}
/* Bandeja de TI */
.vo-quick-views{display:flex;flex-wrap:wrap;gap:var(--vo-space-2);margin-bottom:var(--vo-space-3)}
.vo-quick-view{min-width:130px;padding:var(--vo-space-2) var(--vo-space-3);border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);background:var(--vo-color-surface);color:var(--vo-color-text);text-align:left}
.vo-quick-view strong{display:block;font-size:var(--vo-font-xl);line-height:var(--vo-line-heading);font-variant-numeric:tabular-nums}
.vo-quick-view span{color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
.vo-quick-view:hover{border-color:var(--vo-color-control)}
.vo-quick-view[aria-pressed="true"]{border-color:var(--vo-color-ink);box-shadow:inset 0 0 0 1px var(--vo-color-ink)}
.vo-quick-view--alert strong{color:var(--vo-color-error)}
.vo-inbox{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--vo-space-4);align-items:start}
/* La esquina inferior derecha es de la burbuja (06-interfaz.md, spec D17): el detalle deja libre su alto (botón de 52 px,
   su separación del borde y un respiro) para que el compositor y el final del panel siempre puedan quedar encima de ella. */
/* En el panel angosto de la Bandeja, el número, el estado y el asunto ocupan toda la fila: las acciones y los avisos
   pasan a la línea siguiente sin quitarle ancho al título. */
.vo-inbox__detail .vo-detail__head>:is(div:first-child,.vo-alert){flex-basis:100%}
.vo-inbox__detail{position:sticky;top:var(--vo-space-4);max-height:calc(100dvh - 2 * var(--vo-space-4));overflow:auto;padding-bottom:calc(52px + var(--vo-space-6) + var(--vo-space-2))}
.vo-priority{font-weight:var(--vo-font-bold)}
.vo-priority--high{color:var(--vo-color-error)}
.vo-priority--medium{color:var(--vo-color-warning)}
.vo-priority--low{color:var(--vo-color-muted);font-weight:var(--vo-font-regular)}
.vo-table__row--unread>:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:var(--vo-radius-pill);background:var(--vo-color-info);vertical-align:1px}
.vo-table__row--unread>:first-child{font-weight:var(--vo-font-bold)}
/* Detalle de la Bandeja (decisión 77): datos del ticket como lista "etiqueta: valor" y la conversación con el
   asistente en un <details> nativo, cerrado por defecto y que se abre con Enter o Espacio sin JavaScript. */
.vo-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--vo-space-1) var(--vo-space-3);margin:0;font-size:var(--vo-font-sm)}
.vo-facts dt{color:var(--vo-color-muted)}
.vo-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.vo-disclosure{border:1px solid var(--vo-color-border);border-radius:var(--vo-radius-md);background:var(--vo-color-surface)}
.vo-disclosure>summary{display:flex;align-items:center;gap:var(--vo-space-2);min-height:var(--vo-control-height);padding:var(--vo-space-2) var(--vo-space-3);font-size:var(--vo-font-sm);font-weight:var(--vo-font-bold);cursor:pointer;list-style:none}
.vo-disclosure>summary::-webkit-details-marker{display:none}
.vo-disclosure>summary::before{content:"";flex-shrink:0;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--vo-duration-normal) var(--vo-easing)}
.vo-disclosure[open]>summary::before{transform:rotate(45deg)}
.vo-disclosure>summary:focus-visible{outline-offset:-3px}
.vo-disclosure__body{padding:0 var(--vo-space-3) var(--vo-space-3)}
/* Compositor de la Bandeja: campo a todo el ancho (vo-textarea) y debajo la ayuda del efecto y las acciones. */
.vo-chat-composer--stacked{flex-direction:column;align-items:stretch}
.vo-chat-composer--stacked>.vo-textarea{min-height:64px}
.vo-chat-composer__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--vo-space-2)}
.vo-chat-composer__hint{margin-right:auto;color:var(--vo-color-muted);font-size:var(--vo-font-xs)}
@media(max-width:1080px){
  .vo-inbox{grid-template-columns:minmax(0,1fr)}
  .vo-inbox__detail{position:static;max-height:none}
}
@media(max-width:600px){
  .vo-help-fab{right:var(--vo-space-4);bottom:var(--vo-space-4);justify-content:center;width:56px;min-height:56px;padding:0}
  .vo-help-fab__label{display:none}
  /* En celular la cabecera ocupa dos filas y la barra de cambios apila texto (hasta dos líneas) y botones. */
  .vo-toast-region,body:has(.vo-chat:not([hidden])) .vo-toast-region{top:calc(2 * var(--vo-header-height) + var(--vo-space-3));right:var(--vo-space-6);max-width:min(420px,calc(100% - 32px))}
  body:has(.vo-changes-bar--visible) .vo-help-fab{bottom:calc(2 * var(--vo-space-3) + var(--vo-space-4) + var(--vo-touch-target) + var(--vo-space-10) + var(--vo-space-3))}
  .vo-chat,body:has(.vo-changes-bar--visible) .vo-chat{inset:0;width:auto;max-width:none;height:auto;max-height:none;border:0;border-radius:0}
  .vo-chat-option,.vo-ticket-row{min-height:44px}
  .vo-quick-view{flex:1 1 calc(50% - var(--vo-space-2));min-width:0}
}
/* Fin del bloque vo-mesa-de-ayuda */