/* =====================================================================
   Chispa Matemáticas — mismo cuaderno escolar que Chispa English,
   con verde «hoja» como color de la materia y material dibujado grande.
   ===================================================================== */
.mate { --math: #12A06E; --math-deep: #0B7550; --math-tint: #DDF5EA; }
.m-wrap { max-width: 860px; }

/* ---------- inicio / mapa ---------- */
.m-head .page-title { margin-bottom: .2rem; }
.m-today { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 1rem 0 1.6rem; }
.m-todo { background: var(--card); border: var(--edge); border-radius: var(--r-md); box-shadow: var(--lift-sm); padding: .9rem 1rem; display: grid; gap: .35rem; align-content: start; }
.m-todo.is-main { background: var(--math-tint); }
.m-todo.is-rescue { background: var(--marker-tint); }
.m-todo .mini-title { margin: 0; }
.m-todo form, .m-todo .btn { justify-self: start; }
.m-todo-tag { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--math-deep); }

.m-level { background: var(--card); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--lift-sm); margin-bottom: 1rem; overflow: hidden; }
.m-level-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; font-family: var(--font-display); }
.m-level-head::-webkit-details-marker { display: none; }
.m-level[open] .m-level-head { border-bottom: 2px dashed var(--grid); }
.m-level-icon { font-size: 2rem; }
.m-level-name { font-size: 1.35rem; font-weight: 800; }
.m-level-prog { margin-left: auto; color: var(--ink-2); font-family: var(--font-body); }
.m-units { list-style: none; margin: 0; padding: .6rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.m-unit { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border: 2px solid var(--grid); border-radius: var(--r-md); text-decoration: none; color: var(--ink); background: var(--paper); min-height: 64px; }
.m-unit:hover, .m-unit:focus-visible { border-color: var(--math); background: var(--math-tint); }
.m-unit.is-locked { opacity: .75; }
.m-unit-icon { font-size: 1.8rem; }
.m-unit-text { display: grid; }
.m-unit-title { font-weight: 600; line-height: 1.25; }
.m-unit-sub { font-size: .85rem; color: var(--ink-2); }
.m-lock { margin-left: auto; }
.m-level-exam { margin: 0; padding: 0 1.1rem 1rem; }

.m-unit-hero { display: flex; gap: 1rem; align-items: center; margin: .5rem 0 1rem; }
.m-unit-hero-icon { font-size: 3.2rem; background: var(--math-tint); border: var(--edge); border-radius: var(--r-lg); width: 84px; height: 84px; display: grid; place-items: center; box-shadow: var(--lift-sm); }
.m-start-here { display: inline-block; margin: .2rem 0 0; background: var(--marker); border: var(--edge); border-radius: 999px; padding: .1rem .7rem; font-weight: 700; }
.m-missions { list-style: none; padding: 0; display: grid; gap: .7rem; }
.m-mission { display: flex; align-items: center; gap: .9rem; background: var(--card); border: var(--edge); border-radius: var(--r-md); box-shadow: var(--lift-sm); padding: .8rem 1rem; }
.m-mission-icon { font-size: 2rem; }
.m-mission-body { flex: 1; min-width: 0; }
.m-mission-title { margin: 0; font-weight: 700; }
.m-stars { margin: .1rem 0; color: #E3A400; font-size: 1.2rem; letter-spacing: .08em; }
.m-stars-off { color: var(--ink-3); }
.m-risk, .m-wait { font-size: .75rem; letter-spacing: 0; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; vertical-align: middle; }
.m-risk { background: var(--crayon-tint); color: var(--crayon); }
.m-wait { background: var(--marker-tint); color: var(--ink); }
.m-cpa { margin: 0; }

/* ---------- práctica ---------- */
.m-intro { margin-top: 1rem; }
.m-card { background: var(--card); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 1rem; margin-top: .6rem; }
.m-top { display: flex; align-items: center; gap: .8rem; }
.m-progress { flex: 1; height: 14px; background: var(--grid); border-radius: 999px; overflow: hidden; border: 2px solid var(--ink); }
.m-progress span { display: block; height: 100%; width: 0; background: var(--math); transition: width .3s ease; }
.m-count { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.m-ask { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 .4rem; }
.m-listen { flex: none; width: 52px; height: 52px; border-radius: 50%; border: var(--edge); background: var(--marker); font-size: 1.4rem; cursor: pointer; box-shadow: var(--lift-sm); }
.m-prompt { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw + .6rem, 1.7rem); line-height: 1.25; font-weight: 700; }
.m-scene { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .6rem; margin: .8rem 0; min-height: 60px; }
.m-svg { width: 100%; max-width: 640px; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.m-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.m-tap { cursor: pointer; outline: none; }
.m-tap:focus-visible rect, .m-tap:focus-visible ellipse, .m-tap:focus-visible path { stroke: var(--pen); stroke-width: 4; }
.m-tap.is-locked { pointer-events: none; }
.m-obj.is-counted { opacity: .55; }
.m-obj.is-gone text.m-emoji { opacity: .35; }
.m-cross { stroke: var(--crayon); stroke-width: 5; stroke-linecap: round; }
.m-badge { font-size: 15px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: var(--pen); stroke-width: 6px; }
.m-badge-big { font-size: 22px; font-weight: 800; fill: var(--ink); }
.m-op { font-weight: 800; fill: var(--ink-2); }
.m-label { font-size: 14px; fill: var(--ink-2); }
.m-label-big { font-size: 20px; font-weight: 700; fill: var(--crayon); }
.m-counter { font-size: 26px; font-weight: 800; fill: var(--math-deep); }
.m-plate { fill: #F3F5FA; stroke: var(--ink-3); stroke-width: 2; }
.m-pile { fill: var(--paper); stroke: var(--grid); stroke-width: 2; }
.m-basket { fill: #F2D3A6; stroke: #8A5A2B; stroke-width: 3; }
.m-cell { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.m-dot { fill: var(--crayon); }
.m-cover { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.m-again { justify-self: center; }
.m-square rect { fill: #FFF8DC; stroke: var(--ink); stroke-width: 2; }
.m-square.is-path rect { fill: var(--math-tint); }
.m-square:hover rect { fill: var(--marker-tint); }
.m-sqnum { font-size: 17px; font-weight: 700; fill: var(--ink-2); }
.m-die { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.m-pip { fill: var(--ink); }
.m-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.m-tick line { stroke: var(--ink); stroke-width: 2; }
.m-tick:hover line { stroke: var(--pen); stroke-width: 4; }
.m-ticknum { font-size: 19px; font-weight: 700; fill: var(--ink); }
.m-hit { fill: transparent; }
.m-jump { fill: none; stroke: var(--math); stroke-width: 3; stroke-dasharray: 5 4; }
.m-groups, .m-compare { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; width: 100%; }
.m-group-card, .m-side { background: var(--paper); border: var(--edge); border-radius: var(--r-md); padding: .4rem; cursor: pointer; box-shadow: var(--lift-sm); min-width: 140px; flex: 1 1 140px; max-width: 220px; }
.m-group-card:hover, .m-side:hover { background: var(--math-tint); }
.m-equal { justify-self: center; }
.m-strip { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.m-strip-cell { min-width: 58px; padding: .45rem .5rem; text-align: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; background: #fff; border: var(--edge); border-radius: 12px; }
.m-strip-cell.is-gap { background: var(--marker-tint); color: var(--crayon); }
.m-strip-cell.is-mark { background: var(--math-tint); }
.m-cal .m-strip-cell { font-size: 1rem; min-width: 52px; }
.m-slot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.m-maya-dot { fill: var(--ink); }
.m-maya-bar { fill: var(--ink); }
.m-tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.m-toolgroup { display: inline-flex; gap: .25rem; }
.m-buildval { margin: 0; font-weight: 600; color: var(--ink-2); }
.m-tortilla { fill: #F5DFA0; stroke: #B68A2E; stroke-width: 1.5; }
.m-tortilla.is-loose { fill: #FBEAB8; }
.m-band { fill: var(--crayon); }
.m-box100 { fill: #E9C46A; stroke: #8A5A2B; stroke-width: 2; }
.m-blocklabel { font-size: 15px; font-weight: 800; fill: #5A3A15; }
.m-tip { margin: 0; font-size: .92rem; color: var(--ink-2); text-align: center; }
.m-coin-face { fill: #E0B84A; stroke: #8A6A1B; stroke-width: 2; }
.m-coin-1, .m-coin-2, .m-coin-5 { fill: #CFD4DD; stroke: #6B7280; }
.m-coin-10 { fill: #E0B84A; }
.m-bill { stroke: var(--ink); stroke-width: 2; }
.m-bill-20 { fill: #9FD3F2; }
.m-bill-50 { fill: #F2A9C9; }
.m-coinval { font-size: 15px; font-weight: 800; fill: var(--ink); }
.m-price { font-size: 26px; font-weight: 800; fill: var(--crayon); }
.m-traybox { fill: #FFF8DC; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.m-expr { margin: .4rem 0; font-family: var(--font-display); font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; letter-spacing: .04em; text-align: center; }
.m-mark { text-decoration: underline; text-decoration-color: var(--crayon); text-decoration-thickness: 6px; text-underline-offset: 8px; color: var(--crayon); }
.m-vertical { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; display: grid; justify-items: end; min-width: 150px; }
.m-vrow { display: flex; gap: .6rem; justify-content: flex-end; width: 100%; }
.m-vop { color: var(--ink-2); min-width: 1ch; }
.m-vline { border-top: 4px solid var(--ink); width: 100%; }
.m-vcarry { font-size: 1.1rem; color: var(--crayon); margin-right: 1.4ch; }
.m-bigicon { font-size: 3.4rem; margin: 0; line-height: 1.2; text-align: center; }
.m-shape { fill: var(--math-tint); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.m-gridline { stroke: var(--grid); stroke-width: 1.5; }
.m-thing { fill: #F7C873; stroke: var(--ink); stroke-width: 2; }
.m-start { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 4 4; }
.m-ribbon { stroke: var(--ink); stroke-width: 2; }
.m-ribbon-0 { fill: #F28B82; } .m-ribbon-1 { fill: #8AB4F8; } .m-ribbon-2 { fill: #81C995; }
.m-pan { fill: #E6EBFF; stroke: var(--ink); stroke-width: 2; }
.m-picto { display: grid; gap: .35rem; width: 100%; max-width: 460px; }
.m-picto-title { margin: 0; font-weight: 700; text-align: center; }
.m-picto-row { display: flex; gap: .6rem; align-items: center; background: #fff; border: 2px solid var(--grid); border-radius: 12px; padding: .35rem .6rem; font: inherit; text-align: left; }
button.m-picto-row { cursor: pointer; border-color: var(--ink); }
.m-picto-name { min-width: 120px; font-weight: 600; }
.m-picto-icons { letter-spacing: .1em; }
.m-bar-total { fill: var(--math-tint); stroke: var(--ink); stroke-width: 2; }
.m-bar-part { fill: #8AB4F8; stroke: var(--ink); stroke-width: 2; }
.m-bar-missing { fill: var(--marker-tint); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.m-barnum { font-size: 20px; font-weight: 800; fill: var(--ink); }

/* respuestas */
.m-answer { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .6rem; margin: .4rem 0; }
.m-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: .6rem; width: 100%; max-width: 560px; }
.m-options.is-little { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.m-option { min-height: 72px; display: grid; place-items: center; gap: .1rem; background: #fff; border: var(--edge); border-radius: var(--r-md); box-shadow: var(--lift-sm); font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--ink); cursor: pointer; padding: .3rem; }
.m-option:hover { background: var(--math-tint); }
.m-option:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.m-options.is-words { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.m-options.is-words .m-option { font-size: 1.15rem; min-height: 60px; }
.m-option-dots { font-size: 1rem; color: var(--crayon); letter-spacing: .05em; line-height: 1; }
.m-option:disabled { opacity: .6; cursor: default; }
.m-keypad { display: grid; gap: .5rem; justify-items: center; }
.m-display { min-width: 160px; min-height: 64px; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; background: #fff; border: var(--edge); border-radius: var(--r-md); padding: 0 .8rem; }
.m-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: .45rem; }
.m-key { height: 60px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; background: #fff; border: var(--edge); border-radius: 14px; box-shadow: var(--lift-sm); cursor: pointer; color: var(--ink); }
.m-key.is-ok { background: var(--math); color: #fff; }
.m-key:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.m-done { min-width: 200px; }

.m-feedback { border-radius: var(--r-md); padding: 0; margin-top: .5rem; text-align: center; }
.m-feedback:empty { display: none; }
.m-feedback.is-ok { background: var(--leaf-tint); border: 2px solid var(--leaf); padding: .8rem; }
.m-feedback.is-no { background: var(--crayon-tint); border: 2px solid var(--crayon); padding: .8rem; }
.m-feedback.is-retry { background: var(--marker-tint); border: 2px solid #C99600; padding: .8rem; }
.m-feedback.is-info { background: var(--pen-tint); border: 2px solid var(--pen); padding: .8rem; }
.m-fb-title { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.m-fb-hint, .m-fb-solution { margin: .2rem 0 .5rem; }
.m-help { background: var(--marker-tint); border: 2px dashed #C99600; border-radius: var(--r-md); padding: .8rem; margin-top: .6rem; }
.m-help-text { margin: 0 0 .4rem; font-weight: 600; }
.m-help-scene { display: grid; justify-items: center; }
.m-help-scene .m-svg { max-width: 420px; }
.m-foot { display: flex; justify-content: flex-end; margin-top: .6rem; }

.m-summary { margin-top: 1rem; }
.m-bigstars { font-size: 3rem; color: #E3A400; margin: 0; letter-spacing: .1em; }
.m-review-list { text-align: left; display: inline-block; }
.m-rescue { background: var(--marker-tint); border: 2px dashed #C99600; border-radius: var(--r-md); padding: .8rem; margin: 1rem auto; max-width: 420px; }
.m-pause { position: fixed; inset: 0; background: rgba(29, 34, 66, .55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.m-pause[hidden] { display: none; }
.m-pause .panel { max-width: 420px; }

/* ---------- zona de padres ---------- */
.m-report-list { list-style: none; padding: 0; }
.m-metrics { grid-template-columns: repeat(3, 1fr); }
.m-report-level { margin: .6rem 0; }
.m-unit-bars { display: grid; gap: .25rem; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.m-ubar { display: flex; align-items: center; gap: .3rem; }
.m-ubar-track { flex: 1; height: 10px; background: var(--grid); border-radius: 999px; overflow: hidden; }
.m-ubar-fill { display: block; height: 100%; background: var(--math); width: 0; }
.m-ubar-fill.w1 { width: 10%; } .m-ubar-fill.w2 { width: 20%; } .m-ubar-fill.w3 { width: 30%; } .m-ubar-fill.w4 { width: 40%; }
.m-ubar-fill.w5 { width: 50%; } .m-ubar-fill.w6 { width: 60%; } .m-ubar-fill.w7 { width: 70%; } .m-ubar-fill.w8 { width: 80%; }
.m-ubar-fill.w9 { width: 90%; } .m-ubar-fill.w10 { width: 100%; }
.m-report-box { background: var(--paper); border-radius: var(--r-sm); padding: .5rem .8rem; margin: .5rem 0; }

/* ---------- diploma ---------- */
.m-diploma { background: #fff; border: 6px double var(--math); border-radius: var(--r-lg); padding: 2rem 1.5rem; text-align: center; max-width: 820px; margin: 1rem auto; }
.m-diploma-logo { width: 220px; height: auto; }
.m-diploma-kicker { text-transform: uppercase; letter-spacing: .2em; color: var(--math-deep); font-weight: 700; margin: .8rem 0 0; }
.m-diploma-name { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.6rem); margin: .2rem 0; }
.m-diploma-text { font-size: 1.15rem; max-width: 560px; margin: 0 auto; }
.m-diploma-meta { color: var(--ink-2); font-size: .9rem; }
.m-diploma-note { color: var(--ink-3); font-size: .78rem; }
@media print { .no-print, .topbar, .flashes { display: none !important; } body { background: #fff; } .m-diploma { border-color: #000; margin: 0 auto; } }

/* ---------- portada pública ---------- */
.m-hero { display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 1fr; align-items: center; margin: 1.5rem 0; }
.m-hero-card { background: var(--math-tint); border: var(--edge); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 1.2rem; text-align: center; }
.m-method-steps { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; list-style: none; }
.m-method-steps li { background: var(--card); border: var(--edge); border-radius: var(--r-md); padding: .8rem 1rem; box-shadow: var(--lift-sm); }
.m-levels-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 640px) {
  .m-hero { grid-template-columns: 1fr; }
  .m-keys { grid-template-columns: repeat(3, 64px); }
  .m-mission { flex-wrap: wrap; }
  .m-mission form { width: 100%; }
  .m-mission form .btn { width: 100%; }
  .m-card { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .m-progress span { transition: none; } }