/* ceibapatrimonial.com/mi-mes: "Mi mes en orden". Phone first: one column of cards on paper, the summary on jungle green. */
.mm-page{background:var(--papel)}
.mm-main{max-width:760px; margin:0 auto; padding:calc(88px + env(safe-area-inset-top,0px)) 16px 48px; display:flex; flex-direction:column; gap:16px}
.mm-hero{padding:18px 4px 6px}
.mm-eyebrow{margin-bottom:10px}
.mm-title{font:400 clamp(40px, 10vw, 62px)/1.02 var(--serif); color:var(--selva)}
.mm-lead{margin-top:12px; font-size:18px; line-height:1.55; color:var(--muted); max-width:34em}
.mm-jump{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px}
.mm-jump a{font-size:14.5px; font-weight:600; text-decoration:none; color:var(--selva); border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; background:#fff}
.mm-jump a:hover{border-color:var(--hoja)}

.mm-card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px 18px; scroll-margin-top:84px; box-shadow:0 8px 28px color-mix(in srgb, var(--selva) 6%, transparent)}
.mm-card > * + *{margin-top:14px}
.mm-dark{background:var(--selva); color:var(--caliza); border-color:transparent}
.mm-h2{font:400 clamp(26px, 6.4vw, 34px)/1.15 var(--serif); color:var(--selva)}
.mm-dark .mm-h2{color:var(--caliza)}
.mm-h3{font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--miel-ink); margin-top:22px !important}
.mm-dark .mm-h3{color:var(--miel-light)}
.mm-p{font-size:16.5px; line-height:1.55; color:var(--ink)}
.mm-dark .mm-p{color:color-mix(in srgb, var(--caliza) 88%, transparent)}
.mm-small{font-size:14px; line-height:1.5; color:var(--muted)}
.mm-dark .mm-small{color:color-mix(in srgb, var(--caliza) 65%, transparent)}
.mm-note{font-size:15.5px; line-height:1.5; background:color-mix(in srgb, var(--hoja) 9%, transparent); border-radius:14px; padding:12px 16px}
.mm-good{font-size:16.5px; line-height:1.5; font-weight:600; color:var(--selva); background:color-mix(in srgb, var(--miel-light) 22%, transparent); border-radius:14px; padding:12px 16px}

/* Cómo usarlo */
#como details > summary{list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px}
#como details > summary::-webkit-details-marker{display:none}
#como details > summary::after{content:"+"; font:400 30px/1 var(--serif); color:var(--hoja); margin-left:auto}
#como details[open] > summary::after{content:"–"}
.mm-sum-hint{font-size:14px; color:var(--muted)}
#como details > * + *{margin-top:16px}
.mm-howto{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; counter-reset:how}
.mm-howto li{counter-increment:how; display:grid; grid-template-columns:40px 1fr; column-gap:12px; align-items:start; background:var(--papel); border-radius:16px; padding:14px}
.mm-howto li::before{content:counter(how); grid-row:span 2; width:40px; height:40px; border-radius:50%; background:var(--selva); color:var(--caliza); display:grid; place-items:center; font:400 20px/1 var(--serif)}
.mm-howto b{color:var(--selva)}
.mm-howto span{font-size:15.5px; line-height:1.5}
.mm-timeline{list-style:none; margin:10px 0 0; padding:0 0 0 22px; border-left:3px solid color-mix(in srgb, var(--hoja) 25%, transparent); display:grid; gap:14px}
.mm-timeline li{position:relative; display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:14px}
.mm-timeline li::before{content:""; position:absolute; left:-31px; top:16px; width:15px; height:15px; border-radius:50%; background:var(--papel); border:3px solid var(--hoja)}
.mm-timeline li.now{background:color-mix(in srgb, var(--miel-light) 20%, transparent)}
.mm-timeline li.now::before{background:var(--miel); border-color:var(--miel)}
.mm-timeline li.now b::after{content:" · aquí vas"; font-weight:600; color:var(--miel-ink)}
html[lang="en"] .mm-timeline li.now b::after{content:" · you are here"}
.mm-timeline b{color:var(--selva)}
.mm-timeline span{font-size:15.5px; line-height:1.5}

/* Month */
.mm-monthbar{display:flex; align-items:center; justify-content:space-between; gap:10px}
.mm-month{text-align:center; flex:1; font-size:clamp(24px, 6vw, 30px)}
.mm-arrow{width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line); background:var(--papel); color:var(--selva); font:400 28px/1 var(--serif); cursor:pointer}
.mm-arrow:disabled{opacity:.3; cursor:default}
.mm-copy{display:block; width:100%; min-height:46px; border:1.5px dashed var(--hoja); border-radius:14px; background:color-mix(in srgb, var(--hoja) 6%, transparent); color:var(--selva); font:700 15.5px/1.2 var(--sans); cursor:pointer}
.mm-fields{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
.mm-field{display:grid; grid-template-columns:1fr 132px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.mm-flabel{display:flex; flex-direction:column; min-width:0}
.mm-flabel b{font-size:16px; color:var(--ink)}
.mm-flabel small{font-size:13px; line-height:1.35; color:var(--muted)}
.mm-field input{width:100%; min-height:46px; border:1.5px solid var(--line); border-radius:12px; padding:0 12px; font:700 17px/1 var(--sans); color:var(--selva); text-align:right; background:var(--papel)}
.mm-field input:focus{outline:none; border-color:var(--hoja); background:#fff}
.mm-3 .mm-field{grid-template-columns:minmax(0,1fr); border:0; padding:0; min-width:0}
.mm-3 .mm-field input{min-width:0}
.mm-3 .mm-field input{text-align:left}
@media (min-width:600px){ .mm-3{grid-template-columns:repeat(3, 1fr)} .mm-field{grid-template-columns:1fr 170px} .mm-card{padding:28px 30px} }

/* Summary (dark card) */
.mm-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.mm-stat{background:rgba(239,234,223,.09); border-radius:14px; padding:12px 10px; display:flex; flex-direction:column; gap:4px; min-width:0}
.mm-stat span{font-size:13px; line-height:1.25; color:color-mix(in srgb, var(--caliza) 65%, transparent)}
.mm-stat b{font:700 clamp(17px, 4.6vw, 24px)/1.1 var(--sans); color:var(--caliza); overflow-wrap:anywhere}
.mm-stat.hi{background:var(--miel)}
.mm-stat.hi span{color:var(--on-miel); opacity:.8}
.mm-stat.hi b{color:var(--on-miel)}
.mm-bar{display:flex; height:18px; border-radius:99px; overflow:hidden; background:rgba(239,234,223,.12); gap:2px}
.mm-bar i{display:block; min-width:4px}
.g-n{background:var(--mm-soft, #7FB08E)} .g-g{background:var(--miel-light)} .g-a{background:#EFEADF} .g-q{background:repeating-linear-gradient(45deg, rgba(239,234,223,.35) 0 6px, transparent 6px 12px)}
.mm-legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; color:color-mix(in srgb, var(--caliza) 88%, transparent)}
.mm-legend span{display:inline-flex; align-items:center; gap:6px}
.mm-legend i{width:12px; height:12px; border-radius:4px; display:inline-block}
.mm-lines{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mm-lines li{display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:15px}
.mm-lines li span{color:color-mix(in srgb, var(--caliza) 88%, transparent)}
.mm-lines li b{color:var(--caliza)}
.mm-lines li i{grid-column:1 / -1; height:8px; border-radius:99px; background:var(--miel-light)}

/* Steps, weeks, goals, fund, progress */
.mm-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:st}
.mm-steps li{counter-increment:st; background:var(--papel); border-radius:16px; padding:14px 14px 12px 56px; position:relative; border:1.5px solid transparent}
.mm-steps li::before{content:counter(st); position:absolute; left:14px; top:14px; width:30px; height:30px; border-radius:50%; background:var(--miel); color:var(--on-miel); display:grid; place-items:center; font-weight:700}
.mm-steps li.on{border-color:var(--hoja); background:color-mix(in srgb, var(--hoja) 8%, transparent)}
.mm-steps p{font-size:16px; line-height:1.5}
.mm-check{display:flex; align-items:center; gap:10px; margin-top:8px; font-size:15px; font-weight:600; color:var(--selva); cursor:pointer; min-height:36px}
.mm-check input{width:22px; height:22px; accent-color:var(--hoja); flex:none}
.mm-weeks{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}
.mm-week{background:var(--papel); border-radius:16px; padding:12px 14px; border:1.5px solid transparent}
.mm-week.full{border-color:var(--miel); background:color-mix(in srgb, var(--miel-light) 16%, transparent)}
.mm-week b{color:var(--selva)}
.mm-week .mm-check{margin-top:4px; font-weight:500; color:var(--ink)}
.mm-goal{background:var(--papel); border-radius:18px; padding:14px; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.mm-goal-top{display:flex; gap:10px; align-items:center}
.mm-goal-name{flex:1; min-width:0; min-height:46px; border:1.5px solid var(--line); border-radius:12px; padding:0 12px; font:400 21px/1 var(--serif); color:var(--selva); background:#fff}
.mm-x{width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--muted); font-size:26px; cursor:pointer}
.mm-goal-out{display:grid; gap:6px; font-size:14.5px; font-weight:600; color:var(--selva)}
.mm-progress{height:12px; border-radius:99px; background:color-mix(in srgb, var(--selva) 10%, transparent); overflow:hidden}
.mm-progress i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--hoja), var(--miel)); transition:width .4s ease}
.mm-light{background:var(--papel); color:var(--selva); border:1.5px solid var(--line)}
.mm-light:hover{background:#fff; border-color:var(--hoja)}
.mm-rungs{display:grid; gap:10px}
.mm-rung{display:grid; grid-template-columns:1fr auto; gap:6px 10px; background:var(--papel); border-radius:14px; padding:12px 14px}
.mm-rung span{font-size:14.5px; color:var(--muted)}
.mm-rung b{color:var(--selva)}
.mm-rung .mm-progress{grid-column:1 / -1}
.mm-rung.done{background:color-mix(in srgb, var(--miel-light) 20%, transparent)}
.mm-rung.done span::after{content:" ✓"; color:var(--hoja); font-weight:700}
.mm-chart{display:flex; align-items:stretch; gap:8px; height:170px; padding:6px 0}
.mm-col{flex:1; display:flex; flex-direction:column; align-items:center; min-width:0}
.mm-col span{margin-top:6px}
.mm-up, .mm-down{width:100%; display:flex; justify-content:center; min-height:0}
.mm-up{align-items:flex-end}
.mm-down{align-items:flex-start; border-top:2px solid color-mix(in srgb, var(--selva) 25%, transparent)}
.mm-up i{display:block; width:min(100%, 44px); border-radius:10px 10px 3px 3px; background:var(--hoja)}
.mm-down i{display:block; width:min(100%, 44px); border-radius:3px 3px 10px 10px; background:var(--miel)}
.mm-col span{font-size:13px; color:var(--muted); text-transform:capitalize}

/* Data, invite */
.mm-actions{display:flex; flex-wrap:wrap; gap:10px}
.mm-msg{font-size:15px; font-weight:600; color:var(--hoja)}
.mm-link{background:none; border:0; padding:0; color:var(--muted); font:500 14px/1.4 var(--sans); text-decoration:underline; cursor:pointer}
.mm-invite{margin-top:18px; background:var(--selva); color:var(--caliza); border-radius:24px; padding:28px 20px; text-align:center; display:grid; gap:14px; justify-items:center}
.mm-invite h2{color:var(--caliza); font-size:clamp(26px, 6vw, 34px)}
.mm-invite p{color:color-mix(in srgb, var(--caliza) 88%, transparent); font-size:16.5px; line-height:1.5}
.mm-invite .ico{width:20px; height:20px}
.mm-disclaimer{text-align:center; font-size:12.5px; line-height:1.5; color:var(--muted)}

@media (prefers-reduced-motion:reduce){ .mm-progress i{transition:none} }
/* "Imprimir mi mes": a clean report of the person's own month on white paper (the blank sheet is the PDF download). */
@page{size:letter; margin:14mm 15mm}
@media print{
  html, body, .mm-page{background:#fff !important}
  body{font-size:10.5pt; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .site-header, .site-footer, .skip, .mm-eyebrow, .mm-lead, .mm-colors, .mm-jump, #como, .mm-arrow, .mm-copy, .mm-mode, .mm-x,
  .mm-actions, .mm-link, .mm-invite, #datos, #metas > .btn, .mm-remind, #pasos .mm-check, #semanas > .mm-p{display:none !important}
  .mm-main{padding:0; max-width:none; gap:4mm}
  .mm-hero{padding:0}
  .mm-title{font-size:24pt}
  .mm-card{box-shadow:none; border:1px solid #d9d9d9; border-radius:3mm; padding:4mm 5mm; background:#fff; break-inside:avoid}
  #mes{break-inside:auto}
  .mm-card > * + *{margin-top:2.5mm}
  .mm-h2{font-size:15pt}
  .mm-h3{font-size:8.5pt; margin-top:3mm !important}
  .mm-p, .mm-good, .mm-note, .mm-steps p{font-size:10pt}
  .mm-small{font-size:8.5pt}
  .mm-monthbar{justify-content:flex-start}
  .mm-month{text-align:left; font-size:15pt}
  .mm-fields{grid-template-columns:1fr 1fr; column-gap:8mm; row-gap:0}
  .mm-field{grid-template-columns:1fr auto; padding:1.2mm 0}
  .mm-flabel b{font-size:10pt} .mm-flabel small{font-size:7.5pt}
  .mm-field input{border:0; background:none; min-height:0; padding:0; font-size:10.5pt; width:30mm}
  .mm-dark{background:#fff; color:var(--ink); border:1px solid #d9d9d9}
  .mm-dark .mm-h2, .mm-dark .mm-p, .mm-dark .mm-small, .mm-dark .mm-h3, .mm-lines li span, .mm-lines li b, .mm-legend{color:var(--ink)}
  .mm-stat{background:#f4f4f4} .mm-stat span, .mm-stat b{color:var(--ink)} .mm-stat.hi{background:var(--miel-light)}
  .mm-bar{background:#eee} .g-a{background:#bbb} .g-q{background:repeating-linear-gradient(45deg, #ccc 0 4px, transparent 4px 8px)}
  .mm-lines{grid-template-columns:1fr 1fr; column-gap:8mm; row-gap:2mm}
  .mm-lines li{font-size:9.5pt}
  .mm-lines li i{height:5px}
  .mm-steps li{padding:2.5mm 3mm 2.5mm 11mm}
  .mm-steps li::before{left:3mm; top:2.5mm; width:6mm; height:6mm; font-size:9pt}
  .mm-weeks{grid-template-columns:repeat(5, 1fr); gap:2mm}
  .mm-week{padding:2mm; font-size:8.5pt}
  .mm-week .mm-check{min-height:0; margin-top:1mm; font-size:8pt; gap:1.5mm}
  .mm-week .mm-check input{width:3.5mm; height:3.5mm}
  .mm-goal{padding:2.5mm 3mm; gap:2mm}
  .mm-goal-name{border:0; background:none; min-height:0; padding:0; font-size:12pt}
  .mm-chart{height:35mm}
  .mm-fields.mm-3{grid-template-columns:repeat(3, 1fr)}
  .mm-3 .mm-field small{display:none}
  .mm-3 input[type=month]{font:700 10.5pt var(--sans); color:var(--selva)}
}
}

/* Color picker (4 palettes + the phone's own picker) */
.mm-colors{margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.mm-colors > span{font-size:14.5px; font-weight:600; color:var(--muted)}
.mm-swatches{display:flex; gap:10px; align-items:center}
.mm-swatch{width:36px; height:36px; border-radius:50%; border:3px solid #fff; background:var(--sw); box-shadow:0 0 0 1.5px var(--line); cursor:pointer; padding:0; position:relative}
.mm-swatch[aria-pressed="true"], .mm-other.on{box-shadow:0 0 0 3px var(--selva)}
.mm-other{display:inline-block; background:conic-gradient(#e26ba3, #f2b84b, #7fb08e, #1f8aa6, #8765c2, #e26ba3); overflow:hidden}
.mm-other.on{background:var(--sw)}
.mm-other input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0}
/* Quick / detailed */
.mm-outhead{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:22px !important}
.mm-outhead .mm-h3{margin-top:0 !important}
.mm-mode{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; padding:3px; background:var(--papel)}
.mm-mode button{border:0; background:transparent; border-radius:999px; padding:8px 14px; font:700 13.5px/1 var(--sans); color:var(--muted); cursor:pointer; min-height:36px}
.mm-mode button[aria-pressed="true"]{background:var(--selva); color:var(--caliza)}
/* Reminder, amounts */
.mm-remind{background:var(--papel); border-radius:16px; padding:14px; display:grid; gap:10px}
.mm-remind b{color:var(--selva)}
.mm-frees{margin-top:4px; font-size:14.5px !important; font-weight:700; color:var(--hoja)}