/* ==========================================================================
   MGKids · app.css · sistema de diseño de la SPA (padres y niño)
   Sistemas Digitales MG · 14-10-2026
   Lienzo propio (sin tema WordPress). Lenguaje de la casa: menú 250 px + cabecera
   con título + lienzo blanco a ancho completo, bordes #eef0f3, naranja #d07600.

   ========================  GUÍA DE COMPONENTES  ===========================
   Todas las clases llevan prefijo `mgk-`. Estados con `is-…`. Nada de <header>:
   la cabecera es `div[role=banner]`. Iconos: `MGK.icon(nombre, tam)` (SVG de línea).

   TOKENS (variables en :root; el niño las sobreescribe en body[data-rol="nino"])
     --or #d07600 acento · --or-t #b45f00 texto/botón naranja (AA) · --or-bg · --bd #eef0f3
     --tx --tx2 --mut (texto) · --ok/--aviso/--mal/--inf (+ -bg) · --r radios · --sh sombra
     --f-b (cuerpo) --f-d (titulares y cifras)

   TIPO     .mgk-h1 .mgk-h2 .mgk-h3 · .mgk-p · .mgk-mut (gris) · .mgk-peq · .mgk-num (cifras tabulares)
   PÁGINA   .mgk-pagina (raíz de una pantalla) · .mgk-pag-cab (título+acciones de la pantalla)
            .mgk-fila-h (flex horizontal con gap) · .mgk-col (flex vertical con gap) · .mgk-sep
   BOTONES  .mgk-btn  + .is-primario | .is-sec | .is-peligro | .is-fantasma | .is-peq | .is-grande | .is-bloque
            .mgk-btn-ico (botón cuadrado solo icono, lleva aria-label)
   FORMS    .mgk-campo > label.mgk-label + .mgk-input | .mgk-select | .mgk-textarea + .mgk-ayuda | .mgk-error
            .mgk-switch (button role=switch aria-checked) · .mgk-check (label con checkbox)
            .mgk-seg (segmentado: button[aria-pressed]) · .mgk-pin + .mgk-keypad (PIN del niño)
            .mgk-avatares (rejilla para elegir avatar, button.mgk-avatar-op[aria-pressed])
   TARJETA  .mgk-card > .mgk-card-cab (h2 + .mgk-card-acc) + cuerpo · .mgk-card.is-plana
            .mgk-cab (banda crema de 112 px: .mgk-cab-top, .mgk-cab-n, .mgk-reparto, .mgk-cab-pie)
            .mgk-grid (rejilla de bloques; hijos .mgk-bloque; .is-dos ocupa 2 columnas)
   LISTAS   .mgk-lista > .mgk-fila (a|button|div): .mgk-fila-ico, .mgk-fila-txt (.mgk-fila-t + .mgk-fila-s), .mgk-fila-der
   KPIS     .mgk-kpis > a.mgk-kpi (.mgk-kpi-n cifra, .mgk-kpi-t nombre, .mgk-kpi-s detalle)
   PÍLDORAS .mgk-pill + .is-ok | .is-aviso | .is-mal | .is-inf | .is-neutro | .is-or | .is-vivo (punto latiente)
            gravedad: MGK.gravedad(g).clase → `is-leve|is-seria|is-grave`
   CHIPS    .mgk-chips > button.mgk-chip[aria-pressed=true]   (MGK.pintarChips)
   PESTAÑAS .mgk-tabs > button[role=tab][aria-selected]
   AVATAR   .mgk-avatar (MGK.avatar(id, tam) devuelve el SVG) · .mgk-avatar.is-sm/.is-lg
   ESTADOS  .mgk-vacio (MGK.vacio) · .mgk-cargando (spinner) · .mgk-esqueleto (bloque gris animado)
   AVISOS   .mgk-aviso + .is-info | .is-ok | .is-aviso | .is-mal (caja de texto con icono) · .mgk-alerta-max (alerta máxima)
   GRÁFICOS .mgk-linea (svg de línea) · .mgk-barras-v (columnas por día) · .mgk-barras-h (barras horizontales con enlace)
   MODAL    lo crea MGK.modal(): .mgk-ov > .mgk-dlg (.mgk-dlg-x esquina sup. dcha., .mgk-dlg-h, .mgk-dlg-b, .mgk-dlg-f)
   TOAST    MGK.toast(): .mgk-toast.is-ok|is-error|is-info

   CHAT     .mgk-chat (columna a alto completo) > .mgk-chat-lista (scroll) + .mgk-chat-in (formulario)
            .mgk-burbuja + .is-yo (mía, naranja) | .is-agente (del agente, gris) · .mgk-burbuja-meta (hora)
            .mgk-escribiendo (tres puntos) · .mgk-sugerencias (chips de respuestas rápidas) · .mgk-accion-chat (tarjeta de acción dentro del chat)
   MONEDAS  .mgk-saldo (cifra grande con moneda) · .mgk-moneda (icono de moneda; .is-peq) · .mgk-meta (tarjeta de meta;
            estados .is-propuesta .is-contraoferta .is-acordada .is-archivada) · .mgk-meta-pie (acciones) · .mgk-mov (fila de movimiento; .is-mas/.is-menos)
            .mgk-prog (barra de progreso: > i con style=width:%)
   NIÑO     body[data-rol="nino"]: paleta cálida, radios más grandes, tipografía más redonda; mismos componentes.
            .mgk-nino-hero (cabecera amable con avatar y frase) · .mgk-animo (selector de ánimo: button.mgk-animo-op[aria-pressed])
   UTIL     .mgk-oculto (visual-hidden) · .mgk-sr · .mgk-trunc (una línea con …) · .mgk-sticky
   ======================================================================== */

/* ---------- Tokens ---------- */
:root{
  --or:#d07600; --or-t:#b45f00; --or-h:#984f00; --or-bg:#fff4e2; --or-bd:#f3d7a8;
  --bd:#eef0f3; --bd2:#e1e5eb;
  --tx:#18202e; --tx2:#434c5e; --mut:#626c7e;
  --bg:#fff; --bg2:#f6f7f9; --cr:#faf8f5; --cr-bd:#e8dfd2;
  --ok:#1b6a49; --ok-bg:#e7f5ed; --ok-bd:#bfe3cf;
  --aviso:#8d5600; --aviso-bg:#fff3d6; --aviso-bd:#f1d58f;
  --mal:#b3261e; --mal-bg:#fdeceb; --mal-bd:#f3c4c0;
  --inf:#235196; --inf-bg:#e9f0fb; --inf-bd:#c4d6f0;
  --nav:#0b1220; --nav2:#0f1a2e;
  --r:16px; --r-s:11px; --r-xs:8px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 8px 22px -10px rgba(16,24,40,.10);
  --sh-m:0 2px 6px rgba(16,24,40,.06),0 24px 60px -16px rgba(16,24,40,.30);
  --f-b:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-d:'Bricolage Grotesque','Figtree',ui-sans-serif,system-ui,sans-serif;
  --side:250px; --tab:64px; --top:58px;
  --ease:cubic-bezier(.22,1,.36,1);
  --c1:#d07600; --c2:#2f6b4f; --c3:#3b62b8; --c4:#8a4fb8;
  color-scheme:light;
}
body[data-rol="nino"]{
  --or:#e07b00; --or-t:#b35400; --or-h:#964500; --or-bg:#fff1dc; --or-bd:#f8d49b;
  --bg2:#fbf7f1; --cr:#fff9ef; --cr-bd:#f0e2c9; --bd:#f1e9dc; --bd2:#e9dcc6;
  --r:22px; --r-s:15px; --r-xs:11px;
  --nino-a:#5b4bd1; --nino-b:#0f9d8a; --nino-c:#e2487a;
  --f-d:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --sh:0 2px 4px rgba(94,60,10,.05),0 12px 26px -12px rgba(94,60,10,.16);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;font-family:var(--f-b);font-size:16px;line-height:1.5;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}
body[data-rol="nino"]{background:var(--bg2)}
body.mgk-bloq{overflow:hidden}
#mgk-app{min-height:100dvh}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--or-t);text-underline-offset:3px}
img,svg{display:block;max-width:100%}
::selection{background:#f7d9a6;color:#2a1a00}
input,textarea{caret-color:var(--or)}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--or);outline-offset:2px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:#d6dbe3 transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d6dbe3;border-radius:9px;border:2px solid transparent;background-clip:content-box}
.mgk-sr,.mgk-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.mgk-trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mgk-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.mgk-mut{color:var(--mut)}
.mgk-peq{font-size:13px}
.mgk-h1{font-family:var(--f-d);font-size:clamp(26px,4.2vw,36px);line-height:1.12;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.mgk-h2{font-family:var(--f-d);font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.mgk-h3{font-size:15px;font-weight:700;line-height:1.3}
.mgk-p{color:var(--tx2);max-width:68ch;text-wrap:pretty}
.mgk-fila-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mgk-col{display:flex;flex-direction:column;gap:14px}
.mgk-sep{height:1px;background:var(--bd);border:0;margin:6px 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Marco: menú lateral, cabecera, lienzo, barra inferior ---------- */
.mgk-shell{min-height:100dvh;display:flex;flex-direction:column}
.mgk-side{display:none}
.mgk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.mgk-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:calc(var(--top) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0 14px;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--bd)}
body[data-rol="nino"] .mgk-top{background:rgba(251,247,241,.94)}
.mgk-top-marca{display:flex;align-items:center;gap:9px;font-family:var(--f-d);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--tx);text-decoration:none}
.mgk-top-marca svg{width:28px;height:28px}
.mgk-lcd{display:none}
.mgk-top-tit{font-family:var(--f-d);font-weight:700;font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgk-top-acc{display:flex;align-items:center;gap:8px;margin-left:auto}
.mgk-top-btn{position:relative;width:40px;height:40px;display:inline-grid;place-items:center;border-radius:12px;border:1px solid var(--bd);background:#fff;color:var(--tx2);transition:background .15s,border-color .15s,color .15s}
.mgk-top-btn:hover{background:var(--or-bg);border-color:var(--or-bd);color:var(--or-t)}
.mgk-top-btn .mgk-punto{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--mal);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1;border:2px solid #fff}
.mgk-view{flex:1;padding:16px 16px calc(var(--tab) + env(safe-area-inset-bottom) + 28px);min-width:0;background:var(--bg);outline:none}
body[data-rol="nino"] .mgk-view{background:transparent}
.mgk-pagina{display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}
.mgk-pag-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mgk-pag-cab .mgk-p{margin-top:4px}

.mgk-tabbar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:calc(var(--tab) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--bd)}
body[data-rol="nino"] .mgk-tabbar{background:rgba(255,252,246,.97)}
.mgk-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--mut);text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.01em;min-width:0;padding:6px 2px;-webkit-tap-highlight-color:transparent}
.mgk-tab svg{width:23px;height:23px;transition:transform .25s var(--ease)}
.mgk-tab span.t{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgk-tab.is-on{color:var(--or-t)}
.mgk-tab.is-on svg{transform:translateY(-1px) scale(1.06)}
.mgk-tab.is-on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--or)}
.mgk-tab .mgk-badge{position:absolute;top:5px;left:calc(50% + 6px)}
.mgk-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--or);color:#1d1100;font-size:11px;font-weight:800;display:inline-grid;place-items:center;line-height:1}
.mgk-badge.is-mal{background:var(--mal);color:#fff}

@media (min-width:1024px){
  :root{--top:68px}
  .mgk-side{display:flex;flex-direction:column;position:fixed;z-index:35;inset:0 auto 0 0;width:var(--side);background:linear-gradient(180deg,var(--nav),var(--nav2));border-right:1px solid rgba(255,255,255,.08);color:#fff}
  .mgk-main{margin-left:var(--side)}
  .mgk-tabbar{display:none}
  .mgk-view{padding:22px 28px 60px}
  .mgk-top{padding:env(safe-area-inset-top) 24px 0 24px;gap:16px}
  .mgk-top-marca{display:none}
  .mgk-top-tit{display:none}
  .mgk-lcd{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:12px;background:linear-gradient(180deg,#0b1220,#16213a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 12px -6px rgba(11,18,32,.6);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;letter-spacing:.04em;white-space:nowrap}
  .mgk-lcd b{color:#34f5a4;font-weight:700}
  .mgk-lcd span{color:#aebad1}
  .mgk-top-fam{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
  .mgk-top-fam b{font-size:14px}
  .mgk-top-fam span{font-size:12.5px;color:var(--mut)}
}
@media (min-width:1024px){.mgk-top-acc{margin-left:0;flex:1;justify-content:flex-end}}
@media (max-width:1023px){.mgk-top-fam{display:none}}

/* menú lateral */
.mgk-side-marca{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.mgk-side-marca svg{width:36px;height:36px;flex:none}
.mgk-side-marca b{display:block;font-family:var(--f-d);font-size:19px;line-height:1.1;letter-spacing:-.01em}
.mgk-side-marca small{display:block;font-size:12px;color:#9fb0cb;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px}
.mgk-nav{flex:1;overflow:auto;padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.mgk-nav-gr{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.46);padding:8px 10px 6px}
.mgk-nav-i{display:flex;align-items:center;gap:11px;padding:7px 10px 7px 8px;border-radius:13px;border:0;background:none;width:100%;text-align:left;color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;font-size:14.5px;transition:background .15s,color .15s;position:relative}
.mgk-nav-i:hover{background:rgba(255,255,255,.07);color:#fff}
.mgk-nav-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);flex:none;transition:background .15s,box-shadow .15s}
.mgk-nav-ic svg{width:18px;height:18px}
.mgk-nav-i .mgk-badge{margin-left:auto;background:rgba(255,255,255,.16);color:#fff}
.mgk-nav-i .mgk-badge.is-mal{background:#e5483f}
.mgk-nav-i.is-on{background:rgba(208,118,0,.20);color:#fff;box-shadow:inset 0 0 0 1.5px var(--or)}
.mgk-nav-i.is-on .mgk-nav-ic{background:var(--or);color:#1d1100;box-shadow:0 4px 10px -2px rgba(208,118,0,.55)}
.mgk-nav-i.is-on .mgk-badge{background:var(--or);color:#1d1100}
.mgk-nav-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px}
.mgk-nav-i.is-salir{color:#ffb4ad}
.mgk-nav-i.is-salir:hover{background:rgba(229,72,63,.14);color:#ffd2ce}
body[data-rol="nino"] .mgk-side{background:linear-gradient(180deg,#2b2160,#3b2b86)}
body[data-rol="nino"] .mgk-nav-i.is-on{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px #ffc46b}

/* hoja «Más» (móvil) */
.mgk-mas{display:grid;gap:8px}
.mgk-mas .mgk-fila{border:1px solid var(--bd);border-radius:var(--r-s)}

/* ---------- Botones ---------- */
.mgk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--bd2);background:#fff;color:var(--tx);font-weight:700;font-size:15px;line-height:1;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.mgk-btn svg{width:18px;height:18px;flex:none}
.mgk-btn:hover{background:var(--bg2);border-color:#cfd5de;color:var(--tx);text-decoration:none}
.mgk-btn:active{transform:translateY(1px)}
.mgk-btn.is-primario{background:var(--or-t);border-color:var(--or-t);color:#fff;box-shadow:0 6px 14px -8px rgba(180,95,0,.9)}
.mgk-btn.is-primario:hover{background:var(--or-h);border-color:var(--or-h);color:#fff}
.mgk-btn.is-sec{background:var(--or-bg);border-color:var(--or-bd);color:var(--or-h)}
.mgk-btn.is-sec:hover{background:#ffebc9;border-color:#ecc27e;color:var(--or-h)}
.mgk-btn.is-peligro{background:var(--mal);border-color:var(--mal);color:#fff}
.mgk-btn.is-peligro:hover{background:#951c16;border-color:#951c16;color:#fff}
.mgk-btn.is-fantasma{background:transparent;border-color:transparent;color:var(--tx2)}
.mgk-btn.is-fantasma:hover{background:var(--bg2);color:var(--tx)}
.mgk-btn.is-peq{min-height:36px;padding:0 13px;font-size:13.5px;border-radius:10px}
.mgk-btn.is-grande{min-height:52px;padding:0 24px;font-size:16.5px;border-radius:14px}
.mgk-btn.is-bloque{width:100%}
.mgk-btn[disabled],.mgk-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
.mgk-btn.is-cargando{pointer-events:none;color:transparent!important;position:relative}
.mgk-btn.is-cargando::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:mgk-gira .7s linear infinite}
.mgk-btn:not(.is-primario):not(.is-peligro).is-cargando::after{border-color:rgba(0,0,0,.15);border-top-color:var(--or-t)}
.mgk-btn-ico{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:11px;border:1px solid var(--bd);background:#fff;color:var(--tx2);transition:background .15s,color .15s,border-color .15s}
.mgk-btn-ico:hover{background:var(--or-bg);color:var(--or-t);border-color:var(--or-bd)}
.mgk-btn-ico svg{width:18px;height:18px}
@keyframes mgk-gira{to{transform:rotate(360deg)}}
body[data-rol="nino"] .mgk-btn{border-radius:16px;min-height:48px}
body[data-rol="nino"] .mgk-btn.is-primario{background:var(--or-t);box-shadow:0 8px 0 -3px #7a3a00}

/* ---------- Formularios ---------- */
.mgk-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.mgk-label{font-size:13.5px;font-weight:700;color:var(--tx)}
.mgk-input,.mgk-select,.mgk-textarea{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--bd2);border-radius:12px;background:#fff;font-size:16px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.mgk-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626c7e' 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 12px center;padding-right:38px}
.mgk-textarea{min-height:96px;resize:vertical;line-height:1.45}
.mgk-input::placeholder,.mgk-textarea::placeholder{color:#8a93a3}
.mgk-input:hover,.mgk-select:hover,.mgk-textarea:hover{border-color:#cdd3dc}
.mgk-input:focus,.mgk-select:focus,.mgk-textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(208,118,0,.16)}
.mgk-input[aria-invalid=true]{border-color:var(--mal)}
.mgk-ayuda{font-size:13px;color:var(--mut);line-height:1.4}
.mgk-error{font-size:13.5px;color:var(--mal);font-weight:600}
.mgk-form{display:flex;flex-direction:column;gap:16px}
.mgk-form-2{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.mgk-form-2{grid-template-columns:1fr 1fr}}
.mgk-check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--tx2);line-height:1.4;cursor:pointer}
.mgk-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:1.5px solid #b9c1cd;border-radius:7px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.mgk-check input:checked{background:var(--or-t);border-color:var(--or-t)}
.mgk-check input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.mgk-check input:focus-visible{outline:2.5px solid var(--or);outline-offset:2px}
.mgk-switch{position:relative;flex:none;width:50px;height:30px;border-radius:16px;border:0;background:#cfd5de;padding:0;transition:background .2s}
.mgk-switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--ease)}
.mgk-switch[aria-checked=true]{background:var(--ok)}
.mgk-switch[aria-checked=true]::after{transform:translateX(20px)}
.mgk-ajuste{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 0;border-top:1px solid var(--bd)}
.mgk-ajuste:first-child{border-top:0}
.mgk-ajuste-t b{display:block;font-size:15px}
.mgk-ajuste-t span{display:block;font-size:13.5px;color:var(--mut);margin-top:2px;max-width:60ch;line-height:1.4}
.mgk-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--bg2);border:1px solid var(--bd);gap:2px;flex-wrap:wrap}
.mgk-seg button{border:0;background:none;padding:7px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--tx2);min-height:34px;transition:background .15s,color .15s}
.mgk-seg button:hover{color:var(--tx)}
.mgk-seg button[aria-pressed=true]{background:#fff;color:var(--or-h);box-shadow:0 1px 3px rgba(16,24,40,.12),inset 0 0 0 1px var(--or-bd)}
.mgk-seg.is-bloque{display:flex}.mgk-seg.is-bloque button{flex:1}

/* PIN del niño */
.mgk-pin{display:flex;gap:12px;justify-content:center;margin:2px 0 6px}
.mgk-pin i{width:20px;height:20px;border-radius:50%;border:2.5px solid #c5ccd7;background:#fff;transition:background .15s,border-color .15s,transform .2s var(--ease)}
.mgk-pin i.is-on{background:var(--or);border-color:var(--or);transform:scale(1.12)}
.mgk-pin.is-error{animation:mgk-sacude .4s}
.mgk-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.mgk-keypad button{min-height:62px;border-radius:18px;border:1.5px solid var(--bd2);background:#fff;font-family:var(--f-d);font-size:28px;font-weight:700;color:var(--tx);transition:background .12s,transform .1s;-webkit-tap-highlight-color:transparent}
.mgk-keypad button:hover{background:var(--or-bg)}
.mgk-keypad button:active{transform:scale(.95);background:#ffe7c2}
.mgk-keypad button.is-aux{border-color:transparent;background:transparent;font-size:15px;font-family:var(--f-b);color:var(--tx2)}
@keyframes mgk-sacude{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* avatares */
.mgk-avatar{display:inline-block;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#eee;line-height:0}
.mgk-avatar svg{width:100%;height:100%}
.mgk-avatar.is-sm{width:32px;height:32px}.mgk-avatar.is-lg{width:76px;height:76px}.mgk-avatar.is-xl{width:104px;height:104px}
.mgk-avatares{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px}
.mgk-avatar-op{border:2.5px solid transparent;background:none;padding:2px;border-radius:50%;transition:transform .15s var(--ease),border-color .15s;aspect-ratio:1;display:grid}
.mgk-avatar-op:hover{transform:scale(1.06)}
.mgk-avatar-op[aria-pressed=true]{border-color:var(--or);box-shadow:0 0 0 3px rgba(208,118,0,.2)}
.mgk-avatar-op .mgk-avatar{width:100%;height:100%}

/* ---------- Tarjetas, bandas, píldoras ---------- */
.mgk-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:18px;min-width:0;display:flex;flex-direction:column;gap:14px}
.mgk-card.is-plana{box-shadow:none}
.mgk-card-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mgk-card-cab h2{font-family:var(--f-d);font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mgk-card-acc{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:700}
.mgk-card-acc a{color:var(--or-t);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.mgk-card-acc a:hover{text-decoration:underline}
.mgk-card-acc a svg{width:15px;height:15px}
body[data-rol="nino"] .mgk-card{border-width:1.5px}

.mgk-cab{display:flex;flex-direction:column;justify-content:space-between;gap:4px;height:112px;padding:9px 14px;background:var(--cr);border:1px solid var(--cr-bd);border-radius:13px;flex:none}
.mgk-cab-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--mut)}
.mgk-cab-n{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}
.mgk-cab-n b{font-family:var(--f-b);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;flex:none;font-variant-numeric:tabular-nums}
.mgk-cab-n span{font-size:13.5px;line-height:1.4;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgk-reparto{display:flex;height:7px;border-radius:4px;overflow:hidden;background:#ece5d8;gap:2px}
.mgk-reparto i{display:block;min-width:4px}
.mgk-cab-pie{height:22px;display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--tx2);overflow:hidden;white-space:nowrap}
.mgk-cab-pie span{display:inline-flex;align-items:center;gap:5px}
.mgk-cab-pie i{width:9px;height:9px;border-radius:3px;display:inline-block}

.mgk-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:13px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;background:var(--bg2);color:var(--tx2);border:1px solid var(--bd2)}
.mgk-pill svg{width:13px;height:13px}
.mgk-pill.is-ok,.mgk-pill.is-leve{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.mgk-pill.is-aviso,.mgk-pill.is-seria{background:var(--aviso-bg);color:var(--aviso);border-color:var(--aviso-bd)}
.mgk-pill.is-mal,.mgk-pill.is-grave{background:var(--mal-bg);color:var(--mal);border-color:var(--mal-bd)}
.mgk-pill.is-inf{background:var(--inf-bg);color:var(--inf);border-color:var(--inf-bd)}
.mgk-pill.is-or{background:var(--or-bg);color:var(--or-h);border-color:var(--or-bd)}
.mgk-pill.is-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(27,106,73,.5);animation:mgk-latido 1.8s infinite}
@keyframes mgk-latido{70%{box-shadow:0 0 0 7px rgba(27,106,73,0)}100%{box-shadow:0 0 0 0 rgba(27,106,73,0)}}

/* chips */
.mgk-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mgk-chips::-webkit-scrollbar{display:none}
.mgk-chips.is-envuelto{flex-wrap:wrap;overflow:visible}
.mgk-chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:19px;border:1.5px solid var(--bd2);background:#fff;font-size:14px;font-weight:700;color:var(--tx2);transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.mgk-chip:hover{border-color:#cbd2dc;color:var(--tx)}
.mgk-chip[aria-pressed=true]{background:var(--or-bg);border-color:var(--or);color:var(--or-h)}
.mgk-chip .mgk-avatar{width:24px;height:24px;margin-left:-6px}
.mgk-chip em{font-style:normal;font-size:12px;color:var(--mut);font-weight:800}
.mgk-chip svg{width:16px;height:16px}

/* pestañas */
.mgk-tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.mgk-tabs::-webkit-scrollbar{display:none}
.mgk-tabs button{flex:none;border:0;background:none;padding:12px 14px;font-weight:700;font-size:14.5px;color:var(--mut);position:relative;white-space:nowrap}
.mgk-tabs button:hover{color:var(--tx)}
.mgk-tabs button[aria-selected=true]{color:var(--or-h)}
.mgk-tabs button[aria-selected=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1.5px;height:3px;border-radius:3px 3px 0 0;background:var(--or)}

/* listas */
.mgk-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.mgk-fila{display:flex;align-items:center;gap:12px;padding:12px 4px;border:0;border-top:1px solid var(--bd);background:none;width:100%;text-align:left;text-decoration:none;color:inherit;min-width:0;transition:background .12s}
.mgk-lista>:first-child.mgk-fila,.mgk-lista>li:first-child>.mgk-fila{border-top:0}
a.mgk-fila:hover,button.mgk-fila:hover{background:#fcfaf6}
.mgk-fila-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--or-bg);color:var(--or-h)}
.mgk-fila-ico svg{width:20px;height:20px}
.mgk-fila-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mgk-fila-t{font-weight:700;font-size:15px;line-height:1.3;color:var(--tx);overflow-wrap:anywhere}
.mgk-fila-s{font-size:13px;color:var(--mut);display:flex;gap:6px;flex-wrap:wrap;align-items:center;line-height:1.35}
.mgk-fila-s .mgk-pp{width:3px;height:3px;border-radius:50%;background:#b5bcc8}
.mgk-fila-der{flex:none;display:flex;align-items:center;gap:8px;color:var(--mut);font-size:13px}
.mgk-fila-der svg{width:18px;height:18px}
.mgk-nuevo{width:9px;height:9px;border-radius:50%;background:var(--or);flex:none;box-shadow:0 0 0 3px rgba(208,118,0,.2)}

/* kpis */
.mgk-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){.mgk-kpis{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}}
.mgk-kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--bd);border-radius:14px;background:#fff;text-decoration:none;color:var(--tx);box-shadow:var(--sh);transition:border-color .15s,transform .2s var(--ease)}
.mgk-kpi:hover{border-color:var(--or-bd);transform:translateY(-2px)}
.mgk-kpi-n{font-family:var(--f-d);font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.mgk-kpi-t{font-size:13.5px;font-weight:700}
.mgk-kpi-s{font-size:12.5px;color:var(--mut)}
.mgk-kpi.is-mal .mgk-kpi-n{color:var(--mal)}
.mgk-kpi.is-mal{border-color:var(--mal-bd);background:#fffafa}

/* rejilla de bloques */
.mgk-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch}
@media (min-width:1000px){.mgk-grid{grid-template-columns:repeat(2,1fr)}.mgk-grid>.is-dos{grid-column:span 2}}
@media (min-width:1000px) and (max-width:1239.98px){.mgk-grid>.is-dos-m{grid-column:span 2}}
@media (min-width:1240px){.mgk-grid.is-tres{grid-template-columns:repeat(3,1fr)}.mgk-grid.is-tres>.is-dos{grid-column:span 2}}
.mgk-bloque{min-width:0}
.mgk-bloque-pie{margin-top:auto;border-top:1px solid var(--bd);padding-top:10px}

/* gráficos */
.mgk-graf{display:flex;flex-direction:column;gap:6px}
.mgk-graf-t{font-size:12.5px;font-weight:700;color:var(--mut)}
.mgk-linea{width:100%;height:auto;overflow:visible}
.mgk-linea text,.mgk-barras-v text{fill:#6b7486;font-size:10.5px;font-family:var(--f-b)}
.mgk-linea .rej{stroke:#edf0f4;stroke-width:1}
.mgk-linea .pt{cursor:pointer;transition:r .15s}
.mgk-linea .pt:hover{r:6}
.mgk-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2)}
.mgk-leyenda span{display:inline-flex;gap:6px;align-items:center}
.mgk-leyenda i{width:10px;height:10px;border-radius:3px}
.mgk-barras-h{display:flex;flex-direction:column;gap:2px}
.mgk-bh{display:grid;grid-template-columns:minmax(0,150px) 1fr 30px;gap:10px;align-items:center;padding:6px 6px;border-radius:9px;text-decoration:none;color:var(--tx);font-size:13.5px}
.mgk-bh:hover{background:#fcfaf6}
.mgk-bh .nom{display:flex;gap:8px;align-items:center;min-width:0;font-weight:600}
.mgk-bh .nom svg{width:16px;height:16px;flex:none}
.mgk-bh .pista{height:10px;border-radius:5px;background:#f1f3f6;overflow:hidden}
.mgk-bh .pista i{display:block;height:100%;border-radius:5px;transition:width .6s var(--ease)}
.mgk-bh .val{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* estados */
.mgk-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 18px;color:var(--tx2)}
.mgk-vacio-ico{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:var(--or-bg);color:var(--or-t);margin-bottom:4px}
.mgk-vacio-ico svg{width:28px;height:28px}
.mgk-vacio h3{font-family:var(--f-d);font-size:18px;color:var(--tx)}
.mgk-vacio p{max-width:44ch;font-size:14.5px;text-wrap:balance}
.mgk-cargando{display:grid;place-items:center;padding:44px}
.mgk-cargando::before{content:"";width:30px;height:30px;border-radius:50%;border:3px solid #eadfcb;border-top-color:var(--or);animation:mgk-gira .75s linear infinite}
.mgk-esqueleto{border-radius:12px;background:linear-gradient(90deg,#f1f3f6 25%,#f8f9fb 37%,#f1f3f6 63%);background-size:400% 100%;animation:mgk-brillo 1.4s ease infinite}
@keyframes mgk-brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}

.mgk-aviso{display:flex;gap:12px;padding:13px 15px;border-radius:13px;font-size:14px;line-height:1.45;background:var(--inf-bg);border:1px solid var(--inf-bd);color:#1d3f78}
.mgk-aviso>svg,.mgk-aviso>span:first-child{width:20px;height:20px;flex:none;margin-top:1px}
.mgk-aviso>span:first-child svg{width:20px;height:20px}
.mgk-aviso b{display:block;margin-bottom:2px}
.mgk-aviso.is-ok{background:var(--ok-bg);border-color:var(--ok-bd);color:#14543a}
.mgk-aviso.is-aviso{background:var(--aviso-bg);border-color:var(--aviso-bd);color:#6b4100}
.mgk-aviso.is-mal{background:var(--mal-bg);border-color:var(--mal-bd);color:#8e1d17}
.mgk-alerta-max{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:15px;background:linear-gradient(135deg,#7f1713,#b3261e);color:#fff;box-shadow:0 14px 30px -14px rgba(179,38,30,.8)}
.mgk-alerta-max .ico{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.mgk-alerta-max .ico svg{width:24px;height:24px}
.mgk-alerta-max .txt{flex:1;min-width:0}
.mgk-alerta-max b{display:block;font-size:15.5px;line-height:1.25}
.mgk-alerta-max small{display:block;font-size:13px;opacity:.9;margin-top:2px}
.mgk-alerta-max .mgk-btn{background:#fff;color:#8e1d17;border-color:#fff;flex:none}
.mgk-alerta-max .mgk-btn:hover{background:#ffe9e7}
@media (max-width:560px){.mgk-alerta-max{flex-wrap:wrap}.mgk-alerta-max .mgk-btn{width:100%}}

/* ---------- Modal ---------- */
.mgk-ov{position:fixed;inset:0;z-index:100;background:rgba(11,18,32,.55);display:flex;align-items:flex-end;justify-content:center;animation:mgk-vela .2s ease}
.mgk-dlg{position:relative;width:100%;max-height:94dvh;display:flex;flex-direction:column;background:#fff;border-radius:22px 22px 0 0;box-shadow:var(--sh-m);animation:mgk-sube .32s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.mgk-dlg-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:11px;border:0;background:var(--bg2);display:grid;place-items:center;color:var(--tx2)}
.mgk-dlg-x:hover{background:var(--or-bg);color:var(--or-t)}
.mgk-dlg-x svg{width:19px;height:19px}
.mgk-dlg-h{padding:20px 62px 6px 22px}
.mgk-dlg-h h2{font-family:var(--f-d);font-size:21px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.mgk-dlg-b{padding:10px 22px 18px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.mgk-dlg-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 18px;border-top:1px solid var(--bd);flex-wrap:wrap}
.mgk-dlg-f .mgk-btn{flex:1 1 140px}
@media (min-width:700px){
  .mgk-ov{align-items:center;padding:24px}
  .mgk-dlg{max-width:var(--dlg-ancho,560px);border-radius:22px;max-height:90dvh;animation-name:mgk-entra;padding-bottom:0}
  .mgk-dlg-f .mgk-btn{flex:0 0 auto}
}
@keyframes mgk-vela{from{opacity:0}}
@keyframes mgk-sube{from{transform:translateY(40px);opacity:.4}}
@keyframes mgk-entra{from{transform:translateY(14px) scale(.98);opacity:0}}

/* toasts */
.mgk-toasts{position:fixed;z-index:120;left:12px;right:12px;bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 12px);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.mgk-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:460px;padding:12px 16px;border-radius:14px;background:#141c2c;color:#fff;font-size:14.5px;font-weight:600;box-shadow:0 12px 30px -8px rgba(11,18,32,.5);animation:mgk-sube .3s var(--ease)}
.mgk-toast svg{width:19px;height:19px;flex:none}
.mgk-toast.is-ok svg{color:#34f5a4}.mgk-toast.is-error{background:#8e1d17}.mgk-toast.is-info svg{color:#8fb7ff}
@media (min-width:1024px){.mgk-toasts{bottom:24px;left:calc(var(--side) + 12px);align-items:center}}

/* banner de instalación */
.mgk-instalar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:15px;background:linear-gradient(135deg,#fff7e8,#fff1d6);border:1px solid var(--or-bd)}
.mgk-instalar .ico{width:44px;height:44px;border-radius:13px;background:var(--or-t);color:#fff;display:grid;place-items:center;flex:none}
.mgk-instalar .ico svg{width:22px;height:22px}
.mgk-instalar .txt{flex:1;min-width:0;font-size:14px;line-height:1.35}
.mgk-instalar .txt b{display:block;font-size:15px}
.mgk-instalar .acc{display:flex;gap:6px;flex:none}
@media (max-width:620px){.mgk-instalar{flex-wrap:wrap}.mgk-instalar .acc{width:100%}.mgk-instalar .acc .mgk-btn{flex:1}}

/* guía visual de instalación (iOS) */
.mgk-pasos{display:flex;flex-direction:column;gap:14px;counter-reset:p}
.mgk-paso{display:flex;gap:14px;align-items:flex-start;counter-increment:p}
.mgk-paso::before{content:counter(p);flex:none;width:30px;height:30px;border-radius:50%;background:var(--or-t);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.mgk-paso b{display:block}
.mgk-paso .mgk-mut{display:block}
.mgk-paso .mgk-ejemplo{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:7px 12px;border-radius:11px;background:var(--bg2);border:1px solid var(--bd2);font-size:13.5px;font-weight:700;color:var(--tx2)}
.mgk-paso .mgk-ejemplo svg{width:20px;height:20px;color:#007aff}

/* ---------- Acceso (no logueado) ---------- */
.mgk-acc{min-height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bg2)}
.mgk-acc-marca{position:relative;overflow:hidden;color:#fff;padding:28px 22px 30px;background:linear-gradient(160deg,var(--nav) 10%,#1a2a4a 100%)}
.mgk-acc-marca::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(208,118,0,.55),transparent 68%)}
.mgk-acc-logo{display:flex;align-items:center;gap:11px;font-family:var(--f-d);font-size:22px;font-weight:800;position:relative;z-index:1}
.mgk-acc-logo svg{width:38px;height:38px}
.mgk-acc-claim{position:relative;z-index:1;font-family:var(--f-d);font-size:clamp(27px,6.2vw,46px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:22px 0 10px;max-width:15ch;text-wrap:balance}
.mgk-acc-sub{position:relative;z-index:1;color:#c3cde0;max-width:44ch;font-size:15.5px}
.mgk-acc-pts{position:relative;z-index:1;display:none;flex-direction:column;gap:14px;margin-top:30px}
.mgk-acc-pts div{display:flex;gap:12px;align-items:flex-start;color:#dbe3f2;font-size:14.5px;max-width:46ch}
.mgk-acc-pts div>span:first-child{flex:none;width:22px;height:22px;display:block;margin-top:1px}
.mgk-acc-pts svg{width:22px;height:22px;color:#ffb347}
.mgk-acc-panel{display:flex;align-items:flex-start;justify-content:center;padding:22px 16px 40px}
.mgk-acc-card{width:100%;max-width:460px;background:#fff;border:1px solid var(--bd);border-radius:22px;box-shadow:var(--sh);padding:26px 22px;display:flex;flex-direction:column;gap:18px;margin-top:-34px;position:relative;z-index:2}
.mgk-acc-card h1{font-family:var(--f-d);font-size:26px;letter-spacing:-.02em;line-height:1.15}
.mgk-acc-opc{display:grid;gap:12px}
.mgk-acc-op{display:flex;align-items:center;gap:14px;padding:16px;border-radius:17px;border:1.5px solid var(--bd2);background:#fff;text-align:left;text-decoration:none;color:var(--tx);transition:border-color .15s,transform .2s var(--ease),box-shadow .15s}
.mgk-acc-op:hover{border-color:var(--or);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(208,118,0,.6)}
.mgk-acc-op .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;background:var(--or-bg);color:var(--or-t)}
.mgk-acc-op .ico svg{width:26px;height:26px}
.mgk-acc-op.is-nino .ico{background:#ece9fb;color:#5b4bd1}
.mgk-acc-op b{display:block;font-size:17px;font-family:var(--f-d);color:var(--tx)}
.mgk-acc-op span{font-size:13.5px;color:var(--mut);line-height:1.35;display:block}
.mgk-acc-op>svg{margin-left:auto;width:20px;height:20px;color:var(--mut)}
.mgk-acc-pie{font-size:14px;color:var(--mut);text-align:center}
.mgk-acc-pie a{font-weight:700}
.mgk-acc-volver{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--tx2);text-decoration:none;align-self:flex-start;margin:-4px 0 -4px -6px;padding:6px}
.mgk-acc-volver svg{width:17px;height:17px;transform:rotate(180deg)}
@media (min-width:960px){
  .mgk-acc{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .mgk-acc-marca{padding:48px 56px;display:flex;flex-direction:column;justify-content:center}
  .mgk-acc-marca .mgk-acc-logo{position:absolute;top:44px;left:56px}
  .mgk-acc-pts{display:flex}
  .mgk-acc-panel{align-items:center;padding:40px}
  .mgk-acc-card{margin-top:0;padding:34px 32px}
}

/* ---------- Onboarding ---------- */
.mgk-onb{min-height:100dvh;background:var(--bg2);display:flex;flex-direction:column}
.mgk-onb-top{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.mgk-onb-top .mgk-top-marca{display:flex}
.mgk-onb-pasos{display:flex;gap:6px;flex:1;justify-content:center;max-width:420px;margin:0 auto}
.mgk-onb-pasos i{flex:1;height:6px;border-radius:3px;background:#e7e9ee;transition:background .3s}
.mgk-onb-pasos i.is-hecho{background:var(--or)}
.mgk-onb-pasos i.is-on{background:var(--or-t)}
.mgk-onb-cuerpo{flex:1;display:flex;justify-content:center;padding:22px 16px 50px}
.mgk-onb-card{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}
.mgk-onb-card>.mgk-card{padding:22px}
.mgk-onb-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.mgk-ejemplo-tema{border:1px solid var(--bd);border-radius:15px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:9px}

/* ---------- Temas ---------- */
.mgk-filtros{display:flex;flex-direction:column;gap:2px}
.mgk-filtro{display:flex;align-items:center;gap:10px}
.mgk-filtro>b{flex:none;font-size:12.5px;color:var(--mut);width:68px}
.mgk-filtro .mgk-chips{flex:1;min-width:0}
@media (max-width:600px){.mgk-filtro{flex-direction:column;align-items:stretch;gap:0}.mgk-filtro>b{width:auto;margin-bottom:-2px}}
.mgk-temas{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1100px){.mgk-temas.hay-detalle{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.mgk-temas-det{position:sticky;top:calc(var(--top) + 16px);max-height:calc(100dvh - var(--top) - 32px);overflow:auto}}
.mgk-tema-fila{display:flex;gap:13px;align-items:center;padding:14px;border:1px solid var(--bd);border-radius:15px;background:#fff;text-align:left;width:100%;transition:border-color .15s,box-shadow .15s,transform .2s var(--ease);color:inherit;text-decoration:none}
.mgk-tema-fila:hover{border-color:var(--or-bd);box-shadow:var(--sh)}
.mgk-tema-fila.is-sel{border-color:var(--or);box-shadow:0 0 0 3px rgba(208,118,0,.14)}
.mgk-tema-fila.is-nuevo-live{animation:mgk-resalta 2.4s ease}
@keyframes mgk-resalta{0%{background:#fff0d0}100%{background:#fff}}
.mgk-cat-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--c,#f3ecdf);color:var(--ct,#7a4f00)}
.mgk-cat-ico svg{width:22px;height:22px}
.mgk-tema-lista{display:flex;flex-direction:column;gap:10px}
.mgk-det{display:flex;flex-direction:column;gap:18px}
.mgk-det-cab{display:flex;gap:14px;align-items:flex-start}
.mgk-det-cab .mgk-cat-ico{width:52px;height:52px;border-radius:15px}
.mgk-det-cab h2{font-family:var(--f-d);font-size:21px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.mgk-det-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.mgk-sec{display:flex;flex-direction:column;gap:8px}
.mgk-sec>h3{font-family:var(--f-d);font-size:16px;display:flex;gap:8px;align-items:center}
.mgk-sec>h3 svg{width:18px;height:18px;color:var(--or-t)}
.mgk-sec p,.mgk-sec li{font-size:15px;color:var(--tx2);line-height:1.5}
.mgk-sec ul{padding-left:20px;display:flex;flex-direction:column;gap:5px}
.mgk-frase{display:flex;gap:10px;align-items:flex-start;padding:12px 12px 12px 14px;border:1px solid var(--bd);border-radius:13px;background:var(--cr)}
.mgk-frase q{flex:1;font-size:15px;line-height:1.45;color:var(--tx);quotes:"«" "»"}
.mgk-frase button{flex:none}
.mgk-evi{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:15px;border:1px solid var(--mal-bd);background:#fffafa}
.mgk-evi-img{position:relative;border-radius:12px;overflow:hidden;background:#222;max-width:340px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mgk-evi-img img{width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.mgk-evi-img span{position:absolute;left:8px;bottom:8px;padding:4px 9px;border-radius:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.03em}
.mgk-protocolo{display:flex;flex-direction:column;gap:12px;padding:15px;border-radius:15px;border:1px solid var(--mal-bd);background:#fff}
.mgk-prot-niv{display:grid;gap:10px;grid-template-columns:1fr}
.mgk-prot-n{border:1.5px solid var(--bd2);border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;opacity:.72}
.mgk-prot-n.is-actual{opacity:1;border-width:2px}
.mgk-prot-n.is-leve.is-actual{border-color:var(--ok);background:var(--ok-bg)}
.mgk-prot-n.is-seria.is-actual{border-color:#c98a00;background:var(--aviso-bg)}
.mgk-prot-n.is-gravisima.is-actual{border-color:var(--mal);background:var(--mal-bg)}
.mgk-prot-n ul{padding-left:19px;font-size:14px;color:var(--tx2);display:flex;flex-direction:column;gap:3px}
.mgk-tel{display:flex;gap:8px;flex-wrap:wrap}
.mgk-tel a{display:inline-flex;gap:8px;align-items:center;min-height:42px;padding:0 14px;border-radius:12px;background:var(--mal);color:#fff;font-weight:800;text-decoration:none;font-size:14px}
.mgk-tel a small{font-weight:600;opacity:.9}
.mgk-hist{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--tx2)}
.mgk-hist div{display:flex;gap:10px}.mgk-hist time{color:var(--mut);flex:none;width:96px}
.mgk-ayuda-resp{padding:14px 16px;border-radius:14px;background:var(--cr);border:1px solid var(--cr-bd);font-size:15px;color:var(--tx);line-height:1.55;white-space:pre-wrap}
.mgk-det-acc{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Tarjetas de hijo / conexiones ---------- */
.mgk-hijos{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.mgk-hijos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1280px){.mgk-hijos{grid-template-columns:repeat(3,1fr)}}
.mgk-hijo{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:17px;border:1.5px solid var(--bd);background:#fff;text-align:left;width:100%;transition:border-color .15s,box-shadow .15s}
button.mgk-hijo:hover{border-color:var(--or-bd)}
.mgk-hijo[aria-pressed=true]{border-color:var(--or);box-shadow:0 0 0 3px rgba(208,118,0,.13)}
.mgk-hijo.is-ok{background:linear-gradient(135deg,#fff,#f2faf5)}
.mgk-hijo.is-mal{background:linear-gradient(135deg,#fff,#fff3f2);border-color:var(--mal-bd)}
.mgk-hijo.is-aviso{background:linear-gradient(135deg,#fff,#fff9ea)}
.mgk-hijo-cab{display:flex;gap:12px;align-items:center}
.mgk-hijo-cab h3{font-family:var(--f-d);font-size:18px;line-height:1.1}
.mgk-hijo-cab small{color:var(--mut);font-size:13px}
.mgk-hijo-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mgk-hijo-datos div{background:rgba(16,24,40,.035);border-radius:11px;padding:8px 10px}
.mgk-hijo-datos b{display:block;font-family:var(--f-d);font-size:19px;line-height:1.1}
.mgk-hijo-datos span{font-size:12px;color:var(--mut);font-weight:600}
.mgk-chip-oscuro{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:13px;background:#141c2c;color:#fff;font-size:12px;font-weight:700}
.mgk-punto-e{width:8px;height:8px;border-radius:50%;background:#9aa4b5}
.is-ok>.mgk-hijo-cab .mgk-punto-e,.mgk-punto-e.is-ok{background:#34f5a4;animation:mgk-latido 1.8s infinite}
.mgk-punto-e.is-mal{background:#ff6a60}.mgk-punto-e.is-aviso{background:#ffc247}
.mgk-qr-caja{display:grid;place-items:center;gap:12px;padding:8px 0 4px}
.mgk-qr{width:min(280px,72vw);aspect-ratio:1;border-radius:16px;border:1px solid var(--bd2);padding:12px;background:#fff;display:grid;place-items:center}
.mgk-qr img{width:100%;height:100%;image-rendering:pixelated}
.mgk-qr.is-cargando::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid #eadfcb;border-top-color:var(--or);animation:mgk-gira .75s linear infinite}
.mgk-cuenta{font-family:var(--f-d);font-size:15px;font-weight:700;color:var(--tx2)}
.mgk-instr{display:flex;flex-direction:column;gap:9px;font-size:14.5px;color:var(--tx2);padding-left:0;list-style:none;counter-reset:i}
.mgk-instr li{display:flex;gap:10px;counter-increment:i;line-height:1.4}
.mgk-instr li::before{content:counter(i);flex:none;width:24px;height:24px;border-radius:50%;background:var(--or-bg);color:var(--or-h);font-weight:800;font-size:13px;display:grid;place-items:center}
.mgk-redes{display:flex;gap:8px;flex-wrap:wrap}
.mgk-redes span{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:18px;border:1.5px dashed var(--bd2);color:var(--mut);font-weight:700;font-size:13.5px}

/* ajustes */
.mgk-umbral{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--bd);grid-template-columns:1fr}
.mgk-umbral:first-child{border-top:0}
.mgk-umbral-n{display:flex;gap:11px;align-items:center}
.mgk-umbral-n .mgk-cat-ico{width:36px;height:36px;border-radius:11px}
.mgk-umbral-n .mgk-cat-ico svg{width:18px;height:18px}
.mgk-umbral-n b{display:block;font-size:14.5px}
.mgk-umbral-n div span{font-size:12.5px;color:var(--mut);line-height:1.3;display:block}
.mgk-umbral-d{font-size:13px;color:var(--mut);min-height:18px}
@media (min-width:900px){.mgk-umbral{grid-template-columns:minmax(0,1fr) auto;align-items:center}.mgk-umbral-d{grid-column:1/-1}}
.mgk-ajustes-g{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media (min-width:1100px){.mgk-ajustes-g.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mgk-faq details{border-top:1px solid var(--bd);padding:12px 0}
.mgk-faq details:first-child{border-top:0}
.mgk-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.mgk-faq summary::-webkit-details-marker{display:none}
.mgk-faq summary::after{content:"+";font-size:22px;color:var(--or-t);line-height:1}
.mgk-faq details[open] summary::after{content:"–"}
.mgk-faq p{margin-top:8px;color:var(--tx2);font-size:14.5px}
.mgk-codigo{display:inline-flex;align-items:center;gap:10px;font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:700;letter-spacing:.18em;padding:8px 14px;border-radius:13px;background:var(--cr);border:1px dashed var(--cr-bd)}

/* ---------- Chat (para el agente CHAT) ---------- */
.mgk-chat{display:flex;flex-direction:column;height:calc(100dvh - var(--top) - var(--tab) - env(safe-area-inset-bottom) - 28px);min-height:340px;border:1px solid var(--bd);border-radius:var(--r);background:#fff;overflow:hidden}
@media (min-width:1024px){.mgk-chat{height:calc(100dvh - var(--top) - 44px)}}
.mgk-chat-lista{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#fdfcfa,#fff)}
.mgk-burbuja{max-width:min(86%,620px);padding:11px 15px;border-radius:18px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;position:relative}
.mgk-burbuja.is-agente{align-self:flex-start;background:#f2f4f7;color:var(--tx);border-bottom-left-radius:6px}
.mgk-burbuja.is-yo{align-self:flex-end;background:var(--or-t);color:#fff;border-bottom-right-radius:6px}
.mgk-burbuja-meta{display:block;font-size:11.5px;opacity:.7;margin-top:4px}
.mgk-escribiendo{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 16px;border-radius:18px;background:#f2f4f7}
.mgk-escribiendo i{width:7px;height:7px;border-radius:50%;background:#8a93a3;animation:mgk-bote 1.1s infinite}
.mgk-escribiendo i:nth-child(2){animation-delay:.15s}.mgk-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes mgk-bote{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.mgk-chat-in{display:flex;gap:10px;align-items:flex-end;padding:12px;border-top:1px solid var(--bd);background:#fff}
.mgk-chat-in textarea{flex:1;min-height:46px;max-height:140px;resize:none;border:1.5px solid var(--bd2);border-radius:15px;padding:11px 14px;font-size:16px;line-height:1.35}
.mgk-chat-in textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(208,118,0,.16)}
.mgk-chat-in .mgk-btn{min-height:46px;width:46px;padding:0;border-radius:15px}
.mgk-sugerencias{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.mgk-accion-chat{align-self:flex-start;max-width:min(92%,560px);border:1px solid var(--or-bd);background:var(--or-bg);border-radius:15px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
body[data-rol="nino"] .mgk-burbuja.is-yo{background:var(--nino-a)}
body[data-rol="nino"] .mgk-burbuja.is-agente{background:#fff4e0}
body[data-rol="nino"] .mgk-chat{border-width:1.5px}

/* ---------- Monedas ---------- */
.mgk-moneda{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffe08a,#f0a30a 62%,#c07600);color:#7a4300;font-weight:800;font-size:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 2px 4px rgba(150,90,0,.35);flex:none;line-height:1}
.mgk-moneda.is-peq{width:20px;height:20px;font-size:11px}
.mgk-moneda.is-grande{width:46px;height:46px;font-size:22px}
.mgk-saldo{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-d);font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.mgk-meta{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--bd);border-radius:15px;background:#fff}
.mgk-meta-cab{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.mgk-meta-cab b{font-size:15.5px;line-height:1.3}
.mgk-meta-val{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-family:var(--f-d);font-size:17px;white-space:nowrap}
.mgk-meta-pie{display:flex;gap:8px;flex-wrap:wrap}
.mgk-meta.is-propuesta{background:#fffdf7;border-color:var(--or-bd)}
.mgk-meta.is-contraoferta{background:#f6f9ff;border-color:var(--inf-bd)}
.mgk-meta.is-acordada{background:#f6fcf8;border-color:var(--ok-bd)}
.mgk-meta.is-archivada{opacity:.6}
.mgk-mov{display:flex;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--bd)}
.mgk-mov:first-child{border-top:0}
.mgk-mov .d{font-family:var(--f-d);font-weight:800;font-size:17px;min-width:56px;text-align:right}
.mgk-mov.is-mas .d{color:var(--ok)}.mgk-mov.is-menos .d{color:var(--mal)}
.mgk-prog{height:10px;border-radius:5px;background:#f0e6d3;overflow:hidden}
.mgk-prog i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#f0a30a,var(--or));transition:width .7s var(--ease)}

/* ---------- Niño ---------- */
.mgk-nino-hero{display:flex;gap:16px;align-items:center;padding:20px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#5b4bd1,#8a5fe0 55%,#e2487a);box-shadow:0 18px 34px -18px rgba(91,75,209,.8)}
.mgk-nino-hero h1{font-family:var(--f-d);font-size:clamp(24px,5vw,34px);line-height:1.1;letter-spacing:-.02em}
.mgk-nino-hero p{opacity:.92;margin-top:4px;font-size:15.5px}
.mgk-nino-hero .mgk-avatar{border:3px solid rgba(255,255,255,.7)}
.mgk-animo{display:flex;gap:8px;justify-content:space-between;max-width:420px}
.mgk-animo-op{flex:1;aspect-ratio:1;max-width:72px;border-radius:50%;border:2.5px solid var(--bd2);background:#fff;font-size:30px;line-height:1;display:grid;place-items:center;transition:transform .2s var(--ease),border-color .15s,background .15s}
.mgk-animo-op:hover{transform:scale(1.08)}
.mgk-animo-op[aria-pressed=true]{border-color:var(--or);background:var(--or-bg);transform:scale(1.12)}

/* ---------- Impresión / pequeños ajustes ---------- */
@media (max-width:380px){.mgk-hijo-datos b{font-size:17px}.mgk-cab-n b{font-size:23px}.mgk-btn{padding:0 14px}}

@media (max-width:640px){.mgk-fila-der .mgk-btn.is-peq[aria-hidden]{display:none}}

.mgk-solo-movil{display:none}
@media (max-width:699px){.mgk-solo-movil{display:inline-flex;align-self:flex-start}.mgk-filtros:not(.is-abierto){display:none}}
@media (max-height:780px){.mgk-keypad button{min-height:50px;font-size:24px}.mgk-keypad{gap:8px}}