/* ============================================================
   haz que alcance+ · hoja de estilo única
   Marca: esmeralda + petróleo. Todo en minúsculas. Emojis a la izquierda.
   ============================================================ */

:root{
  --esmeralda:#0F9D76;
  --esmeralda-claro:#E6F4F0;
  --esmeralda-oscuro:#0B7D5D;
  --petroleo:#1F3A5F;
  --petroleo-suave:#2C4E7A;
  --rojo:#E85D4A;
  --rojo-claro:#FDEDEA;
  --gris-claro:#F3F5F7;
  --gris-borde:#E3E8EC;
  --gris-oscuro:#6E7C75;
  --blanco:#fff;

  --r-lg:20px; --r-md:16px; --r-sm:12px;
  --sombra:0 1px 2px rgba(31,58,95,.06), 0 8px 24px rgba(31,58,95,.06);
  --tope:56px; --tabs:66px;

  --display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--gris-claro);
  color:var(--petroleo);
  font-size:15px;line-height:1.45;
  overscroll-behavior-y:none;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,.display{font-family:var(--display);font-weight:600;letter-spacing:-.02em}

/* ---------- estructura ---------- */

/* `overflow-x:clip` es una red de seguridad, no el arreglo: si algún día algo
   vuelve a desbordar, la pantalla no se recorre de lado ni esconde un botón.
   El arreglo de verdad va en cada componente (ver .fila y .cats). */
.marco{max-width:520px;margin:0 auto;min-height:100dvh;background:var(--gris-claro);position:relative;overflow-x:clip}

.tope{
  position:sticky;top:0;z-index:20;height:var(--tope);
  display:flex;align-items:center;gap:10px;padding:0 18px;
  background:var(--petroleo);color:#fff;
}
.tope .marca{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px}
.tope .marca img{width:24px;height:24px;filter:brightness(0) invert(1)}
.tope .mes{margin-left:auto;font-size:12px;opacity:.72;text-transform:lowercase}

main{padding:16px 16px calc(var(--tabs) + 28px)}
.pantalla{display:none;animation:sube .22s ease}
.pantalla.activa{display:block}
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pantalla{animation:none}}

.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  max-width:520px;margin:0 auto;height:var(--tabs);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--blanco);border-top:1px solid var(--gris-borde);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;color:var(--gris-oscuro);letter-spacing:.01em;
}
.tabs button span.ico{font-size:19px;line-height:1}
.tabs button.activa{color:var(--esmeralda);font-weight:600}

/* ---------- piezas ---------- */

.tarjeta{background:var(--blanco);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sombra);margin-bottom:14px}
.tarjeta.plana{box-shadow:none;border:1px solid var(--gris-borde)}
/* la de registrar ingreso: se le nota que es lo primero que hay que hacer */
.tarjeta.destacada{border:1.5px solid var(--esmeralda);box-shadow:0 6px 22px rgba(15,157,118,.12)}
.titulo-seccion{font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:4px}
.sub{color:var(--gris-oscuro);font-size:13px}
.fila{display:flex;align-items:center;gap:10px;min-width:0}
.fila.entre{justify-content:space-between}
/* Un campo dentro de un flex NO se encoge solo: trae un ancho de fábrica (unos
   20 caracteres) y por debajo de eso se niega a bajar, empujando al botón fuera
   de la pantalla en teléfonos angostos. `min-width:0` es lo que lo destraba.
   Le pasó a un usuario real: no podía ver el botón de registrar. */
.fila > input, .fila > select, .fila > .crece{flex:1 1 auto;min-width:0}
.fila > .btn{flex:0 0 auto;white-space:nowrap}

/* campo de monto al lado de un botón (registrar gasto / ingreso) */
.linea{
  flex:1 1 auto;min-width:0;width:100%;padding:13px 14px;border:1px solid var(--gris-borde);
  border-radius:var(--r-md);font-size:16px;font-family:inherit;color:inherit;
}
.aire{margin-top:14px}
.mini{font-size:12px;color:var(--gris-oscuro)}

.dato{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
.dato .etq{font-size:13px;font-weight:600}
.dato .num{font-family:var(--display);font-size:26px;font-weight:600;color:var(--esmeralda);line-height:1.2}
.dato .pie{font-size:12px;color:var(--gris-oscuro)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--esmeralda);color:#fff;font-weight:600;font-size:15px;
  padding:14px 20px;border-radius:var(--r-md);width:100%;
  transition:transform .08s ease,background .15s ease;
}
.btn:active{transform:scale(.985);background:var(--esmeralda-oscuro)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.fantasma{background:var(--blanco);color:var(--petroleo);border:1px solid var(--gris-borde)}
.btn.peligro{background:var(--rojo)}
.btn.chico{width:auto;padding:9px 14px;font-size:13px;border-radius:var(--r-sm)}

.campo{margin-bottom:12px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.campo input,.campo select{
  width:100%;padding:13px 14px;border:1px solid var(--gris-borde);
  border-radius:var(--r-md);background:var(--blanco);font-size:16px;
}
.campo input:focus,.campo select:focus{outline:2px solid var(--esmeralda);outline-offset:-1px;border-color:transparent}
.campo .pista{font-size:12px;color:var(--gris-oscuro);margin-top:5px}

/* ---------- termómetro del piso (tiempo real) ---------- */

.termo{background:var(--petroleo);color:#fff;border-radius:var(--r-lg);padding:20px;margin-bottom:14px}
.termo.rojo{background:var(--rojo)}
.termo .rotulo{font-size:12.5px;opacity:.8}
.termo .grande{font-family:var(--display);font-size:40px;font-weight:600;line-height:1.05;margin:2px 0 4px}
.termo .barra{height:12px;border-radius:99px;background:rgba(255,255,255,.22);display:flex;overflow:hidden;margin:16px 0 10px}
.termo .barra i{display:block;height:100%;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.termo .barra .b-piso{background:#fff;opacity:.55}
.termo .barra .b-gasto{background:#FFD166}
.termo .barra .b-libre{background:var(--esmeralda)}
.termo.rojo .barra .b-libre{background:#fff}
.termo .leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;opacity:.92}
.termo .leyenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}

/* ---------- captura rápida ---------- */

/* se acomodan solas: en un teléfono angosto caben 3, en uno ancho 4 o 5.
   Con 4 columnas fijas, "entretenimiento" desbordaba la pantalla. */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-bottom:12px}
.cats button{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 4px;border-radius:var(--r-sm);border:1px solid var(--gris-borde);
  background:var(--blanco);font-size:10.5px;color:var(--gris-oscuro);line-height:1.15;text-align:center;
}
.cats button .e{font-size:20px}
.cats button.sel{border-color:var(--esmeralda);background:var(--esmeralda-claro);color:var(--esmeralda);font-weight:600}

/* ---------- consejo ---------- */

.consejo{background:var(--esmeralda-claro);border:1px solid var(--esmeralda);border-radius:var(--r-lg);padding:16px;display:flex;gap:12px;margin-bottom:14px}
.consejo .foco{font-size:26px;line-height:1}
.consejo p{font-size:14px;line-height:1.5}
.consejo .etq{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--esmeralda);margin-bottom:4px}

/* ---------- barras por categoría ---------- */

.barras{display:flex;flex-direction:column;gap:11px}
.barra-cat .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.barra-cat .top b{font-weight:600}
.barra-cat .pista{height:9px;border-radius:99px;background:var(--gris-claro);overflow:hidden}
.barra-cat .pista i{display:block;height:100%;border-radius:99px;background:var(--esmeralda);transition:width .4s ease}

/* ---------- dona del cierre ---------- */

.dona{display:flex;align-items:center;gap:18px}
.dona svg{flex:0 0 auto}
.dona .centro{font-family:var(--display);font-weight:600}

/* ---------- modos relax / reto ---------- */

.modos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.modo{border:1.5px solid var(--gris-borde);border-radius:var(--r-md);padding:14px 12px;text-align:center;background:var(--blanco)}
.modo .etq{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gris-oscuro)}
.modo .num{font-family:var(--display);font-size:26px;font-weight:600;margin:3px 0}
.modo .pie{font-size:11.5px;color:var(--gris-oscuro);line-height:1.3}
.modo.reto{border-color:var(--esmeralda);background:var(--esmeralda-claro)}
.modo.reto .etq,.modo.reto .num{color:var(--esmeralda)}
.modo.activo{box-shadow:0 0 0 3px rgba(15,157,118,.18)}
/* subir/bajar la prioridad de una meta */
.orden{background:none;border:0;color:var(--gris-oscuro);font-size:17px;line-height:1;padding:2px 5px;cursor:pointer}
.orden:hover{color:var(--esmeralda)}

/* ---------- listas ---------- */

.lista{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:11px;background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:11px 13px}
.item .e{font-size:19px}
.item .txt{flex:1;min-width:0}
.item .txt b{display:block;font-size:14px;font-weight:600}
.item .txt small{color:var(--gris-oscuro);font-size:11.5px}
.item .monto{font-family:var(--display);font-weight:600;font-size:15px}
.item .quitar{color:var(--gris-oscuro);font-size:18px;padding:2px 4px;line-height:1}
.dia{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-oscuro);margin:14px 0 7px}

.vacio{text-align:center;padding:26px 16px;color:var(--gris-oscuro);font-size:13.5px}
.vacio .e{font-size:34px;display:block;margin-bottom:8px}

/* ---------- avisos ---------- */

.aviso{border-radius:var(--r-md);padding:13px 15px;font-size:13.5px;margin-bottom:12px;line-height:1.45}
.aviso.rojo{background:var(--rojo-claro);border:1px solid var(--rojo);color:#8f2e1f}
.aviso.verde{background:var(--esmeralda-claro);border:1px solid var(--esmeralda);color:var(--esmeralda-oscuro)}

/* ---------- onboarding ---------- */

.onb{position:fixed;inset:0;z-index:50;background:var(--gris-claro);overflow-y:auto}
.onb .caja{max-width:520px;margin:0 auto;padding:34px 22px calc(34px + env(safe-area-inset-bottom))}
.onb .logo{width:64px;margin-bottom:22px}
.onb h2{font-size:27px;line-height:1.15;margin-bottom:7px}
.onb .paso{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--esmeralda);margin-bottom:9px}
.onb .opciones,.tarjeta .opciones{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.opcion{display:flex;gap:13px;align-items:flex-start;text-align:left;background:var(--blanco);border:1.5px solid var(--gris-borde);border-radius:var(--r-lg);padding:16px;width:100%}
.opcion.sel{border-color:var(--esmeralda);background:var(--esmeralda-claro)}
.opcion .e{font-size:24px;line-height:1}
.opcion b{display:block;font-size:15px;margin-bottom:2px}
.opcion small{color:var(--gris-oscuro);font-size:12.5px;line-height:1.4}
.onb .resultado{background:var(--petroleo);color:#fff;border-radius:var(--r-lg);padding:26px 20px;text-align:center;margin:20px 0}
.onb .resultado .num{font-family:var(--display);font-size:44px;font-weight:600;line-height:1.05}
.onb .barra-pasos{display:flex;gap:5px;margin-bottom:22px}
.onb .barra-pasos i{flex:1;height:3px;border-radius:99px;background:var(--gris-borde)}
.onb .barra-pasos i.on{background:var(--esmeralda)}

/* filas editables (fijos y deudas) */
.editable{display:flex;gap:8px;margin-bottom:8px}
.editable input{padding:11px 12px;border:1px solid var(--gris-borde);border-radius:var(--r-sm);font-size:15px;min-width:0}
.editable input.nombre{flex:1.5}
.editable input.monto{flex:1;text-align:right}
.editable input.dia{flex:0 0 62px;text-align:center}
.editable .quitar{color:var(--gris-oscuro);font-size:20px;padding:0 4px}

/* dictar o escribir el gasto en una frase */
.dictado{display:flex;gap:8px;align-items:center}
.dictado input{
  flex:1;min-width:0;padding:13px 14px;border:1px solid var(--gris-borde);
  border-radius:var(--r-md);font-size:15px;font-family:inherit;color:inherit;
}
.dictado .micro{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gris-borde);
  background:var(--blanco);font-size:20px;line-height:1;cursor:pointer;transition:.15s ease;
}
.dictado .micro:hover{border-color:var(--esmeralda)}
.dictado .micro.oyendo{border-color:var(--rojo);background:var(--rojo-claro);animation:latido 1s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* deudas: además del monto llevan tipo (plazo/revolvente) y cuántos pagos faltan */
.editable-deuda{border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:11px;margin-bottom:10px;background:var(--blanco)}
.editable-deuda .editable{margin-bottom:8px}
.editable-deuda.terminada{border-color:var(--esmeralda);background:var(--esmeralda-claro)}
.deuda-opts{display:flex;gap:8px}
.deuda-opts select,.deuda-opts input{
  flex:1;min-width:0;padding:9px 10px;border:1px solid var(--gris-borde);
  border-radius:var(--r-sm);font-size:13.5px;background:var(--blanco);font-family:inherit;color:inherit;
}
.deuda-pie{margin-top:9px;line-height:1.45}
.deuda-pie.verde{color:var(--esmeralda-oscuro)}

/* chips de dos opciones (con factura / sin factura) */
.chips{display:flex;gap:8px}
.chips button{
  flex:1;background:var(--blanco);border:1.5px solid var(--gris-borde);border-radius:var(--r-sm);
  padding:10px 8px;font-size:13px;font-family:inherit;color:var(--petroleo);cursor:pointer;
}
.chips button.sel{border-color:var(--esmeralda);background:var(--esmeralda-claro);color:var(--esmeralda);font-weight:600}

/* ---------- reporte imprimible (cierre de mes para el contador) ---------- */

.reporte{position:fixed;inset:0;z-index:80;background:var(--gris-claro);overflow-y:auto}
.reporte[hidden]{display:none}
.hoja-reporte{max-width:760px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
.rep-acciones{display:flex;gap:8px;margin-bottom:14px}
.rep-hoja{background:var(--blanco);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--sombra);color:var(--petroleo)}
.rep-tope{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-bottom:2px solid var(--petroleo);padding-bottom:12px;margin-bottom:18px}
.rep-tope h1{font-family:var(--display);font-size:23px;font-weight:600;line-height:1.15}
.rep-tope p{font-size:12px;color:var(--gris-oscuro);margin-top:3px}
.rep-marca{font-family:var(--display);font-size:13px;font-weight:600;color:var(--esmeralda);white-space:nowrap}
.rep-hoja section{margin-bottom:20px;break-inside:avoid}
.rep-hoja h2{font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:7px;
  text-transform:lowercase;color:var(--esmeralda-oscuro)}
.rep-hoja table{width:100%;border-collapse:collapse;font-size:13.5px}
.rep-hoja th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris-oscuro);font-weight:700;padding:5px 0;border-bottom:1px solid var(--gris-borde)}
.rep-hoja td{padding:7px 0;border-bottom:1px solid var(--gris-borde);vertical-align:top}
.rep-hoja .der{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rep-hoja tr.tot td{border-top:2px solid var(--petroleo);border-bottom:0;font-weight:700;font-family:var(--display)}
.rep-detalle{margin-top:12px}
.rep-hoja tr.apagada td{color:var(--gris-oscuro);opacity:.6}   /* mes sin capturas */
.rep-etq{font-size:10.5px;color:var(--gris-oscuro);border:1px solid var(--gris-borde);
  border-radius:99px;padding:1px 7px;margin-left:5px;white-space:nowrap}
.rep-nota{font-size:12px;color:var(--gris-oscuro);margin-top:8px}
.rep-pie{font-size:11px;color:var(--gris-oscuro);line-height:1.5;border-top:1px solid var(--gris-borde);padding-top:11px}

/* marca de agua mientras el mes no está desbloqueado (se imprime también: si no,
   bastaría con imprimir la muestra para llevarse el reporte sin pagarlo) */
.rep-hoja{position:relative}
.rep-agua{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:space-around;pointer-events:none;overflow:hidden;z-index:2}
.rep-agua span{
  font-family:var(--display);font-weight:600;font-size:clamp(40px,11vw,86px);
  color:rgba(31,58,95,.11);transform:rotate(-24deg);letter-spacing:.06em;white-space:nowrap;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.rep-hoja.muestra{border:1px dashed var(--gris-borde)}

/* paquetes de reportes */
.paquetes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.paquete{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
  background:var(--blanco);border:1.5px solid var(--gris-borde);border-radius:var(--r-md);
  padding:13px 8px;font-family:inherit;color:var(--petroleo);cursor:pointer}
.paquete:hover{border-color:var(--esmeralda)}
.paquete .n{font-size:12.5px;font-weight:600}
.paquete .precio{font-family:var(--display);font-size:21px;font-weight:600;color:var(--esmeralda)}
.paquete .uni{font-size:10.5px;color:var(--gris-oscuro);line-height:1.3}

/* Al imprimir CON el reporte abierto sale solo la hoja, sin la app alrededor.
   Va atado a la clase `imprimiendo` (y no a body a secas) para que un ctrl+P
   suelto desde la app no acabe escupiendo una hoja en blanco. */
@media print{
  body.imprimiendo{background:#fff}
  body.imprimiendo > *{display:none !important}
  body.imprimiendo .reporte{display:block !important;position:static;background:#fff;overflow:visible}
  .no-print{display:none !important}
  .hoja-reporte{max-width:none;padding:0}
  .rep-hoja{box-shadow:none;border-radius:0;padding:0}
  .rep-hoja section{page-break-inside:avoid}
  /* la marca de agua sí se imprime, y fija para que salga en todas las hojas */
  .rep-agua{position:fixed;inset:0}
  .rep-hoja.muestra{border:0}
}
@page{margin:14mm}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabs) + 16px);transform:translateX(-50%) translateY(12px);
  background:var(--petroleo);color:#fff;padding:11px 18px;border-radius:99px;font-size:13.5px;font-weight:500;
  opacity:0;pointer-events:none;transition:.22s ease;z-index:60;white-space:nowrap;box-shadow:var(--sombra);
}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- modal cierre de mes ---------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(31,58,95,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal .hoja{background:var(--gris-claro);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;padding:24px 18px calc(24px + env(safe-area-inset-bottom));animation:sube .28s ease}
.modal[hidden]{display:none}

/* enlace en línea (botón con apariencia de link) */
.enlace{color:var(--esmeralda);font-weight:600;background:none;border:0;padding:0;font:inherit;
  cursor:pointer;text-decoration:underline;display:inline}

/* 6 tabs (con tandas) */
.tabs.seis{grid-template-columns:repeat(6,1fr)}
.tabs.seis button{font-size:9.5px}
.tabs.seis button span.ico{font-size:17px}

/* 7 tabs (con negocio). La de negocio se esconde si no hay plan que la incluya. */
.tabs.siete{grid-template-columns:repeat(7,1fr)}
.tabs.siete button{font-size:9px;padding:0 2px}
.tabs.siete button span.ico{font-size:16px}
.tabs button[hidden]{display:none}
.tabs.siete:has(button[data-ir="negocio"][hidden]){grid-template-columns:repeat(6,1fr)}

/* modo negocio */
.estrella{background:var(--petroleo);color:#fff;border-radius:var(--r-lg);padding:22px 20px;margin-bottom:14px}
.estrella.verde{background:var(--esmeralda-oscuro)}
.estrella .etq{font-size:12px;opacity:.8;line-height:1.45}
.estrella .num{font-family:var(--display);font-size:40px;font-weight:600;line-height:1.05;margin:4px 0}
.estrella .clientes{font-family:var(--display);font-size:17px;font-weight:600;color:#FFD166;margin-bottom:8px}
.estrella .desglose{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.9;margin-top:12px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:11px}
.estrella .desglose b{display:block;font-family:var(--display);font-size:15px;font-weight:600}
.estrella .pista{height:9px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:12px}
.estrella .pista i{display:block;height:100%;border-radius:99px;background:#FFD166;transition:width .4s ease}

/* muestra del módulo cuando no está incluido en el plan */
.borroso{filter:blur(6px);pointer-events:none;user-select:none}
.candado{position:relative}
.candado .encima{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:20px;background:rgba(255,255,255,.55);
  border-radius:var(--r-lg);backdrop-filter:blur(1px)}

/* tandas */
.tanda-card{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:var(--r-md);padding:16px;margin-bottom:10px}
.tanda-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tanda-card .nom{font-family:var(--display);font-weight:600;font-size:16px}
.turno{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--gris-borde)}
.turno:last-child{border:0}
.turno .n{width:26px;height:26px;border-radius:50%;background:var(--gris-claro);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.turno.yo .n{background:var(--esmeralda);color:#fff}
.turno.hoy{background:var(--esmeralda-claro);margin:0 -8px;padding:10px 8px;border-radius:10px}
.turno .txt{flex:1;min-width:0}
.turno .txt b{display:block;font-size:14px}
.turno .txt small{color:var(--gris-oscuro);font-size:11.5px}
.pagos-lista label{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--gris-borde);font-size:14px;cursor:pointer}
.pagos-lista label:last-child{border:0}
.pagos-lista input{width:20px;height:20px;accent-color:var(--esmeralda)}
.pagos-lista label.solo-lectura{cursor:default;opacity:.75}

/* tandas compartidas */
.etq-comp{color:var(--esmeralda);font-weight:600}
.etq-sola{color:var(--gris-oscuro)}
.codigo-caja{background:var(--esmeralda-claro);border:1px dashed var(--esmeralda);border-radius:var(--r-md);
  padding:14px;text-align:center}
.codigo-caja b{font-family:var(--display);font-size:24px;font-weight:600;color:var(--esmeralda-oscuro);letter-spacing:.06em}

/* ver/ocultar contraseña */
.pass-wrap{position:relative}
.pass-wrap input{padding-right:46px;width:100%}
.ver-pass{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  font-size:19px;line-height:1;cursor:pointer;opacity:.55;padding:6px}
.ver-pass:hover{opacity:.9}

/* el logo del header es link a la landing, sin estilo de enlace */
.tope .marca{text-decoration:none;color:inherit}

/* ====== layout de escritorio: aprovecha el ancho (2 columnas) ====== */
@media (min-width: 880px){
  .marco{max-width:1040px}
  .tope{border-radius:0}
  main{padding:26px 26px calc(var(--tabs) + 34px)}
  /* las tarjetas fluyen en 2 columnas y llenan la pantalla */
  .pantalla.activa{column-count:2;column-gap:20px}
  .pantalla.activa > *{break-inside:avoid;margin-bottom:0}
  .tarjeta,.termo,.consejo,.cuenta,.tanda-card,.aviso,.dato,.modos,.barras,.lista,.dia,.selector{break-inside:avoid}
  .tabs{max-width:1040px}
  /* onboarding/auth/muro: caja centrada más cómoda */
  .onb .caja{max-width:600px}
}

/* botón regresar en el header */
.tope .atras{color:#fff;font-size:22px;line-height:1;background:none;border:0;cursor:pointer;
  padding:2px 8px 2px 0;margin-right:2px;opacity:.9}
.tope .atras:hover{opacity:1}