/* ============ Piedra sobre piedra — estilos ============
   Sobria y clara, como una libreta de banco: un número protagonista, el resto en filas con montos alineados.
   Tema claro u oscuro según el sistema. Tipografía: Public Sans (cifras del mismo ancho para los montos). */

:root{
  color-scheme: light dark;
  /* Claro */
  --bg:#F6F7F5;      /* fondo, papel frío */
  --panel:#FFFFFF;   /* hoja */
  --panel2:#EEF1EE;  /* hoja hundida: campos, filas abiertas */
  --border:#DDE3DF;  /* líneas de la libreta */
  --text:#17201B;    /* tinta pizarra */
  --muted:#5E6B64;   /* tinta secundaria */
  --green:#1F7A4D;   /* positivo / entra */
  --red:#B3261E;     /* negativo / falta */
  --amber:#8A5A00;   /* atención */
  --blue:#1E5F74;    /* acento: selección, enlaces */
  --purple:#6B4FA0;  /* Milton (aparte) */
  --on-accent:#FFFFFF;
  --radio:10px;
  --fuente:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141A18; --panel:#1A211F; --panel2:#222B28; --border:#2D3734;
    --text:#E6EBE8; --muted:#9AA6A0; --green:#4CC38A; --red:#FF8A80;
    --amber:#E8B65A; --blue:#6FB3C8; --purple:#B39CF0; --on-accent:#0E1A1F;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* Móvil primero: 16px de margen lateral; abajo deja sitio para la barra de navegación */
body{
  margin:0 auto; padding:20px 16px 96px; max-width:720px; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  font-family:var(--fuente); font-size:15px; line-height:1.45;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body{padding:28px 24px 64px;}}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:2px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
h1{font-size:24px; margin:0 0 2px; font-weight:650; letter-spacing:-.015em;}
.sub{color:var(--muted); font-size:13.5px; margin-bottom:18px;}
/* Títulos de sección: en minúsculas normales, con la línea de la libreta debajo */
.st{font-size:15px; font-weight:650; color:var(--text); margin:32px 0 6px; padding-bottom:7px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.st a{font-weight:500; font-size:13.5px;}

/* ============ Navegación ============
   Compu: áreas arriba. Celular: barra fija abajo con las áreas. Finanzas tiene además pestañas. Botón "+" para registrar. */
.nav{margin-bottom:14px;}
.nav-main{display:flex; gap:2px; flex-wrap:wrap; align-items:center;}
.nav-main > a{padding:7px 10px; border-radius:8px; font-size:14px; font-weight:550; color:var(--muted); white-space:nowrap;}
.nav-main > a:hover{color:var(--text); text-decoration:none; background:var(--panel2);}
.nav-main > a.on{color:var(--text); background:var(--panel2); box-shadow:inset 0 -2px 0 var(--blue);}
.nav-main > a.salir{margin-left:auto;}
.tabs{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:0 0 20px; padding-bottom:2px; border-bottom:1px solid var(--border);}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{flex-shrink:0; padding:8px 10px 9px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-3px; white-space:nowrap;}
.tabs a:hover{color:var(--text); text-decoration:none;}
.tabs a.on{color:var(--text); font-weight:600; border-bottom-color:var(--blue);}
.fab{position:fixed; right:max(16px, calc(50% - 360px + 16px)); bottom:24px; z-index:40; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:400; line-height:1;
  background:var(--blue); color:var(--on-accent); box-shadow:0 8px 22px color-mix(in srgb, #000 28%, transparent);}
.fab:hover{text-decoration:none; filter:brightness(1.08);}
.mas{display:none;}
@media(max-width:720px){
  .nav{position:fixed; left:0; right:0; bottom:0; z-index:50; margin:0; background:var(--panel);
    border-top:1px solid var(--border); padding:0 4px env(safe-area-inset-bottom);}
  .nav-main{flex-wrap:nowrap; gap:0; max-width:720px; margin:0 auto;}
  .nav-main > a{flex:1; text-align:center; padding:13px 2px 12px; border-radius:0; font-size:12.5px; font-weight:600; color:var(--muted); background:none;}
  .nav-main > a.on{background:none; color:var(--blue); box-shadow:inset 0 2px 0 var(--blue);}
  .nav-main > a.salir{display:none;}
  .tabs{margin-top:-4px;}
  .fab{bottom:66px; right:16px;}
}

/* Tira de meses: una fila que se desliza con el dedo */
.nav-meses{display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.nav-meses::-webkit-scrollbar{display:none;}
.nav-meses a{flex-shrink:0; padding:7px 11px; border:1px solid var(--border); border-radius:8px; font-size:13px; color:var(--muted); white-space:nowrap; background:var(--panel);}
.nav-meses a:hover{text-decoration:none; color:var(--text);}
.nav-meses a.hoy{color:var(--text); border-color:var(--muted);}
.nav-meses a.on{background:var(--blue); border-color:var(--blue); color:var(--on-accent); font-weight:600;}

/* ============ Números resumen (otras páginas) ============
   Como libreta: el primero en grande y el resto en filas (etiqueta a la izquierda, monto a la derecha). */
.kpis{display:block;}
.kpi{display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--border);}
.kpi:last-child{border-bottom:none;}
.kpi .l{grid-column:1; grid-row:1; font-size:15px; color:var(--text);}
.kpi .v{grid-column:2; grid-row:1 / span 2; font-size:15px; font-weight:600; text-align:right; white-space:nowrap;}
.kpi .s{grid-column:1; grid-row:2; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4;}
.kpi:first-child{display:block; padding:0 0 14px; margin-bottom:2px; border-bottom:1px solid var(--text);}
.kpi:first-child .l{font-size:14px; color:var(--muted);}
.kpi:first-child .v{font-size:40px; font-weight:650; letter-spacing:-.03em; line-height:1.1; text-align:left; margin:2px 0 4px;}
.kpi:first-child .s{font-size:14px;}
.pos{color:var(--green);} .neg{color:var(--red);} .warn{color:var(--amber);}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radio); padding:4px 16px; overflow-x:auto;}
.panel:has(> table){padding:6px 10px;}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
@media(max-width:880px){.g2{grid-template-columns:1fr;}}

table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; color:var(--muted); font-weight:550; font-size:12.5px; padding:8px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:9px 8px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.total td{font-weight:650; background:var(--panel2);}
tr.grupo td{font-weight:650; background:var(--panel2); color:var(--muted); font-size:12.5px;}
tr.done{opacity:.55;}
.num{text-align:right; white-space:nowrap;}

/* Etiquetas: el color sale de un solo tono por clase y se adapta al tema */
.b{--c:var(--muted); display:inline-block; padding:1px 7px; border-radius:5px; font-size:12px; font-weight:550; white-space:nowrap;
  background:color-mix(in srgb, var(--c) 14%, transparent); color:color-mix(in srgb, var(--c) 75%, var(--text));}
.b.pichincha{--c:#C9A227;} .b.produbanco{--c:#D9693A;} .b.diners{--c:#4F7FD9;} .b.guayaquil{--c:#C2459B;}
.b.pacifico{--c:#2E9AB8;} .b.efectivo{--c:#3FA35B;} .b.biess{--c:#8E6BC9;}
.b.ok{--c:var(--green);} .b.pend{--c:var(--amber);} .b.nomina{--c:var(--muted);} .b.tarjeta{--c:#C25B86;}
.b.casa{--c:#2F9E74;} .b.milton{--c:var(--purple);}
.pill{font-size:12px; padding:1px 7px; border-radius:5px; margin-left:5px; white-space:nowrap;
  background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--blue);}

/* Avisos: fondo apenas teñido, el texto queda en tinta normal */
.alert{--c:var(--blue); border-radius:var(--radio); padding:12px 14px; font-size:14px; margin-top:14px; line-height:1.55; color:var(--text);
  background:color-mix(in srgb, var(--c) 9%, var(--panel)); border:1px solid color-mix(in srgb, var(--c) 30%, transparent);}
.alert.warn{--c:var(--amber);} .alert.info{--c:var(--blue);} .alert.bad{--c:var(--red);} .alert.good{--c:var(--green);}
a.alert:hover{text-decoration:none; border-color:var(--c);}

canvas{max-height:250px;}
.mini{font-size:12.5px; color:var(--muted); margin-top:2px;}
.loading{color:var(--muted); padding:40px; text-align:center;}

/* ============ Formularios ============ */
input,select,textarea{
  padding:9px 11px; font-size:15px; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:8px; font-family:inherit; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}
input.inline{width:96px; text-align:right;}
select.inline{font-size:13px; padding:6px 8px;}
button{
  padding:9px 15px; font-size:14px; font-weight:600; background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:8px; cursor:pointer; font-family:inherit;
}
button:hover{border-color:var(--muted);}
button.primary{background:var(--blue); color:var(--on-accent); border-color:var(--blue);}
button.primary:hover{filter:brightness(1.08);}
button.sm{padding:6px 11px; font-size:13px;}
button.danger{color:var(--red);}
button:disabled{opacity:.55; cursor:default;}
.fila-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px;}

.toast{
  position:fixed; bottom:84px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px);
  padding:12px 18px; border-radius:var(--radio); font-size:14.5px; font-weight:600;
  background:var(--text); color:var(--bg); opacity:0; pointer-events:none; transition:opacity .2s; z-index:99;
}
@media(min-width:721px){.toast{bottom:24px;}}
.toast.show{opacity:1;}
.toast.err{background:var(--red); color:#fff;}

/* ============ Listas tipo libreta ============ */
.lista{display:flex; flex-direction:column;}
.item{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--border);}
.item:last-child{border-bottom:none;}
.item .t{min-width:0; overflow-wrap:anywhere;}
.item .t .mini{margin-top:2px;}
.item .num{flex-shrink:0;}
.vacio{color:var(--muted); font-size:14px; padding:10px 0;}
.login{max-width:420px; margin:40px auto; padding:16px;}
.login input{flex:1; min-width:0;}
details summary{cursor:pointer; color:var(--muted); font-size:14px; padding:9px 0;}
/* Tablas en el celular: más compactas; la primera columna (mes o rubro) nunca se parte */
table td:first-child{white-space:nowrap;}
@media(max-width:480px){
  table{font-size:13px;} th{font-size:11.5px; padding:7px 5px;} td{padding:8px 5px;}
  .panel:has(> table){padding:4px 6px;}
}

/* ============ Hoy ============ */
.hoy-fecha{font-size:24px; font-weight:650; letter-spacing:-.015em; margin:0;}
.ciclo{margin:4px 0 26px; color:var(--muted); font-size:14px;}
/* Lo memorable: en qué día de tu mes (de líquido a líquido) estás */
.ciclo-barra{height:6px; border-radius:3px; background:var(--panel2); margin-top:9px; overflow:hidden;}
.ciclo-barra i{display:block; height:100%; width:var(--p, 0%); background:var(--blue); border-radius:3px;
  transform-origin:left; animation:llenar .9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes llenar{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){.ciclo-barra i{animation:none;}}
.disp-l{font-size:14px; color:var(--muted);}
.disp-v{font-size:46px; font-weight:650; letter-spacing:-.03em; line-height:1.05; margin:2px 0 6px;}
.disp-s{font-size:14px; color:var(--muted);}
.resumen{margin-top:22px; border-top:1px solid var(--text);}
.resumen .item{padding:12px 0;}
.resumen .item .num{font-weight:600;}
.grupo-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 0 4px; font-weight:650;}
.grupo-h .num{font-weight:650;}
.lista .grupo-h:first-child{padding-top:10px;}
.item.sangria{padding-left:12px;}
.enlace-fila{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--border); color:var(--text);}
.enlace-fila:hover{text-decoration:none;}
.enlace-fila:hover .ir{text-decoration:underline;}
.enlace-fila .ir{color:var(--blue); font-size:14px; flex-shrink:0;}
.libreta{background:var(--panel); border:1px solid var(--border); border-radius:var(--radio); padding:0 16px;}

/* ============ Mes ============ */
#meses{margin-bottom:18px;}
.it .fila{cursor:pointer; border-radius:6px;}
.it .fila:hover .t{color:var(--blue);}
.it .fila.abierta{border-bottom-color:transparent;}
.it .fila.abierta .t{font-weight:600;}
.it .editor{background:var(--panel2); border-radius:var(--radio); padding:14px; margin:0 -4px 10px; border-bottom:none;}
details.saldo-ini, details.agregar{margin-top:18px; border-top:1px solid var(--border);}
details.saldo-ini > summary, details.agregar > summary{color:var(--blue); font-weight:550;}
details.agregar .editor{border-bottom:none;}
.mes-cab .flecha{border:none; background:none; color:var(--blue); padding:6px 4px; min-width:60px;}
.mes-cab .flecha:first-child{text-align:left;} .mes-cab .flecha:last-child{text-align:right;}

/* ============ Presupuesto del mes y cierre (C9) ============ */
.pbar{height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-top:7px;}
.pbar i{display:block; height:100%; background:var(--blue); border-radius:3px;}
.pbar.pasado{background:color-mix(in srgb, var(--red) 25%, var(--panel2));}
.pbar.pasado i{background:var(--red);}
.ptotal{padding:10px 0 4px;}
.ptotal-n{display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap;}
.ptotal .pbar{height:10px; border-radius:5px;}
.ptotal .pbar i{border-radius:5px;}
.psub{padding:10px 0 2px; font-size:14px;}
.psub .ptotal-n span:first-child{color:var(--muted);}
.pfijos{margin-top:8px; border-top:1px solid var(--border);}
.pfijos .lista{padding-left:12px;}
.pvars-t{margin-top:14px; font-weight:600; font-size:14px;}
.pvars{margin-top:2px;}
.pvar{padding:9px 0 10px; border-bottom:1px solid var(--border);}
.pvar:last-child{border-bottom:none;}
.pvar-n{display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:14.5px;}
.pvar-n .mini{display:inline;}
.pvar .pbar{margin-top:6px;}
.cierre{margin-top:22px; padding:14px 16px 6px; border:1px solid color-mix(in srgb, var(--green) 40%, var(--border)); border-radius:var(--radio);
  background:color-mix(in srgb, var(--green) 6%, var(--panel));}
.cierre-t{font-weight:650; font-size:16px;}
.cierre .lista{margin-top:6px;}
.cierre .fila-form{padding-bottom:10px;}

/* ============ Finanzas ============ */
tr.abre{cursor:pointer;}
tr.abre:hover td{background:var(--panel2);}
tr.detalle td{background:var(--panel2); padding:10px 8px;}
table.det{margin-top:8px; font-size:13px;}
table.det th,table.det td{padding:5px 4px;}

/* ============ Mes ============ */
.mes-cab{display:flex; align-items:center; gap:8px; margin-bottom:3px;}
.mes-cab h1{flex:1; margin:0; text-align:center; font-size:22px;}
.flecha{min-width:74px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font-size:14px; font-weight:600; text-align:center; white-space:nowrap;}
.flecha:hover{text-decoration:none; border-color:var(--muted);}
.flecha.off{visibility:hidden;}
.mes-cab + .sub{text-align:center;}
.it .fila{cursor:pointer;}
.it.done .fila{opacity:.55;}
.grupo-t{padding:14px 0 2px; font-weight:650; color:var(--text); font-size:14px;}
.lista details{border-top:1px solid var(--border); margin-top:6px;}
.editor{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:6px 0 16px; border-bottom:1px solid var(--border);}
.editor label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); min-width:0;}
.editor label input,.editor label select{width:100%; font-size:16px;}
.editor .ancho{grid-column:1 / -1;}
.editor label.check{flex-direction:row; align-items:center; gap:8px; font-size:14px; color:var(--text);}
.editor label.check input{width:auto;}
.editor .fila-form{margin-top:0;}
#f-nuevo{border-bottom:none; padding-bottom:0;}

/* Milton aparte: siempre en morado */
.milton-txt{color:var(--purple);}
.barra{display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--panel2); margin:8px 0 4px;}
.barra i{display:block; height:100%;}
.barra .propio{background:var(--blue);} .barra .ajeno{background:var(--purple);}
.leyenda{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted);}
.leyenda b{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px;}
td.ok-cel{color:var(--muted);} td.ok-cel::after{content:" ✓"; color:var(--green);}
table.milton-mes th, table.milton-mes td{padding:8px 7px; font-size:13.5px;}
table.milton-mes td:first-child, table.milton-mes th:first-child{position:sticky; left:0; background:var(--panel); z-index:1; white-space:nowrap;}
.item details{border-top:none; margin-top:0;}

/* ============ Registrar ============ */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.registro{border:none; padding-top:18px; gap:14px;}
/* Lo protagonista: el monto, grande, como un asiento de libreta */
.monto{display:flex; align-items:baseline; gap:6px; border-bottom:2px solid var(--text); padding-bottom:4px;}
.monto .signo{font-size:36px; font-weight:600; color:var(--muted); letter-spacing:-.02em;}
.monto .signo.pos{color:var(--green);}
.registro .monto input.grande{border:none; background:none; box-shadow:none; padding:0; font-size:48px; font-weight:650; text-align:left; letter-spacing:-.03em; color:var(--text); min-width:0; width:100%;}
.registro .monto input.grande::placeholder{color:var(--border);}
.monto-l:focus-within .monto{border-bottom-color:var(--blue);}
.previa{font-size:14px; color:var(--muted); padding:10px 0 2px 12px; border-left:3px solid var(--border); line-height:1.65;}
.previa div{color:var(--text);}
.previa .previa-t{color:var(--muted); font-size:13px;}
.previa.con-aviso{border-left-color:var(--amber);}
.previa .aviso{color:var(--amber); font-weight:600; margin-top:4px;}
.guardar-barra{position:sticky; bottom:0; z-index:5; padding:18px 0 12px; margin-top:4px; background:linear-gradient(to bottom, transparent, var(--bg) 35%);}
.guardar-barra button{width:100%; padding:15px; font-size:16px; box-shadow:0 6px 18px color-mix(in srgb, var(--bg) 70%, transparent);}
@media(max-width:720px){.guardar-barra{bottom:50px;}}
.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radio); overflow:hidden;}
.seg button{padding:12px 4px; font-size:14px; font-weight:600; color:var(--muted); border:none; border-radius:0; border-right:1px solid var(--border);}
.seg button:last-child{border-right:none;}
.seg button.on{background:var(--blue); color:var(--on-accent);}
input.grande{font-size:32px; font-weight:650; text-align:center; padding:14px; letter-spacing:-.02em;}
.editor .alert{font-size:14px;}
[hidden]{display:none !important;}

/* ============ Páginas que todavía no están ============ */
.pronto{margin-top:8px;}
.pronto-aviso{color:var(--muted); margin:0 0 6px;}
.pronto-b{padding:12px 0; border-bottom:1px solid var(--border);}
.pronto-t{font-weight:600;}

/* ============ Rituales y hábitos ============ */
.momentos{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:var(--radio); overflow:hidden; margin:4px 0 6px;}
.momentos button{border:none; border-radius:0; border-right:1px solid var(--border); padding:10px 4px; font-size:14px; color:var(--muted); background:var(--panel);}
.momentos button:last-child{border-right:none;}
.momentos button.on{background:var(--blue); color:var(--on-accent);}
.momentos .cuenta-m{font-weight:500; opacity:.8; margin-left:4px; font-size:12.5px;}
.checklist{display:flex; flex-direction:column;}
.chk{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 2px; border:none; border-bottom:1px solid var(--border); border-radius:0; background:none; font-weight:500; font-size:15px; color:var(--text);}
.chk:last-child{border-bottom:none;}
.chk:hover{border-color:var(--border);}
.chk-c{flex-shrink:0; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--on-accent);}
.chk.on .chk-c{background:var(--green); border-color:var(--green);}
.chk.on .chk-t{color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 50%, transparent);}
.chk-t{flex:1;}
.chk-a{font-size:12px; color:var(--muted);}
/* "Una piedra más": cierra el día, con su piedra */
.chk.piedra{margin-top:6px; border-top:1px solid var(--border); font-weight:650;}
.chk.piedra .chk-c{border-radius:7px 9px 6px 8px; width:28px; height:24px;}
.chk.piedra.on .chk-c{background:var(--blue); border-color:var(--blue);}
.chk.piedra.on .chk-t{color:var(--text); text-decoration:none;}
.cierre-dia{color:var(--blue); font-weight:650; padding:8px 0 2px;}
/* Muro de piedras: lo memorable de Fe */
.muro{display:flex; flex-direction:column; gap:5px; padding:6px 0;}
.muro-fila{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px;}
.muro-fila{padding-right:6.5%;}
.muro-fila.corrida{padding-left:6.5%; padding-right:0;}
.piedra-m{display:block; height:22px; border-radius:6px 8px 5px 7px; background:var(--panel2); border:1px solid var(--border);}
.muro-fila .piedra-m:nth-child(3n){border-radius:8px 5px 7px 6px;}
.muro-fila .piedra-m:nth-child(3n+1){border-radius:5px 7px 8px 6px;}
.piedra-m.n1{background:color-mix(in srgb, var(--blue) 35%, var(--panel2)); border-color:transparent;}
.piedra-m.n2{background:color-mix(in srgb, var(--blue) 55%, var(--panel2)); border-color:transparent;}
.piedra-m.n3{background:color-mix(in srgb, var(--blue) 78%, var(--panel2)); border-color:transparent;}
.piedra-m.n4{background:var(--blue); border-color:transparent;}
.piedra-m.hoy{outline:2px solid var(--text); outline-offset:1px;}
.piedra-m.futuro{opacity:.35; border-style:dashed;}
.salir-pie{display:block; margin-top:28px; text-align:center; color:var(--muted); font-size:14px;}
@media(min-width:721px){.salir-pie{display:none;}}