/* Paco Pino — estilo tranquilo y sin saturación (pensado para TDAH). */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #1c2430;
  --muted: #6b7688;
  --border: #dfe4ec;
  --accent: #2f6df0;
  --accent-soft: #e7efff;
  --green: #1f9d63;
  --red: #d8453b;
  --shadow: 0 1px 3px rgba(20, 30, 50, .08), 0 6px 24px rgba(20, 30, 50, .06);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1620;
    --surface: #182230;
    --surface-2: #212d3d;
    --text: #eaf0f8;
    --muted: #94a2b8;
    --border: #2a3646;
    --accent: #5b8dff;
    --accent-soft: #1c2b45;
    --green: #35c07d;
    --red: #ff6a5e;
    --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 8px 30px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* Cabecera */
header.app-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px calc(12px + env(safe-area-inset-top, 0));
  padding-top: calc(16px + env(safe-area-inset-top, 0));
  background: var(--bg);
}
header.app-bar h1 { font-size: 1.4rem; margin: 0; letter-spacing: -.02em; }
header.app-bar .sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.spacer { flex: 1; }

main { flex: 1; padding: 0 16px 120px; }

/* Tarjetas */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 4px 10px; }

/* Botones */
button { font: inherit; cursor: pointer; border: none; border-radius: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; border-radius: 14px; background: var(--accent); color: #fff;
  font-weight: 600; font-size: 1rem; width: 100%; min-height: 50px;
  transition: transform .05s ease, opacity .2s;
}
.btn:active { transform: scale(.98); }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--border); }
.btn.small { width: auto; padding: 9px 14px; min-height: 40px; font-size: .9rem; }
.btn:disabled { opacity: .5; pointer-events: none; }
.icon-btn { background: var(--surface-2); border: 1px solid var(--border); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; color: var(--text); }

/* Formularios */
label.field { display: block; margin-bottom: 14px; }
label.field .lab { font-size: .85rem; color: var(--muted); margin-bottom: 6px; display: block; }
input, textarea, select {
  width: 100%; padding: 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 90px; resize: vertical; }

/* Tareas */
.task { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: none; }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; display: grid; place-items: center; margin-top: 1px; background: var(--surface); }
.check.done { background: var(--green); border-color: var(--green); color: #fff; }
.task .body { flex: 1; min-width: 0; }
/* `break-word` solo parte la palabra que NO cabe (no toca las que sí): sin esto, un
   producto largo como «(1 bote de cada (hamburguesas))» se salía de su caja en pantallas
   de 320 px, porque el paréntesis lo convierte en una palabra que no se puede cortar. */
.task .t-title { font-weight: 550; line-height: 1.3; overflow-wrap: break-word; }
.task.done .t-title { text-decoration: line-through; color: var(--muted); }
.task .t-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.pill { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.pill.ctx { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.buy { background: #fff3e0; color: #b26a00; border-color: transparent; }
@media (prefers-color-scheme: dark) { .pill.buy { background: #3a2c14; color: #e0a94a; } }

/* Navegación por días */
.day-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; }
.day-tabs .day-tab { flex: 0 0 auto; padding: 9px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .9rem; }
.day-tabs .day-tab.active { background: var(--accent); color: #fff; border-color: transparent; }

/* Foco "un paso a la vez" */
.focus-card { text-align: center; padding: 30px 20px; }
.focus-card .big { font-size: 1.55rem; font-weight: 650; line-height: 1.25; margin: 14px 0 8px; }
.focus-card .count { color: var(--muted); font-size: .9rem; }

/* Barra inferior */
nav.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
nav.tabbar button { background: none; color: var(--muted); padding: 10px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .68rem; }
nav.tabbar button .ico { font-size: 1.35rem; line-height: 1; }
nav.tabbar button.active { color: var(--accent); }

/* Bóveda */
.vault-item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); }
.vault-item:last-child { border-bottom: none; }
.vault-item .avatar { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.vault-item .vi-body { flex: 1; min-width: 0; }
.vault-item .vi-title { font-weight: 600; }
.vault-item .vi-sub { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reveal-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.reveal-row .val { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(10, 15, 25, .5); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--surface); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0)); max-height: 92vh; overflow-y: auto; }
.modal h2 { margin: 0 0 16px; font-size: 1.25rem; }

/* Login */
.login-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.login-logo { width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 18px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 2rem; font-weight: 800; box-shadow: var(--shadow); }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty .em { font-size: 2.4rem; margin-bottom: 8px; }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.err { color: var(--red); font-size: .88rem; margin: 8px 0; min-height: 1.1em; }
.ok { color: var(--green); font-size: .88rem; }
.badge-soon { font-size: .68rem; background: var(--surface-2); color: var(--muted); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); }
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: .9rem; z-index: 60; box-shadow: var(--shadow); }

/* Rejilla de módulos (Inicio) */
.grid-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.module { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-height: 96px; color: var(--text); }
.module:active { transform: scale(.98); }
.module .m-ico { font-size: 1.7rem; margin-bottom: 6px; }
.module .m-name { font-weight: 650; font-size: 1rem; }
.module .m-desc { color: var(--muted); font-size: .78rem; }

/* Menú semanal */
.meal-day { margin-bottom: 12px; }
.meal-day .d-head { font-weight: 650; margin: 0 4px 6px; text-transform: capitalize; }
.meal-slot { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.meal-slot:last-child { border-bottom: none; }
.meal-slot .s-lab { width: 74px; flex: 0 0 auto; color: var(--muted); font-size: .8rem; text-transform: capitalize; }
.meal-slot .s-val { flex: 1; min-width: 0; }
.meal-slot .s-val.empty { color: var(--muted); font-style: italic; }
.chip-goal { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); margin: 0 6px 6px 0; font-size: .85rem; }
.chip-goal.active { background: var(--accent); color: #fff; border-color: transparent; }
/* Objetivo largo de una rutina: caja plegable. Como chip salía un óvalo gigante. */
.goal-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin: 6px 0 2px; font-size: .85rem; line-height: 1.45; }
.goal-box > summary { cursor: pointer; font-weight: 650; list-style: none; }
.goal-box > summary::-webkit-details-marker { display: none; }
.goal-box > summary::before { content: '▸ '; color: var(--muted); }
.goal-box[open] > summary::before { content: '▾ '; }
.goal-box > div { margin-top: 8px; color: var(--muted); }

/* Lía (captura) */
.lia-mic { width: 120px; height: 120px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 3rem; display: grid; place-items: center; margin: 10px auto; border: none; box-shadow: var(--shadow); }
.lia-mic.rec { background: var(--red); animation: pulse 1.2s infinite; }
/* Micro pequeño de dictado rápido (Hoy y Tareas): graba → transcribe → guarda solo */
.mic-mini { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.15rem; border: none; display: grid; place-items: center; box-shadow: var(--shadow); flex: 0 0 auto; }
.mic-mini.rec { background: var(--red); animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(216,69,59,.5); } 70% { box-shadow: 0 0 0 18px rgba(216,69,59,0); } 100% { box-shadow: 0 0 0 0 rgba(216,69,59,0); } }
.proposal { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: var(--surface-2); }

/* Mis sitios */
.geo-line { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-size: .9rem; }
/* El mapa vive en su propio contexto de apilamiento (z-index 0): los z-index internos
   de Leaflet (hasta 700) no pueden tapar modales ni barras (gotcha conocido del CRM). */
.map-wrap { position: relative; z-index: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
#smap { height: 62vh; min-height: 300px; width: 100%; background: var(--surface-2); }
.leaflet-popup-content { font-family: inherit; }

/* Contabilidad */
.stat-row { display: flex; gap: 10px; }
.stat { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); }
.stat .s-num { font-size: 1.35rem; font-weight: 700; }
.stat .s-num.in { color: var(--green); }
.stat .s-num.out { color: var(--red); }
.stat .s-lab { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.acc-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.acc-row:last-child { border-bottom: none; }
.acc-row .a-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.acc-row .a-amt.in { color: var(--green); }
.acc-row .a-amt.out { color: var(--red); }

/* Gimnasio: detalle y editor de rutinas estructuradas */
.gym-block { margin-bottom: 14px; }
.gym-block .gb-title { font-weight: 650; margin-bottom: 4px; }
/* Fila de ejercicio: miniatura a la izquierda y, a su derecha, el nombre ARRIBA y las
   series/tempo/descanso DEBAJO. Antes iban en la misma línea con el nombre encogiéndose
   y los números en `nowrap`: en el móvil los números se salían de la fila y se imprimían
   ENCIMA del nombre, que además se partía letra a letra (16/08). Apilados no puede pasar. */
.gb-ex { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: 10px; row-gap: 1px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.gb-ex:last-child { border-bottom: none; }
.gb-ex .ex-meta { grid-column: 2; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.gb-ex .ex-meta:empty { display: none; }
.block-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ex-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.ex-row input { padding: 10px 8px; background: var(--surface); }
.ex-row .ex-n { flex: 1; min-width: 0; }
.ex-row .ex-s { width: 54px; flex: 0 0 auto; text-align: center; }
.ex-row .ex-r { width: 62px; flex: 0 0 auto; text-align: center; }
.ex-row .ex-p { width: 62px; flex: 0 0 auto; text-align: center; }
.ex-del { background: none; border: none; color: var(--muted); font-size: .95rem; width: 26px; flex: 0 0 auto; cursor: pointer; }
/* En pantallas estrechas (320 px) los cuatro campos no caben y la ✕ se salía de la fila:
   el nombre pasa a su propia línea y debajo van series/repes/peso y el borrar. */
@media (max-width: 380px) {
  .ex-row { flex-wrap: wrap; }
  .ex-row .ex-n { flex: 1 1 100%; }
}

/* Catálogo de ejercicios: fichas con GIF, selector y biseries */
.ex-item { margin-bottom: 6px; }
.ex-item .ex-row { margin-bottom: 0; }
.ex-item.linked { border-left: 3px solid var(--accent); padding-left: 6px; border-radius: 4px; margin-top: -2px; }
.ex-link { background: none; border: none; color: var(--muted); font-size: .72rem; padding: 2px 0 4px; cursor: pointer; display: block; text-align: left; }
.ex-link.on { color: var(--accent); font-weight: 650; }
.ex-pick { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); padding: 0; overflow: hidden; display: grid; place-items: center; cursor: pointer; font-size: .9rem; }
.ex-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-ex .gbx-thumb { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px;
  border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.gb-ex .gbx-name { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.gb-ex.linked { border-left: 3px solid var(--accent); padding-left: 8px; }
.gb-ex.has-ficha { cursor: pointer; }
.gbx-link { font-size: .8rem; }
.expicker-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 6px; -webkit-overflow-scrolling: touch; }
.chip-f { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: .78rem; white-space: nowrap; cursor: pointer; flex: 0 0 auto; }
.chip-f.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.expicker-results { max-height: 44vh; overflow: auto; margin-top: 6px; }
.expicker-item { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.expicker-item:last-child { border-bottom: none; }
.expicker-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex: 0 0 auto; }
.exficha-gif { width: 100%; max-width: 300px; border-radius: 12px; display: block; margin: 10px auto; background: var(--surface-2); }
.exficha-pasos { margin: 8px 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
/* El vídeo del catálogo no siempre es EXACTAMENTE el ejercicio de la rutina (lo hace con
   mancuernas, en un banco, en un fitball…). Esta nota dice en qué se diferencia. */
.exficha-nota { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 2px; padding: 9px 11px;
  border-radius: 12px; background: #fff5e6; border: 1px solid #f3d9ab; color: #7a5416; font-size: .84rem; line-height: 1.4; }
.exficha-nota b { font-weight: 700; }
@media (prefers-color-scheme: dark) { .exficha-nota { background: #3a2f1b; border-color: #6b552c; color: #f0d9ac; } }
.exficha-cat { color: var(--muted); font-size: .8rem; margin-top: 3px; }

/* ============================================================
   VIDA Y COLOR — animaciones 3D sutiles, sin perder elegancia
   ============================================================ */

/* Fondo "aurora": dos manchas de color que se mueven MUY despacio tras el contenido */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 65vmax; height: 65vmax; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { background: radial-gradient(circle, rgba(91, 141, 255, .30), transparent 62%); top: -22vmax; left: -18vmax; animation: drift1 48s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: radial-gradient(circle, rgba(236, 72, 153, .18), transparent 62%); bottom: -26vmax; right: -16vmax; animation: drift2 62s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: radial-gradient(circle, rgba(34, 197, 94, .14), transparent 62%); top: 30vh; left: 45vw; width: 44vmax; height: 44vmax; animation: drift1 74s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(11vmax, 7vmax) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-9vmax, -6vmax) scale(1.12); } }
@media (prefers-color-scheme: dark) { .aurora i { opacity: .5; } }
#app { position: relative; z-index: 1; }

/* Cabecera y barra inferior con efecto cristal (se ve la aurora detrás) */
header.app-bar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
nav.tabbar { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
header.app-bar h1 { background: linear-gradient(100deg, var(--text) 45%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Botón principal con degradado y pulsación con profundidad */
.btn { background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 6px 18px rgba(47, 109, 240, .30), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(2px) scale(.99); box-shadow: 0 2px 8px rgba(47, 109, 240, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.btn.secondary, .btn.ghost, .btn.danger { background-image: none; box-shadow: none; }
.btn.secondary { background: var(--surface-2); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; }

/* Módulos de Inicio: color propio + entrada escalonada en 3D + pulsación 3D */
.grid-modules { perspective: 900px; }
.module { --mc: var(--accent); --mc-soft: var(--accent-soft); position: relative; overflow: hidden; animation: tile-in .55s cubic-bezier(.2, .7, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 50ms); transition: transform .1s ease; }
.module::after { content: ''; position: absolute; top: -30%; right: -30%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mc) 16%, transparent), transparent 70%); pointer-events: none; }
.module .m-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--mc-soft); font-size: 1.45rem; margin-bottom: 8px; }
.module:active { transform: rotateX(7deg) scale(.96); }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) rotateX(12deg) scale(.96); } to { opacity: 1; transform: none; } }
.module[data-m="hoy"] { --mc: #f59e0b; --mc-soft: #fdf1dc; }
.module[data-m="tareas"] { --mc: #10b981; --mc-soft: #e2f7ef; }
.module[data-m="listas"] { --mc: #8b5cf6; --mc-soft: #efeafd; }
.module[data-m="menu"] { --mc: #f97316; --mc-soft: #feeadb; }
.module[data-m="compra"] { --mc: #06b6d4; --mc-soft: #dff5fa; }
.module[data-m="recetas"] { --mc: #ec4899; --mc-soft: #fce7f1; }
.module[data-m="gym"] { --mc: #ef4444; --mc-soft: #fde7e7; }
.module[data-m="contabilidad"] { --mc: #3b82f6; --mc-soft: #e5eefd; }
.module[data-m="lia"] { --mc: #a855f7; --mc-soft: #f3e9fd; }
.module[data-m="sitios"] { --mc: #14b8a6; --mc-soft: #d9f4ef; }
.module[data-m="salud"] { --mc: #84cc16; --mc-soft: #eef8dc; }
.module[data-m="docs"] { --mc: #6366f1; --mc-soft: #e9eafd; }
.module[data-m="boveda"] { --mc: #64748b; --mc-soft: #eaeef3; }
.module[data-m="ajustes"] { --mc: #6b7280; --mc-soft: #edeef1; }
@media (prefers-color-scheme: dark) {
  .module { --mc-soft: color-mix(in srgb, var(--mc) 17%, transparent); }
}

/* Logo 3D flotante (login) */
.logo3d-scene { perspective: 700px; width: 120px; margin: 0 auto 16px; text-align: center; }
.logo3d { width: 96px; height: 96px; border-radius: 24px; animation: float3d 5.5s ease-in-out infinite; box-shadow: 0 18px 42px rgba(47, 109, 240, .28); }
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateY(-11deg) rotateX(4deg); }
  50% { transform: translateY(-11px) rotateY(11deg) rotateX(-4deg); }
}
.logo3d-shadow { display: block; width: 64px; height: 12px; margin: 8px auto 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .30), transparent 70%); animation: shadow3d 5.5s ease-in-out infinite; }
@keyframes shadow3d { 0%, 100% { transform: scaleX(1); opacity: .45; } 50% { transform: scaleX(.72); opacity: .28; } }

/* Tarjeta de foco ("Lo siguiente") con borde de color VIVO que gira despacio.
   Protegido con @supports: si el navegador no sabe recortar el anillo, no se pinta nada. */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.focus-card { position: relative; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .focus-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1.6px; background: conic-gradient(from var(--ang), var(--accent), #22c55e, #f59e0b, #ec4899, #8b5cf6, var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-border 7s linear infinite; opacity: .65; pointer-events: none; }
}
@keyframes spin-border { to { --ang: 360deg; } }

/* Entrada de cada pantalla y de los modales (deslizan con un toque 3D) */
.view-in { animation: view-in .3s ease backwards; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.modal-back { animation: fade-in .22s ease; }
@keyframes fade-in { from { opacity: 0; } }
.modal { animation: modal-in .34s cubic-bezier(.2, .8, .3, 1.08) backwards; transform-origin: bottom center; }
@keyframes modal-in { from { opacity: .35; transform: translateY(44px) rotateX(5deg); } }

/* Icono de la pestaña activa da un botecito */
nav.tabbar button.active .ico { animation: tab-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tab-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Confeti al completar cosas 🎉 */
.confetti { position: fixed; z-index: 90; width: 7px; height: 10px; border-radius: 2px; pointer-events: none; animation: confetti-fly .85s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes confetti-fly { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 95px)) rotate(var(--r)); } }

/* La bóveda, seria: sin confeti ni bordes vivos, solo el resto de la app */

/* Accesibilidad: si el sistema pide menos movimiento, TODO quieto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aurora { display: none; }
}
a { color: var(--accent); }
.hidden { display: none !important; }

/* Recetas: importación desde enlace, ingredientes estructurados y selector de personas */
.avisos { background: #fff8e1; color: #8a6d1a; border: 1px solid #f0e0a0; border-radius: 12px; padding: 10px 12px; font-size: .82rem; margin-bottom: 12px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .avisos { background: #33290f; color: #e0c25a; border-color: #4a3d1a; } }
.ing-line { display: flex; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--border); align-items: baseline; }
.ing-line:last-child { border-bottom: none; }
.ing-line .iq { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; min-width: 62px; text-align: right; flex: 0 0 auto; }
.serv-pick { display: flex; gap: 6px; flex-wrap: wrap; }

/* Aviso de alergias (rojo) */
.avisos.rojo { background: #fdecec; color: #a33333; border-color: #e0a0a0; }
@media (prefers-color-scheme: dark) { .avisos.rojo { background: #3a1717; color: #e08a8a; border-color: #5a2a2a; } }

/* Modo cocina: un paso por pantalla */
.cook-overlay { position: fixed; inset: 0; z-index: 3000; background: var(--bg); display: flex; flex-direction: column;
  padding: 16px; padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.cook-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cook-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.cook-progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.cook-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: 12px 4px; }
.cook-step { font-size: 1.45rem; line-height: 1.5; font-weight: 600; }
.cook-timer { margin-top: 12px; font-size: 1.2rem; }
.cook-nav { display: flex; gap: 10px; }
.cook-nav .btn { margin: 0; flex: 1; }

/* ---------- 📔 Diario familiar ---------- */
.module[data-m="diario"] { --mc: #d946ef; --mc-soft: #fbe8fd; }
.d-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.d-chip { border: 1px solid var(--border, #d8dce3); background: var(--card, #fff); border-radius: 999px;
  padding: 8px 14px; font-size: .92rem; cursor: pointer; }
.d-chip.on { background: #d946ef; border-color: #d946ef; color: #fff; font-weight: 600; }
.d-chip.sm { padding: 5px 11px; font-size: .82rem; }
.d-recbtn { width: 92px; height: 92px; border-radius: 50%; border: none; font-size: 2.3rem; cursor: pointer;
  background: linear-gradient(145deg, #d946ef, #a21caf); color: #fff;
  box-shadow: 0 10px 24px rgba(217, 70, 239, .35); transition: transform .15s; }
.d-recbtn:active { transform: scale(.93); }
.d-recbtn.rec-on { animation: recpulse 1.2s ease-in-out infinite; background: linear-gradient(145deg, #ef4444, #b91c1c); }
@keyframes recpulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(239,68,68,0); } }
@media (prefers-reduced-motion: reduce) { .d-recbtn.rec-on { animation: none; } }
.d-entry { margin-bottom: 10px; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ph-grid.mini { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.ph-cell { position: relative; aspect-ratio: 1; border: none; border-radius: 10px; overflow: hidden;
  background: #eceef2; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cell.sel { outline: 3px solid #d946ef; outline-offset: -3px; }
.ph-cell.sel::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 11px; background: #d946ef; color: #fff; font-size: .85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.ph-vid { font-size: 1.6rem; }
.cap-body p { line-height: 1.6; margin: 0 0 12px; }
.mes-label { color: #a21caf; font-size: .78rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.ph-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ph-strip img { height: 84px; border-radius: 8px; flex: 0 0 auto; }
.d-rev { margin-bottom: 10px; font-size: .86rem; background: var(--soft, #f6f7f9); border-radius: 10px; padding: 8px 10px; }
.d-rev summary { cursor: pointer; color: #a21caf; font-weight: 600; }
.d-rev ul { margin: 4px 0 6px 16px; padding: 0; }

/* --- Diario: cola de subida en segundo plano --- */
.cola-bar { height: 8px; border-radius: 999px; background: rgba(127, 127, 127, .22); overflow: hidden; }
.cola-bar i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #d946ef, #a21caf); transition: width .4s ease; }

/* --- Diario: vista Libro tipo álbum --- */
.libro-cover { border-radius: 18px; padding: 32px 18px 22px; text-align: center; color: #f4ead9;
  background: linear-gradient(150deg, #2c2320, #503b28); margin-bottom: 14px; }
.libro-cover-t { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.9rem; }
.libro-cover-s { color: #d8c9ae; margin: 4px 0 16px; }
.libro-cover-n { color: #b9a988; margin-top: 12px; font-size: .8rem; }
.libro-mes { border-radius: 18px; padding: 16px; margin-bottom: 14px; color: #2b2724; }
.libro-mes .muted { color: #6b6156; }
.libro-mes-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.libro-mes-num { font-family: Georgia, serif; font-weight: 700; font-size: 2rem; opacity: .55; }
.libro-mes-nombre { font-variant: small-caps; letter-spacing: 2px; font-size: 1.15rem; font-weight: 600; }
.libro-cap-t { font-family: Georgia, serif; font-style: italic; margin: 2px 0 8px; }
.libro-cap p { line-height: 1.7; text-align: justify; margin: 0 0 12px; }
.libro-cap p:first-child::first-letter { font-size: 2.3em; float: left; line-height: .85;
  padding: 2px 6px 0 0; font-family: Georgia, serif; font-weight: 600; }
.libro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.libro-grid .ph-cell { cursor: default; background: rgba(0, 0, 0, .08); }
.libro-grid .ph-cell.grande { grid-column: span 2; grid-row: span 2; }

/* ---------- 🥗 Nutrición ---------- */
.module[data-m="nutricion"] { --mc: #22c55e; --mc-soft: #e3f8ec; }
.tabs-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.tabs-row .chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: .85rem; white-space: nowrap; flex: 0 0 auto; cursor: pointer; }
.tabs-row .chip.on { background: #22c55e; color: #fff; border-color: transparent; }
/* Botonera GRANDE (sustituye a los chips pequeños, que costaban de pulsar) */
.bigtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.bigtab { border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 14px; padding: 10px 4px; min-height: 58px; font-size: .92rem; font-weight: 600;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.bigtab .bt-ico { font-size: 1.3rem; pointer-events: none; }
.bigtab.on { background: #22c55e; color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.bigtab:active { transform: scale(.95); }
/* Navegación por días en la pestaña Hoy (ver ayer, anteayer, cualquier día) */
.nut-dianav { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; }
.nut-dianav .icon-btn { width: 54px; height: 50px; font-size: 1.5rem; flex: 0 0 auto; }
.nut-diasel { position: relative; flex: 1; background: none; border: none; color: var(--text);
  font-size: 1.08rem; padding: 8px 0; cursor: pointer; text-align: center; }
.nut-diasel input { position: absolute; inset: 0; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.nut-mic-card { text-align: center; }
.nut-mic { font-size: 1.05rem; padding: 16px; }
.nut-mic.rec { animation: pulse 1.2s infinite; background: #ef4444; }
.nut-kcal { font-size: 1.05rem; margin-bottom: 10px; }
.nut-kcal b { font-size: 1.7rem; }
.nut-b { margin: 8px 0; }
.nut-b-lab { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 3px; }
.nut-b-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nut-b-track i { display: block; height: 100%; border-radius: 999px; background: #22c55e; transition: width .4s ease; }
.nut-b-track i.over { background: #f59e0b; }
.nut-est { color: #f59e0b; font-weight: 700; }
.nut-items { margin-top: 6px; }
.nut-plan-row { font-size: .9rem; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nut-plan-row .icon-btn { width: 38px; height: 38px; font-size: .95rem; margin-left: auto; }
.nut-plan-row .icon-btn + .icon-btn { margin-left: 0; }
.nut-plan-row.hecho { opacity: .75; }
.nut-chart { display: flex; align-items: flex-end; gap: 2px; height: 90px; position: relative; }
.nut-chart i { flex: 1; background: #22c55e; border-radius: 3px 3px 0 0; min-width: 3px; opacity: .85; }
.nut-chart.kcal i { background: var(--muted); opacity: .5; }
.nut-chart.kcal i.ok { background: #22c55e; opacity: .9; }
.nut-chart.kcal::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--obj, 0%); border-top: 2px dashed #22c55e; }
.nut-ul { margin: 8px 0 10px 18px; font-size: .88rem; }
.nut-ul li { margin-bottom: 5px; }

/* ---------- 🔍 Buscador global ---------- */
.bg-grupo { margin-top: 12px; }
.bg-tit { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.bg-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; color: var(--text); cursor: pointer; }
.bg-item:active { transform: scale(.985); }

/* Rutas (bici, running, senderismo): módulo, grabación y seguimiento */
.module[data-m="rutas"] { --mc: #0ea5e9; --mc-soft: #e0f2fe; }
.rec-overlay .rec-map { flex: 1; min-height: 0; position: relative; z-index: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.rec-stats { display: flex; gap: 8px; padding: 12px 0; }
.rec-stats > div { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px; }
.rec-stats b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.rec-stats span { font-size: .68rem; opacity: .65; text-transform: uppercase; letter-spacing: .05em; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex: 0 0 auto; animation: rec-blink 1.2s ease infinite; }
@keyframes rec-blink { 50% { opacity: .2; } }
.rec-warn { margin-bottom: 8px; background: #fee2e2; color: #b91c1c; border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .rec-warn { background: #3a1717; color: #e08a8a; } }
.rt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.rt-stats b { display: block; font-size: 1.02rem; }
.rt-stats span { font-size: .66rem; opacity: .65; text-transform: uppercase; letter-spacing: .04em; }
/* El modal (guardar ruta) debe quedar POR ENCIMA del overlay de grabación (z 3000 vs 40) */
.rec-overlay ~ .modal-back { z-index: 3100; }
/* Guía de giros del modo seguir-ruta («en 200 m, gira a la derecha») */
.rec-guide { margin-bottom: 8px; background: #e0f2fe; color: #075985; border-radius: 12px; padding: 12px; font-weight: 700; font-size: 1.08rem; text-align: center; }
@media (prefers-color-scheme: dark) { .rec-guide { background: #0c2f42; color: #7dd3fc; } }

/* ============================================================
   🌊 MAR Y CIELO — mareas, sol, luna, viento y olas
   ============================================================ */
.module[data-m="mar"] { --mc: #0891b2; --mc-soft: #d8f3f9; }

.mar-sitio { text-align: center; }
.mar-sitio-n { font-size: 1.25rem; font-weight: 700; }
.mar-sitio-btns { display: flex; gap: 8px; margin-top: 12px; }
.mar-sitio-btns .btn { flex: 1; margin: 0; }

.mar-dias { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.mar-dias .icon-btn { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.mar-dia-txt { flex: 1; text-align: center; display: grid; gap: 1px; }
.mar-dia-txt b { font-size: 1.05rem; }
.mar-dia-txt .muted { font-size: .8rem; }

.mar-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
/* El calendario nativo se dispara desde el chip; el input va oculto encima de él. */
.mar-cal { position: relative; overflow: hidden; }
.mar-cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }

.mar-card { margin-bottom: 12px; }
.mar-tit { font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.mar-linea { margin-top: 10px; font-size: .9rem; }
.mar-fuente { margin-top: 8px; font-size: .74rem; color: var(--muted); line-height: 1.4; }

/* --- mareas --- */
.marea-fila { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.marea-fila:last-of-type { border-bottom: none; }
.marea-ico { font-size: 1rem; flex: 0 0 auto; }
.marea-hora { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.marea-tipo { flex: 1; font-size: .88rem; }
.marea-tipo.alta { color: #2f6df0; }
.marea-tipo.baja { color: #0891b2; }
.marea-alt { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.marea-svg { width: 100%; height: 96px; margin-top: 12px; display: block; }
.marea-horas { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* --- sol --- */
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sol-grid > div { display: grid; justify-items: center; gap: 1px; background: var(--surface-2); border-radius: 12px; padding: 10px 6px; }
.sol-grid b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.sol-grid .muted { font-size: .74rem; }
.sol-ico { font-size: 1.2rem; }
.sol-barra { position: relative; height: 10px; border-radius: 999px; background: #1e293b; margin-top: 14px; overflow: hidden; }
.sol-barra i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #f59e0b, #fde68a, #f59e0b); }

/* --- luna --- */
.luna-fila { display: flex; align-items: center; gap: 14px; }
.luna-ico { font-size: 2.6rem; line-height: 1; }
.luna-fila .muted { font-size: .82rem; }

/* --- viento y olas (tira tipo Windguru, pero solo lo justo) --- */
.mar-resumen { font-size: .9rem; line-height: 1.5; margin-bottom: 10px; }
.wg-scroll { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
.wg-tabla { display: flex; gap: 2px; min-width: min-content; }
.wg-col { display: grid; gap: 3px; text-align: center; min-width: 40px; font-variant-numeric: tabular-nums; }
.wg-col > div { font-size: .78rem; }
.wg-etq { min-width: 46px; text-align: right; color: var(--muted); }
.wg-etq > div { font-size: .68rem; }
.wg-h { font-size: .72rem !important; color: var(--muted); font-weight: 600; }
.wg-flecha { font-size: 1rem; line-height: 1.1; }
.wg-v { font-weight: 700; }
.wg-r, .wg-p { color: var(--muted); font-size: .7rem !important; }
.wg-o { font-weight: 600; }

/* --- buscador de sitios --- */
.ms-res { max-height: 46vh; overflow: auto; margin-top: 6px; }
.ms-item { display: grid; gap: 1px; text-align: left; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 9px 2px; cursor: pointer; color: var(--text); }
.ms-item:last-child { border-bottom: none; }
.ms-n { font-weight: 600; font-size: .95rem; }
.ms-item .muted { font-size: .78rem; }