/* ======================= MM Glass — base Apple (tokens + componentes base) =======================
   ÚNICA base de estilo para Poncheo, Proyectos, Estadísticas y Workshop. Se enlaza PRIMERO en cada página
   (antes de styles.css y de cualquier capa vg-*). Guía: docs/design/VG-UI-ES.md.
   - Tokens --ios-*: fuente del sistema, escala tipográfica iOS (11 tamaños, pesos 400/600/700), colores del
     sistema con claro/oscuro, 3 radios (8 · 12 · cápsula).
   - Tema: claro en :root; oscuro con prefers-color-scheme (si la página no fija data-theme="light") y con
     data-theme="dark". vg-theme-boot.js deja «Automático» como predeterminado (sigue al teléfono).
   - Componentes con selectores de clase simples y sin !important: .vg-group / .vg-cell (lista agrupada),
     .vg-input / .vg-select / .vg-search (campos), .vg-toggle (interruptor), .vg-segmented, .vg-stepper,
     .vg-button (filled · tinted · plain · destructive), .vg-status + .vg-dot (estado de solo lectura),
     .vg-chip (filtro que se toca), .vg-selected (selección teñida), .vg-badge, .vg-tabbar, .vg-navbar, .vg-sheet
     y utilidades de texto .vg-t-*.
   - Las capas antiguas apuntan sus tokens a estos (--accent → --ios-blue, etc.); no se añade otra capa encima.
   - Sin estilos en línea (CSP); los iconos de chevron/check/lupa son data: SVG como los que ya usa vg-kit.css. */

/* ---- 1 tokens: claro ----------------------------------------------------------------------------------------------- */
:root{
  --ios-font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --ios-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* escala tipográfica iOS (Dynamic Type «Large», la predeterminada) */
  --ios-t-large:34px;   --ios-lh-large:41px;    /* Large Title, 700 */
  --ios-t-title1:28px;  --ios-lh-title1:34px;   /* Title 1, 700 */
  --ios-t-title2:22px;  --ios-lh-title2:28px;   /* Title 2, 700 */
  --ios-t-title3:20px;  --ios-lh-title3:25px;   /* Title 3, 600 */
  --ios-t-headline:17px;--ios-lh-headline:22px; /* Headline, 600 */
  --ios-t-body:17px;    --ios-lh-body:22px;     /* Body, 400 (los campos van siempre a 17 px: iOS no hace zoom) */
  --ios-t-callout:16px; --ios-lh-callout:21px;
  --ios-t-subhead:15px; --ios-lh-subhead:20px;
  --ios-t-footnote:13px;--ios-lh-footnote:18px; /* cabeceras y pies de lista agrupada */
  --ios-t-caption1:12px;--ios-lh-caption1:16px;
  --ios-t-caption2:11px;--ios-lh-caption2:13px; /* mínimo de la app */
  --ios-w-regular:400;--ios-w-semibold:600;--ios-w-bold:700;

  /* texto */
  --ios-label:#000000;
  --ios-label-2:rgba(60,60,67,.76);   /* secondaryLabel, darkened to pass 4.5:1 at 13 px on white and on #F2F2F7 */
  --ios-label-3:rgba(60,60,67,.3);    /* tertiaryLabel (marcadores de posición) */
  --ios-label-4:rgba(60,60,67,.18);   /* quaternaryLabel */
  --ios-on-accent:#ffffff;

  /* acento único y colores de estado (systemBlue/Green/Red/Orange/Yellow…) */
  --ios-blue:#007AFF;    --ios-blue-tint:rgba(0,122,255,.12);
  --ios-blue-text:#0040DD;   /* blue TEXT on white / on the tint (≥ 4.8:1); --ios-blue stays for fills, glyphs and the tab bar */
  --ios-blue-fill:#0071E3;   /* filled button background: white text 4.7:1 */
  --ios-red-fill:#D70015;    /* filled destructive background: white text 5.4:1 */
  --ios-green:#34C759;   --ios-green-tint:rgba(52,199,89,.14);   --ios-green-text:#1F7A35;
  --ios-red:#FF3B30;     --ios-red-tint:rgba(255,59,48,.12);     --ios-red-text:#D70015;
  --ios-orange:#FF9500;  --ios-orange-tint:rgba(255,149,0,.14);  --ios-orange-text:#C93400;
  --ios-yellow:#FFCC00;  --ios-yellow-tint:rgba(255,204,0,.16);
  --ios-purple:#AF52DE;  --ios-purple-tint:rgba(175,82,222,.12); --ios-purple-text:#8944AB;
  --ios-indigo:#5856D6;  --ios-teal:#30B0C7;  --ios-pink:#FF2D55;  --ios-gray:#8E8E93;

  /* fondos (agrupados) y rellenos */
  --ios-bg:#F2F2F7;      /* systemGroupedBackground: la página */
  --ios-bg-2:#FFFFFF;    /* secondarySystemGroupedBackground: tarjetas, listas, hojas */
  --ios-bg-3:#F2F2F7;    /* tertiarySystemGroupedBackground: bloque dentro de una tarjeta */
  --ios-sheet:#F2F2F7;   /* hoja modal (agrupada); en oscuro, la superficie elevada */
  --ios-popover:#FFFFFF; /* menú / popover; en oscuro, la superficie elevada sobre tarjetas */
  --ios-fill-1:rgba(120,120,128,.2);   /* systemFill */
  --ios-fill-2:rgba(120,120,128,.16);  /* secondarySystemFill: interruptor apagado */
  --ios-fill:rgba(118,118,128,.12);    /* tertiarySystemFill: campos, pista del segmentado */
  --ios-fill-4:rgba(116,116,128,.08);  /* quaternarySystemFill: fila pulsada */
  --ios-separator:rgba(60,60,67,.29);
  --ios-separator-opaque:#C6C6C8;
  --ios-hairline:rgba(60,60,67,.16);   /* the separator for an old 1 px CSS border: looks like the 0.33 pt iOS hairline at 2x (legacy layers only) */
  --ios-seg-thumb:#FFFFFF;
  --ios-bar:rgba(249,249,249,.94);     /* barras de navegación / pestañas */
  --ios-scrim:rgba(0,0,0,.2);
  --ios-shadow-pop:0 10px 30px rgba(0,0,0,.12);   /* sólo hojas, menús y popovers; las tarjetas no llevan sombra */
  --ios-focus-ring:rgba(0,122,255,.4);

  /* radios: sólo estos tres */
  --ios-r-s:8px;      /* campos, controles pequeños, miniaturas, iconos */
  --ios-r:12px;       /* tarjetas, listas agrupadas, hojas, diálogos */
  --ios-r-full:999px; /* sólo lo que se toca: botón grande, búsqueda, segmentado, barra de pestañas, chip de filtro */

  /* medidas */
  --ios-hit:44px;      /* área táctil mínima */
  --ios-row-h:44px;    /* fila mínima de lista */
  --ios-gutter:16px;   /* margen lateral e inicio del separador */

  /* iconos (data: SVG; el color lo pone la máscara con currentColor) */
  --ios-ic-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ios-ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.8 7.6 6 11.6 14.2 2.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ios-ic-updown:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.5 6M1.5 10 5 13.5 8.5 10' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ios-ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='6' fill='none' stroke='%238E8E93' stroke-width='2'/%3E%3Cpath d='m13 13 5 5' stroke='%238E8E93' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ios-ease:cubic-bezier(.25,.1,.25,1);
  color-scheme:light;
}

/* ---- 1b tokens: oscuro (sistema, si la página no fija claro; y elección explícita) ---------------------------------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ios-label:#FFFFFF;--ios-label-2:rgba(235,235,245,.6);--ios-label-3:rgba(235,235,245,.3);--ios-label-4:rgba(235,235,245,.16);
  --ios-blue:#0A84FF;--ios-blue-tint:rgba(10,132,255,.18);--ios-blue-text:#409CFF;--ios-blue-fill:#0071E3;--ios-red-fill:#D70015;
  --ios-green:#30D158;--ios-green-tint:rgba(48,209,88,.18);--ios-green-text:#30DB5B;
  --ios-red:#FF453A;--ios-red-tint:rgba(255,69,58,.18);--ios-red-text:#FF6961;
  --ios-orange:#FF9F0A;--ios-orange-tint:rgba(255,159,10,.18);--ios-orange-text:#FFB340;
  --ios-yellow:#FFD60A;--ios-yellow-tint:rgba(255,214,10,.18);
  --ios-purple:#BF5AF2;--ios-purple-tint:rgba(191,90,242,.18);--ios-purple-text:#DA8FFF;
  --ios-indigo:#5E5CE6;--ios-teal:#40C8E0;--ios-pink:#FF375F;--ios-gray:#8E8E93;
  --ios-bg:#000000;--ios-bg-2:#1C1C1E;--ios-bg-3:#2C2C2E;--ios-sheet:#1C1C1E;--ios-popover:#2C2C2E;
  --ios-fill-1:rgba(120,120,128,.36);--ios-fill-2:rgba(120,120,128,.32);--ios-fill:rgba(118,118,128,.24);--ios-fill-4:rgba(118,118,128,.18);
  --ios-separator:rgba(84,84,88,.6);--ios-separator-opaque:#38383A;--ios-hairline:rgba(84,84,88,.36);
  --ios-seg-thumb:#636366;--ios-bar:rgba(29,29,31,.94);--ios-scrim:rgba(0,0,0,.48);
  --ios-shadow-pop:0 10px 30px rgba(0,0,0,.5);--ios-focus-ring:rgba(10,132,255,.5);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --ios-label:#FFFFFF;--ios-label-2:rgba(235,235,245,.6);--ios-label-3:rgba(235,235,245,.3);--ios-label-4:rgba(235,235,245,.16);
  --ios-blue:#0A84FF;--ios-blue-tint:rgba(10,132,255,.18);--ios-blue-text:#409CFF;--ios-blue-fill:#0071E3;--ios-red-fill:#D70015;
  --ios-green:#30D158;--ios-green-tint:rgba(48,209,88,.18);--ios-green-text:#30DB5B;
  --ios-red:#FF453A;--ios-red-tint:rgba(255,69,58,.18);--ios-red-text:#FF6961;
  --ios-orange:#FF9F0A;--ios-orange-tint:rgba(255,159,10,.18);--ios-orange-text:#FFB340;
  --ios-yellow:#FFD60A;--ios-yellow-tint:rgba(255,214,10,.18);
  --ios-purple:#BF5AF2;--ios-purple-tint:rgba(191,90,242,.18);--ios-purple-text:#DA8FFF;
  --ios-indigo:#5E5CE6;--ios-teal:#40C8E0;--ios-pink:#FF375F;--ios-gray:#8E8E93;
  --ios-bg:#000000;--ios-bg-2:#1C1C1E;--ios-bg-3:#2C2C2E;--ios-sheet:#1C1C1E;--ios-popover:#2C2C2E;
  --ios-fill-1:rgba(120,120,128,.36);--ios-fill-2:rgba(120,120,128,.32);--ios-fill:rgba(118,118,128,.24);--ios-fill-4:rgba(118,118,128,.18);
  --ios-separator:rgba(84,84,88,.6);--ios-separator-opaque:#38383A;--ios-hairline:rgba(84,84,88,.36);
  --ios-seg-thumb:#636366;--ios-bar:rgba(29,29,31,.94);--ios-scrim:rgba(0,0,0,.48);
  --ios-shadow-pop:0 10px 30px rgba(0,0,0,.5);--ios-focus-ring:rgba(10,132,255,.5);
  color-scheme:dark}

/* ---- 2 base del documento (especificidad cero: cualquier regla de pantalla gana) ------------------------------------ */
:where(html){font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);color:var(--ios-label);background:var(--ios-bg);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:where(body){margin:0;background:var(--ios-bg);color:var(--ios-label)}
:where(button,input,select,textarea){font-family:inherit}
:where(a){color:var(--ios-blue-text)}
:where(b,strong){font-weight:var(--ios-w-semibold)}   /* never the browser's «bolder» 900 inside a 600 button */
:where(::selection){background:var(--ios-blue-tint)}
:where(:focus-visible){outline:3px solid var(--ios-blue);outline-offset:2px}
/* Focus rings only for the keyboard (Isaac, 9 Nov 2026: «quiero que se eliminen todo que tenga que ver con esas rayas
   azules despues de dar click»). vg-theme-boot.js keeps html[data-vg-input] on the last input: after a tap or a click
   (and when a dialog moves the focus on its own) no outline and no blue focus halo shows, on every page and module;
   Tab or the arrow keys set "keyboard" and every ring comes back. The :not(#…) list only lifts the specificity above
   the modules' own ring rules (it matches every element). */
:where(html,body,a,button,summary,label,[role="button"],[tabindex]){-webkit-tap-highlight-color:transparent}
html:not([data-vg-input="keyboard"]){--ios-focus-ring:transparent!important}
html:not([data-vg-input="keyboard"]) :is(:focus,:focus-visible,:focus-within):not(#vg-ring#vg-ring#vg-ring#vg-ring#vg-ring#vg-ring#vg-ring#vg-ring){outline:none!important}
html:not([data-vg-input="keyboard"]) :is(.vgl,.langsw.vgl):focus-within{box-shadow:none}
html:not([data-vg-input="keyboard"]) .vgk .field:focus-within{border-color:var(--k-field-line);box-shadow:none}
html:not([data-vg-input="keyboard"]) .vgk .inp:not([aria-invalid="true"]):is(:focus,:focus-visible){--kf-bd:var(--k-in-line);--kf-sh:none}
html:not([data-vg-input="keyboard"]) .vgk.rgw .rg-rz input:focus{--kf-sh:none}
html:not([data-vg-input="keyboard"]) #app .vg-global dialog input:is([type=search],[type=text]):focus{box-shadow:none}
html:not([data-vg-input="keyboard"]) .vgk.rpx .rp-note:focus-within{box-shadow:0 1px 0 var(--p-hi) inset,0 14px 30px -18px var(--p-shadow)}
html:not([data-vg-input="keyboard"]) .vgcal-detail:focus-visible{box-shadow:none}
:where(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--ios-blue)}

/* ---- 3 texto: utilidades de la escala (frase normal: nunca mayúsculas espaciadas) ---------------------------------- */
.vg-t-large{font:var(--ios-w-bold) var(--ios-t-large)/var(--ios-lh-large) var(--ios-font);letter-spacing:0;margin:0}
.vg-t-title1{font:var(--ios-w-bold) var(--ios-t-title1)/var(--ios-lh-title1) var(--ios-font);letter-spacing:0;margin:0}
.vg-t-title2{font:var(--ios-w-bold) var(--ios-t-title2)/var(--ios-lh-title2) var(--ios-font);letter-spacing:0;margin:0}
.vg-t-title3{font:var(--ios-w-semibold) var(--ios-t-title3)/var(--ios-lh-title3) var(--ios-font);letter-spacing:0;margin:0}
.vg-t-headline{font:var(--ios-w-semibold) var(--ios-t-headline)/var(--ios-lh-headline) var(--ios-font);letter-spacing:0}
.vg-t-body{font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);letter-spacing:0}
.vg-t-callout{font:var(--ios-w-regular) var(--ios-t-callout)/var(--ios-lh-callout) var(--ios-font);letter-spacing:0}
.vg-t-subhead{font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font);letter-spacing:0}
.vg-t-footnote{font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);letter-spacing:0}
.vg-t-caption1{font:var(--ios-w-regular) var(--ios-t-caption1)/var(--ios-lh-caption1) var(--ios-font);letter-spacing:0}
.vg-t-caption2{font:var(--ios-w-regular) var(--ios-t-caption2)/var(--ios-lh-caption2) var(--ios-font);letter-spacing:0}
.vg-t-2{color:var(--ios-label-2)}
.vg-t-3{color:var(--ios-label-3)}
.vg-num{font-variant-numeric:tabular-nums}

/* ---- 4 lista agrupada (inset grouped): cabecera · grupo · celdas · pie ---------------------------------------------- */
.vg-group-head{margin:22px var(--ios-gutter) 7px;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2);text-transform:none;letter-spacing:0}
.vg-group{display:block;margin:0 0 22px;padding:0;list-style:none;background:var(--ios-bg-2);border:0;border-radius:var(--ios-r);overflow:hidden;color:var(--ios-label);box-shadow:none}
.vg-group.is-inset{margin-inline:var(--ios-gutter)}
.vg-group.is-padded{padding:var(--ios-gutter)}
.vg-group-foot{margin:-15px var(--ios-gutter) 22px;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label-2)}
.vg-group-foot.is-error{color:var(--ios-red-text)}
:is(.vg-group-head,.vg-group-foot).is-inset{margin-inline:calc(var(--ios-gutter) * 2)}
.vg-cell{position:relative;display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:var(--ios-row-h);margin:0;padding:11px var(--ios-gutter);
  font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);color:var(--ios-label);text-align:start;text-decoration:none;background:transparent;border:0;border-radius:0;box-shadow:none}
.vg-cell+.vg-cell::before{content:"";position:absolute;top:0;inset-inline:var(--vg-cell-inset,var(--ios-gutter)) 0;border-top:.5px solid var(--ios-separator);pointer-events:none}
.vg-cell.has-icon+.vg-cell,.vg-group.has-icons .vg-cell+.vg-cell{--vg-cell-inset:calc(var(--ios-gutter) + 29px + 12px)}
:is(a,button,label,summary).vg-cell{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:is(a,button,summary).vg-cell:active,label.vg-cell:active{background:var(--ios-fill-4)}
.vg-cell-icon{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:var(--ios-r-s);background:var(--ios-blue);color:var(--ios-on-accent)}
.vg-cell-icon>svg{width:18px;height:18px}
.vg-cell-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.vg-cell-sub{display:block;margin-top:1px;font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font);color:var(--ios-label-2)}
.vg-cell-value{flex:0 1 auto;min-width:0;color:var(--ios-label-2);text-align:end;overflow-wrap:anywhere}
.vg-cell-value.is-link{color:var(--ios-blue-text)}
.vg-cell.is-chevron::after,.vg-cell-chev{content:"";display:block;flex:none;width:8px;height:14px;background:var(--ios-label-3);-webkit-mask:var(--ios-ic-chev) center/contain no-repeat;mask:var(--ios-ic-chev) center/contain no-repeat}
/* fila de opción única: la elegida lleva el check azul al final (aria-checked / aria-selected / .is-selected) */
.vg-cell:is([aria-checked="true"],[aria-selected="true"],.is-selected)::after{content:"";display:block;flex:none;width:16px;height:14px;margin-inline-start:auto;background:var(--ios-blue);-webkit-mask:var(--ios-ic-check) center/contain no-repeat;mask:var(--ios-ic-check) center/contain no-repeat}
.vg-cell.is-destructive{color:var(--ios-red-text)}
.vg-cell.is-action{color:var(--ios-blue-text)}
.vg-cell:disabled,.vg-cell[aria-disabled="true"]{opacity:.4;cursor:default}

/* ---- 5 campos de texto, select y búsqueda (17 px: iOS no hace zoom al enfocar) -------------------------------------- */
.vg-input,.vg-select{display:block;box-sizing:border-box;width:100%;min-height:var(--ios-hit);margin:0;padding:11px 12px;
  font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);color:var(--ios-label);caret-color:var(--ios-blue);
  background:var(--ios-fill);border:0;border-radius:var(--ios-r-s);box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
textarea.vg-input{min-height:88px;resize:vertical}
.vg-input::placeholder{color:var(--ios-label-3);opacity:1}
.vg-input:focus-visible,.vg-select:focus-visible,.vg-input:focus,.vg-select:focus{box-shadow:0 0 0 2px var(--ios-focus-ring)}
.vg-input[aria-invalid="true"],.vg-select[aria-invalid="true"]{box-shadow:0 0 0 2px var(--ios-red-tint),inset 0 0 0 1px var(--ios-red)}
.vg-input:disabled,.vg-select:disabled{opacity:.4}
.vg-input[readonly]{background:transparent;padding-inline:0;color:var(--ios-label-2)}
.vg-select{padding-inline-end:34px;background-image:var(--ios-ic-updown);background-repeat:no-repeat;background-position:right 12px center;background-size:10px 16px;cursor:pointer}
/* dentro de una celda: el control va a la derecha, sin relleno propio */
.vg-cell .vg-input,.vg-cell .vg-select{flex:1 1 50%;width:auto;min-height:0;padding:0;background-color:transparent;text-align:end;border-radius:0}
.vg-cell .vg-select{padding-inline-end:22px;background-position:right 0 center}
.vg-cell .vg-input:focus,.vg-cell .vg-select:focus,.vg-cell .vg-input:focus-visible,.vg-cell .vg-select:focus-visible{box-shadow:none}
.vg-cell.is-field .vg-input{text-align:start}
.vg-search{display:block;box-sizing:border-box;width:100%;min-height:var(--ios-hit);margin:0;padding:10px 14px 10px 38px;
  font:var(--ios-w-regular) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);color:var(--ios-label);caret-color:var(--ios-blue);
  background:var(--ios-fill) var(--ios-ic-search) no-repeat 13px center/17px 17px;border:0;border-radius:var(--ios-r-full);box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
.vg-search::placeholder{color:var(--ios-label-2);opacity:1}
.vg-search:focus-visible,.vg-search:focus{box-shadow:0 0 0 2px var(--ios-focus-ring)}
.vg-search::-webkit-search-decoration{-webkit-appearance:none}

/* ---- 6 interruptor (UISwitch 51×31): input[type=checkbox].vg-toggle o button[role=switch].vg-toggle ------------------ */
.vg-toggle{position:relative;flex:none;box-sizing:border-box;display:inline-block;width:51px;min-width:51px;height:31px;min-height:31px;margin:0;padding:0;
  border:0;border-radius:var(--ios-r-full);background:var(--ios-fill-2);box-shadow:none;cursor:pointer;vertical-align:middle;-webkit-appearance:none;appearance:none;
  transition:background-color .2s var(--ios-ease)}
.vg-toggle::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04);transition:transform .2s var(--ios-ease)}
.vg-toggle::after{content:"";position:absolute;inset:-7px -2px}   /* 44 px de área táctil */
.vg-toggle:is(:checked,[aria-checked="true"],[aria-pressed="true"]){background:var(--ios-green)}
.vg-toggle:is(:checked,[aria-checked="true"],[aria-pressed="true"])::before{transform:translateX(20px)}
.vg-toggle:disabled{opacity:.4;cursor:default}
.vg-toggle:focus-visible{outline:3px solid var(--ios-blue);outline-offset:2px}

/* ---- 6b selección múltiple (lista con círculo, como Mail en edición): input[type=checkbox].vg-check -------------------- */
.vg-check{position:relative;flex:none;box-sizing:border-box;display:inline-grid;place-items:center;width:22px;min-width:22px;height:22px;min-height:22px;margin:0;padding:0;
  border:1.5px solid var(--ios-label-3);border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;vertical-align:middle;-webkit-appearance:none;appearance:none}
.vg-check::before{content:"";width:12px;height:10px;background:var(--ios-on-accent);-webkit-mask:var(--ios-ic-check) center/contain no-repeat;mask:var(--ios-ic-check) center/contain no-repeat;opacity:0}
.vg-check:checked{border-color:var(--ios-blue);background:var(--ios-blue)}
.vg-check:checked::before{opacity:1}
.vg-check:disabled{opacity:.4;cursor:default}
.vg-check:focus-visible{outline:3px solid var(--ios-blue);outline-offset:2px}

/* ---- 7 control segmentado (cápsula; el elegido es la pastilla blanca / #636366, no negra ni azul) ------------------- */
.vg-segmented{display:flex;align-items:stretch;gap:2px;box-sizing:border-box;width:100%;min-height:36px;margin:0;padding:2px;
  background:var(--ios-fill);border:0;border-radius:var(--ios-r-full);box-shadow:none}
.vg-segmented.is-fit{display:inline-flex;width:auto}
.vg-segmented>:is(button,a,label){position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:32px;margin:0;padding:0 12px;
  font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label);text-align:center;text-decoration:none;white-space:nowrap;
  background:transparent;border:0;border-radius:var(--ios-r-full);box-shadow:none;cursor:pointer;transition:background-color .2s var(--ios-ease),box-shadow .2s var(--ios-ease)}
.vg-segmented>:is(button,a,label)::after{content:"";position:absolute;inset:-6px 0}   /* 32 + 12 = 44 px táctiles */
.vg-segmented>:is(button,a,label):is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-current="page"],[aria-current="true"],.is-selected),
.vg-segmented>label:has(>input:checked){background:var(--ios-seg-thumb);font-weight:var(--ios-w-semibold);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.vg-segmented>label>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.vg-segmented>:disabled{opacity:.4;cursor:default}

/* ---- 8 stepper (− | +): radio 8, relleno terciario ------------------------------------------------------------------ */
.vg-stepper{display:inline-flex;align-items:stretch;flex:none;height:32px;background:var(--ios-fill);border-radius:var(--ios-r-s);overflow:visible}
.vg-stepper>button{position:relative;display:grid;place-items:center;width:47px;min-width:47px;height:32px;min-height:32px;margin:0;padding:0;
  font:var(--ios-w-regular) 22px/1 var(--ios-font);color:var(--ios-label);background:transparent;border:0;border-radius:var(--ios-r-s);box-shadow:none;cursor:pointer}
.vg-stepper>button+button{border-inline-start:.5px solid var(--ios-separator);border-radius:0 var(--ios-r-s) var(--ios-r-s) 0}
.vg-stepper>button::after{content:"";position:absolute;inset:-6px 0}
.vg-stepper>button:active:not(:disabled){background:var(--ios-fill-4)}
.vg-stepper>button:disabled{color:var(--ios-label-3);cursor:default}

/* ---- 9 botones: filled (principal) · tinted (secundario) · plain (texto) · destructive ------------------------------ */
.vg-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:auto;min-width:var(--ios-hit);min-height:var(--ios-hit);margin:0;padding:0 16px;
  font:var(--ios-w-semibold) var(--ios-t-body)/var(--ios-lh-body) var(--ios-font);letter-spacing:0;text-transform:none;text-align:center;text-decoration:none;white-space:normal;
  color:var(--ios-blue-text);background:var(--ios-blue-tint);border:0;border-radius:var(--ios-r);box-shadow:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:filter .12s var(--ios-ease),opacity .12s var(--ios-ease)}
.vg-button.is-filled{color:var(--ios-on-accent);background:var(--ios-blue-fill)}
.vg-button.is-tinted{color:var(--ios-blue-text);background:var(--ios-blue-tint)}
.vg-button.is-gray{color:var(--ios-label);background:var(--ios-fill)}
.vg-button.is-plain{color:var(--ios-blue-text);background:transparent;padding-inline:8px}
.vg-button.is-destructive{color:var(--ios-red-text);background:var(--ios-red-tint)}
.vg-button.is-destructive.is-filled{color:var(--ios-on-accent);background:var(--ios-red-fill)}
.vg-button.is-destructive.is-plain{background:transparent}
.vg-button.is-large{min-height:50px}
.vg-button.is-small{min-height:34px;padding:0 14px;font-size:var(--ios-t-subhead);line-height:var(--ios-lh-subhead);border-radius:var(--ios-r-full);position:relative}
.vg-button.is-small::after{content:"";position:absolute;inset:-5px 0}
.vg-button.is-capsule{border-radius:var(--ios-r-full)}
.vg-button.is-block{display:flex;width:100%}
.vg-button>svg{width:20px;height:20px;flex:none}
.vg-button:active:not(:disabled):not([aria-disabled="true"]){filter:brightness(.9)}
.vg-button.is-plain:active:not(:disabled){filter:none;opacity:.5}
.vg-button:disabled,.vg-button[aria-disabled="true"]{opacity:.4;cursor:default}
.vg-button:focus-visible{outline:3px solid var(--ios-blue);outline-offset:2px}
/* botón redondo de icono (cabeceras): 44 px, neutro o teñido */
.vg-icon-button{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:var(--ios-hit);min-width:var(--ios-hit);height:var(--ios-hit);min-height:var(--ios-hit);margin:0;padding:0;
  color:var(--ios-blue);background:var(--ios-fill);border:0;border-radius:50%;box-shadow:none;cursor:pointer}
.vg-icon-button.is-plain{background:transparent}
.vg-icon-button>svg{width:22px;height:22px}
.vg-icon-button:active:not(:disabled){filter:brightness(.9)}

/* ---- 10 estado de solo lectura: texto secundario con punto de color (nunca una pastilla) ---------------------------- */
.vg-status{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);
  color:var(--ios-label-2);letter-spacing:0;text-transform:none;white-space:normal;background:none;border:0;border-radius:0;padding:0;box-shadow:none;vertical-align:baseline}
.vg-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--vg-dot,var(--ios-gray))}
.vg-status.is-plain::before{display:none}
.vg-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--vg-dot,var(--ios-gray));vertical-align:middle}
:is(.vg-status,.vg-dot).is-ok{--vg-dot:var(--ios-green)}
:is(.vg-status,.vg-dot).is-warn{--vg-dot:var(--ios-orange)}
:is(.vg-status,.vg-dot).is-bad{--vg-dot:var(--ios-red)}
:is(.vg-status,.vg-dot).is-info{--vg-dot:var(--ios-blue)}
:is(.vg-status,.vg-dot).is-pending{--vg-dot:var(--ios-yellow)}
:is(.vg-status,.vg-dot).is-off{--vg-dot:var(--ios-gray)}
/* insignia de notificación (contador rojo): sólo para avisos sin leer */
.vg-badge{display:inline-grid;place-items:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;font:var(--ios-w-semibold) var(--ios-t-caption1)/1 var(--ios-font);
  font-variant-numeric:tabular-nums;color:#fff;background:var(--ios-red);border-radius:var(--ios-r-full)}

/* ---- 11 chip de filtro (se toca): cápsula; elegido = azul teñido ---------------------------------------------------- */
.vg-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:auto;min-height:32px;margin:0;padding:0 14px;
  font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font);color:var(--ios-label);white-space:nowrap;text-decoration:none;
  background:var(--ios-fill);border:0;border-radius:var(--ios-r-full);box-shadow:none;cursor:pointer;touch-action:manipulation}
.vg-chip::after{content:"";position:absolute;inset:-6px 0}
.vg-chip:active:not(:disabled){filter:brightness(.92)}
/* ---- 12 estado elegido teñido (chips, botones de opción, filas resaltadas) ----------------------------------------- */
.vg-chip:is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-current="page"],[aria-current="true"],.is-selected),
.vg-selected{color:var(--ios-blue-text);background:var(--ios-blue-tint);font-weight:var(--ios-w-semibold)}

/* ---- 13 barra de pestañas y barra de navegación (material del sistema, sin pastilla en la pestaña actual) ---------- */
.vg-tabbar{display:flex;align-items:stretch;justify-content:space-around;box-sizing:border-box;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);
  background:var(--ios-bar);border:0;border-top:.5px solid var(--ios-separator);border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
.vg-tabbar>:is(a,button){flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:49px;margin:0;padding:4px 2px;
  font:var(--ios-w-semibold) var(--ios-t-caption2)/var(--ios-lh-caption2) var(--ios-font);color:var(--ios-label-2);text-decoration:none;
  background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer}
.vg-tabbar>:is(a,button)>svg{width:25px;height:25px}
.vg-tabbar>:is(a,button):is([aria-current="page"],[aria-current="true"],[aria-selected="true"],.is-selected){color:var(--ios-blue)}
.vg-navbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;margin:0;padding:env(safe-area-inset-top,0px) 8px 0;
  background:var(--ios-bar);border:0;border-bottom:.5px solid var(--ios-separator);border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
.vg-navbar-title{flex:1 1 auto;min-width:0;margin:0;text-align:center;font:var(--ios-w-semibold) var(--ios-t-headline)/var(--ios-lh-headline) var(--ios-font);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 14 hoja (sheet) y aviso flotante ------------------------------------------------------------------------------ */
.vg-sheet{box-sizing:border-box;background:var(--ios-sheet);color:var(--ios-label);border:0;border-radius:var(--ios-r) var(--ios-r) 0 0;box-shadow:var(--ios-shadow-pop)}
.vg-sheet-grabber{display:block;width:36px;height:5px;margin:6px auto 0;border-radius:3px;background:var(--ios-label-3)}
.vg-popover{box-sizing:border-box;background:var(--ios-popover);color:var(--ios-label);border:0;border-radius:var(--ios-r);box-shadow:var(--ios-shadow-pop)}

/* ---- 15 movimiento reducido --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .vg-toggle,.vg-toggle::before,.vg-segmented>*,.vg-button{transition:none}
}
/* ---- 16 colores forzados (Windows alto contraste): los controles conservan su borde ------------------------------ */
@media (forced-colors: active){
  .vg-input,.vg-select,.vg-search,.vg-toggle,.vg-segmented,.vg-button,.vg-chip{border:1px solid ButtonText}
  .vg-check:checked{background:Highlight}
  .vg-segmented>:is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]){outline:2px solid Highlight}
}