/*! Gobernación del Magdalena · Identidad Visual 2026 · v1.0.0 (cdn/v1)
   Generado desde tools/tokens.py — NO editar a mano.
   Dev. Ing. Daniel Cabarcas · 2026 */
/* Montserrat (SIL OFL 1.1) autohospedada en ./fonts — sin depender de Google Fonts */
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(./fonts/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(./fonts/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* Paleta oficial */
  --mg-primary: #0071BB;
  --mg-primary-rgb: 0, 113, 187;
  --mg-cyan: #00B7D9;
  --mg-cyan-rgb: 0, 183, 217;
  --mg-sky: #9FD7E5;
  --mg-sky-rgb: 159, 215, 229;
  --mg-red: #F7003C;
  --mg-red-rgb: 247, 0, 60;
  --mg-yellow: #FEC800;
  --mg-yellow-rgb: 254, 200, 0;
  --mg-green: #69B75E;
  --mg-green-rgb: 105, 183, 94;
  --mg-olive: #A28034;
  --mg-olive-rgb: 162, 128, 52;
  --mg-purple: #5618BA;
  --mg-purple-rgb: 86, 24, 186;
  --mg-ink: #1D1D1B;
  --mg-ink-rgb: 29, 29, 27;
  --mg-gray: #606060;
  --mg-gray-rgb: 96, 96, 96;
  --mg-surface: #F6F5F5;
  --mg-surface-rgb: 246, 245, 245;
  --mg-white: #FFFFFF;
  --mg-white-rgb: 255, 255, 255;
  /* Escalas tonales (500 = color oficial) */
  --mg-primary-50: #EBF4FA;
  --mg-primary-100: #D6E8F4;
  --mg-primary-200: #ADD2E9;
  --mg-primary-300: #80B8DD;
  --mg-primary-400: #4094CC;
  --mg-primary-500: #0071BB;
  --mg-primary-600: #0061A1;
  --mg-primary-700: #004F83;
  --mg-primary-800: #003D65;
  --mg-primary-900: #002B47;
  --mg-primary-950: #001B2D;
  --mg-cyan-50: #EBF9FC;
  --mg-cyan-100: #D6F3F9;
  --mg-cyan-200: #ADE8F3;
  --mg-cyan-300: #80DBEC;
  --mg-cyan-400: #40C9E2;
  --mg-cyan-500: #00B7D9;
  --mg-cyan-600: #009DBB;
  --mg-cyan-700: #008098;
  --mg-cyan-800: #006375;
  --mg-cyan-900: #004652;
  --mg-cyan-950: #002C34;
  --mg-sky-50: #F7FCFD;
  --mg-sky-100: #F0F9FB;
  --mg-sky-200: #E0F2F7;
  --mg-sky-300: #CFEBF2;
  --mg-sky-400: #B7E1EC;
  --mg-sky-500: #9FD7E5;
  --mg-sky-600: #89B9C5;
  --mg-sky-700: #6F96A0;
  --mg-sky-800: #56747C;
  --mg-sky-900: #3C5257;
  --mg-sky-950: #263437;
  --mg-red-50: #FEEBEF;
  --mg-red-100: #FED6E0;
  --mg-red-200: #FCADC1;
  --mg-red-300: #FB809E;
  --mg-red-400: #F9406D;
  --mg-red-500: #F7003C;
  --mg-red-600: #D40034;
  --mg-red-700: #AD002A;
  --mg-red-800: #850020;
  --mg-red-900: #5E0017;
  --mg-red-950: #3B000E;
  --mg-yellow-50: #FFFBEB;
  --mg-yellow-100: #FFF6D6;
  --mg-yellow-200: #FFEDAD;
  --mg-yellow-300: #FEE480;
  --mg-yellow-400: #FED640;
  --mg-yellow-500: #FEC800;
  --mg-yellow-600: #DAAC00;
  --mg-yellow-700: #B28C00;
  --mg-yellow-800: #896C00;
  --mg-yellow-900: #614C00;
  --mg-yellow-950: #3D3000;
  --mg-green-50: #F3F9F2;
  --mg-green-100: #E7F3E5;
  --mg-green-200: #CFE8CB;
  --mg-green-300: #B4DBAE;
  --mg-green-400: #8EC986;
  --mg-green-500: #69B75E;
  --mg-green-600: #5A9D51;
  --mg-green-700: #4A8042;
  --mg-green-800: #396333;
  --mg-green-900: #284624;
  --mg-green-950: #192C17;
  --mg-olive-50: #F8F5EF;
  --mg-olive-100: #F0EBDF;
  --mg-olive-200: #E1D6BE;
  --mg-olive-300: #D0C09A;
  --mg-olive-400: #B9A067;
  --mg-olive-500: #A28034;
  --mg-olive-600: #8B6E2D;
  --mg-olive-700: #715A24;
  --mg-olive-800: #57451C;
  --mg-olive-900: #3E3114;
  --mg-olive-950: #271F0C;
  --mg-purple-50: #F1EDF9;
  --mg-purple-100: #E4DAF4;
  --mg-purple-200: #C9B5E9;
  --mg-purple-300: #AA8CDC;
  --mg-purple-400: #8052CB;
  --mg-purple-500: #5618BA;
  --mg-purple-600: #4A15A0;
  --mg-purple-700: #3C1182;
  --mg-purple-800: #2E0D64;
  --mg-purple-900: #210947;
  --mg-purple-950: #15062D;
  --mg-gray-50: #F8FAFC;
  --mg-gray-100: #F1F4F8;
  --mg-gray-200: #E3E8EF;
  --mg-gray-300: #CBD2DC;
  --mg-gray-400: #97A1B0;
  --mg-gray-500: #6B7482;
  --mg-gray-600: #4F5866;
  --mg-gray-700: #3A424F;
  --mg-gray-800: #252B36;
  --mg-gray-900: #161A22;
  --mg-gray-950: #0C0F14;
  --mg-navy-600: #12395C;
  --mg-navy-700: #0E2D49;
  --mg-navy-800: #0B2239;
  --mg-navy-900: #081A2C;
  --mg-navy-950: #051220;
  /* Degradados */
  --mg-gradient-primary: linear-gradient(135deg, #0071BB 0%, #00B7D9 100%);
  --mg-gradient-primary-h: linear-gradient(90deg, #0071BB 0%, #00B7D9 100%);
  --mg-gradient-primary-v: linear-gradient(180deg, #0071BB 0%, #00B7D9 100%);
  --mg-gradient-sky: linear-gradient(135deg, #0071BB 0%, #00B7D9 55%, #9FD7E5 100%);
  --mg-gradient-sky-h: linear-gradient(90deg, #0071BB 0%, #00B7D9 55%, #9FD7E5 100%);
  --mg-gradient-aqua: linear-gradient(135deg, #00B7D9 0%, #9FD7E5 100%);
  --mg-gradient-mist: linear-gradient(180deg, #9FD7E5 0%, #EAF6FA 100%);
  --mg-gradient-deep: linear-gradient(180deg, #081A2C 0%, #051220 100%);
  --mg-gradient-night: linear-gradient(135deg, #0B2239 0%, #051220 100%);
  --mg-gradient-steel: linear-gradient(180deg, #147CC0 0%, #0071BB 100%);
  --mg-gradient-action: linear-gradient(180deg, #147CC0 0%, #0071BB 100%);
  --mg-gradient-action-aa: linear-gradient(180deg, #147CC0 0%, #0071BB 100%);
  --mg-gradient-tropical: linear-gradient(135deg, #00B7D9 0%, #69B75E 100%);
  --mg-gradient-sun: linear-gradient(135deg, #FEC800 0%, #DAAC00 100%);
  --mg-gradient-heat: linear-gradient(135deg, #F7003C 0%, #AD002A 100%);
  --mg-gradient-earth: linear-gradient(135deg, #A28034 0%, #715A24 100%);
  --mg-gradient-violet: linear-gradient(135deg, #5618BA 0%, #0071BB 100%);
  --mg-gradient-stripe: linear-gradient(90deg, #5618BA 0.0% 11.111%, #A28034 11.111% 22.222%, #FEC800 22.222% 33.333%, #F7003C 33.333% 44.444%, #0071BB 44.444% 55.556%, #00B7D9 55.556% 66.667%, #9FD7E5 66.667% 77.778%, #69B75E 77.778% 88.889%, #5618BA 88.889% 100.0%);
  --mg-gradient-stripe-v: linear-gradient(180deg, #5618BA 0.0% 11.111%, #A28034 11.111% 22.222%, #FEC800 22.222% 33.333%, #F7003C 33.333% 44.444%, #0071BB 44.444% 55.556%, #00B7D9 55.556% 66.667%, #9FD7E5 66.667% 77.778%, #69B75E 77.778% 88.889%, #5618BA 88.889% 100.0%);
  --mg-gradient-stripe-flow: linear-gradient(90deg, #5618BA, #A28034, #FEC800, #F7003C, #0071BB, #00B7D9, #9FD7E5, #69B75E, #5618BA);
  /* Semánticos de interfaz */
  --mg-bg: #ffffff;
  --mg-bg-app: #F1F4F8;
  --mg-surface-card: #ffffff;
  --mg-text: #252B36;
  --mg-text-muted: #4F5866;
  --mg-heading: #161A22;
  --mg-border: #E3E8EF;
  --mg-border-strong: #CBD2DC;
  /* Cristal (glassmorphism sobrio) */
  --mg-glass-bg: rgba(255, 255, 255, .72);
  --mg-glass-bg-dark: rgba(8, 26, 44, .62);
  --mg-glass-border: rgba(255, 255, 255, .45);
  --mg-glass-border-dark: rgba(255, 255, 255, .10);
  --mg-glass-blur: blur(14px) saturate(160%);
  /* Sidebar oscuro */
  --mg-sidebar-bg: var(--mg-gradient-deep);
  --mg-sidebar-text: rgba(255, 255, 255, .68);
  --mg-sidebar-text-active: #ffffff;
  --mg-sidebar-hover: rgba(255, 255, 255, .06);
  --mg-sidebar-active: rgba(0, 183, 217, .14);
  --mg-sidebar-accent: var(--mg-cyan);
  --mg-color-primary: #0071BB;
  --mg-on-primary: #FFFFFF;
  --mg-color-secondary: #606060;
  --mg-on-secondary: #FFFFFF;
  --mg-color-info: #00B7D9;
  --mg-on-info: #1D1D1B;
  --mg-color-success: #69B75E;
  --mg-on-success: #1D1D1B;
  --mg-color-warning: #FEC800;
  --mg-on-warning: #1D1D1B;
  --mg-color-danger: #F7003C;
  --mg-on-danger: #FFFFFF;
  /* Tipografía, radios y sombras */
  --mg-font-sans: 'Montserrat', 'Gotham', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mg-font-display: 'Montserrat', 'Gotham', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mg-radius-sm: 4px;
  --mg-radius-md: 8px;
  --mg-radius-lg: 12px;
  --mg-radius-xl: 16px;
  --mg-radius-pill: 999px;
  --mg-shadow-sm: 0 1px 2px rgba(8,26,44,.06);
  --mg-shadow-md: 0 2px 6px rgba(8,26,44,.08), 0 1px 2px rgba(8,26,44,.05);
  --mg-shadow-lg: 0 12px 28px rgba(8,26,44,.14), 0 2px 6px rgba(8,26,44,.06);
  --mg-shadow-glow: 0 0 0 3px rgba(0,113,187,.22);
}
/* ---------- Capa --gob-*: alias del sistema de diseño (la fuente son los --mg-*) ---------- */
:root {
  --gob-color-primario: var(--mg-primary);
  --gob-color-cian: var(--mg-cyan);
  --gob-color-celeste: var(--mg-sky);
  --gob-color-rojo: var(--mg-red);
  --gob-color-amarillo: var(--mg-yellow);
  --gob-color-verde: var(--mg-green);
  --gob-color-ocre: var(--mg-olive);
  --gob-color-violeta: var(--mg-purple);
  --gob-color-azul-noche: var(--mg-navy-900);
  --gob-color-texto: var(--mg-text);
  --gob-color-texto-suave: var(--mg-text-muted);
  --gob-color-fondo: var(--mg-bg-app);
  --gob-color-superficie: var(--mg-surface-card);
  --gob-color-borde: var(--mg-border);
  --gob-fuente: var(--mg-font-sans);
  --gob-radio-sm: var(--mg-radius-sm);
  --gob-radio-md: var(--mg-radius-md);
  --gob-radio-lg: var(--mg-radius-lg);
  --gob-radio-xl: var(--mg-radius-xl);
  --gob-radio-pill: var(--mg-radius-pill);
  --gob-sombra-sm: var(--mg-shadow-sm);
  --gob-sombra-md: var(--mg-shadow-md);
  --gob-sombra-lg: var(--mg-shadow-lg);
  --gob-espacio-1: 4px;
  --gob-espacio-2: 8px;
  --gob-espacio-3: 12px;
  --gob-espacio-4: 16px;
  --gob-espacio-5: 24px;
  --gob-espacio-6: 32px;
  --gob-espacio-7: 48px;
  --gob-espacio-8: 64px;
  --gob-z-base: 0;
  --gob-z-sticky: 100;
  --gob-z-menu: 200;
  --gob-z-overlay: 800;
  --gob-z-modal: 1000;
  --gob-z-tooltip: 1100;
  --gob-z-toast: 1200;
  --gob-bp-sm: 480px; /* referencia: las media queries no admiten variables */
  --gob-bp-md: 768px; /* referencia: las media queries no admiten variables */
  --gob-bp-lg: 1024px; /* referencia: las media queries no admiten variables */
  --gob-bp-xl: 1280px; /* referencia: las media queries no admiten variables */
  --gob-bp-xxl: 1920px; /* referencia: las media queries no admiten variables */
}
/* Modo oscuro (beta): active con <html data-gob-tema="oscuro"> o la clase .gob-tema-oscuro */
:root[data-gob-tema="oscuro"], .gob-tema-oscuro {
  color-scheme: dark;
  --mg-bg: #051220; --mg-bg-app: #051220; --mg-surface-card: #0B2239; --mg-surface: #0B2239;
  --mg-text: #E3E8EF; --mg-text-muted: #97A1B0; --mg-heading: #FFFFFF;
  --mg-border: #12395C; --mg-border-strong: #1B4B75;
  --mg-glass-bg: rgba(8, 26, 44, .72); --mg-glass-border: rgba(255, 255, 255, .10);
  --mg-gray-50: #0E2D49; --mg-gray-100: #0E2D49; --mg-gray-200: #12395C;
  --mg-gray-600: #CBD2DC; --mg-gray-700: #E3E8EF; --mg-gray-800: #F1F4F8; --mg-gray-900: #FFFFFF;
  --mg-primary-50: rgba(0, 183, 217, .12); --mg-primary-700: #80DBEC;
}

/* ==========================================================================
   COMPONENTES Y UTILIDADES  ·  prefijo mg-  ·  independiente de framework
   Estilo: sobrio, corporativo. Superficies blancas/azul-noche, cristal sutil,
   color de marca solo en acentos. Usa únicamente variables --mg-*.
   ========================================================================== */

/* ---------- Base (opt-in con la clase .mg-base en <body> o <html>) ---------- */
:where(.mg-base), :where(.mg-base) body { font-family: var(--mg-font-sans); color: var(--mg-text); background: var(--mg-bg-app); line-height: 1.55; -webkit-font-smoothing: antialiased; }
:where(.mg-base) *, :where(.mg-base) *::before, :where(.mg-base) *::after { box-sizing: border-box; }
:where(.mg-base) :is(h1, h2, h3, h4), .mg-h1, .mg-h2, .mg-h3, .mg-h4 { font-family: var(--mg-font-display); color: var(--mg-heading); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; }
:where(.mg-base) h1, .mg-h1 { font-weight: 800; font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); }
:where(.mg-base) h2, .mg-h2 { font-weight: 700; font-size: clamp(1.4rem, 1.5vw + 1rem, 1.9rem); }
:where(.mg-base) h3, .mg-h3 { font-weight: 700; font-size: 1.2rem; }
:where(.mg-base) h4, .mg-h4 { font-weight: 600; font-size: 1.0625rem; }
:where(.mg-base) a:not([class]), .mg-link { color: var(--mg-primary); text-decoration-thickness: .06em; text-underline-offset: .2em; }
:where(.mg-base) a:not([class]):hover, .mg-link:hover { color: var(--mg-primary-700); }
:where(.mg-base) :focus-visible, .mg-focusable:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: 2px; }
:where(.mg-base) ::selection { background: var(--mg-sky); color: var(--mg-ink); }

/* Rótulo de sección (eyebrow) y subrayado corto */
.mg-eyebrow { font-family: var(--mg-font-sans); font-weight: 700; color: var(--mg-primary); font-size: .75rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.mg-title-underline { position: relative; padding-bottom: .55em; }
.mg-title-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--mg-primary); }

/* ---------- Utilidades: fondos degradados (uso puntual: banners, ilustraciones) ---------- */
.mg-bg-primary    { background: var(--mg-gradient-primary); color: #fff; }
.mg-bg-primary-h  { background: var(--mg-gradient-primary-h); color: #fff; }
.mg-bg-primary-v  { background: var(--mg-gradient-primary-v); color: #fff; }
.mg-bg-sky        { background: var(--mg-gradient-sky); color: #fff; }
.mg-bg-sky-h      { background: var(--mg-gradient-sky-h); color: #fff; }
.mg-bg-aqua       { background: var(--mg-gradient-aqua); color: var(--mg-ink); }
.mg-bg-mist       { background: var(--mg-gradient-mist); color: var(--mg-ink); }
.mg-bg-deep       { background: var(--mg-gradient-deep); color: #fff; }
.mg-bg-night      { background: var(--mg-gradient-night); color: #fff; }
.mg-bg-steel      { background: var(--mg-gradient-steel); color: #fff; }
.mg-bg-action     { background: var(--mg-gradient-action); color: #fff; }
.mg-bg-tropical   { background: var(--mg-gradient-tropical); color: var(--mg-ink); }
.mg-bg-sun        { background: var(--mg-gradient-sun); color: var(--mg-ink); }
.mg-bg-heat       { background: var(--mg-gradient-heat); color: #fff; }
.mg-bg-earth      { background: var(--mg-gradient-earth); color: #fff; }
.mg-bg-violet     { background: var(--mg-gradient-violet); color: #fff; }
.mg-bg-stripe     { background: var(--mg-gradient-stripe); }
.mg-bg-surface    { background: var(--mg-surface); } .mg-bg-app { background: var(--mg-bg-app); }
.mg-text-gradient, .mg-text-gradient-sky { background: var(--mg-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mg-text-gradient-sky { background-image: var(--mg-gradient-sky-h); }
.mg-text-primary { color: var(--mg-primary); } .mg-text-cyan { color: var(--mg-cyan-700); } .mg-text-red { color: var(--mg-red); }
.mg-text-yellow { color: var(--mg-yellow-800); } .mg-text-green { color: var(--mg-green-700); } .mg-text-gray { color: var(--mg-text-muted); } .mg-text-ink { color: var(--mg-ink); } .mg-text-muted { color: var(--mg-text-muted); }
.mg-bg-flat-primary { background: var(--mg-primary); color: #fff; } .mg-bg-flat-cyan { background: var(--mg-cyan); color: var(--mg-ink); }
.mg-bg-flat-sky { background: var(--mg-sky); color: var(--mg-ink); } .mg-bg-flat-red { background: var(--mg-red); color: #fff; }
.mg-bg-flat-yellow { background: var(--mg-yellow); color: var(--mg-ink); } .mg-bg-flat-green { background: var(--mg-green); color: var(--mg-ink); }
.mg-bg-flat-olive { background: var(--mg-olive); color: #fff; } .mg-bg-flat-purple { background: var(--mg-purple); color: #fff; } .mg-bg-flat-navy { background: var(--mg-navy-900); color: #fff; }

/* ---------- Cristal (glassmorphism sobrio) ---------- */
.mg-glass { background: var(--mg-glass-bg); -webkit-backdrop-filter: var(--mg-glass-blur); backdrop-filter: var(--mg-glass-blur); border: 1px solid var(--mg-glass-border); box-shadow: var(--mg-shadow-md); border-radius: var(--mg-radius-lg); }
.mg-glass-dark { background: var(--mg-glass-bg-dark); -webkit-backdrop-filter: var(--mg-glass-blur); backdrop-filter: var(--mg-glass-blur); border: 1px solid var(--mg-glass-border-dark); color: #fff; border-radius: var(--mg-radius-lg); }

/* ---------- LA LÍNEA (franja multicolor del logotipo) · firma discreta ---------- */
.mg-stripe { display: block; height: var(--mg-stripe-h, 3px); width: 100%; background: var(--mg-gradient-stripe); border: 0; margin: 0; }
.mg-stripe--thin { --mg-stripe-h: 2px; } .mg-stripe--thick { --mg-stripe-h: 5px; } .mg-stripe--xl { --mg-stripe-h: 10px; }
.mg-stripe--v { width: var(--mg-stripe-h, 3px); height: 100%; background: var(--mg-gradient-stripe-v); }
.mg-stripe--flow { background: var(--mg-gradient-stripe-flow); }
.mg-stripe--blue { background: var(--mg-gradient-primary-h); }
.mg-stripe-top, .mg-stripe-bottom { position: relative; }
.mg-stripe-top::before, .mg-stripe-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: var(--mg-stripe-h, 3px); background: var(--mg-gradient-stripe); pointer-events: none; }
.mg-stripe-top::before { top: 0; } .mg-stripe-bottom::after { bottom: 0; }
.mg-frame { --mg-frame-w: 2px; --mg-frame-gradient: var(--mg-gradient-primary); position: relative; border: var(--mg-frame-w) solid transparent; border-radius: var(--mg-radius-md); background: linear-gradient(var(--mg-surface-card), var(--mg-surface-card)) padding-box, var(--mg-frame-gradient) border-box; }
.mg-frame--sky { --mg-frame-gradient: var(--mg-gradient-sky); } .mg-frame--stripe { --mg-frame-gradient: var(--mg-gradient-stripe-flow); } .mg-frame--thick { --mg-frame-w: 4px; }
.mg-divider { height: 3px; width: 2.5rem; border-radius: 2px; background: var(--mg-primary); border: 0; margin: 1rem 0; }
.mg-divider--stripe { width: 100%; height: 3px; background: var(--mg-gradient-stripe); border-radius: 0; }
.mg-divider--line { width: 100%; height: 1px; background: var(--mg-border); }

/* ---------- Formas decorativas ---------- */
.mg-shapes { position: relative; overflow: hidden; isolation: isolate; }
.mg-shapes::before, .mg-shapes::after { content: ""; position: absolute; z-index: -1; background: rgba(255,255,255,.5); transform: skewX(-18deg); pointer-events: none; }
.mg-shapes::before { width: 22%; height: 140%; top: -20%; left: 8%; } .mg-shapes::after { width: 10%; height: 140%; top: -20%; right: 6%; background: rgba(0,113,187,.05); }
.mg-shapes--dark::before { background: rgba(255,255,255,.05); } .mg-shapes--dark::after { background: rgba(255,255,255,.03); }
.mg-logo-pill { display: inline-flex; align-items: center; gap: .75rem; background: var(--mg-surface-card); padding: .6rem 1.25rem; border-radius: var(--mg-radius-pill); box-shadow: var(--mg-shadow-md); }
.mg-logo-pill img { height: 2.25rem; width: auto; display: block; }

/* ---------- Botones ---------- */
.mg-btn { --_bg: var(--mg-gradient-action); --_fg: #fff; --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .875rem/1.2 var(--mg-font-sans); padding: .6rem 1.15rem; border-radius: var(--mg-radius-md); border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg); cursor: pointer; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s; box-shadow: var(--mg-shadow-sm); }
.mg-btn:hover { filter: brightness(.93); box-shadow: var(--mg-shadow-md); color: var(--_fg); }
.mg-btn:active { filter: brightness(.88); box-shadow: none; }
.mg-btn:focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
.mg-btn[disabled], .mg-btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }
.mg-btn--primary { --_bg: var(--mg-gradient-action); } .mg-btn--aa { --_bg: var(--mg-gradient-action); } .mg-btn--flat { --_bg: var(--mg-primary); }
.mg-btn--dark { --_bg: var(--mg-navy-900); --_fg: #fff; }
.mg-btn--secondary { --_bg: #fff; --_fg: var(--mg-gray-700); --_bd: var(--mg-border-strong); box-shadow: var(--mg-shadow-sm); } .mg-btn--secondary:hover { --_bg: var(--mg-gray-50); filter: none; }
.mg-btn--cyan { --_bg: var(--mg-cyan); --_fg: var(--mg-ink); } .mg-btn--sky { --_bg: var(--mg-sky); --_fg: var(--mg-ink); }
.mg-btn--danger { --_bg: var(--mg-red-600); } .mg-btn--accent { --_bg: var(--mg-yellow); --_fg: var(--mg-ink); } .mg-btn--success { --_bg: var(--mg-green-700); --_fg: #fff; }
.mg-btn--outline { --_bg: transparent; --_fg: var(--mg-primary); --_bd: var(--mg-primary); box-shadow: none; } .mg-btn--outline:hover { --_bg: var(--mg-primary-50); filter: none; box-shadow: none; }
.mg-btn--ghost { --_bg: transparent; --_fg: var(--mg-primary); box-shadow: none; } .mg-btn--ghost:hover { --_bg: var(--mg-primary-50); filter: none; box-shadow: none; }
.mg-btn--on-dark { --_bg: rgba(255,255,255,.1); --_fg: #fff; --_bd: rgba(255,255,255,.28); box-shadow: none; } .mg-btn--on-dark:hover { --_bg: rgba(255,255,255,.18); filter: none; }
.mg-btn--sm { padding: .35rem .75rem; font-size: .8125rem; } .mg-btn--lg { padding: .8rem 1.6rem; font-size: 1rem; }
.mg-btn--block { display: flex; width: 100%; } .mg-btn--pill { border-radius: var(--mg-radius-pill); } .mg-btn--square { border-radius: var(--mg-radius-sm); }

/* ---------- Tarjetas ---------- */
.mg-card { position: relative; background: var(--mg-surface-card); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-sm); overflow: hidden; }
.mg-card__body { padding: 1.25rem 1.5rem; } .mg-card__footer { padding: .85rem 1.5rem; border-top: 1px solid var(--mg-border); background: var(--mg-gray-50); }
.mg-card__header { padding: .95rem 1.5rem; font-weight: 600; font-family: var(--mg-font-display); border-bottom: 1px solid var(--mg-border); color: var(--mg-heading); }
.mg-card__header--gradient, .mg-card__header--dark { background: var(--mg-gradient-night); color: #fff; border-bottom: 0; }
.mg-card__header--sky { background: var(--mg-primary-50); color: var(--mg-primary-800); }
.mg-card--stripe-top::before, .mg-card--stripe-bottom::after { content: ""; display: block; height: 3px; background: var(--mg-gradient-stripe); }
.mg-card--accent-top::before { content: ""; display: block; height: 3px; background: var(--mg-primary); }
.mg-card--accent { border-left: 4px solid var(--mg-primary); } .mg-card--accent-cyan { border-left: 4px solid var(--mg-cyan); }
.mg-card--accent-red { border-left: 4px solid var(--mg-red); } .mg-card--accent-yellow { border-left: 4px solid var(--mg-yellow); } .mg-card--accent-green { border-left: 4px solid var(--mg-green); }
.mg-card--gradient, .mg-card--dark { background: var(--mg-gradient-night); color: #fff; border-color: transparent; } .mg-card--dark .mg-h4, .mg-card--dark h4 { color: #fff; }
.mg-card--glass { background: var(--mg-glass-bg); -webkit-backdrop-filter: var(--mg-glass-blur); backdrop-filter: var(--mg-glass-blur); border-color: var(--mg-glass-border); box-shadow: var(--mg-shadow-md); }
.mg-card--hover { transition: box-shadow .2s ease, border-color .2s ease; } .mg-card--hover:hover { box-shadow: var(--mg-shadow-lg); border-color: var(--mg-primary-200); }
.mg-card--flat { box-shadow: none; }

/* Indicador (KPI): tarjeta blanca con ícono en chip */
.mg-stat { --_c: var(--mg-primary); position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--mg-radius-lg); background: var(--mg-surface-card); border: 1px solid var(--mg-border); box-shadow: var(--mg-shadow-sm); color: var(--mg-text); }
.mg-stat__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--mg-radius-md); background: color-mix(in srgb, var(--_c) 12%, #fff); color: var(--_c); font-size: 1.25rem; font-weight: 700; }
.mg-stat__icon svg { width: 1.35rem; height: 1.35rem; }
.mg-stat__value { font: 700 1.6rem/1.1 var(--mg-font-display); color: var(--mg-heading); } .mg-stat__label { font-size: .8125rem; font-weight: 500; color: var(--mg-text-muted); }
.mg-stat__delta { font-size: .75rem; font-weight: 700; color: var(--mg-green-700); } .mg-stat__delta.is-down { color: var(--mg-red-700); }
.mg-stat--aqua { --_c: var(--mg-cyan-700); } .mg-stat--sky { --_c: var(--mg-primary); } .mg-stat--tropical { --_c: var(--mg-green-700); }
.mg-stat--sun { --_c: var(--mg-yellow-700); } .mg-stat--heat { --_c: var(--mg-red); } .mg-stat--deep { --_c: var(--mg-navy-600); }
.mg-stat--solid { background: var(--mg-gradient-night); border-color: transparent; color: #fff; } .mg-stat--solid .mg-stat__value { color: #fff; } .mg-stat--solid .mg-stat__label { color: rgba(255,255,255,.7); } .mg-stat--solid .mg-stat__icon { background: rgba(255,255,255,.1); color: var(--mg-cyan); }

/* ---------- Insignias / etiquetas ---------- */
.mg-badge { display: inline-flex; align-items: center; gap: .35rem; font: 600 .75rem/1 var(--mg-font-sans); padding: .3rem .6rem; border-radius: var(--mg-radius-pill); background: var(--mg-primary-50); color: var(--mg-primary-700); border: 1px solid var(--mg-primary-100); }
.mg-badge--solid { background: var(--mg-primary); color: #fff; border-color: transparent; } .mg-badge--gradient, .mg-badge--dark { background: var(--mg-navy-800); color: #fff; border-color: transparent; }
.mg-badge--cyan { background: var(--mg-cyan-50); color: var(--mg-cyan-800); border-color: var(--mg-cyan-100); } .mg-badge--red { background: var(--mg-red-50); color: var(--mg-red-700); border-color: var(--mg-red-100); }
.mg-badge--yellow { background: var(--mg-yellow-50); color: var(--mg-yellow-800); border-color: var(--mg-yellow-100); } .mg-badge--green { background: var(--mg-green-50); color: var(--mg-green-800); border-color: var(--mg-green-100); }
.mg-badge--purple { background: var(--mg-purple-50); color: var(--mg-purple-700); border-color: var(--mg-purple-100); } .mg-badge--gray { background: var(--mg-gray-100); color: var(--mg-gray-700); border-color: var(--mg-gray-200); }
.mg-badge--dot::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

/* ---------- Alertas ---------- */
.mg-alert { --_c: var(--mg-primary); display: flex; gap: .85rem; padding: .85rem 1rem; border-radius: var(--mg-radius-md); border: 1px solid color-mix(in srgb, var(--_c) 22%, #fff); border-left: 4px solid var(--_c); background: color-mix(in srgb, var(--_c) 6%, #fff); color: var(--mg-text); font-size: .9rem; }
.mg-alert--info { --_c: var(--mg-cyan); } .mg-alert--success { --_c: var(--mg-green); } .mg-alert--warning { --_c: var(--mg-yellow); } .mg-alert--danger { --_c: var(--mg-red); }
.mg-alert__title { font-weight: 700; margin: 0 0 .1rem; color: var(--mg-heading); }

/* ---------- Formularios ---------- */
.mg-label { display: block; font-weight: 600; font-size: .8125rem; color: var(--mg-gray-700); margin-bottom: .35rem; }
.mg-input, .mg-select, .mg-textarea { width: 100%; font: 400 .9375rem/1.4 var(--mg-font-sans); color: var(--mg-text); background-color: var(--mg-surface-card); border: 1px solid var(--mg-border-strong); border-radius: var(--mg-radius-md); padding: .55rem .8rem; transition: border-color .15s, box-shadow .15s; }
.mg-select:not([multiple], [size]) { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.mg-select:not([multiple], [size]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071BB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.mg-input::placeholder { color: var(--mg-gray-400); }
.mg-input:focus, .mg-select:focus, .mg-textarea:focus { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }
.mg-input.is-invalid { border-color: var(--mg-red); } .mg-input.is-valid { border-color: var(--mg-green); }
.mg-help { font-size: .78rem; color: var(--mg-text-muted); margin-top: .3rem; } .mg-check { accent-color: var(--mg-primary); width: 1rem; height: 1rem; }

/* ---------- Tabla ---------- */
.mg-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--mg-surface-card); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); overflow: hidden; font-size: .875rem; }
.mg-table thead th { background: var(--mg-gray-50); color: var(--mg-gray-600); text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1rem; border-bottom: 1px solid var(--mg-border); }
.mg-table td { padding: .7rem 1rem; border-top: 1px solid var(--mg-border); } .mg-table tbody tr:first-child td { border-top: 0; } .mg-table tbody tr:hover { background: var(--mg-gray-50); }

/* ---------- Navegación ---------- */
.mg-navbar { display: flex; align-items: center; gap: 1.25rem; padding: .65rem 1.5rem; background: var(--mg-glass-bg); -webkit-backdrop-filter: var(--mg-glass-blur); backdrop-filter: var(--mg-glass-blur); border-bottom: 1px solid var(--mg-border); position: relative; }
.mg-navbar--stripe::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--mg-gradient-stripe); }
.mg-navbar--dark { background: var(--mg-glass-bg-dark); color: #fff; border-bottom-color: var(--mg-glass-border-dark); } .mg-navbar--gradient { background: var(--mg-gradient-night); color: #fff; border-bottom: 0; }
.mg-navbar__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; } .mg-navbar__brand img { height: 2.5rem; width: auto; }
.mg-nav-link { color: var(--mg-gray-600); font-weight: 600; font-size: .875rem; text-decoration: none; padding: .45rem .8rem; border-radius: var(--mg-radius-md); } .mg-nav-link:hover { background: var(--mg-gray-100); color: var(--mg-gray-900); }
.mg-nav-link.is-active { background: var(--mg-primary-50); color: var(--mg-primary-700); }
.mg-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--mg-border); } .mg-tab { padding: .65rem 1rem; font: 600 .875rem var(--mg-font-sans); color: var(--mg-text-muted); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .mg-tab:hover { color: var(--mg-gray-900); } .mg-tab.is-active { color: var(--mg-primary); border-bottom-color: var(--mg-primary); }
.mg-sidebar { background: var(--mg-sidebar-bg); color: var(--mg-sidebar-text); min-height: 100%; padding: .75rem; }
.mg-sidebar__label { display: block; padding: .9rem .75rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.mg-sidebar a { display: flex; gap: .7rem; align-items: center; color: var(--mg-sidebar-text); text-decoration: none; padding: .6rem .75rem; border-radius: var(--mg-radius-md); font-weight: 500; font-size: .875rem; position: relative; }
.mg-sidebar a:hover { background: var(--mg-sidebar-hover); color: var(--mg-sidebar-text-active); }
.mg-sidebar a.is-active { background: var(--mg-sidebar-active); color: var(--mg-sidebar-text-active); font-weight: 600; } .mg-sidebar a.is-active::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--mg-sidebar-accent); }
.mg-breadcrumb { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; font-size: .8125rem; color: var(--mg-text-muted); } .mg-breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--mg-gray-300); }

/* ---------- Hero / secciones ---------- */
.mg-hero { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 420px at 88% -10%, rgba(0,183,217,.30), transparent 62%), radial-gradient(700px 420px at 8% 115%, rgba(0,113,187,.38), transparent 60%), var(--mg-gradient-night); }
.mg-hero--stripe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mg-gradient-stripe); }
.mg-hero--brand { background: var(--mg-gradient-sky); } .mg-hero--light { background: var(--mg-gradient-mist); color: var(--mg-text); }
.mg-hero h1, .mg-hero h2 { color: inherit; } .mg-hero p { opacity: .85; }
.mg-footer { background: var(--mg-navy-950); color: rgba(255,255,255,.7); padding: 2rem 1.5rem 1.5rem; position: relative; font-size: .875rem; } .mg-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mg-gradient-stripe); } .mg-footer a { color: var(--mg-sky); }

/* ---------- Progreso / avatares / chips ---------- */
.mg-progress { height: .5rem; background: var(--mg-gray-200); border-radius: var(--mg-radius-pill); overflow: hidden; } .mg-progress > span { display: block; height: 100%; width: var(--value, 50%); background: var(--mg-primary); border-radius: inherit; }
.mg-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mg-navy-800); color: #fff; font-weight: 600; font-size: .85rem; border: 2px solid #fff; box-shadow: var(--mg-shadow-sm); }
.mg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--mg-radius-pill); background: var(--mg-gray-100); border: 1px solid var(--mg-border); font-weight: 500; font-size: .8125rem; color: var(--mg-gray-700); }
.mg-tag-date { display: inline-flex; flex-direction: column; align-items: center; background: var(--mg-navy-900); color: #fff; border-radius: var(--mg-radius-md); padding: .4rem .9rem; line-height: 1; } .mg-tag-date strong { color: var(--mg-yellow); font: 800 1.8rem/1 var(--mg-font-display); }

/* ---------- Piezas del manual (conservan la línea multicolor, como en el manual impreso) ---------- */
.mg-id-card { width: 18rem; min-height: 28.6rem; background: var(--mg-surface-card); border-radius: var(--mg-radius-xl); box-shadow: var(--mg-shadow-lg); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 2.2rem 1.5rem 2rem; text-align: center; }
.mg-id-card::before, .mg-id-card::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--mg-gradient-stripe); } .mg-id-card::before { top: 0; } .mg-id-card::after { bottom: 0; }
.mg-id-card__photo { width: 62%; aspect-ratio: 1/1.15; border-radius: var(--mg-radius-lg); background: var(--mg-gray); margin: 1.25rem 0; object-fit: cover; } .mg-id-card__name { font-weight: 800; text-transform: uppercase; font-size: 1rem; }
.mg-business-card { aspect-ratio: 90/50; background: var(--mg-surface-card); border: 1px solid var(--mg-border); box-shadow: var(--mg-shadow-md); position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; padding: 1.2rem; max-width: 28rem; } .mg-business-card::before { content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 5px; background: var(--mg-gradient-stripe-flow); } .mg-business-card__name { font-weight: 700; color: var(--mg-yellow-800); font-size: 1.1rem; }
.mg-post { position: relative; aspect-ratio: 1/1; background: var(--mg-surface); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7%; text-align: center; isolation: isolate; }
.mg-post h2 { font-weight: 800; text-transform: uppercase; font-size: 1rem; line-height: 1.1; margin: 0; } .mg-post h2 strong { display: block; font-size: 1.75em; }
.mg-post .mg-logo-pill img { height: 1.7rem; } .mg-post p { margin: 0; font-size: .8rem; }

/* ---------- Utilidades de layout mínimas ---------- */
.mg-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.mg-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(var(--mg-col, 16rem), 1fr)); }
.mg-stack > * + * { margin-top: var(--mg-gap, 1rem); } .mg-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mg-shadow-sm { box-shadow: var(--mg-shadow-sm); } .mg-shadow-md { box-shadow: var(--mg-shadow-md); } .mg-shadow-lg { box-shadow: var(--mg-shadow-lg); } .mg-shadow-glow { box-shadow: var(--mg-shadow-glow); }
.mg-rounded { border-radius: var(--mg-radius-md); } .mg-rounded-lg { border-radius: var(--mg-radius-lg); } .mg-rounded-pill { border-radius: var(--mg-radius-pill); }
.mg-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; }

@media (prefers-reduced-motion: reduce) { .mg-btn, .mg-card--hover { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mg-glass, .mg-navbar, .mg-card--glass { background: rgba(255,255,255,.96); } .mg-glass-dark, .mg-navbar--dark { background: rgba(8,26,44,.96); } }

/* ---------- Acordeón (con <details> nativo), stepper, línea de tiempo y enlace de salto ---------- */
.mg-acordeon { display: grid; gap: .5rem; }
.mg-acordeon details { background: var(--mg-surface-card); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); }
.mg-acordeon summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--mg-heading); }
.mg-acordeon summary::-webkit-details-marker { display: none; } .mg-acordeon summary::after { content: "+"; color: var(--mg-primary); font-weight: 800; font-size: 1.2rem; line-height: 1; } .mg-acordeon details[open] summary::after { content: "–"; }
.mg-acordeon summary:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: -2px; border-radius: var(--mg-radius-md); } .mg-acordeon details[open] { border-color: var(--mg-primary-200); } .mg-acordeon .cuerpo { padding: 0 1.1rem 1rem; color: var(--mg-gray-600); line-height: 1.65; }
.mg-stepper { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.mg-stepper li { flex: 1; display: flex; align-items: center; gap: .6rem; counter-increment: paso; font-size: .85rem; font-weight: 600; color: var(--mg-gray-500); position: relative; }
.mg-stepper li::before { content: counter(paso); display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--mg-gray-100); border: 2px solid var(--mg-gray-300); color: var(--mg-gray-600); font-weight: 700; }
.mg-stepper li:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--mg-gray-200); margin-inline: .25rem; }
.mg-stepper li.is-done { color: var(--mg-gray-800); } .mg-stepper li.is-done::before { content: "✓"; background: var(--mg-green-700); border-color: var(--mg-green-700); color: #fff; } .mg-stepper li.is-done::after { background: var(--mg-green-700); }
.mg-stepper li.is-current { color: var(--mg-primary-700); } .mg-stepper li.is-current::before { background: var(--mg-primary); border-color: var(--mg-primary); color: #fff; }
@media (max-width: 560px) { .mg-stepper li span { display: none; } .mg-stepper li.is-current span { display: inline; } }
.mg-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--mg-gray-200); display: grid; gap: 1rem; }
.mg-timeline li { position: relative; padding-left: .9rem; font-size: .9rem; } .mg-timeline li::before { content: ""; position: absolute; left: -1.62rem; top: .3rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--mg-primary); box-shadow: 0 0 0 3px var(--mg-surface-card); }
.mg-timeline time { display: block; font-size: .75rem; color: var(--mg-text-muted); } .mg-timeline strong { color: var(--mg-heading); }
.mg-skip { position: absolute; left: .5rem; top: -4rem; z-index: 1000; background: var(--mg-primary); color: #fff; padding: .6rem 1rem; border-radius: var(--mg-radius-md); font-weight: 700; text-decoration: none; transition: top .15s; } .mg-skip:focus { top: .5rem; }
.mg-field { display: grid; gap: .3rem; } .mg-error { color: var(--mg-red-700); font-size: .8rem; font-weight: 600; } .mg-input.is-invalid, .mg-select.is-invalid, .mg-textarea.is-invalid { border-color: var(--mg-red); background-color: var(--mg-red-50); }
.mg-textarea { width: 100%; box-sizing: border-box; font: 400 .9375rem/1.5 var(--mg-font-sans); color: var(--mg-text); background: var(--mg-surface-card); border: 1px solid var(--mg-border-strong); border-radius: var(--mg-radius-md); padding: .55rem .8rem; min-height: 6rem; resize: vertical; } .mg-textarea:focus { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }

/* ==========================================================================
   FORMULARIOS NATIVOS  ·  los controles HTML sin clases ya salen con la marca
   Se activa dentro de .mg-base (en <body>/<html>) o de un contenedor .mg-forms.
   Especificidad CERO (:where): cualquier clase propia o de un framework la sobrescribe.
   No toca controles de PrimeNG/Material/Bootstrap/Ant/MUI/Vuetify (clases p-*, mat-*, form-*, btn, ant-*, Mui*, v-*).
   Para excluir un control a mano: añádale class="mg-nativo-off".
   ========================================================================== */
:where(.mg-base, .mg-forms) { --_f-bd: var(--mg-border-strong); --_f-bg: var(--mg-surface-card); --_f-h: 2.5rem; }

/* ---- campos de texto, fechas, número, textarea, select ---- */
:where(:is(.mg-base, .mg-forms) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=button], [type=submit], [type=reset], [type=image], [type=hidden]), textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) {
  box-sizing: border-box; max-width: 100%; font: 400 .9375rem/1.4 var(--mg-font-sans); color: var(--mg-text); background-color: var(--_f-bg);
  border: 1px solid var(--_f-bd); border-radius: var(--mg-radius-md); padding: .55rem .8rem; min-height: var(--_f-h);
  transition: border-color .15s, box-shadow .15s, background-color .15s; accent-color: var(--mg-primary); color-scheme: light;
}
:where(:is(.mg-base, .mg-forms) textarea:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { min-height: 6rem; resize: vertical; line-height: 1.5; }
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::placeholder { color: var(--mg-gray-400); opacity: 1; }
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):hover:not(:disabled, :focus) { border-color: var(--mg-gray-400); }
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):disabled { background-color: var(--mg-gray-100); color: var(--mg-gray-500); cursor: not-allowed; }
:where(:is(.mg-base, .mg-forms) :is(input, textarea):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):read-only:not(:disabled, [type=checkbox], [type=radio]) { background-color: var(--mg-gray-50); }
/* validación: solo después de que la persona interactúa (:user-invalid) o con aria-invalid */
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):user-invalid, :where(:is(.mg-base, .mg-forms) [aria-invalid=true]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border-color: var(--mg-red-600); }
:where(:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):user-invalid:focus, :where(:is(.mg-base, .mg-forms) [aria-invalid=true]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus { box-shadow: 0 0 0 3px rgba(247, 0, 60, .18); }
/* select con flecha propia */
:where(:is(.mg-base, .mg-forms) select:not([multiple], [size]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem; }
:where(:is(.mg-base, .mg-forms) select:not([multiple], [size]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus { background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071BB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:where(:is(.mg-base, .mg-forms) select[multiple]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) option, :where(:is(.mg-base, .mg-forms) select[size]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) option { padding: .3rem .5rem; border-radius: 6px; }
:where(:is(.mg-base, .mg-forms) option:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):checked { background: var(--mg-primary-50); color: var(--mg-primary-800); }
:where(:is(.mg-base, .mg-forms) input[type=search]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-search-cancel-button { cursor: pointer; }
:where(:is(.mg-base, .mg-forms) input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; border-radius: 4px; }
:where(:is(.mg-base, .mg-forms) input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--mg-primary-50); }

/* ---- casillas y radios ---- */
:where(:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box; width: 1.15rem; height: 1.15rem; margin: 0 .5rem 0 0; vertical-align: -.2em;
  border: 1.5px solid var(--mg-gray-400); background: #fff center / 82% no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; display: inline-grid; place-content: center; }
:where(:is(.mg-base, .mg-forms) input[type=checkbox]:not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border-radius: 5px; }
:where(:is(.mg-base, .mg-forms) input[type=radio]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border-radius: 50%; }
:where(:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):hover:not(:disabled) { border-color: var(--mg-primary); }
:where(:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):checked, :where(:is(.mg-base, .mg-forms) input[type=checkbox]:indeterminate:not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { background-color: var(--mg-primary); border-color: var(--mg-primary); }
:where(:is(.mg-base, .mg-forms) input[type=checkbox]:not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
:where(:is(.mg-base, .mg-forms) input[type=checkbox]:indeterminate:not([role=switch]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
:where(:is(.mg-base, .mg-forms) input[type=radio]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):checked { background-image: radial-gradient(circle, #fff 0 32%, transparent 36%); }
:where(:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):disabled { opacity: .5; cursor: not-allowed; }
/* interruptor: <input type="checkbox" role="switch"> */
:where(:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { appearance: none; -webkit-appearance: none; flex: none; width: 2.4rem; height: 1.4rem; margin: 0 .55rem 0 0; vertical-align: -.3em; border-radius: 99px; border: 0; cursor: pointer; background-color: var(--mg-gray-300); background-repeat: no-repeat; background-image: radial-gradient(circle, #fff 0 .55rem, transparent .6rem); background-size: 1.4rem 1.4rem; background-position: left center; transition: background-color .2s, background-position .2s; }
:where(:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):checked { background-color: var(--mg-primary); background-position: right center; }
:where(:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):disabled { opacity: .5; cursor: not-allowed; }

/* ---- rango, color, archivo, progreso ---- */
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { appearance: none; -webkit-appearance: none; width: 100%; height: 1.4rem; background: transparent; accent-color: var(--mg-primary); cursor: pointer; }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--mg-gray-200); }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-moz-range-track { height: 6px; border-radius: 99px; background: var(--mg-gray-200); }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-slider-thumb { -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: -6px; border-radius: 50%; background: var(--mg-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(8,26,44,.4); transition: box-shadow .15s; }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--mg-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(8,26,44,.4); }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible { outline: 0; }
:where(:is(.mg-base, .mg-forms) input[type=range]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible::-webkit-slider-thumb { box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) input[type=color]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { width: 3rem; height: 2.5rem; padding: .2rem; border: 1px solid var(--_f-bd); border-radius: var(--mg-radius-md); background: #fff; cursor: pointer; }
:where(:is(.mg-base, .mg-forms) input[type=file]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { box-sizing: border-box; max-width: 100%; font: 400 .875rem var(--mg-font-sans); color: var(--mg-text-muted); padding: .35rem; border: 1px dashed var(--mg-gray-400); border-radius: var(--mg-radius-md); background: var(--mg-gray-50); cursor: pointer; }
:where(:is(.mg-base, .mg-forms) input[type=file]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::file-selector-button { font: 600 .8125rem var(--mg-font-sans); margin-right: .8rem; padding: .45rem .9rem; border: 0; border-radius: var(--mg-radius-sm); background: var(--mg-primary); color: #fff; cursor: pointer; transition: filter .15s; }
:where(:is(.mg-base, .mg-forms) input[type=file]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::file-selector-button:hover { filter: brightness(.92); }
:where(:is(.mg-base, .mg-forms) input[type=file]:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) progress:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { appearance: none; -webkit-appearance: none; width: 100%; height: .6rem; border: 0; border-radius: 99px; overflow: hidden; background: var(--mg-gray-200); color: var(--mg-primary); }
:where(:is(.mg-base, .mg-forms) progress:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-progress-bar { background: var(--mg-gray-200); }
:where(:is(.mg-base, .mg-forms) progress:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-webkit-progress-value { background: var(--mg-gradient-steel); border-radius: 99px; }
:where(:is(.mg-base, .mg-forms) progress:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::-moz-progress-bar { background: var(--mg-primary); }
:where(:is(.mg-base, .mg-forms) meter:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { width: 100%; height: .6rem; }

/* ---- botones sin clase (los que ya traen class="…" no se tocan) ---- */
:where(:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .875rem/1.2 var(--mg-font-sans); padding: .6rem 1.15rem; min-height: var(--_f-h); border-radius: var(--mg-radius-md); border: 1px solid transparent; background: var(--mg-primary); color: #fff; cursor: pointer; box-shadow: var(--mg-shadow-sm); text-decoration: none; transition: background-color .15s, box-shadow .15s, filter .15s, border-color .15s; }
:where(:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):hover:not(:disabled) { filter: brightness(.92); box-shadow: var(--mg-shadow-md); }
:where(:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):active:not(:disabled) { filter: brightness(.86); box-shadow: none; }
:where(:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:where(:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }
:where(:is(.mg-base, .mg-forms) :is(button[type=reset], input[type=reset], button[type=button]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { background: #fff; color: var(--mg-gray-700); border-color: var(--_f-bd); }
:where(:is(.mg-base, .mg-forms) :is(button[type=reset], input[type=reset], button[type=button]):not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)):hover:not(:disabled) { background: var(--mg-gray-50); filter: none; }

/* ---- estructura de formulario ---- */
:where(:is(.mg-base, .mg-forms) label:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { font-weight: 600; font-size: .8125rem; color: var(--mg-gray-700); }
:where(:is(.mg-base, .mg-forms) label:has(> input:is([type=checkbox], [type=radio])):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { display: inline-flex; align-items: center; font-weight: 500; font-size: .9rem; color: var(--mg-text); cursor: pointer; }
:where(:is(.mg-base, .mg-forms) fieldset:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); padding: 1rem 1.15rem; margin: 0 0 1rem; min-width: 0; }
:where(:is(.mg-base, .mg-forms) legend:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-primary-700); padding: 0 .4rem; }
:where(:is(.mg-base, .mg-forms) label.mg-req:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::after { content: " *"; color: var(--mg-red-600); }

/* ---- texto y contenido nativo ---- */
:where(:is(.mg-base, .mg-forms) hr:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border: 0; border-top: 1px solid var(--mg-border); margin: 1.5rem 0; }
:where(:is(.mg-base, .mg-forms) kbd:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { font: 600 .78em ui-monospace, Consolas, monospace; padding: .15em .45em; border: 1px solid var(--mg-border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--mg-gray-50); }
:where(:is(.mg-base, .mg-forms) mark:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { background: color-mix(in srgb, var(--mg-yellow) 45%, #fff); color: inherit; padding: 0 .2em; border-radius: 3px; }
:where(:is(.mg-base, .mg-forms) blockquote:not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { margin: 1rem 0; padding: .4rem 1.1rem; border-left: 4px solid var(--mg-cyan); color: var(--mg-gray-600); background: var(--mg-gray-50); border-radius: 0 var(--mg-radius-md) var(--mg-radius-md) 0; }
:where(:is(.mg-base, .mg-forms) table:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; background: var(--mg-surface-card); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); overflow: hidden; }
:where(:is(.mg-base, .mg-forms) table:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) th { background: var(--mg-gray-50); color: var(--mg-gray-600); text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1rem; border-bottom: 1px solid var(--mg-border); }
:where(:is(.mg-base, .mg-forms) table:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) td { padding: .7rem 1rem; border-top: 1px solid var(--mg-border); }
:where(:is(.mg-base, .mg-forms) table:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) tbody tr:first-child td { border-top: 0; }
:where(:is(.mg-base, .mg-forms) table:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) tbody tr:hover { background: var(--mg-gray-50); }
:where(:is(.mg-base, .mg-forms) details:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); padding: .7rem 1rem; background: var(--mg-surface-card); }
:where(:is(.mg-base, .mg-forms) details:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) > summary { cursor: pointer; font-weight: 600; }
:where(:is(.mg-base, .mg-forms) dialog:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { border: 0; border-radius: var(--mg-radius-lg); padding: 1.5rem; box-shadow: 0 24px 60px rgba(8,26,44,.35); max-width: min(32rem, 92vw); }
:where(:is(.mg-base, .mg-forms) dialog:not([class]):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off))::backdrop { background: rgba(8, 26, 44, .55); backdrop-filter: blur(3px); }
.mg-base ::-webkit-scrollbar, .mg-forms ::-webkit-scrollbar { width: 10px; height: 10px; }
.mg-base ::-webkit-scrollbar-thumb, .mg-forms ::-webkit-scrollbar-thumb { background: var(--mg-gray-300); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.mg-base ::-webkit-scrollbar-thumb:hover, .mg-forms ::-webkit-scrollbar-thumb:hover { background-color: var(--mg-gray-400); }
@media (prefers-reduced-motion: reduce) { :where(:is(.mg-base, .mg-forms) *) { transition-duration: .01ms !important; } }
/* etiqueta que envuelve un campo: texto arriba, campo debajo */
:where(:is(.mg-base, .mg-forms) label:has(> :is(input:not([type=checkbox], [type=radio]), select, textarea, progress, meter)):not([class^="p-"], [class*=" p-"], [class*="mat-"], [class*="mdc-"], [class*="form-"], [class*="btn"], [class*="ant-"], [class*="Mui"], [class^="v-"], [class*=" v-"], [class^="el-"], [class*=" el-"], .mg-nativo-off)) { display: grid; gap: .35rem; align-content: start; }

/* ---- controles nativos sin clase: especificidad normal (vence al preflight de Tailwind) ---- */

/* ---- campos de texto, fechas, número, textarea, select ---- */
:is(.mg-base, .mg-forms) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=button], [type=submit], [type=reset], [type=image], [type=hidden]), textarea, select):not([class]) {
  box-sizing: border-box; max-width: 100%; font: 400 .9375rem/1.4 var(--mg-font-sans); color: var(--mg-text); background-color: var(--_f-bg);
  border: 1px solid var(--_f-bd); border-radius: var(--mg-radius-md); padding: .55rem .8rem; min-height: var(--_f-h);
  transition: border-color .15s, box-shadow .15s, background-color .15s; accent-color: var(--mg-primary); color-scheme: light;
}
:is(.mg-base, .mg-forms) textarea:not([class]) { min-height: 6rem; resize: vertical; line-height: 1.5; }
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class])::placeholder { color: var(--mg-gray-400); opacity: 1; }
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class]):hover:not(:disabled, :focus) { border-color: var(--mg-gray-400); }
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class]):focus { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class]):disabled { background-color: var(--mg-gray-100); color: var(--mg-gray-500); cursor: not-allowed; }
:is(.mg-base, .mg-forms) :is(input, textarea):not([class]):read-only:not(:disabled, [type=checkbox], [type=radio]) { background-color: var(--mg-gray-50); }
/* validación: solo después de que la persona interactúa (:user-invalid) o con aria-invalid */
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class]):user-invalid, :is(.mg-base, .mg-forms) [aria-invalid=true]:not([class]) { border-color: var(--mg-red-600); }
:is(.mg-base, .mg-forms) :is(input, textarea, select):not([class]):user-invalid:focus, :is(.mg-base, .mg-forms) [aria-invalid=true]:not([class]):focus { box-shadow: 0 0 0 3px rgba(247, 0, 60, .18); }
/* select con flecha propia */
:is(.mg-base, .mg-forms) select:not([multiple], [size]):not([class]) { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem; }
:is(.mg-base, .mg-forms) select:not([multiple], [size]):not([class]):focus { background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.05rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071BB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:is(.mg-base, .mg-forms) select[multiple]:not([class]) option, :is(.mg-base, .mg-forms) select[size]:not([class]) option { padding: .3rem .5rem; border-radius: 6px; }
:is(.mg-base, .mg-forms) option:not([class]):checked { background: var(--mg-primary-50); color: var(--mg-primary-800); }
:is(.mg-base, .mg-forms) input[type=search]:not([class])::-webkit-search-cancel-button { cursor: pointer; }
:is(.mg-base, .mg-forms) input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]):not([class])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; border-radius: 4px; }
:is(.mg-base, .mg-forms) input:is([type=date], [type=time], [type=datetime-local], [type=month], [type=week]):not([class])::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--mg-primary-50); }

/* ---- casillas y radios ---- */
:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class]) { appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box; width: 1.15rem; height: 1.15rem; margin: 0 .5rem 0 0; vertical-align: -.2em;
  border: 1.5px solid var(--mg-gray-400); background: #fff center / 82% no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; display: inline-grid; place-content: center; }
:is(.mg-base, .mg-forms) input[type=checkbox]:not([role=switch]):not([class]) { border-radius: 5px; }
:is(.mg-base, .mg-forms) input[type=radio]:not([class]) { border-radius: 50%; }
:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class]):hover:not(:disabled) { border-color: var(--mg-primary); }
:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([role=switch]):not([class]):checked, :is(.mg-base, .mg-forms) input[type=checkbox]:indeterminate:not([role=switch]):not([class]) { background-color: var(--mg-primary); border-color: var(--mg-primary); }
:is(.mg-base, .mg-forms) input[type=checkbox]:not([role=switch]):not([class]):checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
:is(.mg-base, .mg-forms) input[type=checkbox]:indeterminate:not([role=switch]):not([class]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
:is(.mg-base, .mg-forms) input[type=radio]:not([class]):checked { background-image: radial-gradient(circle, #fff 0 32%, transparent 36%); }
:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([class]):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) :is(input[type=checkbox], input[type=radio]):not([class]):disabled { opacity: .5; cursor: not-allowed; }
/* interruptor: <input type="checkbox" role="switch"> */
:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class]) { appearance: none; -webkit-appearance: none; flex: none; width: 2.4rem; height: 1.4rem; margin: 0 .55rem 0 0; vertical-align: -.3em; border-radius: 99px; border: 0; cursor: pointer; background-color: var(--mg-gray-300); background-repeat: no-repeat; background-image: radial-gradient(circle, #fff 0 .55rem, transparent .6rem); background-size: 1.4rem 1.4rem; background-position: left center; transition: background-color .2s, background-position .2s; }
:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class]):checked { background-color: var(--mg-primary); background-position: right center; }
:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class]):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) input[type=checkbox][role=switch]:not([class]):disabled { opacity: .5; cursor: not-allowed; }

/* ---- rango, color, archivo, progreso ---- */
:is(.mg-base, .mg-forms) input[type=range]:not([class]) { appearance: none; -webkit-appearance: none; width: 100%; height: 1.4rem; background: transparent; accent-color: var(--mg-primary); cursor: pointer; }
:is(.mg-base, .mg-forms) input[type=range]:not([class])::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--mg-gray-200); }
:is(.mg-base, .mg-forms) input[type=range]:not([class])::-moz-range-track { height: 6px; border-radius: 99px; background: var(--mg-gray-200); }
:is(.mg-base, .mg-forms) input[type=range]:not([class])::-webkit-slider-thumb { -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: -6px; border-radius: 50%; background: var(--mg-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(8,26,44,.4); transition: box-shadow .15s; }
:is(.mg-base, .mg-forms) input[type=range]:not([class])::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--mg-primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(8,26,44,.4); }
:is(.mg-base, .mg-forms) input[type=range]:not([class]):focus-visible { outline: 0; }
:is(.mg-base, .mg-forms) input[type=range]:not([class]):focus-visible::-webkit-slider-thumb { box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) input[type=color]:not([class]) { width: 3rem; height: 2.5rem; padding: .2rem; border: 1px solid var(--_f-bd); border-radius: var(--mg-radius-md); background: #fff; cursor: pointer; }
:is(.mg-base, .mg-forms) input[type=file]:not([class]) { box-sizing: border-box; max-width: 100%; font: 400 .875rem var(--mg-font-sans); color: var(--mg-text-muted); padding: .35rem; border: 1px dashed var(--mg-gray-400); border-radius: var(--mg-radius-md); background: var(--mg-gray-50); cursor: pointer; }
:is(.mg-base, .mg-forms) input[type=file]:not([class])::file-selector-button { font: 600 .8125rem var(--mg-font-sans); margin-right: .8rem; padding: .45rem .9rem; border: 0; border-radius: var(--mg-radius-sm); background: var(--mg-primary); color: #fff; cursor: pointer; transition: filter .15s; }
:is(.mg-base, .mg-forms) input[type=file]:not([class])::file-selector-button:hover { filter: brightness(.92); }
:is(.mg-base, .mg-forms) input[type=file]:not([class]):focus-visible { outline: 0; border-color: var(--mg-primary); box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) progress:not([class]) { appearance: none; -webkit-appearance: none; width: 100%; height: .6rem; border: 0; border-radius: 99px; overflow: hidden; background: var(--mg-gray-200); color: var(--mg-primary); }
:is(.mg-base, .mg-forms) progress:not([class])::-webkit-progress-bar { background: var(--mg-gray-200); }
:is(.mg-base, .mg-forms) progress:not([class])::-webkit-progress-value { background: var(--mg-gradient-steel); border-radius: 99px; }
:is(.mg-base, .mg-forms) progress:not([class])::-moz-progress-bar { background: var(--mg-primary); }
:is(.mg-base, .mg-forms) meter:not([class]) { width: 100%; height: .6rem; }

/* ---- botones sin clase (los que ya traen class="…" no se tocan) ---- */
:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class]) { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .875rem/1.2 var(--mg-font-sans); padding: .6rem 1.15rem; min-height: var(--_f-h); border-radius: var(--mg-radius-md); border: 1px solid transparent; background: var(--mg-primary); color: #fff; cursor: pointer; box-shadow: var(--mg-shadow-sm); text-decoration: none; transition: background-color .15s, box-shadow .15s, filter .15s, border-color .15s; }
:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class]):hover:not(:disabled) { filter: brightness(.92); box-shadow: var(--mg-shadow-md); }
:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class]):active:not(:disabled) { filter: brightness(.86); box-shadow: none; }
:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class]):focus-visible { outline: 0; box-shadow: var(--mg-shadow-glow); }
:is(.mg-base, .mg-forms) :is(button, input[type=button], input[type=submit], input[type=reset]):not([class]):not([class]):disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }
:is(.mg-base, .mg-forms) :is(button[type=reset], input[type=reset], button[type=button]):not([class]):not([class]) { background: #fff; color: var(--mg-gray-700); border-color: var(--_f-bd); }
:is(.mg-base, .mg-forms) :is(button[type=reset], input[type=reset], button[type=button]):not([class]):not([class]):hover:not(:disabled) { background: var(--mg-gray-50); filter: none; }

/* ---- estructura de formulario ---- */
:is(.mg-base, .mg-forms) label:not([class]) { font-weight: 600; font-size: .8125rem; color: var(--mg-gray-700); }
:is(.mg-base, .mg-forms) label:has(> input:is([type=checkbox], [type=radio])):not([class]) { display: inline-flex; align-items: center; font-weight: 500; font-size: .9rem; color: var(--mg-text); cursor: pointer; }
:is(.mg-base, .mg-forms) fieldset:not([class]) { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); padding: 1rem 1.15rem; margin: 0 0 1rem; min-width: 0; }
:is(.mg-base, .mg-forms) legend:not([class]) { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-primary-700); padding: 0 .4rem; }
:is(.mg-base, .mg-forms) label.mg-req:not([class])::after { content: " *"; color: var(--mg-red-600); }

/* ---- texto y contenido nativo ---- */
:is(.mg-base, .mg-forms) hr:not([class]) { border: 0; border-top: 1px solid var(--mg-border); margin: 1.5rem 0; }
:is(.mg-base, .mg-forms) kbd:not([class]) { font: 600 .78em ui-monospace, Consolas, monospace; padding: .15em .45em; border: 1px solid var(--mg-border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--mg-gray-50); }
:is(.mg-base, .mg-forms) mark:not([class]) { background: color-mix(in srgb, var(--mg-yellow) 45%, #fff); color: inherit; padding: 0 .2em; border-radius: 3px; }
:is(.mg-base, .mg-forms) blockquote:not([class]) { margin: 1rem 0; padding: .4rem 1.1rem; border-left: 4px solid var(--mg-cyan); color: var(--mg-gray-600); background: var(--mg-gray-50); border-radius: 0 var(--mg-radius-md) var(--mg-radius-md) 0; }
:is(.mg-base, .mg-forms) table:not([class]):not([class]) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; background: var(--mg-surface-card); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); overflow: hidden; }
:is(.mg-base, .mg-forms) table:not([class]):not([class]) th { background: var(--mg-gray-50); color: var(--mg-gray-600); text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem 1rem; border-bottom: 1px solid var(--mg-border); }
:is(.mg-base, .mg-forms) table:not([class]):not([class]) td { padding: .7rem 1rem; border-top: 1px solid var(--mg-border); }
:is(.mg-base, .mg-forms) table:not([class]):not([class]) tbody tr:first-child td { border-top: 0; }
:is(.mg-base, .mg-forms) table:not([class]):not([class]) tbody tr:hover { background: var(--mg-gray-50); }
:is(.mg-base, .mg-forms) details:not([class]):not([class]) { border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); padding: .7rem 1rem; background: var(--mg-surface-card); }
:is(.mg-base, .mg-forms) details:not([class]):not([class]) > summary { cursor: pointer; font-weight: 600; }
:is(.mg-base, .mg-forms) dialog:not([class]):not([class]) { border: 0; border-radius: var(--mg-radius-lg); padding: 1.5rem; box-shadow: 0 24px 60px rgba(8,26,44,.35); max-width: min(32rem, 92vw); }
:is(.mg-base, .mg-forms) dialog:not([class]):not([class])::backdrop { background: rgba(8, 26, 44, .55); backdrop-filter: blur(3px); }
/* etiqueta que envuelve un campo: texto arriba, campo debajo */
:is(.mg-base, .mg-forms) label:has(> :is(input:not([type=checkbox], [type=radio]), select, textarea, progress, meter)):not([class]) { display: grid; gap: .35rem; align-content: start; }