/* Design System de 811digital (/design-system) — Material 3 Expressive con Google Sans Flex.
   Misma base que el portal de Garzón (dg-theme.css): tokens M3 verificados contra el kit oficial,
   dirección Expressive (borde fino en vez de sombra, radios grandes, peso 700 en acciones, curvas
   reales de @material/web). Todo vive bajo .m3 para no tocar el resto del sitio.
   El color de marca es una sola variable (--m3-primary) y los demás roles se derivan de ella con
   color-mix: así se demuestra la marca intercambiable (white-label) con el selector de marca. */

.m3{
  --m3-primary:#2952FF;
  --m3-on-primary:#fff;
  --m3-primary-hover:color-mix(in srgb,var(--m3-primary) 84%,#000);
  --m3-primary-container:color-mix(in srgb,var(--m3-primary) 14%,#fff);
  --m3-on-primary-container:color-mix(in srgb,var(--m3-primary) 62%,#000);
  --m3-surface:#fff;
  --m3-surface-container-low:color-mix(in srgb,var(--m3-primary) 3%,#F7F8FA);
  --m3-surface-container:color-mix(in srgb,var(--m3-primary) 6%,#F1F3F6);
  --m3-surface-container-high:color-mix(in srgb,var(--m3-primary) 9%,#EBEDF1);
  --m3-on-surface:#1D1B20;
  --m3-on-surface-variant:#49454F;
  --m3-outline:#79747E;
  --m3-outline-variant:#CAC4D0;
  --m3-inverse-surface:#313033;
  --m3-inverse-on-surface:#F4EFF4;
  --m3-error:#B3261E; --m3-error-container:#F9DEDC;
  --m3-ok:#1E7A46; --m3-warn:#B5651D; --m3-info:#0C447C;
  --m3-elev-1:0 1px 2px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --m3-elev-3:0 1px 3px 0 rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
  --m3-ease-standard:cubic-bezier(.2,0,0,1);
  --m3-ease-emph-decel:cubic-bezier(.05,.7,.1,1);
  --m3-ease-emph-accel:cubic-bezier(.3,0,.8,.15);
  --m3-ease-spring:cubic-bezier(.175,.885,.32,1.275);
  /* el loading indicator (m3-loading.js, el mismo de Garzón) toma estos tres */
  --dg-blue:var(--m3-primary); --dg-blue-tint:var(--m3-primary-container); --dg-blue-dark:var(--m3-on-primary-container);
  font-family:'Google Sans Flex','Google Sans',system-ui,sans-serif;
  color:var(--m3-on-surface);
  transition:--m3-primary .3s;
}
.m3 *{font-family:inherit}
.m3 .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased}
.m3 code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--m3-on-surface-variant)}

/* ---------- estructura de la página ---------- */
.m3-sec{padding:56px 0;border-top:1px solid var(--bdr,#e2e2e2)}
.m3-sec:first-child{border-top:none;padding-top:0}
.m3-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.m3-sec-title{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.2px;margin:0}
.m3-sec-sub{font-size:14px;line-height:20px;color:var(--m3-on-surface-variant);margin:0;max-width:560px}
.m3-panel{background:var(--m3-surface);border:1px solid var(--m3-outline-variant);border-radius:28px;padding:28px}
.m3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.m3-card-title{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.1px;margin:0 0 4px}
.m3-card-sub{font-size:12px;line-height:16px;color:var(--m3-on-surface-variant);margin:0 0 20px}
.m3-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- marca ---------- */
.m3-brand{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.m3-brand-dot{width:14px;height:14px;border-radius:50%;display:inline-block}

/* ---------- tipografía (escala M3) ---------- */
.m3-type-row{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--m3-outline-variant)}
.m3-type-row:last-child{border-bottom:none}
.m3-type-tag{font-size:12px;line-height:16px;color:var(--m3-on-surface-variant)}
.m3-type-tag b{display:block;color:var(--m3-on-surface);font-size:13px;font-weight:700;margin-bottom:2px}
.m3-display-l{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-.25px}
.m3-display-m{font-size:45px;line-height:52px;font-weight:400}
.m3-display-s{font-size:36px;line-height:44px;font-weight:400}
.m3-headline-l{font-size:32px;line-height:40px;font-weight:400}
.m3-headline-m{font-size:28px;line-height:36px;font-weight:400}
.m3-headline-s{font-size:24px;line-height:32px;font-weight:400}
.m3-title-l{font-size:22px;line-height:28px;font-weight:400}
.m3-title-m{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px}
.m3-title-s{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px}
.m3-body-l{font-size:16px;line-height:24px;font-weight:400;letter-spacing:.5px}
.m3-body-m{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px}
.m3-body-s{font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px}
.m3-label-l{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px}
.m3-label-m{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px}
.m3-label-s{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px}
.m3-emph{font-weight:700}

/* ---------- color ---------- */
.m3-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.m3-swatch{border-radius:20px;padding:14px;min-height:96px;display:flex;flex-direction:column;justify-content:flex-end;font-size:12px;line-height:16px;border:1px solid transparent}
.m3-swatch b{font-size:13px;font-weight:700}

/* ---------- forma y elevación ---------- */
.m3-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px}
.m3-shape{aspect-ratio:1;background:var(--m3-primary-container);color:var(--m3-on-primary-container);display:flex;align-items:flex-end;padding:12px;font-size:12px;font-weight:700}
.m3-elev{aspect-ratio:1.4;background:var(--m3-surface);border-radius:16px;display:flex;align-items:flex-end;padding:12px;font-size:12px;font-weight:700}

/* ---------- botones (Expressive: píldora que se vuelve más cuadrada al presionar) ---------- */
.m3-btn{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.1px;padding:10px 24px;min-height:40px;border-radius:100px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:none;color:var(--m3-primary);transition:background .15s var(--m3-ease-standard),border-radius .25s var(--m3-ease-spring),transform .2s var(--m3-ease-spring),box-shadow .15s}
.m3-btn:active{border-radius:12px;transform:scale(.97)}
.m3-btn:focus-visible{outline:2px solid var(--m3-primary);outline-offset:2px}
.m3-btn .material-symbols-outlined{font-size:18px}
.m3-btn--filled{background:var(--m3-primary);color:var(--m3-on-primary)}
.m3-btn--filled:hover{background:var(--m3-primary-hover)}
.m3-btn--tonal{background:var(--m3-primary-container);color:var(--m3-on-primary-container)}
.m3-btn--tonal:hover{background:color-mix(in srgb,var(--m3-primary) 22%,#fff)}
.m3-btn--outlined{border:1px solid var(--m3-outline-variant);padding:9px 23px}
.m3-btn--outlined:hover,.m3-btn--text:hover{background:color-mix(in srgb,var(--m3-primary) 8%,transparent)}
.m3-btn--elevated{background:var(--m3-surface-container-low);box-shadow:var(--m3-elev-1)}
.m3-btn--elevated:hover{box-shadow:var(--m3-elev-3)}
.m3-btn--text{padding:10px 12px}
.m3-btn--lg{font-size:16px;line-height:24px;padding:16px 32px;min-height:56px}
.m3-fab{width:56px;height:56px;border-radius:16px;border:none;cursor:pointer;background:var(--m3-primary-container);color:var(--m3-on-primary-container);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--m3-elev-3);transition:border-radius .25s var(--m3-ease-spring),transform .2s var(--m3-ease-spring)}
.m3-fab:active{border-radius:28px;transform:scale(.95)}
.m3-icon-btn{width:40px;height:40px;border-radius:100px;border:none;cursor:pointer;background:var(--m3-surface-container-high);color:var(--m3-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;transition:border-radius .25s var(--m3-ease-spring),background .15s}
.m3-icon-btn.on{background:var(--m3-primary);color:var(--m3-on-primary);border-radius:12px}

/* ---------- chips ---------- */
.m3-chip{height:32px;padding:0 16px;border-radius:100px;border:1px solid var(--m3-outline-variant);background:transparent;color:var(--m3-on-surface-variant);font-size:13px;font-weight:600;letter-spacing:.1px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .15s var(--m3-ease-standard),transform .2s var(--m3-ease-spring),padding .2s var(--m3-ease-standard)}
.m3-chip:hover{background:var(--m3-surface-container)}
.m3-chip:active{transform:scale(.96)}
.m3-chip .material-symbols-outlined{font-size:18px;width:0;overflow:hidden;transition:width .2s var(--m3-ease-standard)}
.m3-chip.sel{background:var(--m3-primary);color:var(--m3-on-primary);border-color:transparent;padding-left:10px}
.m3-chip.sel .material-symbols-outlined{width:18px}

/* ---------- campo de texto (píldora) ---------- */
.m3-field{width:100%;max-width:340px;font-size:16px;line-height:24px;padding:9px 20px;border-radius:100px;border:1px solid var(--m3-outline);background:var(--m3-surface);color:var(--m3-on-surface);transition:border-color .15s}
.m3-field:focus{outline:none;border:2px solid var(--m3-primary);padding:8px 19px}
.m3-field::placeholder{color:var(--m3-on-surface-variant);opacity:.7}

/* ---------- switch (el thumb crece con el overshoot real de @material/web) ---------- */
.m3-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:500}
.m3-switch input{position:absolute;opacity:0;width:1px;height:1px}
.m3-switch-track{position:relative;width:52px;height:32px;border-radius:100px;border:2px solid var(--m3-outline);background:var(--m3-surface-container-high);transition:background .2s,border-color .2s;flex:none}
.m3-switch-thumb{position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--m3-outline);transform:translateY(-50%);transition:left .3s var(--m3-ease-spring),width .3s var(--m3-ease-spring),height .3s var(--m3-ease-spring),background .2s}
.m3-switch input:checked+.m3-switch-track{background:var(--m3-primary);border-color:var(--m3-primary)}
.m3-switch input:checked+.m3-switch-track .m3-switch-thumb{left:22px;width:24px;height:24px;background:var(--m3-on-primary)}
.m3-switch input:focus-visible+.m3-switch-track{outline:2px solid var(--m3-primary);outline-offset:2px}

/* ---------- checkbox ---------- */
.m3-check{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px}
.m3-check input{position:absolute;opacity:0;width:1px;height:1px}
.m3-check-box{width:18px;height:18px;border-radius:2px;border:2px solid var(--m3-on-surface-variant);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;flex:none}
.m3-check-box svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .1s linear,transform .2s var(--m3-ease-spring)}
.m3-check input:checked+.m3-check-box{background:var(--m3-primary);border-color:var(--m3-primary)}
.m3-check input:checked+.m3-check-box svg{opacity:1;transform:scale(1)}

/* ---------- badges (Expressive: relleno sólido) ---------- */
.m3-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--m3-primary)}
.m3-badge--ok{background:var(--m3-ok)}.m3-badge--warn{background:var(--m3-warn)}.m3-badge--err{background:var(--m3-error)}
.m3-badge--soft{background:var(--m3-primary-container);color:var(--m3-on-primary-container)}

/* ---------- lista segmentada (Expressive: ítems separados, extremos redondeados) ---------- */
.m3-list{display:flex;flex-direction:column;gap:2px;max-width:420px}
.m3-list-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--m3-surface-container);border-radius:4px;cursor:pointer;transition:background .15s,border-radius .25s var(--m3-ease-spring)}
.m3-list-item:first-child{border-radius:20px 20px 4px 4px}
.m3-list-item:last-child{border-radius:4px 4px 20px 20px}
.m3-list-item:hover{background:var(--m3-surface-container-high)}
.m3-list-item:active{border-radius:20px}
.m3-list-icon{width:40px;height:40px;border-radius:50%;background:var(--m3-primary-container);color:var(--m3-on-primary-container);display:flex;align-items:center;justify-content:center;flex:none}
.m3-list-text b{display:block;font-size:16px;line-height:24px;font-weight:500}
.m3-list-text span{font-size:14px;line-height:20px;color:var(--m3-on-surface-variant)}

/* ---------- tarjeta ---------- */
.m3-card{border:1px solid var(--m3-outline-variant);border-radius:24px;padding:20px;background:var(--m3-surface);max-width:340px}
.m3-card-kpi{font-size:36px;line-height:44px;font-weight:700;letter-spacing:-.5px;margin:8px 0 4px}

/* ---------- progreso y carga ---------- */
.m3-wave{position:relative;height:72px;border-radius:20px;background:var(--m3-surface-container-low);overflow:hidden}
.m3-wave canvas{position:absolute;left:24px;right:64px;top:0;width:calc(100% - 88px);height:100%;display:block}
.m3-wave-pct{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--m3-on-surface-variant)}
.m3-wave--dark{background:#000}
.m3-wave--dark .m3-wave-pct{color:#fff}
.m3-loaders{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.m3-loaders figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--m3-on-surface-variant)}

/* ---------- snackbar (scale + fade, MDC) ---------- */
.m3-snackbar{position:fixed;left:50%;bottom:24px;z-index:70;min-width:280px;max-width:min(560px,calc(100vw - 32px));background:var(--m3-inverse-surface);color:var(--m3-inverse-on-surface);border-radius:16px;padding:14px 16px 14px 20px;display:flex;align-items:center;gap:16px;font-size:14px;line-height:20px;box-shadow:var(--m3-elev-3);opacity:0;transform:translateX(-50%) scale(.8);pointer-events:none;transition:opacity .15s linear,transform .15s var(--m3-ease-emph-decel)}
.m3-snackbar.show{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto}
.m3-snackbar button{margin-left:auto;background:none;border:none;color:color-mix(in srgb,var(--m3-primary) 45%,#fff);font-weight:700;font-size:14px;cursor:pointer;padding:6px 8px;border-radius:100px}

/* ---------- movimiento ---------- */
.m3-motion-table{width:100%;border-collapse:collapse;font-size:14px}
.m3-motion-table th{text-align:left;font-size:12px;font-weight:700;color:var(--m3-on-surface-variant);padding:0 12px 10px 0;border-bottom:1px solid var(--m3-outline-variant)}
.m3-motion-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--m3-outline-variant);vertical-align:middle}
.m3-motion-table tr:last-child td{border-bottom:none}
.m3-ease-demo{width:120px;height:8px;border-radius:100px;background:var(--m3-surface-container-high);position:relative;overflow:hidden}
.m3-ease-demo i{position:absolute;top:0;left:0;width:24px;height:8px;border-radius:100px;background:var(--m3-primary)}
.m3-motion-table.play .m3-ease-demo i{left:96px}

@media(max-width:700px){
  .m3-panel{padding:20px;border-radius:24px}
  .m3-type-row{grid-template-columns:1fr;gap:6px}
  .m3-display-l{font-size:44px;line-height:52px}
  .m3-sec-title{font-size:26px;line-height:32px}
  .m3-motion-table th:nth-child(3),.m3-motion-table td:nth-child(3){display:none}
}