/* Letras guardadas dentro de la app (antes venían de Google Fonts) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ TOKENS / THEMES ============ */
/* ESCALA v23: 1rem = 18px y cajas ×1.12. El texto se lee en 13,7px base,
   antes 12,2px. Para volver atrás alcanza con ROOT=16 y K=1. */
html{font-size:18px;-webkit-text-size-adjust:100%;text-size-adjust:100%}

:root{
  --app-icon: url("../hogar-icono.png");
  --h: 54px;
  --nav-w: 232px;
  /* #71: cuánto empuja la barra lateral al contenido (0 cerrada o celular) */
  --nav-of: 0px;
  /* v32: la barra fija de abajo y su espacio seguro en el celular */
  --dock: 58px;
  --dock-safe: calc(var(--dock) + env(safe-area-inset-bottom, 0px));
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --ctl-r: 9px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* derivados: un solo lenguaje visual para los 20 temas (sin degradados) */
  --deep: color-mix(in srgb, var(--primary) 66%, #000);   /* borde/hover del sólido principal */
  --tint: color-mix(in srgb, var(--primary) 9%, transparent);
  --tint-2: color-mix(in srgb, var(--primary) 16%, transparent);
  --line-p: color-mix(in srgb, var(--primary) 36%, var(--border));
  /* v30: tinta legible sobre el fondo del propio tema (los 20) y borde de control visible */
  --ink-p: color-mix(in srgb, var(--primary) 50%, var(--text));
  --ink-ok: color-mix(in srgb, var(--success) 62%, var(--text));
  --ink-bad: color-mix(in srgb, var(--danger) 62%, var(--text));
  --ink-warn: color-mix(in srgb, var(--warn) 66%, var(--text));
  /* #66: la tinta del glifo sobre el relleno sólido. El valor de acá es sólo
     el arranque; tintaAccion() lo corrige por tema con el color real. */
  --on-ok:#0b1016; --on-warn:#0b1016; --on-bad:#0b1016;
  --ctl-line: color-mix(in srgb, var(--text) 22%, var(--border));
  --ctl-line-2: color-mix(in srgb, var(--text) 36%, var(--border));
  --ink-soft: color-mix(in srgb, var(--muted) 74%, var(--text));
  --ink-link: color-mix(in srgb, var(--primary) 62%, var(--text));
  --ring: color-mix(in srgb, var(--primary) 42%, transparent);
  --hover: color-mix(in srgb, var(--text) 5%, var(--surface-2));
  /* v32: lenguaje de superficies para el refinado global y la barra inferior */
  --edge: color-mix(in srgb, var(--text) 20%, var(--border));   /* divisor y hairline de card */
  --lift: color-mix(in srgb, var(--text) 4%, var(--surface));   /* fila o tile apenas levantado */
  --dock-bg: color-mix(in srgb, var(--raise) 88%, transparent);
  --sh-soft: 0 1px 2px rgba(0,0,0,.05), 0 8px 22px -14px rgba(0,0,0,.28);
  --glow-p: color-mix(in srgb, var(--primary) 46%, transparent);
  --t: 140ms;
  --t2: 220ms;
}

/* --- 10 CLAROS + 10 OSCUROS (v50) --- */
html[data-theme="porcelana"]{
  --bg:#eef0f5; --surface:#ffffff; --surface-2:#f5f6fa; --border:#e3e6ee; --border-2:#cdd2df;
  --text:#151a2b; --muted:#5b6378;
  --primary:#4f46e5; --primary-2:#6d66f0; --on-primary:#ffffff;
  --accent:#0ea5e9; --success:#15803d; --danger:#dc2626; --warn:#b45309;
  --halo1:rgba(79,70,229,.15); --halo2:rgba(14,165,233,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="nordico"]{
  --bg:#e8eef6; --surface:#ffffff; --surface-2:#f2f6fb; --border:#dce4ef; --border-2:#c2cfe0;
  --text:#0f1b2d; --muted:#55657d;
  --primary:#2563eb; --primary-2:#4f84f0; --on-primary:#ffffff;
  --accent:#0891b2; --success:#15803d; --danger:#dc2626; --warn:#b45309;
  --halo1:rgba(37,99,235,.15); --halo2:rgba(8,145,178,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="salvia"]{
  --bg:#e7ede6; --surface:#fdfefc; --surface-2:#f1f5ef; --border:#dde5da; --border-2:#c4d1c0;
  --text:#16241a; --muted:#56685a;
  --primary:#3f7d58; --primary-2:#5b9a73; --on-primary:#ffffff;
  --accent:#c2773a; --success:#2f7d32; --danger:#c2410c; --warn:#a16207;
  --halo1:rgba(63,125,88,.15); --halo2:rgba(194,119,58,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="lino"]{
  --bg:#f3ede4; --surface:#fffdf9; --surface-2:#f9f4ec; --border:#e9e0d2; --border-2:#d6c8b3;
  --text:#2a1f16; --muted:#7a6754;
  --primary:#c2552d; --primary-2:#d9744a; --on-primary:#ffffff;
  --accent:#2f6f73; --success:#3f8a4a; --danger:#b91c1c; --warn:#a16207;
  --halo1:rgba(194,85,45,.15); --halo2:rgba(47,111,115,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="marea"]{
  --bg:#e3f1f1; --surface:#ffffff; --surface-2:#eef8f8; --border:#d5e8e8; --border-2:#b6d6d6;
  --text:#0c2426; --muted:#4c6b6d;
  --primary:#0f8b8d; --primary-2:#2aa5a7; --on-primary:#0b1016;
  --accent:#f2734b; --success:#15803d; --danger:#dc2626; --warn:#b45309;
  --halo1:rgba(15,139,141,.15); --halo2:rgba(242,115,75,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="lavanda"]{
  --bg:#eeebf8; --surface:#ffffff; --surface-2:#f6f4fc; --border:#e3def3; --border-2:#cec5ea;
  --text:#1e1735; --muted:#675f86;
  --primary:#6d4bd8; --primary-2:#8a6ee6; --on-primary:#ffffff;
  --accent:#db2777; --success:#15803d; --danger:#dc2626; --warn:#a16207;
  --halo1:rgba(109,75,216,.15); --halo2:rgba(219,39,119,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="durazno"]{
  --bg:#fbece4; --surface:#ffffff; --surface-2:#fef5f0; --border:#f3ded3; --border-2:#e8c6b5;
  --text:#2e1a12; --muted:#80604f;
  --primary:#e5603b; --primary-2:#f07c58; --on-primary:#0b1016;
  --accent:#7c3aed; --success:#2f8a4a; --danger:#c81e1e; --warn:#a16207;
  --halo1:rgba(229,96,59,.15); --halo2:rgba(124,58,237,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="miel"]{
  --bg:#f6efdc; --surface:#fffdf6; --surface-2:#fbf6e8; --border:#ece2c6; --border-2:#dbcca2;
  --text:#2a2110; --muted:#75683f;
  --primary:#b7791f; --primary-2:#d69a3a; --on-primary:#0b1016;
  --accent:#1d4ed8; --success:#3f7d32; --danger:#c2410c; --warn:#92400e;
  --halo1:rgba(183,121,31,.15); --halo2:rgba(29,78,216,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="rose"]{
  --bg:#f8e9ee; --surface:#ffffff; --surface-2:#fdf3f6; --border:#f0dbe3; --border-2:#e2c0cd;
  --text:#2c1520; --muted:#7d5a68;
  --primary:#c2366b; --primary-2:#d95c8a; --on-primary:#ffffff;
  --accent:#0e7490; --success:#15803d; --danger:#b91c1c; --warn:#a16207;
  --halo1:rgba(194,54,107,.15); --halo2:rgba(14,116,144,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="tinta"]{
  --bg:#ebebea; --surface:#ffffff; --surface-2:#f4f4f3; --border:#e2e2e0; --border-2:#cbcbc8;
  --text:#141414; --muted:#5f5f5c;
  --primary:#1f1f1f; --primary-2:#3d3d3d; --on-primary:#ffffff;
  --accent:#e4572e; --success:#15803d; --danger:#c81e1e; --warn:#a16207;
  --halo1:rgba(31,31,31,.15); --halo2:rgba(228,87,46,.11);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.08);
}
html[data-theme="nieve"]{
  --bg:#121212; --surface:#1c1c1c; --surface-2:#262626; --border:#383838; --border-2:#4b4b4b;
  --text:#f5f7fa; --muted:#b8bfc9;
  --primary:#e8edf4; --primary-2:#ffffff; --on-primary:#0b1016;
  --accent:#cdd6e2; --success:#53d68c; --danger:#ff7188; --warn:#f6c85f;
  --halo1:rgba(232,237,244,.22); --halo2:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.52);
}
html[data-theme="carbon"]{
  --bg:#121212; --surface:#1c1c1c; --surface-2:#262626; --border:#383838; --border-2:#4b4b4b;
  --text:#f4f5f3; --muted:#a2a7a3;
  --primary:#53d68c; --primary-2:#78e5a8; --on-primary:#0b1016;
  --accent:#d4ff64; --success:#53d68c; --danger:#ff7188; --warn:#f6c85f;
  --halo1:rgba(83,214,140,.24); --halo2:rgba(212,255,100,.14);
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.52);
}
html[data-theme="oceano"]{
  --bg:#0f172a; --surface:#172033; --surface-2:#202b40; --border:#334057; --border-2:#46536a;
  --text:#e7f7fb; --muted:#91b8c8;
  --primary:#2ec5ce; --primary-2:#61dce2; --on-primary:#0b1016;
  --accent:#7ca7ff; --success:#3dd6a0; --danger:#ff758c; --warn:#f6d36b;
  --halo1:rgba(46,197,206,.24); --halo2:rgba(124,167,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
html[data-theme="amatista"]{
  --bg:#18181b; --surface:#242427; --surface-2:#2d2d31; --border:#414147; --border-2:#55555c;
  --text:#f7efff; --muted:#b9a4c7;
  --primary:#c38cff; --primary-2:#d7afff; --on-primary:#0b1016;
  --accent:#ff78b5; --success:#59dc94; --danger:#ff7188; --warn:#f7c85b;
  --halo1:rgba(195,140,255,.24); --halo2:rgba(255,120,181,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
html[data-theme="brasa"]{
  --bg:#121212; --surface:#1c1c1c; --surface-2:#262626; --border:#383838; --border-2:#4b4b4b;
  --text:#fff3e8; --muted:#c2a999;
  --primary:#ffad54; --primary-2:#ffc177; --on-primary:#0b1016;
  --accent:#ff6f61; --success:#79d56b; --danger:#ff6f61; --warn:#ffd166;
  --halo1:rgba(255,173,84,.24); --halo2:rgba(255,111,97,.16);
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.52);
}
html[data-theme="carmesi"]{
  --bg:#18181b; --surface:#242427; --surface-2:#2d2d31; --border:#414147; --border-2:#55555c;
  --text:#fff0ee; --muted:#c9a8a4;
  --primary:#ff4d4d; --primary-2:#ff8585; --on-primary:#0b1016;
  --accent:#ff8c66; --success:#54d68c; --danger:#ff7888; --warn:#ffd166;
  --halo1:rgba(255,77,77,.24); --halo2:rgba(255,140,102,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
html[data-theme="vino"]{
  --bg:#18181b; --surface:#242427; --surface-2:#2d2d31; --border:#414147; --border-2:#55555c;
  --text:#fff0f5; --muted:#c3a3af;
  --primary:#ff6f91; --primary-2:#ff94ad; --on-primary:#0b1016;
  --accent:#ffc15a; --success:#63d890; --danger:#ff6f79; --warn:#ffc15a;
  --halo1:rgba(255,111,145,.24); --halo2:rgba(255,193,90,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
html[data-theme="tormenta"]{
  --bg:#18181b; --surface:#242427; --surface-2:#2d2d31; --border:#414147; --border-2:#55555c;
  --text:#f2f7fa; --muted:#c1cdd3;
  --primary:#7cc4ff; --primary-2:#a3d6ff; --on-primary:#0b1016;
  --accent:#d0a8ff; --success:#72dda4; --danger:#ff8497; --warn:#ffda73;
  --halo1:rgba(124,196,255,.24); --halo2:rgba(208,168,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.42);
}
html[data-theme="cafe"]{
  --bg:#121212; --surface:#1c1c1c; --surface-2:#262626; --border:#383838; --border-2:#4b4b4b;
  --text:#fff3e8; --muted:#cbb8a8;
  --primary:#e1ad7d; --primary-2:#f0c69d; --on-primary:#0b1016;
  --accent:#82c8b1; --success:#8bd17c; --danger:#ff8585; --warn:#f1c76a;
  --halo1:rgba(225,173,125,.24); --halo2:rgba(130,200,177,.16);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.46);
}
html[data-theme="boreal"]{
  --bg:#0f172a; --surface:#172033; --surface-2:#202b40; --border:#334057; --border-2:#46536a;
  --text:#eafbf8; --muted:#9bbdbb;
  --primary:#37dbc5; --primary-2:#70e8d8; --on-primary:#0b1016;
  --accent:#b398ff; --success:#50d99a; --danger:#ff778e; --warn:#f7d267;
  --halo1:rgba(55,219,197,.24); --halo2:rgba(179,152,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
html[data-mode="light"]{ --glass:rgba(255,255,255,.86); --scrim:rgba(15,20,35,.42); --overlay:rgba(255,255,255,.55);
  --raise:var(--surface);
  /* v32: la elevación del claro es una sombra corta y muy tenue; la del oscuro es más profunda */
  --el1:0 1px 2px rgba(16,24,40,.05), 0 10px 22px -18px rgba(16,24,40,.26);
  --el2:0 1px 2px rgba(16,24,40,.05), 0 20px 44px -24px rgba(16,24,40,.34);
  --pop:0 0 0 1px var(--border), 0 10px 30px -14px rgba(16,24,40,.30), 0 2px 6px -2px rgba(16,24,40,.14); }
html[data-mode="dark"]{ --glass:rgba(16,22,36,.86); --scrim:rgba(0,0,0,.62); --overlay:rgba(0,0,0,.35);
  --raise:color-mix(in srgb, var(--text) 6%, var(--surface));
  --el1:0 1px 2px rgba(0,0,0,.40), 0 12px 26px -20px rgba(0,0,0,.80);
  --el2:0 1px 3px rgba(0,0,0,.45), 0 24px 52px -26px rgba(0,0,0,.88);
  --pop:0 0 0 1px var(--border-2), 0 16px 40px -16px rgba(0,0,0,.80), 0 2px 8px -4px rgba(0,0,0,.60); }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:.76rem; line-height:1.36;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-optical-sizing:auto;
  overflow-x:hidden;
  min-height:100dvh;
}
/* v32: dos halos suaves (primario arriba, acento abajo) para que la hoja tenga profundidad */
html[data-mode="dark"] body{background-image:
  radial-gradient(46rem 30rem at 50% -22%, var(--halo1), transparent 70%),
  radial-gradient(34rem 24rem at 100% 108%, var(--halo2), transparent 72%);
  background-attachment:fixed;}
html[data-mode="light"] body{background-image:
  radial-gradient(44rem 28rem at 50% -24%, var(--halo1), transparent 72%),
  radial-gradient(30rem 22rem at 104% 104%, var(--halo2), transparent 74%);
  background-attachment:fixed;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.18}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary);text-decoration:none}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ============ PRIMITIVAS ============ */
.card{
  position:relative; background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r); padding:10px; box-shadow:var(--el1);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.card:hover{border-color:var(--ctl-line-2)}
.glow{position:relative;overflow:hidden}

.btn{
  --pad:6px 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:var(--pad); border-radius:9px; border:1px solid transparent; cursor:pointer;
  font-weight:620; font-size:.71rem; letter-spacing:-.012em; white-space:nowrap;
  transition:background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t), box-shadow var(--t2) var(--ease), opacity .2s;
}
.btn:active{filter:brightness(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{
  background:var(--primary); color:var(--on-primary); border-color:var(--deep);
  box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset, 0 3px 10px -6px var(--glow-p);
}
.btn-primary:hover:not(:disabled){background:color-mix(in srgb, var(--primary) 88%, var(--deep));box-shadow:0 1px 0 0 rgba(255,255,255,.08) inset, 0 5px 14px -6px var(--glow-p)}
.btn-ghost{background:var(--surface); border-color:var(--ctl-line); color:var(--text)}
.btn-ghost:hover:not(:disabled){border-color:color-mix(in srgb, var(--text) 36%, var(--border)); background:var(--hover)}
.btn-block{width:100%}
.btn-lg{--pad:8px 13px;font-size:.79rem;border-radius:10px}
.btn-icon{--pad:0;width:31px;height:31px;border-radius:9px;background:var(--surface);border-color:var(--ctl-line)}
.btn-icon:hover{border-color:var(--ctl-line-2)}
/* ---------- #66: los botones de acción ----------
   Alta = verde, edición = amarillo, baja o rechazo = rojo. No llevan palabra:
   el ícono de Lucide hace el trabajo y la palabra queda en el title y en el
   aria-label. En el paso de confirmación (la clase «ancho») la palabra vuelve
   a aparecer al lado del ícono. */
.ai{--pad:0;flex:0 0 auto;width:38px;height:31px;padding:0;gap:5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:.69rem;font-weight:680;line-height:1}
.ai svg{width:16px;height:16px;flex:none}
.ai.ancho{width:auto;padding:0 10px}
.ai.grande{width:44px;height:37px;border-radius:10px}
.ai.grande svg{width:18px;height:18px}
.ai.mini{width:27px;height:25px;border-radius:8px}
.ai.mini svg{width:14px;height:14px}
.ai.mini.ancho{width:auto;padding:0 8px}
.ai.ai-ok{background:var(--success);border:1px solid color-mix(in srgb,var(--success) 72%,var(--deep));color:var(--on-ok)}
.ai.ai-edit{background:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 72%,var(--deep));color:var(--on-warn)}
.ai.ai-del{background:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 72%,var(--deep));color:var(--on-bad)}
.ai.ai-neu{background:var(--surface);border:1px solid var(--ctl-line);color:var(--text)}
.ai:hover:not(:disabled){filter:brightness(1.08)}
.ai.ai-neu:hover:not(:disabled){background:var(--hover);border-color:var(--ctl-line-2);filter:none}
.ai:disabled{opacity:.5;cursor:not-allowed}
.ai.gira svg{animation:rl-spin .85s linear infinite}
/* en una fila apretada el relleno sólido grita demasiado: el mismo semáforo
   pero teñido, con la tinta legible del tema (--ink-*) en el glifo */
.ai.mini.ai-ok{background:color-mix(in srgb,var(--success) 13%,var(--surface));border-color:color-mix(in srgb,var(--success) 42%,var(--border));color:color-mix(in srgb,var(--success) 56%,var(--text))}
.ai.mini.ai-edit{background:color-mix(in srgb,var(--warn) 13%,var(--surface));border-color:color-mix(in srgb,var(--warn) 42%,var(--border));color:var(--ink-warn)}
.ai.mini.ai-del{background:color-mix(in srgb,var(--danger) 13%,var(--surface));border-color:color-mix(in srgb,var(--danger) 42%,var(--border));color:var(--ink-bad)}
.ai.mini:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--text) 6%,var(--surface))}
.ai.mini.ai-ok:hover:not(:disabled){background:color-mix(in srgb,var(--success) 24%,var(--surface))}
.ai.mini.ai-edit:hover:not(:disabled){background:color-mix(in srgb,var(--warn) 24%,var(--surface))}
.ai.mini.ai-del:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 24%,var(--surface))}

.field{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.field label{font-size:.65rem;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;line-height:1.1}
.input{
  width:100%; padding:6px 9px; border-radius:var(--ctl-r); background:var(--surface);
  border:1px solid var(--ctl-line); color:var(--text); font-size:.74rem; min-height:34px;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder{color:var(--muted);opacity:.7}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);background:var(--surface)}
.input.err{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 26%,transparent)}
.prefix-wrap{display:flex;align-items:stretch;gap:0}
.prefix{
  display:flex;align-items:center;padding:0 8px;border-radius:var(--ctl-r) 0 0 var(--ctl-r);background:var(--surface-2);
  border:1px solid var(--ctl-line);border-right:none;font-weight:600;color:var(--ink-soft);font-size:.7rem
}
.prefix-wrap .input{border-radius:0 var(--ctl-r) var(--ctl-r) 0;border-left:none}
.hint{font-size:.67rem;color:var(--muted);line-height:1.4}
.pw-rules{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:.67rem;line-height:1.4;color:var(--muted)}
.pw-rules li::before{content:"○";display:inline-block;width:1.1em}
.pw-rules li.ok{color:var(--ink-ok,#1f9d55)}
.pw-rules li.ok::before{content:"✓"}
@media (max-width:360px){.pw-rules{grid-template-columns:1fr}}
.err-msg{font-size:.68rem;color:var(--ink-bad);min-height:0;line-height:1.35}

.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:1119px;
  background:var(--surface);border:1px solid var(--ctl-line);font-size:.65rem;font-weight:600;color:var(--ink-soft)}
.chip.ok{color:var(--ink-ok);border-color:color-mix(in srgb, var(--success) 40%, var(--border))}
.chip.warn{color:var(--ink-warn);border-color:color-mix(in srgb, var(--warn) 45%, var(--border))}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.muted{color:var(--muted)}
.tiny{font-size:.66rem}
.small{font-size:.72rem}
.row{display:flex;align-items:center;gap:7px}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.grid2{display:grid;grid-template-columns:1fr;gap:8px}
/* v36: un ítem de grilla pesa por defecto lo que pesa su texto más largo (min-width:auto) y con
   una fila ancha empuja la columna afuera de la pantalla. Con 0 la columna manda y la fila recorta. */
.grid2>*{min-width:0}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.center{text-align:center}
.hidden{display:none !important}

/* ============ AUTH (v36 · Hogar +) ============ */
#auth{
  min-height:100dvh; display:grid; place-items:center; padding:13px 11px;
  background:
    radial-gradient(72% 52% at 50% -10%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 70%),
    radial-gradient(46% 40% at 6% 104%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
  animation:fade .5s var(--ease);
}
.auth-shell{width:100%;max-width:370px}
.app-ic{display:block;flex:none;border-radius:22%;box-shadow:var(--el2);
  background:var(--app-icon) center/contain no-repeat}
.brand{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:9px}
.brand .app-ic{width:36px;height:36px}
.brand h1{font-size:1.02rem;letter-spacing:-.035em;line-height:1.12}
.brand span{display:block;font-size:.58rem;font-weight:700;color:var(--muted);letter-spacing:.13em;text-transform:uppercase}
.auth-side{display:none}
.auth-tag{font-size:.74rem;line-height:1.5;color:var(--ink-soft);max-width:34ch;margin-bottom:9px}
.auth-feats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.auth-feats li{display:flex;align-items:flex-start;gap:6px;font-size:.7rem;line-height:1.4;color:var(--ink-soft)}
.auth-feats svg{flex:none;margin-top:1px;color:var(--primary)}
.auth-card{padding:11px}
.tabs{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--edge);border-radius:10px;margin-bottom:9px}
.tab{flex:1;padding:7px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-weight:600;font-size:.71rem;cursor:pointer;transition:background-color var(--t) var(--ease), color var(--t)}
.tab.on{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--edge), var(--el1)}
.pane{display:none;animation:slideIn .22s var(--ease)}
.pane.on{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.auth-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:7px}
/* el enlace era --primary crudo: ilegible sobre la tarjeta en sunlit y mint */
.auth-foot button[data-goto]{background:none;border:none;cursor:pointer;font-weight:600;font-size:.66rem;
  color:var(--ink-link);text-decoration:underline;text-underline-offset:2px}
.db-flag{margin-top:7px}
/* campos con ícono Lucide adentro */
.ifield{position:relative;display:block}
.ifield>.fi{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:block}
.ifield>.input{padding-left:29px}
.ifield>.input:focus{border-color:var(--primary)}
.ifield>.fi{transition:color var(--t) var(--ease)}
.ifield:focus-within>.fi{color:var(--primary)}
.auth-sep{display:flex;align-items:center;gap:7px;margin:9px 0 7px;font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--edge)}
@media (min-width:880px){
  .auth-shell{max-width:830px;display:grid;grid-template-columns:1.04fr 1fr;gap:18px;align-items:center}
  .auth-side{display:block}
  .brand{justify-content:flex-start;margin-bottom:11px}
  .brand .app-ic{width:46px;height:46px}
  .brand h1{font-size:1.32rem}
  .auth-card{padding:14px}
}

/* ============ APP SHELL ============ */
header.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--h); z-index:60;
  display:flex; align-items:center; gap:7px; padding:0 9px;
  background:var(--glass); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--edge);
  box-shadow:0 10px 24px -22px rgba(0,0,0,.65);
}
header.topbar .hamb{display:inline-flex}
.tb-brand{display:flex;align-items:center;gap:6px;min-width:0}
.tb-mark{width:30px;height:30px;border-radius:8px;flex:none;background:var(--app-icon) center/contain no-repeat}
.tb-title{font-weight:800;font-size:.9rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.topbar{gap:8px;padding:0 11px}
header.topbar .btn-icon{width:35px;height:35px;border-radius:10px}
header.topbar .btn-icon svg{width:19px;height:19px}
header.topbar .hamb svg{width:21px;height:21px}
header.topbar .net-chip{height:29px}
#btn-reload.spin svg{animation:rl-spin .8s linear infinite}
@keyframes rl-spin{to{transform:rotate(360deg)}}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
/* ---------- estado de la nube (v41) ---------- */
.net-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
  font-size:.6rem;line-height:1;white-space:nowrap}
.net-chip .nd{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.net-chip[data-st="ok"] .nd{background:var(--success)}
.net-chip[data-st="pend"] .nd{background:var(--warn);animation:nd-pulse 1.1s ease-in-out infinite}
.net-chip[data-st="bad"] .nd{background:var(--danger)}
.net-chip[data-st="sinred"] .nd{background:var(--warn)}
.net-chip[data-st="sinred"]{cursor:pointer;border-color:var(--warn);color:var(--warn)}
.net-chip[data-st="bad"]{cursor:pointer;border-color:var(--danger);color:var(--danger)}
.net-chip[data-st="off"]{display:none}
.net-chip .nt{display:none}
@media (min-width:760px){.net-chip .nt{display:inline}}
@keyframes nd-pulse{50%{opacity:.3}}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:700;
  color:var(--on-primary);background-color:var(--primary);
  background-size:cover;background-position:center;cursor:pointer;border:none;overflow:hidden;
  transition:box-shadow var(--t) var(--ease)}
.avatar:hover{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--primary)}
.avatar.img{color:transparent}
.avatar-sm{width:28px;height:28px;font-size:.65rem;flex:none}
.avatar-lg{width:52px;height:52px;font-size:.95rem;cursor:default}
.avatar-lg:hover{box-shadow:none}

/* marco de perfil: el anillo GIF va por fuera del círculo, por eso el wrapper */
.av-wrap{position:relative;display:inline-flex;flex:none}
.avf{position:absolute;left:50%;top:50%;width:135%;height:135%;transform:translate(-50%,-50%);
  pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease)}
.avf.on{opacity:1}

/* perfil en la barra lateral */
.me-btn{display:flex;align-items:center;gap:7px;width:100%;padding:4px;border-radius:9px;cursor:pointer;
  background:var(--surface);border:1px solid var(--edge);text-align:left;transition:border-color var(--t) var(--ease), box-shadow var(--t)}
.me-btn:hover{border-color:var(--border-2)}
.me-btn.menu-on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.me-btn.on{border-color:var(--line-p);background:var(--tint)}
.me-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.me-txt b{font-size:.69rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-txt small{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-btn .chev{flex:none;transition:transform var(--t) var(--ease);color:var(--muted)}
.me-btn.menu-on .chev{transform:rotate(180deg)}
.menu.up{top:auto;bottom:calc(100% + 7px);width:100%;padding:6px;transform:translateY(8px) scale(.98)}
.menu.up.on{transform:none}
.menu-item{display:flex;align-items:center;gap:7px;width:100%;padding:6px;border:none;border-radius:8px;
  background:transparent;color:var(--text);font-weight:600;font-size:.7rem;cursor:pointer;text-align:left;
  transition:background-color var(--t) var(--ease)}
.menu-item svg{width:15px;height:15px;flex:none}
.menu-item:hover{background:var(--tint)}
.menu-item:active{background:var(--tint-2)}
.menu-item.danger{color:var(--ink-bad)}
.menu-item.danger:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}

/* sidebar */
nav.side{
  position:fixed; top:0; bottom:0; left:0; width:min(80vw, var(--nav-w)); z-index:70;
  padding:calc(8px + env(safe-area-inset-top, 0px)) 8px 6px; display:flex; flex-direction:column;
  overflow:hidden; overscroll-behavior:contain;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:1px solid var(--edge);
  transform:translateX(-102%); transition:transform .34s var(--ease), box-shadow .34s;
}
nav.side.open{transform:translateX(0);box-shadow:24px 0 60px -20px rgba(0,0,0,.5)}
@media(min-width:1000px){
  :root{--h:58px}
  /* #84: en PC la barra lateral es FIJA y siempre visible, nunca se cierra. Por eso
     --nav-of vale siempre (el contenido queda desplazado), la barra nunca se traduce
     afuera, y el botón hamburguesa (btn-nav) no se muestra: es sólo de celular. */
  :root{--nav-of:var(--nav-w)}
  header.topbar{left:var(--nav-of)}
  nav.side{width:var(--nav-w);padding-top:10px;transform:none;box-shadow:none}
  header.topbar .hamb{display:none}
}
/* zonas fijas: "Principal" arriba y el usuario abajo; el resto scrollea en el medio */
.side-top{flex:none;display:flex;flex-direction:column;gap:2px;padding:3px 0 6px;border-bottom:1px solid var(--edge)}
/* barra de scroll fina, estilo panel de diseño */
.side-mid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 3px 0}
/* Firefox: la barra estándar fina (acá no existe ::-webkit-scrollbar) */
@supports (-moz-appearance:none){
  .side-mid{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--muted) 34%, transparent) transparent}
  nav.side:hover .side-mid{scrollbar-color:color-mix(in srgb, var(--muted) 56%, transparent) transparent}
  .msc-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--muted) 34%, transparent) transparent}
}
/* Chrome / Edge / Safari: pulga redondeada que sólo aparece con el puntero sobre la barra */
.side-mid::-webkit-scrollbar{width:4px}
.side-mid::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.side-mid::-webkit-scrollbar-thumb{background:transparent;border-radius:111px}
nav.side:hover .side-mid::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 26%, transparent)}
.side-mid:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 48%, transparent)}
.side-mid::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.side-mid::-webkit-scrollbar-thumb:active{background:var(--primary)}
.side-mid::-webkit-scrollbar-button{display:none}
.side-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.mini-label{font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.li .lock{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--edge);border-radius:111px;padding:1px 6px;flex:none}
.li .lock.auto{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, var(--border))}

/* editor de foto de perfil */
.crop-wrap{display:flex;justify-content:center;padding:7px 0 2px}
.crop-box{
  position:relative; width:min(52vw, 179px); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border-2); cursor:grab; touch-action:none; user-select:none;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.5), inset 0 0 0 3px var(--overlay);
}
.crop-box:active{cursor:grabbing}
.crop-box canvas{display:block;width:100%;height:100%}
.crop-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
#crop-zoom,#hc-zoom{width:100%;height:20px;cursor:pointer}

/* picker de marcos */
/* la vista previa vive en su propia zona fija del modal (entre .m-head y .m-body): se scrollea la
   grilla de marcos y el grande queda arriba. El anillo mide 135 % de la foto porque el hueco de los
   40 GIF de marcos/ es ~75 % de su cuadro. */
.mk-fix{flex:none;padding:9px 11px 0;background:var(--raise)}
.mk-prev{display:flex;align-items:center;gap:11px;padding:9px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--ctl-line)}
.mk-prev-av{width:132px;height:132px;display:grid;place-items:center;flex:none}
.mk-prev .avatar{width:96px;height:96px;font-size:1.7rem}
.mk-prev-tx{display:flex;flex-direction:column;min-width:0;gap:3px}
.mk-prev-tx b{font-size:.84rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:600px){
  .mk-prev-av{width:104px;height:104px}
  .mk-prev .avatar{width:76px;height:76px;font-size:1.35rem}
}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;margin-top:8px}
.mk-b{display:grid;place-items:center;aspect-ratio:1/1;padding:8px;min-width:0;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--ctl-line);cursor:pointer;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.mk-b:hover{border-color:var(--border-2)}
.mk-b.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}
.mk-b .avatar{cursor:default}
.mk-b .avatar:hover{box-shadow:none}


/* ---------- Cuentas ---------- */
.menu.down{top:calc(100% + 6px);left:0;right:auto;width:max-content;max-width:min(92vw,246px);padding:6px;transform:translateY(-8px) scale(.97)}
.menu.down.on{transform:none}
/* v40: el menú que vive dentro de un hero (overflow:hidden) se porta al <body> y se posiciona fijo */
.menu.fly{position:fixed;top:0;left:0}
.btn.menu-on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.menu-item .mk{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;flex:none;font-weight:800;font-size:.67rem;
  background:var(--surface-2);border:1px solid var(--edge)}
.menu-item .mk.out{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 35%, var(--border))}
.menu-item .mk.in{color:var(--success);border-color:color-mix(in srgb, var(--success) 35%, var(--border))}
.menu-item b{display:block;font-size:.7rem}
.menu-item small{font-size:.63rem}
.seg{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--ctl-line);border-radius:10px}
.sbtn{flex:1;padding:6px 9px;border:none;border-radius:8px;background:transparent;color:var(--ink-soft);font-weight:600;font-size:.69rem;cursor:pointer;transition:background-color var(--t) var(--ease), color var(--t)}
.sbtn:hover{color:var(--text);background:var(--hover)}
.sbtn.on{background:color-mix(in srgb, var(--primary) 26%, var(--surface));color:var(--ink-p);font-weight:800;box-shadow:0 0 0 1px var(--line-p)}
/* ---- #81: los filtros de Stock, más grandes y sin cortar el texto ----
   "Agotados" se cortaba: los `.sbtn` iban en `flex:1` con relleno fijo, así que
   cada chip medía lo mismo (62 px) y la palabra más larga no entraba. Con
   `white-space:nowrap` el botón se agranda hasta el ancho de su texto (el `flex:1`
   reparte el sobrante, nunca lo recorta) y la tipografía sube para que se lea.
   En 320 px la fila ya lleva `wrap`, así que el bloque de filtros baja entero de
   renglón antes que cortar una palabra. */
#sk-filter{flex:none}
#sk-filter .sbtn{flex:1 0 auto;white-space:nowrap;font-size:.72rem;font-weight:650;padding:7px 12px}
/* #88: idéntico para el filtro de Compras, sin recortar las tres palabras */
#cp-filter{flex:none}
#cp-filter .sbtn{flex:1 0 auto;white-space:nowrap;font-size:.72rem;font-weight:650;padding:7px 12px}
/* #97.b: los mismos tres filtros de Notas, que eran los últimos en cortarse */
#nt-filter{flex:none}
#nt-filter .sbtn,#nt-scf .sbtn{flex:1 0 auto;white-space:nowrap;font-size:.72rem;font-weight:650;padding:7px 12px}
@media (max-width:360px){
  #nt-filter .sbtn,#nt-scf .sbtn{font-size:.7rem;padding:6px 9px}
  #mv-rec .sbtn{padding:6px 7px}
}
/* Recordatorios (personales y grupales): «Pendientes» se cortaba en celular y la barra quedaba chica.
   Mismo arreglo que Notas/Compras (el botón crece hasta su texto) y, en pantallas angostas, la barra
   ocupa todo el ancho con tres botones parejos; el contador baja a su propio renglón. */
#rc-filter{flex:none}
#rc-filter .sbtn{flex:1 0 auto;white-space:nowrap;font-size:.72rem;font-weight:650;padding:7px 12px}
@media (max-width:600px){
  #rc-filter{flex:1 1 100%}
  #rc-filter .sbtn{flex:1 1 0;height:38px;padding:0 6px;font-size:.8rem}
  #rc-count{flex:1 1 100%;text-align:right}
  #v-recordatorios .row.wrap > .grow{display:none}
}
.grid3{display:grid;grid-template-columns:1fr;gap:7px}
@media(min-width:700px){.grid3{grid-template-columns:repeat(3,1fr)}}
.stat .sv{font-size:.84rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat.out .sv{color:var(--ink-bad)}
.stat.in .sv{color:var(--ink-ok)}
.fbtn{padding:3px 9px;border-radius:111px;border:1px solid var(--ctl-line);background:var(--surface);color:var(--ink-soft);
  font-size:.67rem;font-weight:600;cursor:pointer;transition:background-color var(--t) var(--ease), border-color var(--t), color var(--t)}
.fbtn:hover{color:var(--text);border-color:var(--ctl-line-2)}
.fbtn.on{background:var(--primary);border-color:var(--deep);color:var(--on-primary)}
.mv{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--edge);cursor:pointer;transition:border-color var(--t) var(--ease), background-color var(--t);width:100%;text-align:left;font:inherit;color:inherit}
.mv:hover{border-color:var(--ctl-line-2);background:var(--hover)}
.cdot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.mv .mt{display:flex;flex-direction:column;min-width:0}
.mv .mt b{font-size:.71rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .mt small{font-size:.63rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv .amt{margin-left:auto;text-align:right;flex:none}
.mv .amt b{font-size:.73rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mv .amt b.out{color:var(--ink-bad)}
.mv .amt b.in{color:var(--ink-ok)}
/* badge de plan de pago (cuotas / permanente) */
.mv .pl{display:inline-flex;align-items:center;gap:2px;flex:none;font-style:normal;font-size:.6rem;font-weight:750;
  letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:var(--tint);
  border:1px solid var(--line-p);border-radius:111px;padding:1px 6px;line-height:1.35}
.mv .pl.perm{color:var(--text);background:var(--hover);border-color:var(--border-2)}
.mv .pl.fin{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 36%,transparent)}
/* Cuentas: cada fila lleva el mismo borde izquierdo animado que las notas, con el color de su categoría (--nc) */
.mv{position:relative;overflow:hidden;padding-left:13px}
.mv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nc,var(--primary));
  box-shadow:0 0 7px 0 color-mix(in srgb,var(--nc,var(--primary)) 55%,transparent);
  animation:ntbrillo 3.6s var(--ease) infinite}
.mv::after{content:"";position:absolute;left:0;top:-38%;width:3px;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--nc,var(--primary)) 55%,transparent);
  filter:brightness(1.85);animation:ntluz 5.2s linear infinite}
@media(prefers-reduced-motion:reduce){.mv::before,.mv::after{animation:none}
  .mv::after{top:0;height:38%;opacity:.5}}
/* etiqueta del tipo de gasto: toda sale del color del tipo (--tc), así cambia con lo que elija la persona */
.tg{--tc:var(--muted);display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  padding:0 6px 0 4px;border-radius:111px;font-size:.58rem;font-weight:700;letter-spacing:.02em;line-height:1.5;
  color:color-mix(in srgb,var(--tc) 62%,var(--text));
  background:color-mix(in srgb,var(--tc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tc) 40%,transparent);
  box-shadow:0 0 6px 0 color-mix(in srgb,var(--tc) 26%,transparent)}
.tg i{width:6px;height:6px;border-radius:50%;background:var(--tc);flex:none}
.tg svg{width:10px;height:10px;flex:none;color:var(--tc)}
.li .chg-m{font-variant-numeric:tabular-nums}
.bar{height:4px;border-radius:111px;background:var(--surface-2);overflow:hidden;border:1px solid var(--edge)}
.bar i{display:block;height:100%;border-radius:111px;transition:width .5s var(--ease)}
.br{display:grid;gap:3px}
.br .top{display:flex;justify-content:space-between;gap:7px;font-size:.71rem}
.br .top span:first-child{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br .top b{font-variant-numeric:tabular-nums;flex:none}
.btn-ghost.danger{color:var(--ink-bad);border-color:color-mix(in srgb, var(--danger) 40%, var(--border))}
.fbtn.danger-f{color:var(--ink-bad);border-color:color-mix(in srgb, var(--danger) 35%, var(--border))}
.fbtn.danger-f:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}
.btn-ghost.danger:hover{background:color-mix(in srgb, var(--danger) 12%, transparent)}
.rename-row{display:flex;gap:6px;align-items:center;width:100%}
.rename-row .input{flex:1;padding:4px 7px;font-size:.69rem;min-height:0}
.nav-item{
  display:flex;align-items:center;gap:7px;width:100%;padding:6px 9px 6px 5px;border:none;border-radius:11px;
  background:transparent;color:var(--muted);font-weight:600;font-size:.78rem;cursor:pointer;text-align:left;
  transition:background-color var(--t) var(--ease), color var(--t);
}
/* v32: el ícono vive en una pastilla, como en los paneles de Figma (el svg hace de caja con padding) */
.nav-item svg{width:27px;height:27px;flex:none;padding:5px;box-sizing:border-box;border-radius:9px;color:var(--ink-soft);
  transition:background-color var(--t) var(--ease), color var(--t)}
.nav-item > span:not(.tag){flex:1 1 auto;min-width:0}
.nav-item .tag{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--edge);border-radius:111px;padding:1px 4px;flex:none}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item:hover svg{background:color-mix(in srgb, var(--text) 7%, var(--surface));color:var(--text)}
.nav-item.on{color:var(--text);background:var(--tint);font-weight:700}
.nav-item.on svg{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 1px var(--deep), 0 4px 12px -7px var(--glow-p)}
.nav-item.on::after{content:"";width:3px;height:13px;border-radius:111px;background:var(--primary);flex:none;margin-left:1px}
.nav-item.soon{opacity:.68}
.nav-item.soon:hover{opacity:1}
.side-foot{flex:none;margin-top:0;padding-top:5px;border-top:1px solid var(--edge)}
.side-close{position:absolute;top:calc(10px + env(safe-area-inset-top, 0px));right:9px;z-index:3;background:var(--surface-2)}
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(2px);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
@media(min-width:1000px){.scrim.on{opacity:0;pointer-events:none}}

/* ============================================================
   BARRA INFERIOR FIJA (v32) — 5 accesos que elige la persona
   ============================================================ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:56; display:flex; gap:2px;
  padding:5px 7px calc(5px + env(safe-area-inset-bottom, 0px));
  background:var(--dock-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--ctl-line);
  box-shadow:0 -10px 26px -20px rgba(0,0,0,.55);
}
.dock-b{
  flex:1 1 0; min-width:0; min-height:47px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:4px 2px; border:none; border-radius:12px; background:transparent; color:var(--ink-soft);
  font:inherit; line-height:1; cursor:pointer;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dock-b .dic{width:31px;height:25px;display:grid;place-items:center;border-radius:9px;color:var(--ink-soft);
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t2) var(--ease), transform var(--t)}
.dock-b .dic svg{width:17px;height:17px}
.dock-b .dtx{font-size:.58rem;font-weight:650;letter-spacing:-.012em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-b:hover{color:var(--text)}
.dock-b:hover .dic{background:var(--hover);color:var(--text)}
.dock-b:active .dic{transform:translateY(1px)}
.dock-b.on{color:var(--ink-p)}
.dock-b.on .dic{background:var(--primary);color:var(--on-primary);
  box-shadow:0 0 0 1px var(--deep), 0 4px 12px -6px color-mix(in srgb, var(--primary) 70%, transparent)}
.dock-b.on .dtx{font-weight:800}
/* en PC la barra flota como una pastilla, centrada en el área de contenido */
@media(min-width:1000px){
  :root{--dock: 64px}
  .dock{left:calc((100vw + var(--nav-of)) / 2); right:auto; bottom:13px; transform:translateX(-50%);
    width:min(430px, calc(100vw - var(--nav-of) - 44px)); padding:6px; gap:3px;
    transition:left .34s var(--ease), width .34s var(--ease);
    border:1px solid var(--ctl-line); border-radius:19px; box-shadow:var(--pop)}
  .dock-b{min-height:52px}
}
/* ============================================================
   BARRA FIJA DEL HERO (v40) — el título y los botones de la vista cuando el hero se sale de la
   pantalla. Es position:fixed y deja en el hero un .vh-ghost con exactamente los píxeles que el
   hero perdió al irse los botones: el documento no cambia de altura, porque si cambiara el
   navegador corregiría el scroll y volvería el parpadeo cuadro a cuadro que se arregló en v39.
   ============================================================ */
.herobar{
  position:fixed; left:0; right:0; top:var(--h); z-index:58; box-sizing:border-box;
  display:flex; align-items:center; gap:8px; height:var(--dock); padding:0 9px;
  background:var(--dock-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--ctl-line); box-shadow:0 12px 26px -22px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t2) var(--ease);
}
.herobar.on{opacity:1; transform:none; pointer-events:auto}
.hb-lead{display:flex;align-items:center;gap:6px;flex:none;max-width:42%}
.hb-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--tint);color:var(--ink-p)}
.hb-ic svg{width:16px;height:16px}
.hb-title{font-size:.72rem;font-weight:700;letter-spacing:-.022em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* en 320 px los cinco controles de un calendario no se aplastan: se deslizan con el dedo.
   margin-left:auto en vez de justify-content:flex-end: con flex-end el recorte de la izquierda
   queda inalcanzable al scrollear. */
.hb-actions{flex:0 1 auto;min-width:0;max-width:100%;margin-left:auto;display:flex;align-items:center;gap:7px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:3px 0}
.hb-actions::-webkit-scrollbar{display:none}
.hb-actions>*{flex:none}
.vh-ghost{flex:none;align-self:auto}
/* en el hero los botones van invertidos sobre el color; en la barra de vidrio van con la caja del tema */
.herobar .btn-inverse{background:var(--primary);color:var(--on-primary);border:1px solid var(--deep)}
.herobar .btn-inverse:hover{filter:brightness(1.06);box-shadow:0 4px 12px -7px var(--glow-p)}
.herobar .pick,.herobar .seg,.herobar .input{box-shadow:var(--el1)}
@media(min-width:1000px){.herobar{left:var(--nav-of);padding:0 13px;
  transition:opacity var(--t) var(--ease), transform var(--t2) var(--ease), left .34s var(--ease)}}
/* el acceso a la personalización vive en el pie de la barra lateral */
.dock-edit{display:flex;align-items:center;gap:7px;width:100%;padding:7px 8px;margin-bottom:5px;border-radius:10px;
  border:1px dashed var(--ctl-line-2);background:transparent;color:var(--ink-soft);font:inherit;font-size:.66rem;font-weight:650;
  text-align:left;cursor:pointer;transition:border-color var(--t) var(--ease), background-color var(--t), color var(--t)}
.dock-edit svg{width:15px;height:15px;flex:none;color:var(--primary)}
.dock-edit:hover{background:var(--tint);border-color:var(--primary);color:var(--text)}
.dock-edit:active{background:var(--tint-2)}
/* modal de personalización: los 5 huecos arriba, todas las secciones abajo */
.slots{display:flex;gap:5px;margin-bottom:8px}
.slot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 3px 6px;
  border:1px solid var(--ctl-line);border-radius:12px;background:var(--surface);color:var(--ink-soft);
  font:inherit;line-height:1;cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t), color var(--t), box-shadow var(--t2) var(--ease)}
.slot svg{width:17px;height:17px;flex:none}
.slot b{font-size:.56rem;font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot i{font-style:normal;font-size:.56rem;font-weight:800;color:var(--muted)}
.slot:hover{border-color:var(--ctl-line-2);background:var(--hover);color:var(--text)}
.slot.on{border-color:var(--primary);background:var(--tint);color:var(--ink-p);box-shadow:0 0 0 3px var(--ring)}
.slot.on i{color:var(--ink-p)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.sec-b{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:11px;border:1px solid var(--ctl-line);
  background:var(--surface);color:var(--text);font:inherit;font-size:.64rem;font-weight:600;text-align:left;cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t)}
.sec-b svg{width:16px;height:16px;flex:none;color:var(--ink-soft)}
.sec-b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-b:hover{border-color:var(--primary);background:var(--hover)}
.sec-b.on{border-color:var(--primary);background:var(--tint-2)}
.sec-b.on svg{color:var(--primary)}
.sec-b.used::after{content:attr(data-n);margin-left:auto;flex:none;font-size:.56rem;font-weight:800;
  color:var(--ink-p);background:var(--tint);border:1px solid var(--line-p);border-radius:111px;padding:1px 5px;line-height:1.3}

main{padding:calc(var(--h) + 9px) 9px calc(var(--dock-safe) + 16px);max-width:1210px;margin:0 auto}
/* PC: el contenido ocupa todo el ancho entre la barra lateral y el borde derecho */
@media(min-width:1000px){
  main{max-width:none;margin:0;padding:calc(var(--h) + 13px) 13px calc(var(--dock) + 30px) calc(var(--nav-of) + 13px);
    transition:padding-left .34s var(--ease)}
}
/* Pantallas muy anchas: el ancho lo usan las tarjetas y las listas, no el texto suelto */
@media(min-width:1440px){
  main .field{max-width:493px}
  .grid2>.field,.grid3>.field{max-width:none}
  .card>.small.muted,.card>.hint{max-width:78ch}
}
.view{display:none}
.view.on{display:block;animation:rise .26s var(--ease)}
.stack{display:flex;flex-direction:column;gap:8px}
.stat{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--edge);box-shadow:var(--el1);transition:border-color var(--t2) var(--ease)}
.stat:hover{border-color:var(--ctl-line-2)}
.stat b{font-size:.84rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat>span:not(.sv):not(.tiny){font-size:.6rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.stat>.tiny{font-size:.61rem}
.empty{padding:15px 12px;text-align:center;border:1px dashed var(--ctl-line-2);border-radius:var(--r);background:var(--surface)}
.empty h3{font-size:.78rem;margin-bottom:3px}
.hero{
  border-radius:var(--r-lg);padding:12px 13px;position:relative;overflow:hidden;
  background:var(--primary);color:var(--on-primary);border:1px solid var(--deep);
  box-shadow:var(--el2), inset 0 1px 0 color-mix(in srgb, var(--on-primary) 16%, transparent);
}
.hero h2{font-size:clamp(.94rem,3.4vw,1.1rem);letter-spacing:-.03em}
.hero p{margin-top:3px;font-size:.69rem;max-width:56ch}
/* v32: en el hero todo se invierte (el color del texto del hero pasa a ser la caja), así el
   contraste del chip y de los botones es exactamente el par ya verificado del propio hero */
.hero .chip{background:var(--on-primary);border-color:transparent;color:var(--primary)}
/* #83: la portada de Inicio es distinta del resto, así que sólo ella crece. Los demás
   héroes siguen con el padding y el h2 de arriba. */
#v-inicio>.stack>.hero{padding:22px 18px 18px}
/* #96: el saludo se achica (era 1,18–1,6 rem) y se parte en dos líneas.
   El nombre y el mes usan la caja invertida del hero (--on-primary de fondo, --primary de texto),
   el mismo par de colores ya medido de .hero .chip: se destaca sin arriesgar el contraste. */
#v-inicio>.stack>.hero h2{font-size:clamp(1rem,4.4vw,1.2rem);margin-top:2px;font-weight:650}
#v-inicio>.stack>.hero .hh-sal{opacity:.8}
#v-inicio>.stack>.hero .hh-nom{background:var(--on-primary);color:var(--primary);font-weight:800;
  padding:1px 7px 2px;border-radius:8px;letter-spacing:0}
#v-inicio>.stack>.hero .hh-fecha{display:block;margin-top:5px;font-weight:600;opacity:.82;
  font-size:clamp(.6rem,2.5vw,.68rem);letter-spacing:.01em;text-transform:lowercase}
#v-inicio>.stack>.hero .hh-mes{background:var(--on-primary);color:var(--primary);font-weight:800;
  padding:0 5px 1px;border-radius:6px;letter-spacing:0}
#v-inicio>.stack>.hero .btn-lg{--pad:12px 18px;font-size:.9rem;border-radius:12px}
/* #85: el alto lo maneja la foto: --ha es su lado y el hero mide ~1.46×--ha, así el marco
   entra por completo. padding-right reserva la columna derecha para que el texto no pise la foto. */
/* #89: la foto mide la mitad del alto del hero (min-height = 2×--ha). */
#v-inicio>.stack>.hero{--ha:clamp(82px,21vw,120px);min-height:calc(var(--ha) * 2);
  padding-right:calc(var(--ha) * 1.26 + 12px)}
#v-inicio>.stack>.hero>*:not(.hero-av):not(.hero-edit):not(.hbg){position:relative;z-index:1}
/* la capa de la foto tiene que seguir absoluta: sin esto la regla de arriba la volvía position:relative (span en línea, sin alto) y la foto de Inicio nunca se veía */
#v-inicio>.stack>.hero>.hbg{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:0}
/* #87: el lápiz de fondo vive en la punta superior derecha, por encima de todo el hero.
   Con foto (has-bg) usa la misma caja de color del texto; sin foto, una vela tenue. */
#v-inicio .hero-edit{position:absolute;z-index:4;top:9px;right:9px;width:28px;height:28px;padding:0;
  display:inline-grid;place-items:center;cursor:pointer;border-radius:50%;
  background:color-mix(in srgb, var(--on-primary) 18%, transparent);color:var(--on-primary);
  border:1px solid color-mix(in srgb, var(--on-primary) 34%, transparent);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
#v-inicio .hero-edit:hover{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
#v-inicio .hero.has-bg .hero-edit{background:color-mix(in srgb, var(--primary) var(--hxp, 96%), transparent)}
#v-inicio .hero-av{position:absolute;z-index:2;top:50%;right:calc(var(--ha) * 0.2 + 4px);transform:translateY(-50%)}
#v-inicio .hero-av .avatar{width:var(--ha);height:var(--ha);font-size:calc(var(--ha) * .34);cursor:default;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
#v-inicio .hero-av .avatar:hover{box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
#v-inicio .hero-av .avf{filter:drop-shadow(0 8px 16px rgba(0,0,0,.32))}
/* el zoom respira 1 → 1.035: apenas se nota, da vida sin distraer. body.no-anim lo corta. */
@keyframes heroAvRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
#v-inicio .hero-av .avatar{animation:heroAvRespira 7.5s var(--ease) infinite}
body.no-anim #v-inicio .hero-av .avatar{animation:none}
/* #83: los botones forman una banda propia debajo del título: filete arriba y aire. */
.hero-actions{margin-top:9px;padding-top:9px;border-top:1px solid color-mix(in srgb, var(--on-primary) 24%, transparent);
  display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.hero .btn-inverse{background:var(--on-primary);color:var(--primary);border:1px solid transparent;font-weight:700}
.hero .btn-inverse:hover{filter:brightness(1.08)}
.hero .btn-ghost{background:transparent;border-color:color-mix(in srgb, var(--on-primary) 55%, transparent);color:var(--on-primary)}
.hero .btn-ghost:hover{background:color-mix(in srgb, var(--on-primary) 14%, transparent);border-color:var(--on-primary)}

/* ---------- HERO DE VISTA (v35) ----------
   Las 17 secciones arrancan igual: título, texto y los botones de la vista dentro del mismo hero.
   El brillo sólo usa --on-primary sobre --primary: aclara la esquina y nunca invierte el par de
   contraste ya verificado del hero.
   v39: el hero volvió al flujo normal y se scrollea con la página. Estaba clavado (sticky) y se
   encogía al scrollear, y ESO era el parpadeo: al encoger, la hoja perdía ~45 px de alto y el
   navegador corregía el scroll para que nada saltara (scroll anchoring); esa corrección volvía a
   abrir el hero, que volvía a encoger — ciclo cuadro a cuadro, y el hero quedándose encima de la
   lista. Sin clavado no hay parpadeo, no hay salto y no tapa contenido. */
.vh{
  background:
    radial-gradient(52% 76% at 100% 0%, color-mix(in srgb, var(--on-primary) 12%, transparent), transparent 70%),
    radial-gradient(38% 62% at 0% 100%, color-mix(in srgb, var(--on-primary) 7%, transparent), transparent 72%),
    var(--primary);
}
/* cuando el hero no vive dentro de un .stack, el aire de abajo lo pone esta regla */
.view>.vh{margin-bottom:8px}
.vh-head{display:flex;flex-direction:column;gap:9px}
.vh-actions{margin-top:0;align-items:center}
/* #83.b: bloque propio de botones, debajo del hero y afuera de su caja de color. */
.hero-bloque{margin-top:7px;padding:10px 12px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--ctl-line);box-shadow:var(--el1)}
.view>.vh:has(+ .hero-bloque){margin-bottom:0}   /* sin el doble aire: el bloque ya trae el suyo */
.hero-bloque .hero-actions{margin-top:0;padding-top:0;border-top:0}
.hero-bloque .btn-inverse{background:var(--primary);color:var(--on-primary);border:1px solid var(--deep);font-weight:700}
.hero-bloque .btn-inverse:hover{filter:brightness(1.06);box-shadow:0 4px 12px -7px var(--glow-p)}
.hero-actions .menu-wrap{position:relative}
/* sobre el color del hero no existe el "muted" de la hoja: la tinta es la del propio hero */
.vh .muted,.vh .tiny{color:var(--on-primary)}
/* los controles conservan su caja elevada sobre el color */
.vh .pick,.vh .seg,.vh .input{box-shadow:var(--el1)}
@media (min-width:640px){
  .vh-head{flex-direction:column;align-items:stretch;gap:10px}   /* #83: debajo, no a la derecha */
  .vh p{max-width:44ch}
}
/* ---------- FONDO DE HERO (v40, item 5) ----------
   El hero de Inicio y el de MiGrupo aceptan una foto propia. La capa .hbg es absoluta — no mueve
   un píxel de la caja del hero, así que no vuelve a aparecer el problema del scroll anchoring — y
   pinta abajo del contenido. DESDE v42 la foto manda: con imagen, el color del tema desaparece
   del fondo del hero y sólo queda detrás del texto, en la pastilla de .hero.has-bg>h2/p/acciones
   (mismo alfa resuelto por hxSolve, así el contraste sigue garantizado) más un lavado de 4.6->0
   de izquierda a derecha en ::after. Los efectos animados viven en .hbg::before, encima de la
   imagen y debajo de las pastillas: se mueven sobre la foto, nunca le ganan al texto.
   Los tamaños están en `em` para que el mismo efecto se vea en el hero, en la vista previa del
   modal y en las muestras chicas de la grilla (cada caja baja su font-size y el desenfoque escala). */
.hbg{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:0;background-repeat:no-repeat;background-size:cover;
  background-position:50% 50%;opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ease)}
.hero.has-bg>.hbg,.hero.has-fx>.hbg{opacity:1}
.hero.has-bg>:not(.hbg),.hero.has-fx>:not(.hbg){position:relative;z-index:1}
.hbg::before{content:'';position:absolute;inset:-22%;opacity:0;pointer-events:none}
.hero.has-fx .hbg::before{opacity:1}
/* con foto los efectos se amortiguan: el aporte de luz máximo que admite el cálculo del velo */
.hero.has-bg.has-fx .hbg::before{opacity:.88}
.hero.has-bg{background:none;border-color:var(--ctl-line);
  box-shadow:var(--el1), inset 0 1px 0 color-mix(in srgb, var(--on-primary) 12%, transparent)}
.hero.has-bg::after{content:'';position:absolute;inset:0;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(104deg,
    color-mix(in srgb, var(--primary) calc(var(--hxp,96%) * .30), transparent) 0%,
    color-mix(in srgb, var(--primary) calc(var(--hxp,96%) * .16), transparent) 58%,
    transparent 100%)}
/* la pastilla: el mismo alfa que resuelve el cálculo de contraste, pero sólo donde hay texto.
   La caja de color respira con box-shadow extendida: el padding vertical movería el layout. */
.hero.has-bg .hero-actions{border-top:0}
.hero.has-bg>h2,.hero.has-bg>p,.hero.has-bg .hero-actions,.hero.has-bg .vh-head>div{
  background:color-mix(in srgb, var(--primary) var(--hxp,96%), transparent);
  border-radius:10px; padding:0 8px; margin-left:-8px; width:fit-content; max-width:100%;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) var(--hxp,96%), transparent);
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
/* 1 · Cristal — la foto desenfocada y una franja de vidrio que cruza */
.hero.fx-cristal .hbg{filter:blur(.17em) brightness(1.05)}
.hero.fx-cristal .hbg::before{background:linear-gradient(112deg,transparent 34%,color-mix(in srgb,var(--on-primary) 26%,transparent) 50%,transparent 66%);
  animation:hfxCristal 6s var(--ease) infinite alternate}
@keyframes hfxCristal{0%{transform:translateX(-1.5em)}100%{transform:translateX(1.5em)}}
/* 2 · Humo — manchas claras que flotan */
.hero.fx-humo .hbg::before{
  background:
    radial-gradient(40% 52% at 24% 34%, color-mix(in srgb,var(--on-primary) 26%,transparent), transparent 64%),
    radial-gradient(34% 46% at 76% 66%, color-mix(in srgb,var(--on-primary) 26%,transparent), transparent 62%),
    radial-gradient(26% 38% at 54% 12%, color-mix(in srgb,var(--on-primary) 20%,transparent), transparent 66%);
  filter:blur(.95em);animation:hfxHumo 16s ease-in-out infinite alternate}
@keyframes hfxHumo{0%{transform:translate3d(-.35em,.2em,0) scale(1.04)}100%{transform:translate3d(.35em,-.25em,0) scale(1.16)}}
/* 3 · Neblina — bandas que entran de costado */
.hero.fx-neblina .hbg::before{
  background:repeating-linear-gradient(118deg,transparent 0 1.45em,color-mix(in srgb,var(--on-primary) 15%,transparent) 1.45em 2.9em);
  filter:blur(.5em);animation:hfxNeblina 20s ease-in-out infinite alternate}
@keyframes hfxNeblina{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-4em,1.9em,0)}}
/* 4 · Latido — una luz que respira contra el título */
.hero.fx-latido .hbg::before{background:radial-gradient(58% 74% at 20% 44%,color-mix(in srgb,var(--on-primary) 26%,transparent),transparent 70%);
  animation:hfxLatido 3.4s ease-in-out infinite}
@keyframes hfxLatido{0%,100%{opacity:.42;transform:scale(1.02)}46%{opacity:1;transform:scale(1.1)}56%{opacity:.68;transform:scale(1.05)}}
/* 5 · Deriva — la foto se acerca y se aleja lento (sólo escala: el velo nunca se descorre) */
.hero.fx-deriva .hbg{transform-origin:58% 42%;animation:hfxDeriva 24s ease-in-out infinite alternate}
@keyframes hfxDeriva{0%{transform:scale(1.02)}100%{transform:scale(1.19)}}
/* 6 · Prisma — los colores del tema girando */
.hero.fx-prisma .hbg::before{
  background:conic-gradient(from 210deg at 62% 38%,
    color-mix(in srgb,var(--primary) 30%,transparent),
    color-mix(in srgb,var(--deep) 34%,transparent),
    color-mix(in srgb,var(--on-primary) 26%,transparent),
    color-mix(in srgb,var(--primary) 30%,transparent));
  filter:blur(1.45em);animation:hfxPrisma 18s linear infinite}
@keyframes hfxPrisma{0%{transform:rotate(0deg) scale(1.2)}100%{transform:rotate(360deg) scale(1.2)}}
/* 7 · Neón — un borde que se enciende */
.hero.fx-neon .hbg::before{inset:0;background:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 26%,transparent),
             inset 0 0 1.45em .17em color-mix(in srgb,var(--on-primary) 26%,transparent);
  animation:hfxNeon 2.8s ease-in-out infinite}
@keyframes hfxNeon{0%,100%{opacity:.45}50%{opacity:1}}
/* 8 · Escaneo — una banda baja y vuelve a subir */
.hero.fx-escaneo .hbg::before{
  background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--on-primary) 14%,transparent) 47%,
    color-mix(in srgb,var(--on-primary) 26%,transparent) 50%,color-mix(in srgb,var(--on-primary) 14%,transparent) 53%,transparent 60%);
  filter:blur(.11em);animation:hfxEscaneo 5.6s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes hfxEscaneo{0%{transform:translateY(-1.2em)}100%{transform:translateY(1.2em)}}
/* 9 · Duotono — la foto en gris teñida con los colores del tema */
.hero.fx-duotono .hbg{filter:grayscale(1) contrast(.78) brightness(1.03)}
.hero.fx-duotono .hbg::before{background:linear-gradient(146deg,color-mix(in srgb,var(--primary) 30%,transparent),color-mix(in srgb,var(--deep) 34%,transparent));
  background-size:220% 220%;mix-blend-mode:screen;animation:hfxDuotono 14s ease-in-out infinite alternate}
@keyframes hfxDuotono{0%{background-position:0% 0%}100%{background-position:100% 100%}}
/* 10 · Oleaje — olas que pasan */
.hero.fx-oleaje .hbg::before{
  background:
    radial-gradient(120% 42% at 50% 108%, color-mix(in srgb,var(--on-primary) 26%,transparent), transparent 62%),
    repeating-linear-gradient(96deg,transparent 0 1em,color-mix(in srgb,var(--on-primary) 13%,transparent) 1em 1.17em,transparent 1.17em 2.55em);
  filter:blur(.17em);animation:hfxOleaje 11s ease-in-out infinite alternate}
@keyframes hfxOleaje{0%{transform:translate3d(-.25em,.15em,0)}100%{transform:translate3d(.25em,-.2em,0)}}
/* ---------- #70.c · la librería de 50 efectos ----------
   Los 10 de v40 siguen arriba; acá entran 40 más, en seis familias (Luz, Aire, Onda, Trazos,
   Color, Foto). Cada efecto es dueño de dos cosas: lo que le hace a la foto (.hbg) y la capa de
   luz que se mueve encima (.hbg::before). Los de la familia Foto sólo mueven .hbg, así el encuadre
   que el usuario acomodó en #70.b nunca se les escapa de las manos.
   El presupuesto de luz lo mide heroVeil: con foto la capa amortigua a .88, por eso las mezclas
   claras no pasan de 26 % ni los picos de opacity de .9. Con ese tope el velo que resuelve
   hxSolve (peor caso 24,5 % de emisión) sigue dejando el texto en 4,6:1 sobre cualquier tema.
   Todo está en `em`: el mismo efecto se dibuja en el hero real, en la maqueta y en la muestra
   de la grilla, cada una con su font-size. */
.hero.has-fx .hbg::before{--hfl:color-mix(in srgb,var(--on-primary) 26%,transparent);
  --hf1:color-mix(in srgb,var(--primary) 30%,transparent);
  --hf2:color-mix(in srgb,var(--primary-2) 30%,transparent);
  --hfa:color-mix(in srgb,var(--accent) 26%,transparent);
  --hfd:color-mix(in srgb,var(--deep) 34%,transparent);
  --hfw:color-mix(in srgb,var(--warn) 30%,transparent)}

/* ===== LUZ ===== */
/* 11 · Destello — chispas dispersas que titilan */
.hero.fx-destello .hbg::before{background:
  radial-gradient(1.2% 3.4% at 18% 26%,var(--hfl),transparent 62%),
  radial-gradient(.9% 2.6% at 34% 68%,var(--hfl),transparent 60%),
  radial-gradient(1.4% 4% at 52% 34%,var(--hfl),transparent 62%),
  radial-gradient(.8% 2.2% at 66% 62%,var(--hfl),transparent 60%),
  radial-gradient(1.2% 3.2% at 81% 22%,var(--hfl),transparent 62%),
  radial-gradient(.9% 2.6% at 93% 56%,var(--hfl),transparent 60%);
  filter:blur(.05em);animation:hfxDestello 4.4s ease-in-out infinite alternate}
@keyframes hfxDestello{0%{opacity:.45;transform:translateY(.16em)}100%{opacity:.9;transform:translateY(-.16em)}}
/* 12 · Brillo — un destello diagonal que cruza y descansa */
.hero.fx-brillo .hbg::before{background:linear-gradient(104deg,transparent 40%,var(--hfl) 50%,transparent 60%);
  filter:blur(.3em);animation:hfxBrillo 7.2s var(--ease) infinite}
@keyframes hfxBrillo{0%{transform:translateX(-58%)}55%,100%{transform:translateX(58%)}}
/* 13 · Haz — una columna de luz que barre la foto */
.hero.fx-haz .hbg::before{background:linear-gradient(90deg,transparent 34%,var(--hfl) 47% 53%,transparent 66%);
  filter:blur(.55em);animation:hfxHaz 9s ease-in-out infinite alternate}
@keyframes hfxHaz{0%{transform:translateX(-32%) scaleY(1.12)}100%{transform:translateX(32%) scaleY(.88)}}
/* 14 · Farol — una lámpara que respira en una esquina */
.hero.fx-farol .hbg::before{background:radial-gradient(32% 60% at 82% 26%,var(--hfl),transparent 72%);
  filter:blur(.4em);animation:hfxFarol 5.6s ease-in-out infinite alternate}
@keyframes hfxFarol{0%{opacity:.45;transform:scale(.9)}100%{opacity:.9;transform:scale(1.16)}}
/* 15 · Relámpago — fogonazo corto sobre toda la foto; el resto descansa en un velo tenue */
.hero.fx-relampago .hbg::before{inset:0;
  background:radial-gradient(72% 92% at 30% 16%,var(--hfl),color-mix(in srgb,var(--on-primary) 12%,transparent) 72%);
  filter:blur(.7em);animation:hfxRelampago 6.8s steps(1,end) infinite}
@keyframes hfxRelampago{0%,100%{opacity:.2}2%{opacity:.85}4%{opacity:.24}7%{opacity:.72}11%{opacity:.2}}
/* 16 · Reflejo — cintileo de agua contra la base */
.hero.fx-reflejo .hbg::before{background:repeating-radial-gradient(circle at 50% 128%,transparent 0 .55em,var(--hfl) .55em .82em,transparent .82em 1.5em);
  filter:blur(.22em);animation:hfxReflejo 8s ease-in-out infinite alternate}
@keyframes hfxReflejo{0%{transform:translateY(.2em) scale(1.02)}100%{transform:translateY(-.45em) scale(1.16)}}

/* ===== AIRE ===== */
/* 17 · Vapor — hilos que suben desde abajo */
.hero.fx-vapor .hbg::before{background:
  radial-gradient(20% 30% at 30% 78%,var(--hfl),transparent 68%),
  radial-gradient(16% 26% at 56% 86%,var(--hfl),transparent 66%),
  radial-gradient(24% 34% at 78% 80%,var(--hfl),transparent 70%);
  filter:blur(.8em);animation:hfxVapor 11s ease-in-out infinite}
@keyframes hfxVapor{0%{opacity:.25;transform:translate3d(-.2em,.7em,0)}55%{opacity:.85}100%{opacity:.2;transform:translate3d(.25em,-1em,0) scale(1.18)}}
/* 18 · Bruma — una masa ancha que se espesa y se afina */
.hero.fx-bruma .hbg::before{background:linear-gradient(90deg,transparent 6%,var(--hfl) 26% 48%,transparent 82%);
  filter:blur(1.2em);animation:hfxBruma 14s ease-in-out infinite alternate}
@keyframes hfxBruma{0%{opacity:.4;transform:translateX(-7%) scaleY(.86)}100%{opacity:.85;transform:translateX(8%) scaleY(1.28)}}
/* 19 · Nube — una nube grande cruza de un lado al otro */
.hero.fx-nube .hbg::before{background:
  radial-gradient(30% 44% at 26% 32%,var(--hfl),transparent 66%),
  radial-gradient(24% 36% at 44% 46%,var(--hfl),transparent 64%),
  radial-gradient(18% 30% at 14% 52%,var(--hfl),transparent 66%);
  filter:blur(1.3em);animation:hfxNube 24s linear infinite}
@keyframes hfxNube{0%{transform:translateX(-72%)}100%{transform:translateX(150%)}}
/* 20 · Polvo — motas finas a la deriva */
.hero.fx-polvo .hbg::before{background-image:radial-gradient(circle,var(--hfl) .1em,transparent .22em);
  background-size:2.3em 2.9em;filter:blur(.05em);animation:hfxPolvo 16s linear infinite}
@keyframes hfxPolvo{0%{background-position:0 0}100%{background-position:2.3em -2.9em}}
/* 21 · Ceniza — motas que caen en dos tamaños */
.hero.fx-ceniza .hbg::before{background-image:
  radial-gradient(circle,var(--hfl) .12em,transparent .26em),
  radial-gradient(circle,var(--hfl) .08em,transparent .18em);
  background-size:2.1em 3.6em,1.3em 2.2em;filter:blur(.07em);animation:hfxCeniza 9s linear infinite}
@keyframes hfxCeniza{0%{background-position:0 -3.6em,0 -2.2em}100%{background-position:.7em 0,0 0}}
/* 22 · Nieve — copos más grandes y más lentos */
.hero.fx-nieve .hbg::before{background-image:
  radial-gradient(circle,var(--hfl) .17em,transparent .34em),
  radial-gradient(circle,var(--hfl) .12em,transparent .24em);
  background-size:3.2em 4.6em,2.1em 3.1em;filter:blur(.09em);animation:hfxNieve 15s linear infinite}
@keyframes hfxNieve{0%{background-position:0 0,1.1em -3.1em}100%{background-position:1.4em 4.6em,0 0}}

/* ===== ONDA ===== */
/* 23 · Ondula — bandas horizontales que se comban */
.hero.fx-ondula .hbg::before{background:repeating-linear-gradient(180deg,transparent 0 .75em,var(--hfl) .75em 1.02em,transparent 1.02em 1.8em);
  filter:blur(.26em);animation:hfxOndula 9s ease-in-out infinite alternate}
@keyframes hfxOndula{0%{transform:translate3d(-.3em,-.4em,0) scaleY(1.05)}100%{transform:translate3d(.3em,.4em,0) scaleY(.92)}}
/* 24 · Ritmo — anillos concéntricos que se ensanchan */
.hero.fx-ritmo .hbg::before{background:repeating-radial-gradient(circle at 18% 44%,transparent 0 1.4em,var(--hfl) 1.4em 1.7em);
  filter:blur(.18em);animation:hfxRitmo 7.5s ease-in-out infinite alternate}
@keyframes hfxRitmo{0%{transform:scale(1)}100%{transform:scale(1.3)}}
/* 25 · Licor — un líquido denso que se mece en el fondo */
.hero.fx-licor .hbg::before{background:
  radial-gradient(120% 56% at 32% 114%,var(--hf1),transparent 68%),
  radial-gradient(100% 44% at 74% 120%,var(--hfd),transparent 66%);
  filter:blur(.55em);mix-blend-mode:screen;animation:hfxLicor 10s ease-in-out infinite alternate}
@keyframes hfxLicor{0%{transform:translateX(-4%) skewX(-4deg)}100%{transform:translateX(4%) skewX(4deg)}}
/* 26 · Gotas — ondas que nacen en tres puntos */
.hero.fx-gotas .hbg::before{background:
  radial-gradient(circle at 26% 34%,transparent .38em,var(--hfl) .42em .5em,transparent .56em),
  radial-gradient(circle at 68% 60%,transparent .3em,var(--hfl) .34em .42em,transparent .48em),
  radial-gradient(circle at 47% 78%,transparent .5em,var(--hfl) .54em .62em,transparent .68em);
  filter:blur(.1em);animation:hfxGotas 4.8s ease-out infinite}
@keyframes hfxGotas{0%{opacity:.8;transform:scale(.86)}40%{opacity:.9}100%{opacity:0;transform:scale(1.7)}}
/* 27 · Marea — una ola ancha entra y sale */
.hero.fx-marea .hbg::before{background:radial-gradient(58% 78% at 50% 62%,var(--hfl),transparent 74%);
  filter:blur(.9em);animation:hfxMarea 13s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes hfxMarea{0%{transform:translate3d(-52%,10%,0) scale(1.05)}100%{transform:translate3d(52%,-8%,0) scale(1.3)}}
/* 28 · Remolino — espiral lenta */
.hero.fx-remolino .hbg::before{background:repeating-conic-gradient(from 0deg at 52% 46%,transparent 0 9deg,var(--hfl) 9deg 18deg);
  filter:blur(1em);animation:hfxRemolino 24s linear infinite}
@keyframes hfxRemolino{0%{transform:rotate(0deg) scale(1.22)}100%{transform:rotate(360deg) scale(1.22)}}
/* 29 · Eco — un círculo que crece desde el título y se desvanece */
.hero.fx-eco .hbg::before{background:radial-gradient(20% 36% at 22% 44%,transparent 60%,var(--hfl) 66% 74%,transparent 80%);
  filter:blur(.2em);animation:hfxEco 6.4s ease-out infinite}
@keyframes hfxEco{0%{opacity:.85;transform:scale(.34)}100%{opacity:0;transform:scale(3.4)}}

/* ===== TRAZOS ===== */
/* 30 · Rejilla — una retícula que se recorre un cuadro exacto */
.hero.fx-rejilla .hbg::before{background:
  repeating-linear-gradient(0deg,transparent 0 1.3em,var(--hfl) 1.3em 1.4em),
  repeating-linear-gradient(90deg,transparent 0 1.3em,var(--hfl) 1.3em 1.4em);
  animation:hfxRejilla 8s ease-in-out infinite alternate}
@keyframes hfxRejilla{0%{opacity:.4;transform:translate3d(0,0,0)}100%{opacity:.85;transform:translate3d(-1.3em,-1.3em,0)}}
/* 31 · Persiana — lamas que se abren y se cierran */
.hero.fx-persiana .hbg::before{background:repeating-linear-gradient(180deg,transparent 0 .5em,var(--hfl) .5em 1.1em,transparent 1.1em 1.7em);
  filter:blur(.13em);animation:hfxPersiana 6.8s ease-in-out infinite alternate}
@keyframes hfxPersiana{0%{transform:translateY(-.45em) scaleY(1)}100%{transform:translateY(.45em) scaleY(1.22)}}
/* 32 · Código — barras verticales que caen a saltos */
.hero.fx-codigo .hbg::before{background-image:
  repeating-linear-gradient(90deg,transparent 0 .62em,var(--hfl) .62em .7em),
  repeating-linear-gradient(180deg,transparent 0 1.1em,var(--hfa) 1.1em 1.3em,transparent 1.3em 2.4em);
  animation:hfxCodigo 4.6s steps(16,end) infinite}
@keyframes hfxCodigo{0%{background-position:0 0,0 0}100%{background-position:0 0,0 -2.4em}}
/* 33 · Rayas — franjas diagonales que corren sobre su propio eje (el ciclo cierra exacto) */
.hero.fx-rayas .hbg::before{background:repeating-linear-gradient(126deg,transparent 0 .95em,var(--hfl) .95em 1.12em);
  filter:blur(.09em);animation:hfxRayas 7s linear infinite}
@keyframes hfxRayas{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(1.675em,1.222em,0)}}
/* 34 · Trama — doble rayado que gira lento */
.hero.fx-trama .hbg::before{background:
  repeating-linear-gradient(45deg,transparent 0 .46em,var(--hfl) .46em .54em),
  repeating-linear-gradient(-45deg,transparent 0 .46em,var(--hfl) .46em .54em);
  opacity:.75;animation:hfxTrama 18s ease-in-out infinite alternate}
@keyframes hfxTrama{0%{transform:rotate(-2.5deg) scale(1.25)}100%{transform:rotate(2.5deg) scale(1.4)}}
/* 35 · Digital — bloques que saltan de posición */
.hero.fx-digital .hbg::before{background-image:
  repeating-linear-gradient(90deg,transparent 0 .3em,var(--hfl) .3em .52em),
  repeating-linear-gradient(180deg,transparent 0 .22em,var(--hfa) .22em .3em);
  animation:hfxDigital 2.4s steps(1,end) infinite}
@keyframes hfxDigital{0%{background-position:0 0,0 0}25%{background-position:.52em .3em,0 -.3em}50%{background-position:-.3em 0,.21em .3em}75%{background-position:.52em -.3em,-.21em 0}100%{background-position:0 0,0 0}}
/* 36 · Barrido — una línea fina que baja sin pausa */
.hero.fx-barrido .hbg::before{background:linear-gradient(180deg,transparent 45%,var(--hfl) 49% 51%,transparent 55%);
  filter:blur(.07em);animation:hfxBarrido 4.2s linear infinite}
@keyframes hfxBarrido{0%{transform:translateY(-38%)}100%{transform:translateY(38%)}}
/* 37 · Retícula — puntos en malla que se espacian y se juntan */
.hero.fx-reticula .hbg::before{background-image:radial-gradient(circle,var(--hfl) .14em,transparent .21em);
  background-size:1.5em 1.5em;animation:hfxReticula 4s ease-in-out infinite alternate}
@keyframes hfxReticula{0%{opacity:.45;background-size:1.2em 1.2em}100%{opacity:.9;background-size:2.2em 2.2em}}

/* ===== COLOR ===== */
/* 38 · Sepia — la foto virada a tono cálido */
.hero.fx-sepia .hbg{filter:sepia(.55) saturate(.8) contrast(.94) brightness(1.02)}
.hero.fx-sepia .hbg::before{background:linear-gradient(152deg,var(--hfw),transparent 58%);
  mix-blend-mode:multiply;animation:hfxSepia 16s ease-in-out infinite alternate}
@keyframes hfxSepia{0%{opacity:.55}100%{opacity:.9}}
/* 39 · Fresca — degradado frío que se desliza */
.hero.fx-fresca .hbg::before{background:linear-gradient(122deg,var(--hfa),var(--hf1) 48%,transparent 82%);
  background-size:220% 220%;mix-blend-mode:screen;animation:hfxFresca 12s ease-in-out infinite alternate}
@keyframes hfxFresca{0%{background-position:0% 100%}100%{background-position:100% 0%}}
/* 40 · Cardinal — un tinte subido que late en un costado */
.hero.fx-cardinal .hbg::before{background:radial-gradient(50% 68% at 24% 38%,var(--hfa),transparent 70%);
  filter:blur(.6em);mix-blend-mode:screen;animation:hfxCardinal 9s ease-in-out infinite alternate}
@keyframes hfxCardinal{0%{opacity:.5;transform:translate3d(-5%,2%,0)}100%{opacity:.9;transform:translate3d(6%,-3%,0) scale(1.1)}}
/* 41 · Iridiscencia — los colores del tema dando vueltas muy lento */
.hero.fx-iridisc .hbg::before{background:conic-gradient(from 0deg at 50% 46%,var(--hf1),var(--hfa),var(--hf2),var(--hfd),var(--hf1));
  filter:blur(1.9em);mix-blend-mode:overlay;opacity:.75;animation:hfxIridisc 32s linear infinite}
@keyframes hfxIridisc{0%{transform:rotate(0deg) scale(1.5)}100%{transform:rotate(-360deg) scale(1.5)}}
/* 42 · Caleidoscopio — manchas de color que se van de lado */
.hero.fx-calidoscopio .hbg::before{background:
  radial-gradient(34% 52% at 22% 28%,var(--hfa),transparent 68%),
  radial-gradient(30% 46% at 76% 34%,var(--hf1),transparent 66%),
  radial-gradient(40% 56% at 52% 82%,var(--hfd),transparent 70%),
  radial-gradient(22% 34% at 88% 74%,var(--hf2),transparent 66%);
  filter:blur(1.2em);mix-blend-mode:screen;animation:hfxCalido 15s ease-in-out infinite alternate}
@keyframes hfxCalido{0%{transform:scale(1.04) rotate(0deg)}100%{transform:scale(1.26) rotate(7deg)}}
/* 43 · Brasa — ascuas cálidas que suben desde el piso */
.hero.fx-brasa .hbg::before{background:
  radial-gradient(60% 40% at 50% 112%,var(--hfw),transparent 70%),
  radial-gradient(28% 20% at 32% 98%,var(--hfa),transparent 72%),
  radial-gradient(22% 18% at 68% 104%,var(--hfw),transparent 70%);
  filter:blur(.5em);animation:hfxBrasa 6.2s ease-in-out infinite alternate}
@keyframes hfxBrasa{0%{opacity:.55;transform:translate3d(0,.3em,0)}100%{opacity:.95;transform:translate3d(0,-.35em,0) scaleX(1.08)}}

/* ===== FOTO — mueven la foto entera; ninguna toca el encuadre, sólo lo agranda o lo traslada */
/* 44 · Lente — el zoom que entra y sale */
.hero.fx-lente .hbg{transform-origin:34% 58%;animation:hfxLente 18s ease-in-out infinite alternate}
@keyframes hfxLente{0%{transform:scale(1.01)}100%{transform:scale(1.14)}}
/* 45 · Paneo — la foto se desliza de lado (el scale deja margen de sobra) */
.hero.fx-paneo .hbg{animation:hfxPan 20s ease-in-out infinite alternate}
@keyframes hfxPan{0%{transform:translateX(-3.4%) scale(1.12)}100%{transform:translateX(3.4%) scale(1.12)}}
/* 46 · Vértigo — la foto se agita hacia la cara */
.hero.fx-vertigo .hbg{transform-origin:50% 46%;animation:hfxVertigo 7s ease-in-out infinite}
@keyframes hfxVertigo{0%,100%{transform:scale(1.02) rotate(0deg)}50%{transform:scale(1.2) rotate(.7deg)}}
/* 47 · Flotar — la foto sube y baja como si respirara */
.hero.fx-flotar .hbg{animation:hfxFlotar 9s ease-in-out infinite alternate}
@keyframes hfxFlotar{0%{transform:translateY(-2.4%) scale(1.1)}100%{transform:translateY(2.4%) scale(1.1)}}
/* 48 · Balanceo — la foto se inclina de un hombro al otro */
.hero.fx-balanceo .hbg{animation:hfxBalanceo 12s ease-in-out infinite alternate}
@keyframes hfxBalanceo{0%{transform:scale(1.24) rotate(-1.4deg)}100%{transform:scale(1.24) rotate(1.4deg)}}
/* 49 · Viñeta — las orillas se oscurecen y se aclaran (suma contraste, nunca lo quita) */
.hero.fx-vineta .hbg::before{background:radial-gradient(74% 92% at 50% 46%,transparent 42%,var(--hfd) 88%);
  filter:blur(.5em);animation:hfxVineta 8s ease-in-out infinite alternate}
@keyframes hfxVineta{0%{opacity:.45;transform:scale(1.02)}100%{opacity:.95;transform:scale(1.18)}}
/* 50 · Grano — grano de película que salta */
.hero.fx-grano .hbg::before{background-image:
  radial-gradient(circle,color-mix(in srgb,var(--on-primary) 14%,transparent) .06em,transparent .1em),
  radial-gradient(circle,color-mix(in srgb,var(--deep) 22%,transparent) .07em,transparent .12em);
  background-size:.42em .42em,.58em .58em;animation:hfxGrano .9s steps(1,end) infinite}
@keyframes hfxGrano{0%{background-position:0 0,0 0}25%{background-position:.19em .11em,-.13em .21em}50%{background-position:-.11em .23em,.21em -.13em}75%{background-position:.23em -.17em,-.19em -.21em}100%{background-position:0 0,0 0}}


/* ---------- HERO ANIMADO DE SECCIÓN (v42) ----------
   Todos los hero salvo los dos de foto (Inicio y Mi Grupo) llevan un fondo vivo que se arma con
   los colores del propio tema. Dos manchas usan --primary-2 y --accent (las que dan color) y una
   usa el blanco o el negro — el lado que NUNCA le resta contraste a la tinta del hero — al 30 %.
   Las tres dangerous se amortiguan con vhVars(), que resuelve en el tema activo el mayor multiplicador
   que deja la pila completa (manchas + brillo) en 4.6:1 o más; sin JS las caídas del var() mantienen
   el mismo juego. Por eso el fondo se mueve en los 20 temas sin que el título pierda legibilidad. */
.vh-anim::before,.vh-anim::after{content:'';position:absolute;z-index:0;pointer-events:none}
.vh-anim::before{inset:-30%;
  background:
    radial-gradient(40% 56% at 24% 30%, var(--vh1, rgba(255,255,255,.18)), transparent 66%),
    radial-gradient(36% 52% at 78% 70%, var(--vh2, rgba(255,255,255,.30)), transparent 64%),
    radial-gradient(28% 42% at 62% 16%, var(--vh3, rgba(255,255,255,.12)), transparent 70%);
  filter:blur(1.1em);animation:vhDrift 19s ease-in-out infinite alternate}
.vh-anim::after{inset:0;
  background:linear-gradient(112deg,transparent 38%,var(--vh4, rgba(255,255,255,.08)) 50%,transparent 62%);
  animation:vhSheen 11s var(--ease) infinite}
@keyframes vhDrift{0%{transform:translate3d(-1.1em,.55em,0) scale(1.02)}100%{transform:translate3d(1.3em,-.85em,0) scale(1.16)}}
@keyframes vhSheen{0%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}

/* el modal de fondo: las dos maquetas en vivo (PC y celular) y la grilla de efectos */
.hk-fix{flex:none;padding:9px 11px 0;background:var(--raise)}
.hk-prev{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:13px;background:var(--surface-2);border:1px solid var(--ctl-line)}
.hk-mks{display:flex;align-items:flex-end;gap:9px;min-width:0}
.hk-mk{display:flex;flex-direction:column;gap:3px;min-width:0}
.hk-mk.pc{flex:1 1 auto}
.hk-mk.mo{flex:none}
.hk-mk-t{font-size:.53rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hk-tel{width:76px;padding:4px 4px 5px;border-radius:12px;background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--el1)}
.hk-tel::after{content:'';display:block;height:3px;width:26px;margin:4px auto 0;border-radius:111px;background:var(--border-2)}
.hk-box{padding:5px 7px;border-radius:9px;overflow:hidden;font-size:.34rem}
.hk-box h2{font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-box p{display:none}
/* la pastilla del velo, achicada a lo que ocupa un rótulo de 9 px */
.hk-box.has-bg>h2{padding:0 3px;margin-left:-3px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) var(--hxp,96%), transparent)}
#hk-box{aspect-ratio:8.1/1;min-height:34px}
#hk-mo{aspect-ratio:2.2/1}
.hk-meta{display:flex;align-items:baseline;gap:7px;min-width:0}
.hk-meta b{font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* con 50 efectos la grilla se partió en familias: cada rótulo queda pegado arriba mientras
   scrolleas su fila (sticky dentro de .m-body, que es el que tiene el scroll) */
.hk-grid{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.hk-cat{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:6px;padding:5px 0 4px;background:var(--raise);
  font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hk-cat span{font-size:.52rem;font-weight:600;letter-spacing:0;text-transform:none;opacity:.72}
.hk-fil{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:5px}
.hk-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.hk-chip{flex:none;padding:4px 9px;border-radius:111px;font-size:.55rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--ctl-line);color:var(--muted);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease)}
.hk-chip:hover{border-color:var(--border-2);color:var(--text)}
.hk-chip.on{background:color-mix(in srgb,var(--primary) 16%,transparent);border-color:var(--primary);color:var(--text)}
.hk-b{display:flex;flex-direction:column;gap:4px;min-width:0;padding:5px;border-radius:11px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--ctl-line);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.hk-b:hover{border-color:var(--border-2)}
.hk-b.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}
.hk-sw{display:block;height:44px;padding:0;font-size:.4rem;overflow:hidden;border-radius:8px;border:1px solid var(--edge)}
.hk-sw .hbg{background-image:linear-gradient(122deg,#f8fafc 0%,#94a3b8 24%,#334155 50%,#f59e0b 74%,#0f172a 100%)}
/* Ninguna muestra se anima sola: 50 capas con desenfoque moviéndose al mismo tiempo no
   entran en un celular. Cada una queda congelada en un cuadro distinto (--hkd, delay
   negativo) y sólo corre la elegida o la que está bajo el cursor. La especificidad sube
   con .hk-grid porque las reglas .hero.fx-x .hbg usan el shorthand animation y ganan 3-3. */
.hk-grid .hk-b .hk-sw .hbg,.hk-grid .hk-b .hk-sw .hbg::before{animation-play-state:paused;animation-delay:calc(var(--hkd,0) * -1s)}
.hk-grid .hk-b:hover .hk-sw .hbg,.hk-grid .hk-b:hover .hk-sw .hbg::before,
.hk-grid .hk-b.on .hk-sw .hbg,.hk-grid .hk-b.on .hk-sw .hbg::before{animation-play-state:running}
.hk-n{font-size:.56rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){
  .hk-grid{gap:5px}
  .hk-fil{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:4px}
  .hk-b{padding:4px;gap:3px;border-radius:9px}
  .hk-sw{height:32px}
  .hk-n{font-size:.5rem}
  .hk-cat{padding:4px 0 3px;font-size:.52rem;letter-spacing:.05em}
  .hk-cat span{font-size:.48rem}
  .hk-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:3px;margin-top:6px}
  .hk-chip{flex:none;padding:4px 8px;font-size:.5rem}
  .hk-chip:hover{border-color:var(--ctl-line);color:var(--muted)}
}
@media (max-height:600px){ .hk-tel{width:64px} #hk-box{min-height:28px} }
/* ---------- #70.b · editor de acomodo ----------
   El marco queda inmóvil y muestra el recorte de PC. Sólo la foto responde al arrastre y zoom;
   las maquetas inferiores muestran simultáneamente el resultado en PC y celular. */
.hc-stage{position:relative;width:100%;aspect-ratio:2.4/1;max-height:46vh;margin:3px 0 0;overflow:hidden;
  border-radius:13px;background:var(--surface-2);border:1px solid var(--ctl-line);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.hc-stage:active{cursor:grabbing}
.hc-stage canvas{display:block;width:100%;height:100%}
.hc-stage::after{content:"PC";position:absolute;left:9px;top:9px;padding:3px 7px;border-radius:6px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--text);border:1px solid var(--ctl-line);
  font-size:.58rem;font-weight:800;pointer-events:none}
.hc-ley{display:flex;flex-wrap:wrap;gap:3px 11px;margin-top:6px}
.hc-ley span{display:inline-flex;align-items:center;gap:4px;font-size:.58rem;font-weight:700;color:var(--muted)}
.hc-ley i{width:11px;height:11px;flex:none;border-radius:3px;border:2px solid;display:block}
.hc-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.hc-row>#hc-zoom{flex:1 1 auto;min-width:0}
.hc-row>b{font-size:.62rem;font-weight:700;color:var(--muted);min-width:34px;text-align:right;
  font-variant-numeric:tabular-nums}
.hc-av{font-size:.58rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* ---------- CARD DE ESTADÍSTICOS (v35) ----------
   Una sola card, más chica que el hero y con un fondo del tema distinto al del hero. Los divisores
   son sombras internas de cada celda: así se ven también cuando las celdas pasan de renglón. */
.kcard{
  display:flex;flex-wrap:wrap;
  border-radius:var(--r-lg);border:1px solid var(--edge);box-shadow:var(--el1);overflow:hidden;
  background:
    radial-gradient(72% 130% at 100% 0%, var(--tint-2), transparent 68%),
    radial-gradient(60% 120% at 0% 100%, var(--tint), transparent 70%),
    var(--surface);
  transition:border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.kcard>.stat{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;
  flex:1 1 var(--kc,112px);padding:9px 11px;border:0;border-radius:0;background:transparent;
  box-shadow:inset 1px 0 0 var(--edge), inset 0 1px 0 var(--edge)}
.kcard .stat .sv{font-size:clamp(.78rem,3.5vw,.94rem);letter-spacing:-.034em}
.kcard .stat>.tiny{font-size:.6rem}
/* las card de cuatro o cinco números van de a dos en el celular, no de a tres */
.kcard.kc4,.kcard.kc5{--kc:150px}
/* y su celda es compacta: rótulo y monto en la primera línea, la nota pasa abajo */
.kcard.kc4>.stat,.kcard.kc5>.stat{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:7px 10px 6px}
.kcard.kc4>.stat>.tiny,.kcard.kc5>.stat>.tiny{flex:1 1 100%;line-height:1.25}
/* en tablet y escritorio el renglón alcanza: en todas las card el rótulo y el monto comparten la
   primera línea y la nota pasa abajo, así la card siempre queda más baja que el hero */
@media (min-width:640px){
  .kcard>.stat{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:7px 10px 6px}
  .kcard>.stat>.tiny{flex:1 1 100%;line-height:1.25}
}
code.code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:700;letter-spacing:.14em;
  background:var(--surface-2);border:1px solid var(--edge);padding:4px 9px;border-radius:8px;font-size:.78rem}
.list{display:flex;flex-direction:column;gap:6px}
.li{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--edge);transition:border-color var(--t) var(--ease), background-color var(--t)}
.li:hover{border-color:var(--ctl-line-2);background:var(--hover)}
.li b{font-size:.71rem}
.pill{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--edge);font-weight:700;font-size:.68rem;flex:none}

/* ---------- Resumen ---------- */
.legend{display:flex;flex-wrap:wrap;gap:3px 11px}
.legend b{display:inline-flex;align-items:center;gap:6px;font-size:.67rem;font-weight:600;color:var(--muted)}
.legend b i{width:8px;height:8px;border-radius:2px;flex:none}
.legend b em{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
.segbar{display:flex;height:10px;border-radius:111px;overflow:hidden;border:1px solid var(--edge);background:var(--surface-2);gap:1px}
.segbar i{display:block;height:100%;transition:width .5s var(--ease)}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font-size:.68rem;padding:4px 0}
.kv+.kv{border-top:1px solid var(--edge)}
.kv>span{color:var(--muted);min-width:0}
.kv>b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.kv b.up{color:var(--ink-ok)}.kv b.down{color:var(--ink-bad)}
.spark{display:flex;align-items:flex-end;gap:4px;height:116px}
.spc{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.spc .cols{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:87px;width:100%}
.spc .c{width:7px;max-width:45%;border-radius:2px;transition:height .5s var(--ease)}
.spc .c.in{background:var(--success)}
.spc .c.out{background:var(--danger)}
.spc small{font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.spc.on small{color:var(--text);font-weight:800}
.spc.on .c{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--primary)}
.rs-hi{color:var(--text);font-weight:700}

/* ---------- Notas ---------- */
.notes{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:640px){.notes{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.notes{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 9px 7px 13px;border-radius:var(--r);overflow:hidden;
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--el1);transition:border-color var(--t) var(--ease)}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nc,var(--primary));
  box-shadow:0 0 7px 0 color-mix(in srgb,var(--nc,var(--primary)) 55%,transparent);
  animation:ntbrillo 3.6s var(--ease) infinite}
/* El resplandor quieto vive en la regla, no en el keyframe: con el switch
   «Animaciones y brillos» apagado (#anim-kill → animation:none) la nota conserva su
   franja de color con brillo; nunca queda una raya muerta. */
@keyframes ntbrillo{0%,100%{opacity:.72}50%{opacity:1}}  /* v3-4: sólo opacidad (antes box-shadow) */
.note::after{content:"";position:absolute;left:0;top:-38%;width:3px;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--nc,var(--primary)) 55%,transparent);
  filter:brightness(1.85);animation:ntluz 5.2s linear infinite}
/* anima transform y no `top`: `top` obliga a recalcular el diseño en cada cuadro, transform lo resuelve la GPU.
   La franja mide 38% del alto y arranca en top:-38%: recorrer 138% del alto del contenedor = 363% de su propio alto. */
@keyframes ntluz{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(363%);opacity:0}}
@media(prefers-reduced-motion:reduce){.note::before,.note::after{animation:none}
  .note::after{top:0;height:38%;opacity:.5}}
.note:hover{border-color:var(--ctl-line-2)}
.note.pinned{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.note.done{opacity:.62}
.note.done .note-txt{text-decoration:line-through}
.note-top{display:flex;align-items:center;gap:6px}
.note-txt{font-size:.72rem;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.note-row{display:flex;align-items:flex-start;gap:7px}
.note-foot{display:flex;align-items:center;gap:7px;font-size:.61rem;color:var(--muted)}
.ibtn{width:25px;height:25px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--muted);cursor:pointer;padding:0;transition:background-color var(--t) var(--ease), color var(--t), border-color var(--t)}
.ibtn:hover{background:var(--hover);border-color:var(--border);color:var(--text)}
.ibtn svg{width:15px;height:15px}
.ibtn.on{color:var(--primary);border-color:var(--line-p);background:var(--tint)}
.ibtn.danger.on{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.tick{width:21px;height:21px;flex:none;border-radius:50%;border:1.5px solid var(--ctl-line-2);background:var(--surface);
  cursor:pointer;display:grid;place-items:center;color:transparent;padding:0;margin-top:1px;transition:background-color var(--t) var(--ease), border-color var(--t), color var(--t)}
.tick:hover{border-color:var(--primary);color:color-mix(in srgb,var(--primary) 45%,transparent)}
.tick svg{width:12px;height:12px}
.tick.on{background:var(--primary);border-color:var(--deep);color:var(--on-primary)}
.swatches{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.swatch{width:18px;height:18px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;padding:0;transition:box-shadow var(--t) var(--ease)}
.swatch:hover{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border-2)}
.swatch.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--text)}
.ta{min-height:0;resize:vertical;line-height:1.35}

/* ============ MÓDULOS DE GRUPO Y HERRAMIENTAS PERSONALES (v17) ============ */
/* integrantes del hogar: las cuentas del grupo, no nombres inventados (v42 · #59) */
.famrow{display:flex;flex-wrap:wrap;gap:4px}
.famm{display:inline-flex;align-items:center;gap:4px;padding:2px 3px 2px 2px;border-radius:111px;
  border:1px solid var(--edge);background:var(--surface);font-size:.71rem;font-weight:600;transition:border-color var(--t) var(--ease)}
.famm:hover{border-color:var(--border-2)}
.famm.pickable{cursor:pointer}
.famm .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:157px}
.ava{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.6rem;font-weight:800;color:var(--surface);background:var(--muted);letter-spacing:.01em}
.ava.lg{width:29px;height:29px;font-size:.68rem}
.who{display:inline-flex;align-items:center;gap:4px;font-size:.69rem;font-weight:600;color:var(--muted)}

/* calendario mensual del grupo */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cald{display:flex;flex-direction:column;gap:2px;min-height:58px;padding:3px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--edge);background:var(--surface);text-align:left;font:inherit;color:inherit;transition:border-color var(--t) var(--ease), background-color var(--t)}
.cald:hover{border-color:var(--primary)}
.cald.out{opacity:.38}
.cald.we{background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.cald.today{box-shadow:inset 0 0 0 1.5px var(--primary)}
.cald.sel{border-color:var(--primary);background:var(--tint-2)}
.cald b{font-size:.63rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.cald .cev{display:flex;align-items:center;gap:1px;min-width:0}
.cald .cev .lab{flex:1 1 auto;min-width:0;font-size:.58rem}
.cald .lab.mas{font-size:.55rem;opacity:.75}
.cald .lab{font-size:.6rem;line-height:1.15;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* secciones agrupadas (recordatorios por vencimiento, compras por rubro) */
.sec{display:flex;align-items:center;gap:7px;margin:12px 0 6px;font-size:.63rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sec:first-child{margin-top:0}
.sec::after{content:"";flex:1;height:1px;background:var(--edge)}
.sec em{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
/* v31: encabezado de rubro cuando el rubro vive adentro de una sección más grande */
.sec.sub{margin:8px 0 5px;font-size:.6rem}
.grp{display:flex;flex-direction:column;gap:6px}

/* filas de trabajo */
.row2{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:var(--surface);
  border:1px solid var(--edge);transition:border-color var(--t) var(--ease), background-color var(--t);width:100%;text-align:left;font:inherit;color:inherit}
.row2:hover{border-color:var(--ctl-line-2)}
.row2.done{opacity:.55}
.row2.done .nm{text-decoration:line-through}
.row2.late{border-color:color-mix(in srgb,var(--danger) 40%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--surface))}
.row2 .nm{font-size:.72rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row2 .sub{font-size:.63rem;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v36: la plata de la Lista de Gastos y de Seguimiento (tinta derivada, legible en los 20 temas) */
.row2 .plata{margin-left:auto;text-align:right;flex:none;font-size:.72rem;font-weight:700;color:var(--ink-bad);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row2 .plata.ok{color:var(--ink-ok)}
/* el check de pago es la acción principal de estas dos listas: 21 px de dibujo, ~29 px de dedo */
.row2:has(> .tick[data-sg-tick]){position:relative}
.row2:has(> .tick[data-sg-tick]) .tick::after{content:"";position:absolute;inset:-4px;border-radius:10px}
.qbtn{width:24px;height:24px;flex:none;border-radius:var(--r-sm);border:1px solid var(--ctl-line);background:var(--surface);
  color:var(--text);font-size:.78rem;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color var(--t) var(--ease), color var(--t)}
.qbtn:hover{border-color:var(--primary);color:var(--primary)}
.lvl{display:flex;align-items:center;gap:7px;flex:none;width:94px}
.lvl .bar{flex:1}
.flag{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;flex:none}
.flag.ok{color:var(--ink-ok)}.flag.warn2{color:var(--ink-warn)}.flag.bad{color:var(--ink-bad)}

/* metas */
.goal{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:var(--r);background:var(--surface);border:1px solid var(--edge);box-shadow:var(--el1);transition:border-color var(--t2) var(--ease)}
.goal:hover{border-color:var(--ctl-line-2)}
.goal h4{font-size:.74rem;font-weight:700;letter-spacing:-.01em}
.goal .g-top{display:flex;align-items:baseline;gap:6px}
.goal .g-top b{font-size:.95rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.goal .g-top span{font-size:.65rem;color:var(--muted)}
.goal .g-in{display:flex;gap:6px;align-items:flex-end}
.goal .g-in .field{margin:0;flex:1}
.goal.fin{border-color:color-mix(in srgb,var(--success) 45%,var(--border))}


/* theme menu */
.menu-wrap{position:relative}
.menu{
  position:absolute; top:calc(100% + 7px); right:0; width:min(92vw, 251px); z-index:80;
  background:color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--ctl-line); border-radius:14px;
  box-shadow:var(--pop); padding:6px;
  opacity:0; transform:translateY(-6px) scale(.985); pointer-events:none; transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
  max-height:68dvh; overflow:auto;
}
.menu.on{opacity:1;transform:none;pointer-events:auto}
.menu h4{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:3px 4px 4px}
#theme-menu{max-height:calc(100dvh - var(--h) - 24px)}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:7px}
.theme-btn{display:flex;align-items:center;gap:6px;padding:4px;border-radius:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--ctl-line);transition:border-color var(--t) var(--ease)}
.theme-btn:hover{border-color:var(--ctl-line-2)}
.theme-btn.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--ring)}
.sw{display:flex;gap:2px;flex:none}
.sw i{width:7px;height:12px;border-radius:2px;display:block;border:1px solid rgba(128,128,128,.25)}
.theme-btn b{font-size:.66rem;font-weight:600;line-height:1.1}
.menu-sep{height:1px;background:var(--border);margin:2px 0 7px}

/* ============ NOTIFICACIONES (v18) ============ */
.btn-icon{position:relative}
.bell-dot{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:111px;
  background:var(--danger);color:var(--surface);font-size:.6rem;font-weight:800;line-height:14px;text-align:center;
  border:1.5px solid var(--surface);pointer-events:none;transform:scale(.5);opacity:0;transition:transform var(--t) var(--ease), opacity var(--t)}
.btn-icon.has{color:var(--primary);border-color:var(--line-p)}
.btn-icon.has .bell-dot{transform:scale(1);opacity:1}
/* El contador sobresale del botón (top/right negativos) pero todos los .btn tienen overflow:hidden para
   el brillo: recortaba el número a la mitad. En la campana se deja salir, y el brillo se recorta solo. */
#btn-bell{overflow:visible}
#btn-bell::before{clip-path:inset(0 round 12px)}
#btn-bell .bell-dot{top:-6px;right:-6px;z-index:3;min-width:18px;height:18px;line-height:15px;padding:0 4px;box-sizing:border-box;font-size:.62rem}
.menu.ntf{width:min(358px,calc(100vw - 78px));padding:0;display:flex;flex-direction:column;max-height:74dvh;overflow:hidden}
.ntf-top{display:flex;align-items:center;gap:6px;padding:8px 8px 6px;flex:none}
.ntf-top h4{margin:0;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ntf-top .n{font-size:.61rem;color:var(--muted);font-weight:700}
.ntf-list{flex:1 1 auto;min-height:0;overflow:auto;padding:4px;display:flex;flex-direction:column;gap:3px}
.ntfi{position:relative;display:flex;align-items:flex-start;gap:6px;width:100%;text-align:left;padding:6px 7px;
  background:var(--surface);border:1px solid var(--edge);border-radius:9px;cursor:pointer;transition:border-color var(--t) var(--ease), background-color var(--t)}
.ntfi:hover{border-color:var(--border-2);background:var(--hover)}
.ntfi.unread{padding-left:11px}
.ntfi.unread::before{content:'';position:absolute;left:3px;top:10px;width:4px;height:4px;border-radius:50%;background:var(--primary)}
.ntfi .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--muted)}
.ntfi.late .ic{color:var(--ink-bad)}
.ntfi.soon .ic{color:var(--warn)}
.ntfi .t{display:block;font-size:.695rem;font-weight:650;line-height:1.25}
.ntfi .s{display:block;font-size:.625rem;color:var(--muted);line-height:1.3}
.ntfi .ago{margin-left:auto;flex:none;font-size:.6rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ntfi.late .ago{color:var(--danger);font-weight:700}
.ntf-foot{display:flex;align-items:center;gap:4px;padding:6px 7px;border-top:1px solid var(--edge);flex:none}
.ntf-foot .btn{font-size:.65rem;padding:6px 9px}
.ntf-empty{padding:16px 11px;text-align:center}
.ntf-empty svg{width:22px;height:22px;color:var(--muted);opacity:.6}
.ntf-empty h5{margin:4px 0 2px;font-size:.68rem}
.ntf-empty p{margin:0;font-size:.64rem;color:var(--muted);line-height:1.35}
.nf-list{display:flex;flex-direction:column;gap:2px;margin:7px 0 2px}
.nf-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:9px;cursor:pointer;transition:.16s var(--ease)}
.nf-row:hover{background:var(--surface-2)}
.nf-row .ic{width:16px;height:16px;flex:none;color:var(--muted)}
.nf-row .tx{flex:1 1 auto;min-width:0}
.nf-row .tx b{display:block;font-size:.695rem;font-weight:650;line-height:1.25}
.nf-row .tx i{display:block;font-style:normal;font-size:.615rem;color:var(--muted);line-height:1.3}
.nf-row.off .ic,.nf-row.off .tx b{opacity:.45}
.hl{animation:hlflash 1.6s var(--ease)}
@keyframes hlflash{0%,55%{box-shadow:0 0 0 2px var(--ring);background:var(--tint)}100%{box-shadow:none}}

/* ============ PASTILLA DE ROTACIÓN / SEGUIMIENTO ============ */
.rot{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border:1px dashed var(--border-2);border-radius:111px;padding:1px 6px;flex:none}
.amb{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:111px;padding:1px 7px;flex:none;border:1px solid transparent}
.amb.g{color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);border-color:color-mix(in srgb,var(--primary) 38%,transparent)}
.amb.p{color:var(--muted);border:1px dashed var(--border-2)}
/* modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;align-content:safe center;overflow:auto;padding:9px;
  background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .2s}
.modal.on{opacity:1;pointer-events:auto}
.modal-box{position:relative;width:100%;max-width:370px;background:var(--raise);border:1px solid var(--ctl-line);
  border-radius:16px;padding:11px;box-shadow:var(--pop);transform:translateY(8px) scale(.98);transition:transform .22s var(--ease), opacity .22s}
.modal.on .modal-box{transform:none}
.modal-box h3{font-size:.84rem;letter-spacing:-.02em}
.modal-box>p{color:var(--muted);font-size:.72rem;margin-top:2px;margin-bottom:7px;line-height:1.35}
.modal-actions{display:flex;gap:7px;margin-top:3px}
.cf-det{display:flex;flex-direction:column;gap:10px;margin:2px 0 9px}
.cf-sec h4{font-size:.74rem;margin:0 0 4px;letter-spacing:-.01em}
.cf-sec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cf-sec li{display:flex;gap:8px;font-size:.74rem;line-height:1.38;color:var(--muted)}
.cf-sec li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;margin-top:.5em;background:var(--muted)}
.cf-sec.pierdes h4{color:var(--ink-bad)}.cf-sec.pierdes li::before{background:var(--danger)}
.cf-sec.queda li::before{background:var(--success)}
.cf-nota{font-size:.72rem;line-height:1.35;color:var(--muted);border-top:1px solid var(--ctl-line);padding-top:8px;margin-top:2px}
/* #66: el botón-sólo-ícono no reparte el ancho (conserva su caja); el grupo va a la derecha */
.modal-actions .btn:not(.ai){flex:1}
.modal-actions{justify-content:flex-end}

/* modales con lista larga: scrollea solo la lista, el título y el botón de agregar quedan visibles */
.modal-box.msc{display:flex;flex-direction:column;max-height:calc(100dvh - 18px)}
.modal-box.msc>h3,.modal-box.msc>p,.modal-box.msc>.seg,.modal-box.msc>.field,.modal-box.msc>.frow,.modal-box.msc>span.tiny,.modal-box.msc>.modal-actions{flex:none}
.msc-body{flex:1 1 auto;min-height:67px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* #68: el ítem de vocabulario es un bloque de dos líneas (nombre arriba, acciones
   abajo). Sólo los cuatro modales de vocabulario llevan la clase. */
.v-it{display:block;padding:8px 10px 7px}
.v-it .vq{display:flex;align-items:flex-start;gap:7px;min-width:0}
.v-it .vq .grow{flex:1 1 auto;min-width:0}
.v-it .vq b{line-height:1.3}
.v-it .nm,.v-it .sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.v-it .vq .input{flex:1 1 auto;min-width:0;padding:5px 8px;font-size:.71rem}
.v-it .va{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.v-it .va .fbtn{flex:none;padding:5px 12px;min-height:26px}
.v-it .pk{margin-top:6px}
.row2.v-it{align-items:flex-start}
/* ---- #75 y #76 · la fila de Tipos de evento (v43) ----
   Las dos acciones quedan a la DERECHA, en la MISMA línea que el nombre, y son
   botones con ícono y palabra: los viejos `.ai.mini` de 27×25 px no se leían.
   Editar ya no baja al pie del modal: abre la propia fila, y ahí dentro vive
   todo (título, ícono y color, la repetición y si cuenta los años). Crear usa
   el mismo molde, con una fila vacía al pie de la lista. */
.et-fila{align-items:center;flex-wrap:wrap}
/* #75: el nombre y sus dos acciones en UNA sola línea; el subtexto abajo. */
.et-cuerpo{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:3px}
.et-linea{display:flex;align-items:center;gap:8px;min-width:0}
.et-linea .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.et-linea .et-acts{margin-left:auto}
.et-fila .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et-fila .et-acts{margin-left:auto;display:flex;gap:6px;flex:none}
.et-fila .et-acts .ai{width:auto;height:34px;padding:0 11px;gap:6px;border-radius:10px;font-size:.72rem}
.et-fila .et-acts .ai svg{width:15px;height:15px}
.et-fila.on{align-items:flex-start;background:var(--tint);border-color:var(--ctl-line-2);
  padding:8px 9px 9px;border-radius:12px}
.et-fila.on .et-tt{flex:1 1 auto;min-width:0;font-size:.76rem;padding:7px 9px}
.et-fila .et-op{flex:1 1 100%;display:flex;flex-direction:column;gap:7px;margin-top:8px}
.et-par{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.et-par .seg{flex:1 1 190px}
.et-par .pk{flex:1 1 auto}
.et-lb{font-size:.68rem;font-weight:650;color:var(--muted);letter-spacing:.01em;min-width:86px;
  display:inline-flex;align-items:center;gap:5px}
.et-aa{justify-content:space-between}
.et-aa .et-lb{min-width:0}
@media (max-width:420px){
  .et-fila .et-acts{gap:5px}
  .et-fila .et-acts .ai{height:32px;padding:0 9px;font-size:.7rem;border-radius:9px}
  .et-lb{min-width:0;width:100%}
  .et-par{gap:6px}
}

#cat-list,#tip-list,#rub-list{min-height:min(150px,24dvh)}

/* toasts */
#toasts{position:fixed;z-index:120;left:9px;right:9px;bottom:calc(var(--dock-safe) + 9px);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
@media(min-width:700px){#toasts{left:auto;right:11px;bottom:calc(var(--dock-safe) + 11px);align-items:flex-end}}
/* en PC la barra va flotando al centro, así que el aviso vuelve a su rincón */
@media(min-width:1000px){#toasts{bottom:11px}}
.toast{pointer-events:auto;max-width:min(92vw,314px);width:100%;padding:8px 11px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--ctl-line);box-shadow:var(--pop);font-size:.72rem;display:flex;gap:7px;align-items:flex-start;
  animation:toastIn .24s var(--ease)}
.toast.out{animation:toastOut .22s var(--ease) forwards}
.toast i{width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:4px;flex:none}
.toast.err i{background:var(--danger)}
.toast.ok i{background:var(--success)}
.skel{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));
  background-size:200% 100%;animation:shine 1.4s linear infinite}

/* ============ MODAL DE CARGA ÚNICO (v20) ============ */
.modal-box.form{display:flex;flex-direction:column;padding:0;width:min(94vw,385px);max-height:calc(100dvh - 18px);overflow:hidden}
.m-head{display:flex;align-items:flex-start;gap:9px;padding:10px 34px 9px 11px;border-bottom:1px solid var(--edge);flex:none}
.m-kicker{display:block;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-p);margin-bottom:2px;line-height:1}
.m-head h3{font-size:.84rem;line-height:1.18}
/* v28: la X vive en la esquina superior derecha de la caja, no en la fila del título */
.m-x{position:absolute;top:5px;right:5px;z-index:3;width:25px;height:25px;display:grid;place-items:center;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:background-color var(--t) var(--ease), border-color var(--t), color var(--t)}
.m-x:hover{background:var(--hover);border-color:var(--border);color:var(--text)}
.m-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 11px 3px}
.m-foot{flex:none;display:flex;align-items:center;gap:7px;padding:8px 11px 10px;border-top:1px solid var(--edge)}
.m-foot .err-msg{flex:1 1 auto;min-width:0;line-height:1.3}
.m-foot .grow{flex:1 1 auto}
.m-foot .btn{flex:none;padding-inline:11px}
.m-foot:has(.err-msg:not(:empty)) .grow{display:none}
/* ---- #77: en PC el modal entra bastante más grande ----
   El molde de 370-385 px y letras de 13 px es para el pulgar en el celular; en
   una pantalla de 1280 queda como una estampilla. Acá se ensancha la hoja y se
   sube la escala de TODO lo que vive adentro (título, etiquetas, campos, botones
   y el grupo de acciones). Ningún selector arranca afuera de `.modal-box`, así
   que el resto de la app sigue compacto y mobile-first como estaba. */
@media(min-width:1000px){
  .modal{padding:24px}
  .modal-box{max-width:min(92vw,600px);border-radius:20px;padding:16px}
  .modal-box.form{width:min(92vw,640px);max-height:calc(100dvh - 48px)}
  .modal-box.msc,.modal-box.dp{max-width:min(92vw,600px);max-height:calc(100dvh - 48px)}
  .modal-box h3,.m-head h3{font-size:1.1rem}
  .m-kicker{font-size:.72rem}
  .modal-box>p{font-size:.84rem;line-height:1.4}
  .m-head{padding:15px 46px 13px 18px;gap:11px}
  .m-x{width:33px;height:33px;top:9px;right:9px;border-radius:10px}
  .m-x svg{width:19px;height:19px}
  .m-body{padding:16px 18px 6px}
  .m-foot{padding:13px 18px 15px;gap:9px}
  .m-foot .btn{padding-inline:16px}
  .modal-box .field{gap:5px;margin-bottom:9px}
  .modal-box .field label{font-size:.76rem}
  .modal-box .input{font-size:.86rem;min-height:42px;padding:9px 12px;border-radius:12px}
  .modal-box .btn{font-size:.8rem;padding:8px 13px;border-radius:11px}
  .modal-box .seg{padding:3px;gap:3px;border-radius:12px}
  .modal-box .sbtn{font-size:.78rem;padding:8px 12px;border-radius:9px}
  .modal-box .btn.ai:not(.mini){height:38px;gap:7px;padding:0 13px;font-size:.77rem}
  .modal-box .btn.ai:not(.mini) svg{width:18px;height:18px}
  .modal-box .frow{gap:11px}
}

/* ============ ÍCONOS DE TIPO (v28, librería Lucide) ============ */
/* el ícono reemplaza al punto de color: mantiene el color del tipo como tinta */
.tic{width:21px;height:21px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:color-mix(in srgb,currentColor 15%,transparent)}
.tic svg{width:13px;height:13px}
.legend b .tic{width:14px;height:14px;border-radius:0;background:none}
.legend b .tic svg{width:14px;height:14px}
.cald .cev .tic{width:10px;height:10px;border-radius:0;background:none;flex:none}
.cald .cev .tic svg{width:10px;height:10px}
.cald .cev .tic.shr{border-radius:4px;box-shadow:0 0 0 1.4px color-mix(in srgb,var(--primary) 55%,transparent)}
.dd-mark{width:7px;height:7px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center}
.dd-mark.ic{width:16px;height:16px;border-radius:0;background:none !important}
.dd-mark svg{width:16px;height:16px}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(43px,1fr));gap:4px}
.ic-b{height:40px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:9px;background:var(--surface);
  color:var(--muted);cursor:pointer;transition:border-color var(--t) var(--ease), background-color var(--t), color var(--t)}
.ic-b svg{width:18px;height:18px}
.ic-b:hover{border-color:var(--primary);background:var(--hover);color:var(--text)}
.ic-b.on{border-color:var(--primary);background:var(--tint-2);color:var(--primary)}
.ic-b>i{display:none}
/* #65: la barra de categorías del picker corre en horizontal (en el teléfono no
   entran las 25) y queda pegada arriba mientras se escrota la retícula. El fondo y
   la sombra de arriba usan --raise, el color del modal, para que nada se vea de más. */
/* ---- #78: las categorías del picker en DOS renglones ----
   Veinte y cinco chips en una sola fila se recorrían de a uno y medio; en dos
   renglones entran el doble de opciones de un vistazo. En el celular la grilla
   llena de a dos (grid-auto-flow:column) y las dos filas se desplazan JUNTAS al
   scrollear en horizontal. En PC, como el modal ya es ancho (#77), se pasa a
   flex-wrap y aparecen TODAS sin scrollear nada. */
/* ---- #82: la barra de búsqueda es fija, como las categorías ----
   Antes sólo `.ic-cats` estaba pegada arriba y el campo «Buscar» se iba con el
   scroll: al recorrer los 2.118 íconos perdías la caja donde escribís. Ahora el
   buscador y las categorías viven dentro de `.ic-top`, que es la que queda fija
   (sticky) sobre el body del modal; la retícula de íconos pasa por debajo. El
   fondo y la sombra de arriba usan --raise para que nada asome por el borde. */
.ic-top{position:sticky;top:-10px;z-index:3;background:var(--raise);
  box-shadow:0 -11px 0 11px var(--raise)}
.ic-cats{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:5px;overflow-x:auto;
  scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  padding:3px 0 8px}
/* ---- en PC las categorías son un menú desplegable ----
   Cerrado: un solo renglón (la categoría elegida) con el botón para abrir. Abierto:
   aparecen todas en renglones. En el celular queda la barra de siempre. */
.ic-tog{display:none}
@media(min-width:1000px){
  .ic-tog{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-bottom:6px;
    height:31px;padding:0 10px;border-radius:10px;border:1px solid var(--ctl-line);background:var(--surface);
    color:var(--ink);font-size:.72rem;font-weight:650;cursor:pointer}
  .ic-tog svg{width:15px;height:15px;flex:none;transition:transform var(--t) var(--ease)}
  .ic-top.ic-open .ic-tog svg{transform:rotate(180deg)}
  .ic-cats{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .ic-top.ic-open .ic-cats{flex-wrap:wrap;overflow:visible}
}
.ic-cats::-webkit-scrollbar{display:none}
.ic-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 9px;border-radius:999px;
  border:1px solid var(--ctl-line);background:var(--surface);color:var(--muted);font-size:.68rem;font-weight:650;
  cursor:pointer;white-space:nowrap;transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t)}
.ic-chip svg{width:13px;height:13px;flex:none}
.ic-chip i{font-style:normal;font-weight:500;font-size:.6rem;opacity:.7}
.ic-chip:hover{border-color:var(--primary);background:var(--hover);color:var(--text)}
.ic-chip.on{border-color:var(--primary);background:var(--primary);color:var(--on-primary);box-shadow:var(--sh-soft)}
.ic-chip.on i{color:var(--on-primary);opacity:.72}
.ic-chip.on svg{opacity:.95}
.ic-chip.cero{opacity:.36}
.ic-chip.cero:hover{border-color:var(--ctl-line);background:var(--surface);color:var(--muted)}
@media (max-width:420px){.ic-chip{height:26px;padding:0 8px;font-size:.65rem;gap:4px}}
.ic-todo{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--primary);cursor:pointer;text-decoration:underline}
/* la retícula es una grilla de columnas automáticas: la fila del tope tiene que
   ocuparlas todas, si no queda encerrada en un cuadrito de 43 px */
.ic-mas{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
  padding:9px 0 3px;font-size:.72rem;color:var(--muted)}
/* ---- strip «ícono + color» y su picker de 50 colores (v42) ---- */
.pk{display:flex;gap:5px;align-items:center;min-height:34px}
.pk-btn{width:34px;height:34px;flex:none;border-radius:9px;border:1px solid var(--ctl-line);background:var(--surface);
  color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease)}
.pk-btn:hover{border-color:var(--primary);background:var(--hover);box-shadow:var(--sh-soft)}
.pk-btn:active{transform:translateY(1px)}
.pk-btn svg{width:17px;height:17px}
.pk-btn.vac{color:var(--muted)}
.pk-btn>i{width:19px;height:19px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}
.pk-nm{font-size:.63rem;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;justify-items:center;padding-top:2px}
.col-b{width:30px;height:30px;border-radius:50%;border:1px solid var(--ctl-line);cursor:pointer;padding:0;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease)}
.col-b:hover{transform:scale(1.16)}
.col-b.on{box-shadow:0 0 0 2px var(--raise),0 0 0 3.5px var(--primary)}
.sec .tic,.mv .tic,.li .tic,.row2 .tic{width:16px;height:16px;border-radius:0;background:none;flex:none}
.sec .tic svg,.mv .tic svg,.li .tic svg,.row2 .tic svg{width:16px;height:16px}
.goal h4{display:flex;align-items:center;gap:5px}
.goal h4 .tic{width:15px;height:15px;border-radius:0;background:none;flex:none}
.goal h4 .tic svg{width:15px;height:15px}
.row2.on{border-color:var(--primary);background:var(--tint-2)}
.chip .tic{width:15px;height:15px;border-radius:0;background:none}
.chip .tic svg{width:13px;height:13px}
.hint-line{font-size:.63rem;color:var(--muted);margin-top:4px;line-height:1.35}

/* ============ CONTROLES PROPIOS (dropdowns, fechas, switches) ============ */
.fbtn:focus-visible,.btn:focus-visible,.pick:focus-visible,.nav-item:focus-visible,
.menu-item:focus-visible,.tab:focus-visible,.dd-opt:focus-visible,.dp-day:focus-visible,
.dp-mon:focus-visible,.dp-yr:focus-visible,.qbtn:focus-visible,.ibtn:focus-visible,.tick:focus-visible,
.m-x:focus-visible,.theme-btn:focus-visible,.nf-row:focus-visible,.ntfi:focus-visible,.cald:focus-visible,.tkd:focus-visible{
  outline:2px solid var(--ring);outline-offset:1px}

/* disparador que reemplaza a <select> / <input type=date> */
.pick{
  display:flex;align-items:center;gap:7px;width:100%;min-height:34px;padding:6px 9px;
  background:var(--surface);color:var(--text);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);
  font-size:.74rem;font-weight:500;text-align:left;cursor:pointer;transition:border-color var(--t) var(--ease), box-shadow var(--t)}
.pick:hover{border-color:var(--ctl-line-2)}
.pick.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.pick .pv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .pv.ph{color:var(--muted)}
.pick .chev{width:13px;height:13px;flex:none;color:var(--muted);transition:transform var(--t) var(--ease)}
.pick.on .chev{transform:rotate(180deg)}
.pick.sm{min-height:29px;padding:4px 8px;font-size:.68rem;font-weight:600}
.pick.auto{width:auto}
.pick.err{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 26%,transparent)}
.pick .ic{width:13px;height:13px;flex:none;color:var(--muted)}

/* v34: el mes de Cuentas es un .pick agrandado, en renglón propio y centrado; va después de
   .pick para que el tamaño propio no lo gane el disparador estándar */
.mesbar{display:flex;align-items:center;justify-content:center;gap:7px}
.pick.mespick{flex:none;width:auto;min-width:min(214px,56vw);min-height:40px;padding:8px 13px;
  font-size:.83rem;font-weight:700;letter-spacing:-.018em;justify-content:center;
  background:var(--raise);border-color:var(--ctl-line-2);box-shadow:var(--el1)}
.pick.mespick .pv{flex:none;min-width:0;text-align:center;text-transform:capitalize}
.pick.mespick .chev{width:15px;height:15px}
.mbtn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--ctl-line-2);background:var(--surface);color:var(--text);
  transition:border-color var(--t) var(--ease), background-color var(--t), color var(--t)}
.mbtn:hover{border-color:var(--primary);color:var(--primary);background:var(--tint)}
.mbtn:active{filter:brightness(.96)}
.mbtn svg{width:17px;height:17px}

/* dropdown */
.dd{position:relative}
/* la lista vive en <body> (position:fixed): así ningún contenedor con
   overflow, como el cuerpo de un modal, la corta a la mitad */
.dd-panel{
  position:fixed;z-index:110;
  background:color-mix(in srgb, var(--surface) 96%, transparent);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--ctl-line);border-radius:14px;padding:4px;box-shadow:var(--pop);
  max-height:208px;overflow:auto;display:none;
}
.dd-panel.on{display:block;animation:ddIn .16s var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px) scale(.99)}to{opacity:1;transform:none}}
.dd-opt{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;border:none;border-radius:8px;
  background:transparent;color:var(--text);font-size:.71rem;font-weight:500;text-align:left;cursor:pointer;transition:background-color var(--t) var(--ease)}
.dd-opt:hover{background:var(--hover)}
.dd-opt.sel{background:var(--tint);font-weight:700}
.dd-opt.sel:hover{background:var(--tint-2)}
.dd-opt .ck{margin-left:auto;width:13px;height:13px;flex:none;color:var(--primary);opacity:0;transition:opacity var(--t) var(--ease)}
.dd-opt.sel .ck{opacity:1}
.dd-empty{padding:7px 8px;font-size:.7rem;color:var(--muted)}

/* ============ globo explicativo (v42 · pedido 60) ============
   el texto que explica algo no ocupa pantalla: vive detrás del ícono `info` */
/* ---- #64: el ícono de ayuda se mueve y resplandece siempre ----
   --glo-ink mezcla el color del tema con la tinta del tema: en un tema oscuro
   el resultado tira hacia claro, en uno claro tira hacia oscuro. Nunca se
   hardcodea un color, y por eso el resplandor también hereda del tema. */
.info{--glo-ink:color-mix(in srgb, var(--primary) 52%, var(--text));
  /* todo sale de --glo-ink (tema + tinta del tema): el brillo, el reflejo y el resplandor cambian con cada Theme */
  --info-s:clamp(16px, 1.3em, 22px);
  --info-gloss:radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--glo-ink) 30%, transparent), transparent 62%);
  --info-shine:color-mix(in srgb, var(--glo-ink) 72%, transparent);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-grid;place-items:center;flex:none;align-self:center;
  width:var(--info-s);height:var(--info-s);margin:0;padding:0;
  font-size:inherit;line-height:1;
  border:1px solid color-mix(in srgb, var(--glo-ink) 38%, transparent);border-radius:50%;
  background:var(--info-gloss), color-mix(in srgb, var(--glo-ink) 12%, transparent);color:var(--glo-ink);cursor:pointer;
  /* centrado con el texto de al lado: el medio del círculo cae en el medio de la x del texto
     y .06em lo sube hacia el centro de las mayúsculas, así queda parejo en títulos en minúscula y en mayúscula */
  vertical-align:middle;top:-.06em;
  transition:color var(--t) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease);
  animation:infoResplandece 2.6s ease-in-out infinite}
.info svg{position:relative;z-index:0;width:68%;height:68%;filter:drop-shadow(0 0 2px color-mix(in srgb, var(--glo-ink) 40%, transparent))}
/* destello: una franja de luz del color del tema cruza el círculo y descansa un rato */
.info::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:55%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, var(--info-shine) 50%, transparent 100%);
  transform:translateX(-170%) skewX(-18deg);animation:infoBrillo 3.4s ease-in-out infinite}
.info:hover,.info.on{color:var(--surface);background:var(--glo-ink);
  --info-shine:color-mix(in srgb, var(--surface) 78%, transparent);
  border-color:color-mix(in srgb, var(--glo-ink) 80%, transparent);
  box-shadow:0 0 9px 1px color-mix(in srgb, var(--glo-ink) 46%, transparent);
  animation:infoResplandece 1.3s ease-in-out infinite}
.info:hover::after,.info.on::after{animation-duration:1.5s}
.info:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@keyframes infoBrillo{0%,38%{transform:translateX(-170%) skewX(-18deg)}74%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes infoResplandece{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}  /* v3-4: transform en vez de box-shadow */
/* con las animaciones apagadas el ícono se queda quieto pero sigue brillando fijo */
body.no-anim .info{animation:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--glo-ink) 42%, transparent)}
body.no-anim .info::after{animation:none;opacity:0}
/* rendimiento en el celular: mientras la pantalla se desplaza, los brillos decorativos se congelan
   y vuelven solos al soltar (la clase la pone un detector de scroll, ver «scrollPausa») */
/* v3-4: sólo se pausa el encabezado (barra superior, barra compacta y hero visible); el resto sigue */
html.scrolling :is(.topbar,.herobar,.view.on .vh),html.scrolling :is(.topbar,.herobar,.view.on .vh) *,
html.scrolling :is(.topbar,.herobar,.view.on .vh)::before,html.scrolling :is(.topbar,.herobar,.view.on .vh)::after,
html.scrolling :is(.topbar,.herobar,.view.on .vh) *::before,html.scrolling :is(.topbar,.herobar,.view.on .vh) *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .info{animation:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--glo-ink) 42%, transparent)}
  .info::after{animation:none;opacity:0}
}
/* dentro del hero el piso cambia de --surface a --primary: la tinta del ícono
   cambia con él y pasa a ser la tinta del propio hero. El resplandor hereda
   --glo-ink, así que la luz también sale del tema sin hardcodear nada. */
/* #90: el subtítulo (globo) del hero vuelve a todas las secciones, menos Inicio.
   El #86 los apagaba en todos; ahora se esconde sólo el del hero de Inicio. */
.hero .info{--glo-ink:var(--on-primary);
  border-color:color-mix(in srgb, var(--on-primary) 52%, transparent);
  background:var(--info-gloss);color:var(--on-primary)}
#v-inicio>.stack>.hero .info{display:none}
/* #91: los títulos del hero siempre en mayúsculas (y el que sube a la barra fija). */
.hero h2,.hb-title{text-transform:uppercase;letter-spacing:.02em}
/* el saludo del Inicio se lee como se escribe: «Hola, Nombre» */
#v-inicio>.stack>.hero h2#hero-hi{text-transform:none;letter-spacing:-.02em}
/* con foto el piso lo eligió la persona: la pastilla del ícono es la misma caja de
   color que hxSolve resolvió para el texto del hero, así que vale el mismo 4,6 */
.hero.has-bg .info{background:var(--info-gloss), color-mix(in srgb, var(--primary) var(--hxp, 96%), transparent)}
.hero .info svg{filter:drop-shadow(0 0 2px color-mix(in srgb, var(--on-primary) 55%, transparent))}
.hero .info:hover,.hero .info.on{color:var(--primary);background:var(--on-primary);
  --info-shine:color-mix(in srgb, var(--primary) 55%, transparent);
  border-color:color-mix(in srgb, var(--on-primary) 86%, transparent)}
.glo-bal{position:fixed;z-index:130;max-width:min(302px,86vw);padding:8px 10px;border-radius:13px;
  background:color-mix(in srgb, var(--surface) 96%, transparent);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--ctl-line);box-shadow:var(--pop);font-size:.71rem;line-height:1.36;color:var(--text);
  opacity:0;transform:translateY(-3px);pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.glo-bal.on{opacity:1;transform:none;pointer-events:auto}
.glo-bal.abajo{transform:translateY(3px)}
.glo-bal.abajo.on{transform:none}
.glo-bal{border-color:color-mix(in srgb, var(--primary) 30%, var(--ctl-line));
  box-shadow:var(--pop), 0 0 14px 2px color-mix(in srgb, var(--primary) 22%, transparent)}
.glo-bal b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
.glo-bal code{font-size:.68rem}

/* selector de fecha / mes */
.modal-box.dp{max-width:318px;max-height:calc(100dvh - 18px);overflow:auto}
.dp-head{display:flex;align-items:center;gap:4px;margin:1px 0 6px}
.dp-my{flex:1;padding:4px;border-radius:8px;border:1px solid transparent;background:transparent;
  font-weight:700;font-size:.72rem;letter-spacing:-.01em;text-transform:capitalize;cursor:pointer;transition:background-color var(--t) var(--ease)}
.dp-my:hover{background:var(--hover);border-color:var(--border)}
.dp-nav{width:27px;height:27px;flex:none;border-radius:8px;border:1px solid var(--ctl-line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:border-color var(--t) var(--ease), color var(--t)}
.dp-nav:hover{border-color:var(--primary);color:var(--primary)}
.dp-nav svg{width:15px;height:15px}
.dp-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:3px}
.dp-dows span{text-align:center;font-size:.6rem;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.dp-dows span.we{color:var(--ink-bad);opacity:1}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-grid.m{grid-template-columns:repeat(3,1fr);gap:4px}
.dp-day{position:relative;aspect-ratio:1;border:none;border-radius:8px;background:transparent;color:var(--text);
  font-size:.71rem;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;display:grid;place-items:center;transition:background-color var(--t) var(--ease)}
.dp-day:hover{background:var(--tint)}
.dp-day.out{opacity:.32}
.dp-day.we{color:var(--muted)}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--primary)}
.dp-day.sel{background:var(--primary);color:var(--on-primary);font-weight:700}
.dp-day.sel.today{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-primary) 45%,transparent)}
.dp-day:disabled{opacity:.25;cursor:not-allowed;background:none;box-shadow:none}
.dp-mon,.dp-yr{padding:7px 4px;border-radius:8px;border:1px solid var(--edge);background:var(--surface);
  font-size:.68rem;font-weight:600;cursor:pointer;transition:border-color var(--t) var(--ease), background-color var(--t);text-align:center}
.dp-mon:hover,.dp-yr:hover{border-color:var(--primary);background:var(--tint)}
.dp-mon.sel,.dp-yr.sel{background:var(--primary);border-color:var(--deep);color:var(--on-primary);font-weight:700}
.dp-mon:disabled,.dp-yr:disabled{opacity:.3;cursor:not-allowed;background:var(--surface-2);border-color:var(--border)}
.dp-mon small{display:block;font-size:.6rem;font-weight:700;opacity:.6;letter-spacing:.04em}
.dp-presets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.dp-foot{display:flex;align-items:center;gap:7px;margin-top:8px}
/* #66: idem en el pie del selector de fecha */
.dp-foot .btn:not(.ai){flex:1}
.dp-sel{font-size:.68rem;color:var(--muted);font-weight:600}

/* switch */
.switch{position:relative;display:inline-flex;flex:none;width:32px;height:18px;vertical-align:middle}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:111px;background:var(--surface);border:1px solid var(--ctl-line-2);
  transition:background-color var(--t2) var(--ease), border-color var(--t2);pointer-events:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--muted);transition:transform var(--t2) var(--ease), background-color var(--t2)}
.switch input:checked+i{background:var(--primary);border-color:var(--deep)}
.switch input:checked+i::after{transform:translateX(13px);background:var(--on-primary)}
.switch input:focus-visible+i{box-shadow:0 0 0 3px var(--ring)}
/* botón «Compartido» de recordatorios: una sola pieza, mitad y mitad con corte diagonal.
   Un selector de color se desliza de una mitad a la otra: verde = Solo para mí · rojo = Todo el grupo. */
.rc-priv-btn{--clL:polygon(0 0,calc(50% + 11px) 0,calc(50% - 13px) 100%,0 100%);
  --clR:polygon(calc(50% + 15px) 0,100% 0,100% 100%,calc(50% - 9px) 100%);
  position:relative;display:block;width:100%;height:48px;padding:0;border:none;background:transparent;
  cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
.rc-priv-btn:active{transform:scale(.975)}
.rc-priv-btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:12px}
.rc-priv-btn>span{position:absolute;inset:0;pointer-events:none}
/* pista: las dos mitades apagadas */
.rc-trk i{position:absolute;inset:0;background:color-mix(in srgb,var(--muted) 9%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 24%,transparent)}
.rc-trk i:first-child{border-radius:12px 0 0 12px;clip-path:var(--clL)}
.rc-trk i:last-child{border-radius:0 12px 12px 0;clip-path:var(--clR)}
/* selector: una sola pieza de color que viaja entre las dos mitades (su forma se «estira» de una a otra) */
.rc-thumb{--c:var(--danger);z-index:1;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent));
  transition:filter .45s var(--ease)}
.rc-priv-btn[aria-checked="true"] .rc-thumb{--c:var(--success)}
.rc-thumb i{position:absolute;inset:0;border-radius:12px;clip-path:var(--clR);
  background:color-mix(in srgb,var(--c) 26%,var(--surface));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 75%,transparent),inset 0 0 16px color-mix(in srgb,var(--c) 28%,transparent);
  transition:clip-path .5s cubic-bezier(.65,0,.25,1),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.rc-priv-btn[aria-checked="true"] .rc-thumb i{clip-path:var(--clL)}
/* etiquetas (encima del selector) */
.rc-h{z-index:2}
.rc-h-l{--c:var(--success)} .rc-h-r{--c:var(--danger)}
.rc-h i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;
  font-style:normal;font-size:.86rem;font-weight:700;white-space:nowrap;color:var(--muted);
  transition:color .3s var(--ease)}
.rc-h-l i{padding:0 calc(50% + 2px) 0 8px}
.rc-h-r i{padding:0 8px 0 calc(50% + 2px)}
.rc-h svg{width:17px;height:17px;flex:none}
.rc-h.on i{color:var(--c);transition-delay:.12s}
.rc-priv-btn:hover .rc-h:not(.on) i{color:var(--text)}
/* al cambiar: destello que acompaña el viaje, pulso de brillo y salto del ícono que llega */
@keyframes rcIcPop{0%{transform:scale(.4) rotate(-40deg);opacity:0}55%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:none}}
@keyframes rcGlowPulse{0%{filter:drop-shadow(0 0 0 transparent)}40%{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--c) 90%,transparent))}100%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent))}}
@keyframes rcFlashR{0%{opacity:.55;transform:translateX(-70%)}100%{opacity:0;transform:translateX(70%)}}
@keyframes rcFlashL{0%{opacity:.55;transform:translateX(70%)}100%{opacity:0;transform:translateX(-70%)}}
.rc-thumb i::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--c) 55%,#fff) 50%,transparent 70%)}
.rc-priv-btn.rc-pulse .rc-thumb{animation:rcGlowPulse .6s ease-out both}
.rc-priv-btn.rc-pulse[aria-checked="false"] .rc-thumb i::after{animation:rcFlashR .6s ease-out both}
.rc-priv-btn.rc-pulse[aria-checked="true"] .rc-thumb i::after{animation:rcFlashL .6s ease-out both}
.rc-priv-btn.rc-pulse .rc-h.on svg{animation:rcIcPop .5s cubic-bezier(.3,1.4,.5,1) .15s both}
@media (max-width:380px){.rc-h i{font-size:.8rem;gap:5px}.rc-h svg{width:15px;height:15px}}
@media (prefers-reduced-motion:reduce){.rc-priv-btn,.rc-priv-btn *{animation:none!important;transition:none!important}}
/* ---- interruptores sí/no de los modales: verde = sí (activado) · rojo = no (desactivado), con transición ---- */
.modal .switch i{background:color-mix(in srgb,var(--danger) 18%,var(--surface));
  border-color:color-mix(in srgb,var(--danger) 62%,transparent);
  transition:background-color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.modal .switch i::after{background:var(--danger);
  transition:transform .3s cubic-bezier(.34,1.45,.64,1),background-color .28s var(--ease),box-shadow .28s var(--ease)}
.modal .switch input:checked+i{background:color-mix(in srgb,var(--success) 26%,var(--surface));
  border-color:color-mix(in srgb,var(--success) 72%,transparent);
  box-shadow:0 0 10px -2px color-mix(in srgb,var(--success) 55%,transparent)}
.modal .switch input:checked+i::after{background:var(--success)}
/* tamaño único para todos los modales (el mismo que tenía Notas): 50×28 */
.modal .switch{width:50px;height:28px}
.modal .switch i::after{top:3px;left:3px;width:20px;height:20px}
.modal .switch input:checked+i::after{transform:translateX(22px)}
/* ---- modal de notas: opciones y switches más grandes ---- */

/* campo de contraseña con ojo */
.pass-wrap{position:relative;display:flex;align-items:stretch}
.pass-wrap .input{padding-right:29px}
.pass-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;
  border-radius:7px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)}
.pass-eye:hover{background:var(--surface-2);color:var(--text)}
.pass-eye .ey2{display:none}
.pass-eye.show .ey1{display:none}
.pass-eye.show .ey2{display:block}

/* slider de zoom (el del perfil y el del acomodo comparten el dibujo) */
#crop-zoom,#hc-zoom{-webkit-appearance:none;appearance:none;background:transparent}
#crop-zoom::-webkit-slider-runnable-track,#hc-zoom::-webkit-slider-runnable-track{height:4px;border-radius:111px;background:var(--border)}
#crop-zoom::-webkit-slider-thumb,#hc-zoom::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-4px;border-radius:50%;
  background:var(--surface);border:2px solid var(--primary);box-shadow:0 0 0 2px var(--ring);cursor:grab}
#crop-zoom::-moz-range-track,#hc-zoom::-moz-range-track{height:4px;border-radius:111px;background:var(--border)}
#crop-zoom::-moz-range-thumb,#hc-zoom::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--surface);border:2px solid var(--primary)}

/* los paneles flotantes usan la misma barra, siempre visible */
.menu::-webkit-scrollbar,.dd-panel::-webkit-scrollbar,.modal-box.dp::-webkit-scrollbar,.msc-body::-webkit-scrollbar{width:4px;height:4px}
.menu::-webkit-scrollbar-thumb,.dd-panel::-webkit-scrollbar-thumb,.modal-box.dp::-webkit-scrollbar-thumb,.msc-body::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--muted) 34%, transparent);border-radius:111px}
.menu::-webkit-scrollbar-track,.dd-panel::-webkit-scrollbar-track,.modal-box.dp::-webkit-scrollbar-track,.msc-body::-webkit-scrollbar-track{background:transparent}
.msc-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.msc-body::-webkit-scrollbar-thumb:active{background:var(--primary)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes shine{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ============ CAPA DE PRECISIÓN (v21) ============ */
/* números alineados: cualquier lista de montos se lee como tabla */
main b, .stat b, .kv b, .mv .amt b, .cald b, .ntfi .ago, .goal .g-top b{font-variant-numeric:tabular-nums}
/* tocar un control no selecciona texto: se comporta como una herramienta, no como una página.
   Las notas y los montos siguen siendo seleccionables (se copian). */
.btn,.fbtn,.sbtn,.seg,.nav-item,.chip,.pill,.tick,.qbtn,.ibtn,.m-x,.pick,.dd-opt,.dp-day,.dp-mon,.dp-yr,
.theme-btn,.menu-item,.nf-row,.ntfi,.cald,.famm,.stat,.switch,.tab,.qb{user-select:none;-webkit-user-select:none}
button,[role=button]{-webkit-tap-highlight-color:transparent}
/* el scroll fino aplica a todos los paneles, no sólo a la barra lateral */
.m-body,.ntf-list,.msc-body,.menu,.dd-panel,.side-mid,.modal-box.dp,.modal-box.form{scrollbar-width:thin}
/* los micro-títulos hablan todos igual en la app entera */
.card h3,.card h4{letter-spacing:-.012em}
.sec,.mini-label,.side-label,.m-kicker,.ntf-top h4,.menu h4,.field label,.stat>span:not(.sv):not(.tiny),
.brand span,.flag,.rot,.li .lock,.tkd em,.nav-item .tag,.side-label{letter-spacing:.09em}

/* ============ CREACIÓN RÁPIDA + CALENDARIO PERSONAL (v24) ============ */
.qb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}
.qb{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;text-align:left;font:inherit;color:var(--text);
  border:1px solid var(--edge);border-radius:var(--ctl-r);background:var(--surface);cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t)}
.qb:hover{border-color:var(--line-p);background:var(--tint)}
.qb:active{background:var(--tint-2)}
.qb>i{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;
  background:var(--surface-2);color:var(--primary);font-style:normal;font-weight:800;font-size:.78rem}
.qb>i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qb.out>i{color:var(--ink-bad)}
.qb.in>i{color:var(--ink-ok)}
.qb>span{min-width:0;flex:1}
.qb b{display:block;font-size:.73rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb small{display:block;font-size:.6rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qb:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
@media (max-width:400px){ .qb-grid{grid-template-columns:repeat(2,1fr)} .qb small{display:none} }
/* el tildado de "compartir" vive en la misma fila del evento */
.pcs{display:inline-flex;align-items:center;gap:5px;flex:none}
.pcs .fbtn{border-style:dashed}
.pcs .fbtn.on{border-style:solid}
.ev-p .nm::after{content:'tuyo';margin-left:6px;padding:1px 5px;border-radius:111px;font-size:.55rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:var(--tint-2);vertical-align:1px}

/* ============================================================
   HOVER DE LOS BOTONES (v40, item 7) — destello que barre + brillo que late
   Una sola receta para todo el sistema:
   · ::before es una franja de luz que cruza el botón de izquierda a derecha (el destello);
   · los botones fuertes además laten dos veces de brillo (parpadeo), y los chicos dan un pulso;
   · la franja vive en un ::before con z-index:-1 y el botón con isolation:isolate: se pinta arriba
     del relleno pero DEBAJO de la letra. Con la luz por encima del texto, el destello al pasar lo
     dejaba en 1,04:1 (medido en los 20 temas) — se leía mal justo en el cuadro más brillante.
   · igual le cambia el fondo que tiene detrás, así que la luz blanca topó en 14 %: el presupuesto
     más apretado es el botón invertido de mint, que con 16 % de blanco ya queda en 3:1.
   · el latido de brillo sí arrastra la letra (es un filter del botón entero), por eso su tope es
     1,12 y el del pulso 1,10: multiplicando los dos canales, la letra clara se achica contra su piso.
   · está hecho con `animation`, no con `transition`: por eso no tocamos las transition que cada
     botón ya trae declaradas (romperíamos su cambio de color) y nada cambia de alto ni de ancho.
   Con el switch "Animaciones y brillos" apagado (#anim-kill → animation:none !important) o con
   prefers-reduced-motion la franja queda en su estado base: invisible. Y `both` deja el último
   cuadro con opacity:0, así que al soltar el mouse no queda ningún resto pintado.
   ============================================================ */
.btn,.fbtn,.pick,.qbtn,.ibtn,.qb,.sbtn,.menu-item,.nav-item,.theme-btn,.tab,.dp-day,.dp-mon,.dp-yr,.dock-b .dic{position:relative;overflow:hidden;isolation:isolate}
/* Éstos ya están posicionados (absolute) y no hay que tocarles la caja: sólo recortar el destello */
.m-x,.pass-eye{overflow:hidden;isolation:isolate}
.btn,.fbtn,.pick,.qbtn,.ibtn,.qb,.sbtn,.menu-item,.nav-item,.theme-btn,.tab,.dp-day,.dp-mon,.dp-yr,.m-x,.pass-eye,.dock-b .dic{--sheen:color-mix(in srgb, var(--text) 24%, transparent)}
/* sobre un relleno sólido de color la luz es blanca; sobre superficie o tinte, tinta del tema al 24 % */
.btn-primary,.btn-inverse,.hero .btn,.herobar .btn-inverse,.fbtn.on,.dock-b.on .dic{--sheen:rgba(255,255,255,.14)}
/* .tick queda afuera a propósito: su área táctil ampliada vive en un ::after que sale del círculo,
   y overflow:hidden se comería ese margen (en Seguimiento hay que poder tocarlo desde más lejos) */
.btn::before,.fbtn::before,.pick::before,.qbtn::before,.ibtn::before,.qb::before,.sbtn::before,.menu-item::before,
.nav-item::before,.theme-btn::before,.tab::before,.dp-day::before,.dp-mon::before,.dp-yr::before,.m-x::before,.pass-eye::before,.dock-b .dic::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 32%, var(--sheen) 46%, color-mix(in srgb, var(--sheen) 30%, transparent) 54%, transparent 70%);
  transform:translateX(-130%);
}
.btn:hover:not(:disabled)::before,.fbtn:hover::before,.pick:hover::before,.qbtn:hover::before,.ibtn:hover::before,.qb:hover::before,
.sbtn:hover::before,.menu-item:hover::before,.nav-item:hover::before,.theme-btn:hover::before,.tab:hover::before,
.dp-day:hover::before,.dp-mon:hover::before,.dp-yr:hover::before,.m-x:hover::before,.pass-eye:hover::before,.dock-b:hover .dic::before{
  animation:hxBarrido .68s var(--ease) 1 both;
}
@keyframes hxBarrido{
  0%{opacity:0;transform:translateX(-130%)} 14%{opacity:1}
  86%{opacity:.9} 100%{opacity:0;transform:translateX(130%)}
}
/* el parpadeo de los botones que mandan: dos latidos de brillo al entrar con el mouse */
@keyframes hxLatido{0%,100%{filter:brightness(1)}20%{filter:brightness(1.12)}42%{filter:brightness(1.01)}62%{filter:brightness(1.08)}82%{filter:brightness(1.02)}}
.btn-primary:hover:not(:disabled),.btn-inverse:hover,.hero .btn:hover:not(:disabled),.herobar .btn-inverse:hover{animation:hxLatido 1.15s var(--ease) 1}
/* y un pulso corto en los controles chicos o de superficie */
@keyframes hxBrillo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
.qbtn:hover,.ibtn:hover,.m-x:hover,.tick:hover,.theme-btn:hover,.tab:hover,.pass-eye:hover,.fbtn:hover:not(.on),.pick:hover,.dp-day:hover,.dock-b:hover .dic{animation:hxBrillo .5s var(--ease) 1}
/* ============================================================
   #97 · SISTEMA DE BOTONES — lenguaje Figma para los ~25 controles
   pulsables de la app. Jerarquía en tres niveles: sólido (primario),
   tintado (secundario) y transparente con hairline (terciario, reservado
   para los heroes). Radios en escala 8/10/13 + pill, elevación en dos capas
   (contacto + halo teñido) y una sola respuesta táctil en todo: sube 1 px al
   entrar, se aplasta y escala .985 al tocar, anillo de foco a 2 px.
   ============================================================ */
:root{
  --b-r-sm:8px; --b-r:10px; --b-r-lg:13px; --b-r-pill:111px;
  --b-hair:color-mix(in srgb, var(--text) 12%, transparent);
  --b-hair-2:color-mix(in srgb, var(--text) 22%, transparent);
  --b-fill:color-mix(in srgb, var(--text) 4%, var(--surface-2));
  --b-fill-2:color-mix(in srgb, var(--text) 9%, var(--surface-2));
  --b-touch:0 1px 1.5px rgba(9,14,26,.12);
  --b-el:0 1px 1.5px rgba(9,14,26,.12), 0 5px 12px -7px var(--glow-p);
  --b-el-hi:0 2px 4px rgba(9,14,26,.14), 0 12px 22px -10px var(--glow-p);
  --b-soft:0 1px 2px rgba(9,14,26,.08), 0 6px 16px -12px rgba(9,14,26,.34);
  --b-soft-hi:0 2px 4px rgba(9,14,26,.10), 0 12px 22px -14px rgba(9,14,26,.42);
  --b-inner:inset 0 1px 0 rgba(255,255,255,.14);
  --b-inset:inset 0 1px 2px rgba(9,14,26,.07);
  --b-tr:transform var(--t) var(--ease), background-color var(--t) var(--ease),
    border-color var(--t) var(--ease), color var(--t) var(--ease),
    box-shadow var(--t2) var(--ease), filter var(--t) var(--ease), opacity .2s ease;
}
/* ---------- base común: la misma curva, la misma respuesta ---------- */
.btn{border-radius:var(--b-r);-webkit-tap-highlight-color:transparent;
  user-select:none;transition:var(--b-tr)}
.btn-lg{border-radius:var(--b-r-lg);gap:7px}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.45}
/* ---------- primer nivel: el sólido, con luz de borde arriba y halo ---------- */
.btn-primary{border-color:color-mix(in srgb, var(--deep) 88%, var(--text));box-shadow:var(--b-inner), var(--b-el)}
.btn-primary:hover:not(:disabled){box-shadow:var(--b-inner), var(--b-el-hi)}
.btn-primary:active:not(:disabled){box-shadow:var(--b-inner), var(--b-touch)}
/* ---------- segundo nivel: tintado (antes era blanco plano con borde) ---------- */
.btn-ghost{background:var(--b-fill);border-color:var(--b-hair);box-shadow:var(--b-soft)}
.btn-ghost:hover:not(:disabled){background:var(--b-fill-2);border-color:var(--b-hair-2);box-shadow:var(--b-soft-hi)}
.btn-ghost:active:not(:disabled){box-shadow:var(--b-inset)}
/* ---------- los de ícono: semántica intacta, sólo radio, sombra y presión ---- */
.ai{border-radius:var(--b-r-sm);transition:var(--b-tr)}
.ai.grande{border-radius:11px}
.ai.mini{border-radius:7px}
.ai:hover:not(:disabled){transform:translateY(-1px)}
.ai:active:not(:disabled){transform:translateY(0) scale(.96)}
.ai.ai-ok,.ai.ai-edit,.ai.ai-del{box-shadow:var(--b-inner), var(--b-soft)}
.ai.ai-ok:hover:not(:disabled),.ai.ai-edit:hover:not(:disabled),.ai.ai-del:hover:not(:disabled){
  box-shadow:var(--b-inner), var(--b-soft-hi)}
.ai.mini,.ai.mini.ai-ok,.ai.mini.ai-edit,.ai.mini.ai-del,.ai.mini.ai-neu{box-shadow:none}
.ai.mini:hover:not(:disabled){box-shadow:var(--b-soft)}
.ai.ai-neu{box-shadow:var(--b-soft)}
.ai.ai-neu:hover:not(:disabled){box-shadow:var(--b-soft-hi)}
.ai:disabled{opacity:.45}
.btn-icon{border-radius:var(--b-r-sm);background:var(--b-fill);border-color:var(--b-hair);box-shadow:var(--b-soft)}
.btn-icon:hover:not(:disabled){background:var(--b-fill-2);border-color:var(--b-hair-2)}
.btn-icon.has{background:var(--tint);border-color:var(--line-p);box-shadow:var(--b-soft)}
/* ---------- control segmentado: riel hundido y thumb levantado ---------- */
.seg{border-radius:12px;border-color:var(--b-hair);background:var(--b-fill);box-shadow:var(--b-inset)}
.sbtn{border-radius:10px;transition:var(--b-tr)}
.sbtn:hover{background:var(--b-fill-2);color:var(--text)}
.sbtn.on{background:color-mix(in srgb, var(--primary) 20%, var(--surface));color:var(--ink-p);
  box-shadow:0 0 0 1px var(--line-p), 0 1px 2px rgba(9,14,26,.10), 0 4px 10px -6px var(--glow-p)}
.sbtn:active:not(.on){transform:scale(.985)}
/* ---------- píldoras de filtro ---------- */
.fbtn{border-radius:var(--b-r-pill);background:var(--b-fill);border-color:var(--b-hair);transition:var(--b-tr)}
.fbtn:hover{background:var(--b-fill-2);border-color:var(--b-hair-2);color:var(--text)}
.fbtn:active{transform:scale(.98)}
.fbtn.on{background:var(--primary);border-color:var(--deep);color:var(--on-primary);box-shadow:var(--b-inner), var(--b-el)}
/* ---------- pestañas internas, filas de menú y dropdown ---------- */
.tab{border-radius:9px;transition:var(--b-tr)}
.tab.on{box-shadow:0 0 0 1px var(--edge), var(--b-soft)}
.menu-item{border-radius:9px;transition:var(--b-tr)}
.menu-item:active{transform:scale(.99);background:var(--tint-2)}
.dd-opt{border-radius:9px;transition:var(--b-tr)}
.dd-opt:active{transform:scale(.99)}
/* ---------- disparadores de campo y flechas ---------- */
.pick{border-radius:var(--ctl-r);border-color:var(--b-hair);box-shadow:var(--b-inset)}
.pick:hover{border-color:var(--b-hair-2)}
.mbtn{border-radius:12px;border-color:var(--b-hair);background:var(--b-fill);transition:var(--b-tr)}
.mbtn:hover{border-color:var(--line-p);background:var(--b-fill-2);color:var(--ink-p)}
.mbtn:active{transform:scale(.95)}
/* ---------- la family de cuadraditos mínimos ---------- */
.ibtn{border-radius:var(--b-r-sm);transition:var(--b-tr)}
.ibtn:hover{background:var(--b-fill-2);border-color:var(--b-hair);color:var(--text)}
.ibtn:active{transform:scale(.92)}
.qbtn{border-radius:var(--b-r-sm);background:var(--b-fill);border-color:var(--b-hair);transition:var(--b-tr)}
.qbtn:hover{background:var(--b-fill-2);border-color:var(--line-p);color:var(--ink-p);box-shadow:var(--b-soft)}
.qbtn:active{transform:scale(.93)}
.m-x{border-radius:9px;transition:var(--b-tr)}
.m-x:hover{background:var(--b-fill-2);border-color:var(--b-hair);color:var(--text)}
.m-x:active{transform:scale(.9)}
.tick{transition:var(--b-tr)}
.tick.on{box-shadow:var(--b-inner), var(--b-soft)}
.tick:active{transform:scale(.9)}
/* ---------- el strip «ícono + color» y los selectores de tema ---------- */
.pk-btn{border-radius:10px;border-color:var(--b-hair);background:var(--b-fill);transition:var(--b-tr)}
.pk-btn:hover{border-color:var(--line-p);background:var(--b-fill-2);box-shadow:var(--b-soft)}
.pk-btn:active{transform:scale(.95)}
.theme-btn{border-radius:10px;transition:var(--b-tr)}
.theme-btn:active{transform:scale(.98)}
/* ---------- las tarjetas tocables de creación rápida ---------- */
.qb{transition:var(--b-tr)}
.qb:hover{box-shadow:var(--b-soft)}
.qb:active{transform:scale(.995)}
.me-btn{border-color:var(--b-hair);transition:var(--b-tr)}
.me-btn:hover{box-shadow:var(--b-soft)}
/* ---------- foco: un solo anillo, 2 px y corrido 2 px ---------- */
.fbtn:focus-visible,.btn:focus-visible,.pick:focus-visible,.nav-item:focus-visible,
.menu-item:focus-visible,.tab:focus-visible,.dd-opt:focus-visible,.dp-day:focus-visible,
.dp-mon:focus-visible,.dp-yr:focus-visible,.qbtn:focus-visible,.ibtn:focus-visible,.tick:focus-visible,
.m-x:focus-visible,.theme-btn:focus-visible,.mbtn:focus-visible,.pk-btn:focus-visible,.qb:focus-visible,
.me-btn:focus-visible,.cald:focus-visible{outline-offset:2px}

/* ============================================================
   v50 · SISTEMA DE DISEÑO 2026
   Una sola capa encima de los 20 temas: todo sale de las variables del tema
   (--primary, --surface, --text…), así que cada tema conserva su identidad.
   Escala de radios 8/12/16/24, elevación en dos capas, resorte sólo donde
   la persona actúa (abrir, tocar, confirmar) y reposo en todo lo demás.
   ============================================================ */
:root{
  --spring:cubic-bezier(.34,1.45,.52,1);
  --out:cubic-bezier(.16,1,.3,1);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:24px; --ctl-r:10px;
  --glass-2:color-mix(in srgb, var(--surface) 72%, transparent);
  --hair:color-mix(in srgb, var(--text) 9%, transparent);
  --hair-2:color-mix(in srgb, var(--text) 16%, transparent);
  --lift-1:0 0 0 1px var(--hair), 0 1px 2px rgba(9,14,26,.06), 0 8px 20px -14px rgba(9,14,26,.30);
  --lift-2:0 0 0 1px var(--hair), 0 2px 4px rgba(9,14,26,.08), 0 18px 36px -18px rgba(9,14,26,.42);
  --lift-3:0 0 0 1px var(--hair-2), 0 4px 10px rgba(9,14,26,.10), 0 30px 60px -22px rgba(9,14,26,.55);
  --dock-bg:color-mix(in srgb, var(--raise) 78%, transparent);
}
html{scroll-behavior:smooth}
body{font-feature-settings:"cv11","ss03","calt","kern";letter-spacing:-.003em}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 22%,transparent) transparent}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:inherit}
h1,h2,h3,h4{letter-spacing:-.028em;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- se apagan los barridos de brillo y latidos genéricos ---------- */
.btn::before,.fbtn::before,.pick::before,.qbtn::before,.ibtn::before,.qb::before,.sbtn::before,.menu-item::before,
.nav-item::before,.theme-btn::before,.tab::before,.dp-day::before,.dp-mon::before,.dp-yr::before,.m-x::before,
.pass-eye::before,.dock-b .dic::before{display:none !important}
.btn-primary:hover:not(:disabled),.btn-inverse:hover,.hero .btn:hover:not(:disabled),.herobar .btn-inverse:hover,
.qbtn:hover,.ibtn:hover,.m-x:hover,.tick:hover,.theme-btn:hover,.tab:hover,.pass-eye:hover,.fbtn:hover:not(.on),
.pick:hover,.dp-day:hover,.dock-b:hover .dic{animation:none !important}

/* ---------- etiquetas en minúscula normal: se leen, no gritan ---------- */
.field label{text-transform:none;letter-spacing:-.005em;font-size:.68rem;font-weight:600;color:var(--ink-soft)}
.side-label,.mini-label,.m-kicker,.stat>span:not(.sv):not(.tiny),.li .lock{text-transform:none;letter-spacing:0;font-weight:650}
.m-kicker{font-size:.66rem;color:var(--ink-p)}
.brand span{text-transform:none;letter-spacing:.01em}

/* ---------- barra superior: vidrio líquido ---------- */
header.topbar{background:color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  border-bottom:1px solid var(--hair);box-shadow:none}
.tb-title{font-weight:750;letter-spacing:-.03em}
.tb-mark{border-radius:10px;box-shadow:0 0 0 1px var(--hair), 0 4px 12px -6px var(--glow-p)}
header.topbar .btn-icon{border-radius:12px;background:transparent;border-color:transparent;box-shadow:none}
header.topbar .btn-icon:hover:not(:disabled){background:var(--hover)}
.net-chip{background:var(--glass-2);border-color:var(--hair);backdrop-filter:blur(8px)}
.avatar{box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--hair-2);transition:box-shadow .3s var(--out), transform .3s var(--spring)}
.avatar:hover{box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--primary);transform:scale(1.05)}

/* ---------- barra lateral ---------- */
nav.side{background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-right:1px solid var(--hair)}
.nav-item{border-radius:12px;transition:background-color .2s var(--out), color .2s, transform .2s var(--out)}
.nav-item:hover{background:var(--hover)}
.nav-item:active{transform:scale(.985)}
.nav-item svg{border-radius:9px;transition:background-color .25s var(--out), color .2s, transform .35s var(--spring), box-shadow .25s}
.nav-item:hover svg{transform:scale(1.06)}
.nav-item.on{background:linear-gradient(90deg, var(--tint-2), var(--tint));font-weight:700}
.nav-item.on svg{box-shadow:0 0 0 1px var(--deep), 0 6px 14px -6px var(--glow-p)}
.nav-item.on::after{height:16px;width:4px;box-shadow:0 0 12px var(--glow-p)}
.side-foot{border-top-color:var(--hair)}
.me-btn{border-radius:14px;background:var(--glass-2);border-color:var(--hair)}
.dock-edit{border-radius:12px;border-style:solid;border-color:var(--hair);background:var(--glass-2)}
.dock-edit:hover{border-color:var(--line-p)}
.scrim{backdrop-filter:blur(6px);transition:opacity .4s var(--out)}

/* ---------- hero ---------- */
.hero{border-radius:var(--r-xl);isolation:isolate;border:0;
  box-shadow:var(--lift-2), inset 0 1px 0 color-mix(in srgb,var(--on-primary) 22%,transparent)}
.hero:not(.has-bg){background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--primary-2) 70%,transparent), transparent 56%),
  radial-gradient(90% 120% at 0% 110%, color-mix(in srgb,var(--deep) 60%,transparent), transparent 60%),
  var(--primary)}
.hero:not(.has-bg)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,color-mix(in srgb,var(--on-primary) 14%,transparent),transparent 42%)}
#v-inicio>.stack>.hero{padding:26px 22px 22px}
#v-inicio>.stack>.hero h2{font-size:clamp(1.15rem,5.2vw,1.5rem);font-weight:700;letter-spacing:-.04em}
.hero h2{letter-spacing:-.04em}
.hero .chip{backdrop-filter:blur(10px);font-weight:650}
.hero-actions{border-top-color:color-mix(in srgb,var(--on-primary) 18%,transparent)}
.hero .btn-inverse{box-shadow:0 1px 2px rgba(9,14,26,.2), 0 10px 20px -10px rgba(9,14,26,.45)}
.hero-bloque{border-radius:var(--r-lg);box-shadow:var(--lift-1);border-color:transparent}

/* ---------- superficies ---------- */
.card{border-radius:var(--r-lg);padding:14px;border-color:transparent;box-shadow:var(--lift-1)}
.card:hover{border-color:transparent}
.card h3{letter-spacing:-.025em}
.stat,.goal,.li,.note{border-color:transparent;box-shadow:var(--lift-1)}
.stat{border-radius:14px;padding:7px 12px}
.stat b,.stat .sv,.li .chg-m{font-variant-numeric:tabular-nums;font-feature-settings:"tnum","cv11"}
.li{border-radius:12px;padding:8px 11px;transition:background-color .2s var(--out), box-shadow .25s var(--out)}
.li:hover{background:var(--lift)}
.goal{border-radius:var(--r-lg)}
.chip{border-radius:111px;padding:3px 9px;font-weight:600;background:var(--glass-2);border-color:var(--hair)}
.tabs,.seg{border-radius:14px;background:color-mix(in srgb,var(--text) 6%,var(--surface-2));border-color:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
.tab,.sbtn{border-radius:11px}
.tab.on{box-shadow:0 0 0 1px var(--hair), 0 2px 6px -2px rgba(9,14,26,.25)}
.sbtn.on{box-shadow:0 0 0 1px var(--line-p), 0 2px 8px -3px var(--glow-p)}

/* ---------- campos ---------- */
.input,.pick{min-height:38px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,var(--surface));
  border:1px solid var(--hair-2);box-shadow:inset 0 1px 2px rgba(9,14,26,.05);
  transition:border-color .2s var(--out), box-shadow .3s var(--out), background-color .2s}
.input:hover:not(:focus),.pick:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--border))}
.input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.prefix{border-radius:12px 0 0 12px}
.prefix-wrap .input{border-radius:0 12px 12px 0}
/* ---- campo de monto con "$": una sola caja (símbolo + número) ----
   Antes el símbolo y el cuadro tenían bordes, radios y foco distintos y se veía
   partido. Ahora el contenedor es la caja, y el foco se marca sobre toda la caja. */
.prefix-wrap{display:flex;align-items:stretch;border:1px solid var(--hair-2);border-radius:12px;
  background:var(--surface);overflow:hidden;box-shadow:inset 0 1px 2px rgba(9,14,26,.05);
  transition:border-color .2s var(--out), box-shadow .3s var(--out)}
.prefix-wrap:hover:not(:focus-within){border-color:color-mix(in srgb,var(--text) 30%,var(--border))}
.prefix-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.prefix-wrap .prefix{flex:none;display:flex;align-items:center;padding:0 12px;border:none;
  border-right:1px solid var(--hair-2);border-radius:0;background:var(--surface-2);
  font-size:.8rem;font-weight:700;color:var(--ink-soft);line-height:1}
.prefix-wrap .input{flex:1;min-width:0;width:auto;border:none;border-radius:0;box-shadow:none;background:transparent;
  padding-left:10px;height:auto}
.prefix-wrap .input:focus{border:none;box-shadow:none;background:transparent}

/* ---------- botones: respuesta táctil con resorte ---------- */
.btn{border-radius:12px;min-height:34px;font-weight:650;letter-spacing:-.015em;
  transition:transform .35s var(--spring), background-color .2s var(--out), border-color .2s, box-shadow .3s var(--out), color .2s, opacity .2s}
.btn-lg{border-radius:14px;min-height:42px}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:.12s}
.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 100%,#fff 10%),var(--primary));
  border-color:color-mix(in srgb,var(--deep) 80%,transparent)}
.btn-ghost{border-radius:12px}
.btn-icon{border-radius:12px}
.ai,.ai.grande{border-radius:11px}
.fbtn{padding-inline:12px}
.fbtn.on{box-shadow:0 0 0 1px var(--deep), 0 6px 14px -8px var(--glow-p)}

/* ---------- menús, desplegables y avisos ---------- */
.menu{border-radius:18px;border:0;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--lift-3);padding:7px;transform-origin:top right;
  transform:translateY(-8px) scale(.94);transition:opacity .18s var(--out), transform .38s var(--spring)}
.menu.down{transform-origin:top left}
.menu.up{transform-origin:bottom center}
.menu-item{border-radius:11px}
.toast{border-radius:16px;border:0;box-shadow:var(--lift-3);backdrop-filter:blur(20px);
  background:color-mix(in srgb,var(--raise) 86%,transparent)}

/* ---------- modales: hoja en el celular, tarjeta flotante en PC ---------- */
.modal{background:color-mix(in srgb,var(--scrim) 100%,transparent);backdrop-filter:blur(10px) saturate(130%);
  transition:opacity .3s var(--out)}
.modal-box{border:0;border-radius:var(--r-xl);box-shadow:var(--lift-3);
  background:color-mix(in srgb,var(--raise) 94%,transparent);
  transform:translateY(24px) scale(.96);transition:transform .5s var(--spring), opacity .25s var(--out);opacity:0}
.modal.on .modal-box{transform:none;opacity:1}
.m-head{padding:14px 40px 11px 16px;border-bottom-color:var(--hair)}
.m-head h3{font-size:.95rem;font-weight:700}
.m-body{padding:14px 16px 4px}
.m-foot{padding:11px 16px 14px;border-top-color:var(--hair)}
.m-x{border-radius:50%;background:color-mix(in srgb,var(--text) 8%,transparent);border-color:transparent}
@media(max-width:639px){
  .modal{padding:0;align-content:end;place-items:end center}
  .modal-box{max-width:none;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%)}
  .modal-box::before{content:"";display:block;width:38px;height:4px;border-radius:9px;margin:8px auto 0;
    background:color-mix(in srgb,var(--text) 22%,transparent)}
  .modal-box.msc,.modal-box.form{max-height:92dvh}
}

/* ---------- entrada de vistas: un único movimiento orquestado ---------- */
@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.992);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes stackIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.view.on{animation:viewIn .5s var(--out) both}
.view.on>.stack>*{animation:stackIn .6s var(--out) both}
.view.on>.stack>*:nth-child(2){animation-delay:.05s}
.view.on>.stack>*:nth-child(3){animation-delay:.1s}
.view.on>.stack>*:nth-child(4){animation-delay:.15s}
.view.on>.stack>*:nth-child(n+5){animation-delay:.2s}

/* ============================================================
   BARRA INFERIOR · 4 accesos + «+» central
   ============================================================ */
.dock{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:5px 6px;gap:2px;align-items:center;
  border:0;border-radius:26px;overflow:visible;
  background:var(--dock-bg);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
  box-shadow:var(--lift-3)}
.dock-b{border-radius:18px;transition:color .2s var(--out), transform .3s var(--spring)}
.dock-b:hover{background:transparent}
.dock-b .dic{width:34px;height:28px;border-radius:14px;transition:width .45s var(--spring), background-color .25s var(--out), color .2s, transform .3s var(--spring)}
.dock-b .dic svg{width:18px;height:18px;transition:transform .4s var(--spring)}
.dock-b:hover .dic{background:var(--hover)}
.dock-b:active .dic svg{transform:scale(.86)}
.dock-b.on .dic{width:50px;background:var(--tint-2);color:var(--ink-p);box-shadow:none}
.dock-b.on .dtx{color:var(--ink-p)}
.dock-fab{flex:none;position:relative;width:54px;height:54px;margin:0 6px;transform:translateY(-12px);border:0;border-radius:20px;
  display:grid;place-items:center;cursor:pointer;color:var(--on-primary);-webkit-tap-highlight-color:transparent;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary-2) 70%,var(--primary)),var(--primary) 55%,var(--deep));
  box-shadow:0 0 0 5px var(--bg), 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -8px var(--glow-p), 0 4px 10px rgba(9,14,26,.25);
  transition:transform .5s var(--spring), border-radius .5s var(--spring), box-shadow .3s var(--out), filter .2s}
.dock-fab svg{width:24px;height:24px;transition:transform .55s var(--spring)}
.dock-fab:hover{filter:brightness(1.07);transform:translateY(-14px) scale(1.04)}
.dock-fab:active{transform:translateY(-10px) scale(.93);transition-duration:.12s}
.dock-fab.open{border-radius:50%;transform:translateY(-12px)}
.dock-fab.open svg{transform:rotate(135deg)}
.dock-fab:focus-visible{outline-offset:5px}
@media(min-width:1000px){
  .dock{left:calc((100vw + var(--nav-of)) / 2);right:auto;width:min(480px,calc(100vw - var(--nav-of) - 44px));
    bottom:16px;padding:6px 8px;border-radius:28px}
  .dock-fab{box-shadow:0 0 0 5px var(--bg), 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -8px var(--glow-p), 0 4px 10px rgba(9,14,26,.25)}
}

/* ---------- hoja «Crear» (antes Creación rápida) ---------- */
.qsheet{position:fixed;inset:0;z-index:61;visibility:hidden;pointer-events:none;transition:visibility 0s .35s}
.qsheet.on{visibility:visible;pointer-events:auto;transition-delay:0s}
body.qs-open .dock{z-index:62}
.qs-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .35s var(--out)}
.qsheet.on .qs-scrim{opacity:1}
.qs-panel{position:absolute;left:12px;right:12px;bottom:calc(var(--dock-safe) + 34px);max-width:440px;margin:0 auto;
  max-height:calc(100dvh - var(--h) - var(--dock-safe) - 56px);overflow:auto;overscroll-behavior:contain;
  padding:16px;border-radius:var(--r-xl);background:color-mix(in srgb,var(--raise) 86%,transparent);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);box-shadow:var(--lift-3);
  transform-origin:50% 100%;opacity:0;transform:translateY(26px) scale(.88);
  transition:opacity .2s var(--out), transform .3s var(--out)}
.qsheet.on .qs-panel{opacity:1;transform:none;transition:opacity .25s var(--out), transform .55s var(--spring)}
.qs-panel>h3{font-size:1rem;font-weight:700;letter-spacing:-.035em;margin-bottom:12px}
.qs-g{margin-bottom:12px}
.qs-g:last-child{margin-bottom:0}
.qs-g>h4{font-size:.66rem;font-weight:650;color:var(--muted);letter-spacing:0;margin:0 2px 6px}
.qsheet .qb-grid{grid-template-columns:1fr 1fr;gap:8px}
.qsheet .qb{padding:10px;border-radius:16px;border:0;gap:10px;background:color-mix(in srgb,var(--text) 5%,var(--surface));
  box-shadow:inset 0 0 0 1px var(--hair);opacity:0;transform:translateY(12px) scale(.96);
  transition:transform .5s var(--spring), opacity .3s var(--out), background-color .2s, box-shadow .2s}
.qsheet.on .qb{opacity:1;transform:none}
.qsheet.on .qs-g:nth-child(2) .qb{transition-delay:.04s}
.qsheet.on .qs-g:nth-child(3) .qb{transition-delay:.08s}
.qsheet.on .qs-g:nth-child(4) .qb{transition-delay:.12s}
.qsheet.on .qs-g:nth-child(5) .qb{transition-delay:.16s}
.qsheet .qb:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-p);transform:translateY(-1px)}
.qsheet .qb:active{transform:scale(.96);transition-duration:.1s;transition-delay:0s}
.qsheet .qb>i{width:36px;height:36px;border-radius:12px;font-style:normal;font-size:1.2rem;font-weight:500;
  background:var(--tint);color:var(--ink-p);box-shadow:inset 0 0 0 1px var(--line-p)}
.qsheet .qb>i svg{width:18px;height:18px}
.qsheet .qb.out>i{background:color-mix(in srgb,var(--danger) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 30%,transparent)}
.qsheet .qb.in>i{background:color-mix(in srgb,var(--success) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 30%,transparent)}
.qsheet .qb b{font-size:.72rem;letter-spacing:-.015em;white-space:normal;line-height:1.2}
.qsheet .qb small{display:block;white-space:normal;font-size:.6rem;line-height:1.25;margin-top:1px}
@media(min-width:1000px){
  .qs-panel{left:calc((100vw + var(--nav-of)) / 2);right:auto;width:min(440px,calc(100vw - var(--nav-of) - 44px));
    margin:0;translate:-50% 0;bottom:calc(var(--dock) + 44px)}
}

/* ---------- hueco fijo «+» en el modal de personalizar ---------- */
.slot{border-radius:16px}
.slot-plus{flex:none;width:34px;align-self:stretch;display:grid;place-items:center;border-radius:14px;color:var(--on-primary);
  background:linear-gradient(145deg,var(--primary-2),var(--primary));box-shadow:0 6px 14px -8px var(--glow-p)}
.slot-plus svg{width:16px;height:16px}
.sec-b{border-radius:14px}

/* ---------- acceso: pantalla de ingreso ---------- */
.auth-card{padding:22px;border-radius:var(--r-xl);border:0;box-shadow:var(--lift-3);backdrop-filter:blur(24px)}
.app-ic{border-radius:26%}

@media(prefers-reduced-motion:reduce){
  .view.on,.view.on>.stack>*{animation:none !important}
  .dock-fab,.dock-fab svg,.qs-panel,.qsheet .qb,.modal-box,.menu{transition-duration:.01ms !important}
}


/* ============================================================
   v51 · REDISEÑO COMPLETO — "workspace" 2026
   Lenguaje: paneles flotantes con borde de 1 px (como los marcos de Figma),
   lienzo con retícula de puntos, tipografía Geist, jerarquía por peso y
   tamaño (no por mayúsculas), foco en el contenido. Mismo mecanismo de
   temas: todo sale de --primary / --surface / --text.
   ============================================================ */
:root{
  --font:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-w:268px;
  --h:56px;
  --r:14px; --r-lg:18px; --r-xl:26px;
  --pane:color-mix(in srgb,var(--surface) 82%,transparent);
  --line:color-mix(in srgb,var(--text) 10%,transparent);
  --line-2:color-mix(in srgb,var(--text) 18%,transparent);
  --grid-dot:color-mix(in srgb,var(--text) 11%,transparent);
  --frame:0 0 0 1px var(--line), 0 1px 2px rgba(9,14,26,.05), 0 14px 32px -20px rgba(9,14,26,.38);
}
html{font-size:17px}
body{font-family:var(--font);font-size:.8rem;line-height:1.42;letter-spacing:-.006em;font-feature-settings:"calt","kern","ss01";
  background-color:var(--bg)}
html[data-mode="dark"] body,html[data-mode="light"] body{background-image:
  radial-gradient(var(--grid-dot) 1px, transparent 1.4px),
  radial-gradient(52rem 32rem at 70% -18%, var(--halo1), transparent 70%),
  radial-gradient(36rem 26rem at 0% 108%, var(--halo2), transparent 72%);
  background-size:24px 24px,auto,auto;background-attachment:scroll,fixed,fixed}
b,strong,.stat b,.sv,.amt,.chg-m,[class*="amt"]{font-feature-settings:"tnum","ss01"}

/* ---------- jerarquía de texto ---------- */
.card>h3,.card .row>h3,.vh h2{font-size:.95rem;font-weight:650;letter-spacing:-.03em}
.hint,.tiny,.small{color:var(--ink-soft)}
.glo{opacity:.7;transition:opacity .2s,transform .35s var(--spring)}
.glo:hover{opacity:1;transform:scale(1.12)}

/* ============================================================
   LAYOUT DE PC (≥1000 px): panel lateral flotante + lienzo centrado
   ============================================================ */
@media(min-width:1000px){
  nav.side{top:12px;bottom:12px;left:12px;width:calc(var(--nav-w) - 24px);padding:12px 10px 10px;
    border:0;border-radius:24px;background:var(--pane);
    box-shadow:var(--frame), 0 30px 60px -34px rgba(9,14,26,.5)}
  header.topbar{left:var(--nav-of);height:var(--h);padding:0 22px;background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
  header.topbar::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,var(--bg) 30%,transparent);opacity:.92}
  header.topbar .tb-brand{display:none}
  header.topbar .btn-icon{background:var(--pane);border:0;box-shadow:var(--frame);backdrop-filter:blur(14px)}
  header.topbar .btn-icon:hover:not(:disabled){background:var(--surface)}
  main{padding:calc(var(--h) + 10px) 28px calc(var(--dock) + 56px) calc(var(--nav-of) + 12px)}
  .view{max-width:1120px;margin:0 auto}
  #v-inicio>.stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  #v-inicio>.stack>.hero,#v-inicio>.stack>.hero-bloque{grid-column:1/-1}
  .herobar{left:var(--nav-of);right:0;margin:0 auto}
  .modal-box.form,.modal-box{max-width:470px}
  .modal-box.dp{max-width:360px}
}
@media(min-width:1500px){ .view{max-width:1240px} #v-inicio>.stack{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* marca dentro del panel lateral */
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 12px;margin-bottom:4px}
.side-brand .tb-mark{width:34px;height:34px;border-radius:11px}
.side-brand b{font-size:1rem;font-weight:700;letter-spacing:-.04em}
.side-brand small{display:block;font-size:.62rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:1px}
@media(max-width:999px){ .side-brand{padding-top:6px} }

/* ---------- ítems: icono plano, activo = pastilla ---------- */
.side-label{font-size:.66rem;font-weight:600;color:var(--muted);padding:12px 8px 4px;letter-spacing:0}
.nav-item{height:38px;padding:0 8px;gap:11px;border-radius:11px;font-weight:550;color:var(--ink-soft)}
.nav-item svg{width:19px;height:19px;padding:0;background:transparent;border-radius:0;box-shadow:none;transition:color .2s,transform .4s var(--spring)}
.nav-item:hover{color:var(--text);background:var(--hover)}
.nav-item:hover svg{transform:scale(1.1)}
.nav-item.on{color:var(--text);background:var(--tint-2);font-weight:650;box-shadow:inset 0 0 0 1px var(--line-p)}
.nav-item.on svg{background:transparent;color:var(--primary);box-shadow:none;transform:none}
.nav-item.on::after{display:none}
.side-foot{border-top:0;padding-top:8px}
.dock-edit{height:36px;font-size:.7rem;border-radius:11px;background:transparent;border:1px dashed var(--line-2)}
.me-btn{padding:6px;border-radius:14px;background:var(--surface-2);border:0;box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:999px){
  nav.side{border-radius:0 28px 28px 0;background:color-mix(in srgb,var(--surface) 90%,transparent);
    backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
    box-shadow:none;transition:transform .55s var(--out), box-shadow .4s}
  nav.side.open{box-shadow:30px 0 80px -20px rgba(0,0,0,.6)}
}

/* ---------- barra superior en celular ---------- */
@media(max-width:999px){
  header.topbar{height:var(--h);padding:0 12px;gap:8px}
  .tb-title{font-size:1rem}
}

/* ============================================================
   HERO · lienzo de color con retícula y brillo
   ============================================================ */
.hero{border-radius:var(--r-xl)}
.hero:not(.has-bg)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;border-radius:inherit;
  background-image:radial-gradient(color-mix(in srgb,var(--on-primary) 34%,transparent) 1px,transparent 1.5px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000);mask-image:linear-gradient(115deg,transparent 30%,#000)}
#v-inicio>.stack>.hero{padding:30px 26px 24px;min-height:0}
#v-inicio>.stack>.hero h2{font-size:clamp(1.3rem,5.6vw,1.9rem);font-weight:680;letter-spacing:-.045em;line-height:1.08}
#v-inicio>.stack>.hero .hh-nom{padding:.04em .4em .1em;border-radius:12px}
@media(min-width:1000px){ #v-inicio>.stack>.hero{padding:38px 36px 30px} #v-inicio>.stack>.hero h2{font-size:2.25rem} }
.hero p{font-size:.78rem;opacity:.9}

/* ============================================================
   MARCOS (cards) · borde de 1 px, aire generoso
   ============================================================ */
.card{padding:16px;border-radius:var(--r-lg);background:var(--pane);box-shadow:var(--frame);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.card:hover{box-shadow:var(--frame), 0 16px 40px -28px var(--glow-p)}
.stat,.goal,.li,.note{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.li:hover{box-shadow:0 0 0 1px var(--line-2)}
@media(max-width:639px){
  .card{padding:14px;border-radius:20px}
  main{padding-left:12px;padding-right:12px}
  .stack{gap:12px}
}
.empty,.dashed,[class*="empty"]{border-radius:16px}

/* ============================================================
   BOTONES · una jerarquía: sólido / tintado / fantasma
   ============================================================ */
.btn{min-height:36px;font-size:.76rem;border-radius:12px}
.btn:not(.btn-icon):not(.ai){padding:0 14px}
.btn-icon svg{flex:none}
.btn-lg:not(.btn-icon){padding:0 18px}
.btn-lg{min-height:44px;font-size:.82rem;border-radius:14px}
.btn-primary{background:var(--primary);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);
  border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--deep) 70%,transparent), 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 18px -8px var(--glow-p)}
.btn-primary:hover:not(:disabled){box-shadow:0 0 0 1px var(--deep), 0 1px 0 rgba(255,255,255,.26) inset, 0 12px 24px -8px var(--glow-p)}
.btn-ghost{background:var(--surface-2);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--hover);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-icon{width:36px;height:36px;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.ai{height:34px;width:40px}
.ai.mini{height:28px;width:30px}
.fbtn{height:32px;padding:0 13px;font-size:.72rem;font-weight:600;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.fbtn.on{box-shadow:0 8px 16px -8px var(--glow-p)}
.seg .sbtn{height:32px}
.chip{font-size:.68rem}

/* ============================================================
   TEMAS · selector como paletas
   ============================================================ */
#theme-menu{width:min(94vw,360px);padding:12px;border-radius:16px}
.tm-head{display:flex;flex-direction:column;gap:8px;margin:0 2px 10px}
.tm-head>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tm-head b{font-size:.86rem;font-weight:700;letter-spacing:-.01em}
#tm-cur{font-size:.66rem;color:var(--muted);font-weight:600}
.tm-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.tm-seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.72rem;font-weight:650;padding:7px 0;border-radius:8px;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.tm-seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line)}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.themes[hidden]{display:none}
.theme-btn{display:flex;flex-direction:row;align-items:center;gap:7px;min-width:0;padding:5px;border-radius:11px;background:transparent;border:0;box-shadow:none;color:var(--text);text-align:left;font:inherit}
.theme-btn:hover{background:var(--surface-2)}
.theme-btn.on{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--primary)}
.tp{position:relative;display:block;flex:0 0 62px;width:62px;height:42px;border-radius:8px;overflow:hidden;background:var(--a);box-shadow:0 0 0 1px color-mix(in srgb,var(--e) 14%,transparent);transition:transform var(--t2) var(--ease)}
.theme-btn:hover .tp{transform:translateY(-1px)}
.tp i{position:absolute;display:block}
.tp-side{left:0;top:0;bottom:0;width:22%;background:color-mix(in srgb,var(--d) 70%,var(--a));border-right:1px solid color-mix(in srgb,var(--e) 8%,transparent)}
.tp-card{left:30%;right:8%;top:8px;bottom:7px;border-radius:5px;background:var(--d);box-shadow:0 3px 8px -5px rgba(0,0,0,.4)}
.tp-card u,.tp-card s,.tp-card em{position:absolute;left:6px;height:3px;border-radius:2px;display:block}
.tp-card u{top:6px;width:46%;background:color-mix(in srgb,var(--e) 72%,transparent)}
.tp-card s{top:12px;width:66%;background:color-mix(in srgb,var(--e) 22%,transparent)}
.tp-card em{bottom:5px;width:34%;height:6px;border-radius:3px;background:var(--b)}
.tp-dot{right:12%;bottom:9px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.tp-ok{position:absolute;top:4px;right:4px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);opacity:0;transform:scale(.6);transition:opacity var(--t) var(--ease),transform var(--t2) var(--ease)}
.theme-btn.on .tp-ok{opacity:1;transform:none}
.tp-txt{display:flex;min-width:0;flex-direction:column;gap:1px;padding:0}
.tp-txt b{font-size:.69rem;font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-txt small{font-size:.56rem;color:var(--muted);line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   LOGIN · pantalla partida
   ============================================================ */
#auth{padding:0;place-items:stretch;background:var(--bg)}
.auth-shell{max-width:none;min-height:100dvh;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;align-items:stretch}
.auth-side{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;position:relative;overflow:hidden;isolation:isolate;
  padding:max(22px,env(safe-area-inset-top)) 22px 24px;color:var(--on-primary);
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--primary-2) 75%,transparent),transparent 58%),
    radial-gradient(80% 110% at 0% 120%,color-mix(in srgb,var(--deep) 70%,transparent),transparent 62%),var(--primary)}
.auth-side::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--on-primary) 40%,transparent) 1px,transparent 1.5px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(160deg,transparent 20%,#000);mask-image:linear-gradient(160deg,transparent 20%,#000)}
.auth-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.04em}
.auth-logo .app-ic{width:36px;height:36px}
.auth-h{font-size:clamp(1.5rem,7vw,2.1rem);font-weight:700;letter-spacing:-.05em;line-height:1.05;max-width:16ch}
.auth-tag{color:inherit;opacity:.88;font-size:.8rem;max-width:42ch}
.auth-feats{display:none}
.auth-feats li{color:inherit}
.auth-feats svg{color:inherit}
.auth-main{width:100%;max-width:440px;margin:0 auto;padding:26px 20px calc(30px + env(safe-area-inset-bottom,0px));align-self:center}
.auth-main .brand{display:none}
.auth-card{padding:0;background:transparent;box-shadow:none;border:0;backdrop-filter:none}
.auth-card .tabs{margin-bottom:18px}
.auth-card .btn-lg{margin-top:10px}
.auth-card .input{min-height:44px}
@media(min-width:880px){
  .auth-shell{grid-template-columns:1.1fr 1fr;grid-template-rows:1fr;max-width:none}
  .auth-side{padding:44px 48px;justify-content:space-between;display:flex}
  .auth-h{font-size:clamp(2.4rem,4.4vw,3.6rem);max-width:12ch;margin-top:auto}
  .auth-tag{font-size:.95rem;margin-top:-4px}
  .auth-feats{display:grid;gap:12px;margin-top:10px}
  .auth-feats li{font-size:.82rem;align-items:center;background:color-mix(in srgb,var(--on-primary) 12%,transparent);
    padding:11px 14px;border-radius:14px;backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 16%,transparent)}
  .auth-main{padding:48px;max-width:520px}
}
.db-flag{border-radius:14px}

/* ============================================================
   ANIMACIÓN DE ENTRADA DEL LOGIN (una sola, orquestada)
   ============================================================ */
@keyframes authIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.auth-side>*{animation:authIn .8s var(--out) both}
.auth-side>*:nth-child(2){animation-delay:.08s}.auth-side>*:nth-child(3){animation-delay:.16s}.auth-side>*:nth-child(4){animation-delay:.24s}
.auth-main{animation:authIn .8s .12s var(--out) both}

/* ---------- barra inferior: ajustes finos con la nueva grilla ---------- */
@media(min-width:1000px){ .dock{bottom:18px} }
@media(max-width:999px){ main{padding-bottom:calc(var(--dock-safe) + 40px)} }
@media(prefers-reduced-motion:reduce){ .auth-side>*,.auth-main{animation:none} }

.dock-edit{white-space:nowrap;overflow:hidden}
.dock-edit span{overflow:hidden;text-overflow:ellipsis}
.db-flag .chip,.db-flag .tag{white-space:nowrap;flex:none;height:fit-content}
.db-flag{align-items:center;gap:10px}


#v-inicio>.stack>.hero .chip{max-width:calc(100% - 84px);white-space:normal;line-height:1.25}

/* ============ v3-4 · FONDO FIJO EN CAPA APARTE ============
   background-attachment:fixed obligaba a repintar toda la página en cada cuadro (Android).
   Ahora el cuerpo pinta su fondo normal y una capa fija (body::before) hereda los mismos
   halos/degradés: se ve igual y la GPU la mueve sin repintar. */
body{background-attachment:scroll!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:inherit;background-attachment:scroll!important}

/* ============ v3-4 · CELULAR: menos vidrio y desenfoques más livianos ============
   backdrop-filter recalcula lo que hay detrás en cada cuadro: en táctiles se apaga en
   todo menos la barra superior, la compacta y la barra de abajo (con menos radio).
   Los desenfoques animados se reducen a la mitad y quedan en su propia capa. */
@media (hover:none) and (pointer:coarse), (max-width:760px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .topbar,.herobar,.dock{-webkit-backdrop-filter:blur(8px) saturate(1.2)!important;backdrop-filter:blur(8px) saturate(1.2)!important}
  .hero.fx-humo .hbg::before{filter:blur(0.475em);will-change:transform}
  .hero.fx-neblina .hbg::before{filter:blur(0.25em);will-change:transform}
  .hero.fx-prisma .hbg::before{filter:blur(0.725em);will-change:transform}
  .hero.fx-escaneo .hbg::before{filter:blur(0.055em);will-change:transform}
  .hero.fx-oleaje .hbg::before{filter:blur(0.085em);will-change:transform}
  .hero.fx-destello .hbg::before{filter:blur(0.025em);will-change:transform}
  .hero.fx-brillo .hbg::before{filter:blur(0.15em);will-change:transform}
  .hero.fx-haz .hbg::before{filter:blur(0.275em);will-change:transform}
  .hero.fx-farol .hbg::before{filter:blur(0.2em);will-change:transform}
  .hero.fx-relampago .hbg::before{filter:blur(0.35em);will-change:transform}
  .hero.fx-reflejo .hbg::before{filter:blur(0.11em);will-change:transform}
  .hero.fx-vapor .hbg::before{filter:blur(0.4em);will-change:transform}
  .hero.fx-bruma .hbg::before{filter:blur(0.6em);will-change:transform}
  .hero.fx-nube .hbg::before{filter:blur(0.65em);will-change:transform}
  .hero.fx-polvo .hbg::before{filter:blur(0.025em);will-change:transform}
  .hero.fx-ceniza .hbg::before{filter:blur(0.035em);will-change:transform}
  .hero.fx-nieve .hbg::before{filter:blur(0.045em);will-change:transform}
  .hero.fx-ondula .hbg::before{filter:blur(0.13em);will-change:transform}
  .hero.fx-ritmo .hbg::before{filter:blur(0.09em);will-change:transform}
  .hero.fx-licor .hbg::before{filter:blur(0.275em);will-change:transform}
  .hero.fx-gotas .hbg::before{filter:blur(0.05em);will-change:transform}
  .hero.fx-marea .hbg::before{filter:blur(0.45em);will-change:transform}
  .hero.fx-remolino .hbg::before{filter:blur(0.5em);will-change:transform}
  .hero.fx-eco .hbg::before{filter:blur(0.1em);will-change:transform}
  .hero.fx-persiana .hbg::before{filter:blur(0.065em);will-change:transform}
  .hero.fx-rayas .hbg::before{filter:blur(0.045em);will-change:transform}
  .hero.fx-barrido .hbg::before{filter:blur(0.035em);will-change:transform}
  .hero.fx-cardinal .hbg::before{filter:blur(0.3em);will-change:transform}
  .hero.fx-iridisc .hbg::before{filter:blur(0.95em);will-change:transform}
  .hero.fx-calidoscopio .hbg::before{filter:blur(0.6em);will-change:transform}
  .hero.fx-brasa .hbg::before{filter:blur(0.25em);will-change:transform}
  .hero.fx-vineta .hbg::before{filter:blur(0.25em);will-change:transform}
  .vh-anim::before{filter:blur(0.55em);will-change:transform}
}

/* v3-4: barra compacta en modo copia: el original queda en su lugar y la barra muestra un espejo */


/* ===== FIGMA UI LAYER — v45 · sobre los tokens de cada tema ===== */
html{font-size:17px}
:root{
  --font:'Geist','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-sm:10px;--r:14px;--r-lg:20px;--ctl-r:10px;
  --spring:cubic-bezier(.34,1.4,.64,1);--ease:cubic-bezier(.2,.8,.2,1);
  --h:58px;--dock:64px;
  --dock-safe:calc(var(--dock) + 26px + env(safe-area-inset-bottom,0px));
  --el1:0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent),0 1px 2px rgba(10,15,30,.06),0 6px 16px -10px rgba(10,15,30,.22);
  --el2:0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent),0 2px 4px rgba(10,15,30,.06),0 24px 48px -24px rgba(10,15,30,.38);
  --pop:0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent),0 4px 8px rgba(10,15,30,.08),0 32px 64px -20px rgba(10,15,30,.45);
}
body{font-family:var(--font);font-feature-settings:'ss01','cv11';-webkit-font-smoothing:antialiased;letter-spacing:-.011em;
  background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
h1,h2,h3{letter-spacing:-.03em}
::selection{background:var(--tint-2)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 22%,transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 20%,transparent);border-radius:9px;border:2px solid transparent;background-clip:content-box}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}

/* TOP BAR — barra flotante translúcida */
.topbar{left:10px;right:10px;top:max(8px,env(safe-area-inset-top));height:var(--h);padding:0 10px;border:1px solid var(--edge);border-radius:18px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--el1)}
.tb-title{font-weight:700;font-size:.95rem;letter-spacing:-.035em}
.tb-mark{border-radius:10px;box-shadow:0 0 0 1px var(--edge),0 4px 10px -4px var(--glow-p)}
main{padding:calc(var(--h) + 26px + env(safe-area-inset-top)) 14px calc(var(--dock-safe) + 12px);max-width:1180px}
.view.on{animation:fgIn .42s var(--ease) both}
@keyframes fgIn{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
.stack>*{animation:fgIn .5s var(--ease) both}.stack>:nth-child(2){animation-delay:.05s}.stack>:nth-child(3){animation-delay:.1s}.stack>:nth-child(4){animation-delay:.15s}.stack>:nth-child(n+5){animation-delay:.2s}
.herobar{top:max(8px,env(safe-area-inset-top));left:10px;right:10px;height:var(--h);border:1px solid var(--edge);border-radius:18px;box-shadow:var(--el2);padding:0 10px}

/* SIDEBAR — panel izquierdo estilo Figma */
.side{left:10px;top:10px;bottom:10px;border:1px solid var(--edge);border-radius:22px;box-shadow:var(--pop);padding:12px 10px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)}
.side-brand b{font-weight:700;letter-spacing:-.03em}
.side-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:12px 10px 5px;opacity:.85}
.nav-item{position:relative;padding:8px 10px;border-radius:12px;font-size:.8rem;font-weight:550;gap:10px;transition:background .18s,color .18s,transform .18s var(--spring)}
.nav-item:hover{transform:translateX(2px)}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.8}
.nav-item.on{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 16px -8px var(--glow-p),inset 0 1px 0 rgba(255,255,255,.18)}
.nav-item.on svg{opacity:1}

/* DOCK — bottom bar flotante en cápsula */
.dock{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px;gap:2px;border:1px solid var(--edge);border-radius:24px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);box-shadow:var(--pop)}
.dock-b{min-height:52px;border-radius:18px;gap:4px;font-weight:600;transition:background .2s,color .2s,transform .25s var(--spring)}
.dock-b:active{transform:scale(.92)}
.dock-b .dic{width:38px;height:28px;border-radius:12px;transition:background .2s,transform .3s var(--spring)}
.dock-b.on .dic{transform:translateY(-1px) scale(1.06);box-shadow:0 8px 18px -8px var(--glow-p),inset 0 1px 0 rgba(255,255,255,.2);border-color:transparent}
@media(min-width:1000px){
  :root{--nav-of:calc(var(--nav-w) + 20px)}
  .dock{left:calc((100vw + var(--nav-of)) / 2);bottom:18px;border-radius:26px;width:min(480px,calc(100vw - var(--nav-of) - 44px))}
  html[data-ui] header.topbar{left:var(--nav-of);right:14px;padding:0 14px}
  html[data-ui] .herobar{left:var(--nav-of);right:14px}
  html[data-ui] main{max-width:none;margin:0;padding:calc(var(--h) + 34px) 22px calc(var(--dock-safe) + 12px) calc(var(--nav-of) + 4px)}
}

/* HERO — mesh gradient + grilla de puntos */
.hero{border-radius:24px;padding:16px 16px;border:0;color:var(--on-primary);
  background:radial-gradient(520px 260px at 100% 0,color-mix(in srgb,#fff 26%,transparent),transparent 62%),radial-gradient(420px 260px at 0 120%,color-mix(in srgb,#000 30%,transparent),transparent 60%),
  linear-gradient(135deg,color-mix(in srgb,var(--primary) 100%,#fff 8%),color-mix(in srgb,var(--primary) 70%,#000));
  box-shadow:var(--el2),inset 0 1px 0 rgba(255,255,255,.28)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000);mask-image:linear-gradient(115deg,transparent 30%,#000);pointer-events:none;z-index:0}
.hero h2{font-size:clamp(1.25rem,4.6vw,1.9rem);font-weight:750;letter-spacing:-.045em;line-height:1.08}
.hero-actions{gap:8px;margin-top:12px}
@media(min-width:640px){.hero{padding:22px}}

/* BOTONES */
.btn{padding:9px 14px;border-radius:12px;font-weight:600;font-size:.76rem;letter-spacing:-.015em;
  transition:transform .22s var(--spring),box-shadow .2s,background .18s,border-color .18s,filter .2s}
.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 100%,#fff 12%),var(--primary));border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.2),0 10px 20px -10px var(--glow-p)}
.btn-primary:hover:not(:disabled){filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 26px -10px var(--glow-p)}
.btn-ghost,.btn-icon{background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:var(--edge);box-shadow:0 1px 2px rgba(10,15,30,.05)}
.btn-ghost:hover:not(:disabled),.btn-icon:hover{background:var(--hover);border-color:var(--ctl-line-2)}
.btn-lg{padding:12px 18px;font-size:.82rem;border-radius:14px}
.btn-icon{width:38px;height:38px;border-radius:12px}
.hero .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:inherit;backdrop-filter:blur(10px)}
.btn-inverse{box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}

/* CARDS, LISTAS, CHIPS */
.card{border:0;border-radius:var(--r-lg);padding:16px;box-shadow:var(--el1);background:color-mix(in srgb,var(--surface) 94%,transparent);transition:box-shadow .25s,transform .3s var(--ease)}
.card:hover{box-shadow:var(--el2)}
.card h3{font-size:.9rem;font-weight:700}
.li{padding:10px 12px;border-radius:14px;border-color:transparent;background:var(--lift);transition:transform .22s var(--ease),background .18s,box-shadow .2s}
.li:hover{background:var(--surface);transform:translateX(3px);box-shadow:var(--el1)}
.list{gap:7px}
.chip{padding:4px 10px;border-radius:99px;font-size:.68rem;background:var(--lift);border-color:var(--edge)}
.stat{border:0;border-radius:16px;padding:9px 14px;box-shadow:var(--el1)}
.empty{border-radius:18px;border:1.5px dashed var(--ctl-line-2);background:transparent;padding:24px 16px}
.seg,.tabs{padding:3px;border-radius:13px;background:color-mix(in srgb,var(--text) 6%,var(--surface-2));border:0}
.sbtn,.tab{border-radius:10px;padding:8px 12px;font-weight:600;transition:background .2s,color .2s,box-shadow .2s}
.tab.on,.sbtn.on{background:var(--surface);box-shadow:0 1px 3px rgba(10,15,30,.14),0 0 0 1px var(--edge)}

/* INPUTS */
.input,.pick{min-height:42px;padding:9px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--ctl-line);font-size:.8rem;box-shadow:0 1px 2px rgba(10,15,30,.04) inset}
.input:hover,.pick:hover{border-color:var(--ctl-line-2)}
.input:focus,.pick.on{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.field label{font-size:.68rem;font-weight:650;letter-spacing:.01em;color:var(--ink-soft)}

/* MODALES — bottom sheet en móvil, tarjeta con spring en PC */
.modal{background:color-mix(in srgb,var(--scrim) 100%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:opacity .28s}
.modal-box{border:0;border-radius:26px;padding:18px;max-width:430px;box-shadow:var(--pop);background:var(--raise);transform:translateY(24px) scale(.96);opacity:0;transition:transform .45s var(--spring),opacity .25s}
.modal.on .modal-box{transform:none;opacity:1}
.modal-box.form{width:min(94vw,460px);border-radius:26px}
.m-head{padding:16px 46px 12px 18px;border-bottom:1px solid var(--edge)}
.m-head h3{font-size:1.02rem;font-weight:720}
.m-kicker{color:var(--ink-p);font-size:.6rem}
.m-x{top:12px;right:12px;width:30px;height:30px;border-radius:99px;background:var(--lift)}.m-x:hover{background:var(--hover);transform:rotate(90deg);transition:transform .3s var(--spring)}
.m-body{padding:16px 18px}
.modal-actions{gap:9px;margin-top:8px}
@media(max-width:639px){
  .modal{place-items:end center;padding:0}
  .modal-box,.modal-box.form{width:100%;max-width:none;border-radius:28px 28px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .modal-box.form{padding-bottom:0}
  .modal-box::before{content:"";display:block;width:38px;height:5px;border-radius:9px;background:var(--ctl-line-2);margin:-6px auto 10px;opacity:.6}
  .modal-box.form::before{position:absolute;top:7px;left:50%;transform:translateX(-50%);margin:0}
}

/* CALENDARIO */
.cal{gap:5px}
.cald{min-height:64px;padding:6px;border-radius:12px;border-color:transparent;background:var(--lift);transition:transform .2s var(--spring),background .15s,box-shadow .2s}
.cald:hover{background:var(--surface);box-shadow:var(--el1);transform:translateY(-2px)}
.cald b{font-size:.72rem}
.cald.today{box-shadow:none;background:var(--tint-2)}.cald.today b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--primary);color:var(--on-primary)}
.cald.sel{border-color:var(--primary);background:var(--tint-2);box-shadow:0 0 0 3px var(--ring)}
.cald.we{background:color-mix(in srgb,var(--danger) 5%,var(--lift))}
.dp-dows span{font-size:.62rem;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
@media(min-width:1000px){.cald{min-height:92px}}

/* INICIO · HERO MÓVIL — compacto: avatar chico arriba a la derecha, texto a todo el ancho, botones en 2 columnas */
.hero-bloque{border:0;border-radius:20px;padding:12px;box-shadow:var(--el1)}
.hero-bloque .btn-ghost{background:var(--lift);box-shadow:inset 0 0 0 1px var(--ctl-line)}
@media(max-width:639px){
  html{font-size:16px}
  html[data-ui] #v-inicio>.stack>.hero{--ha:54px;min-height:0;padding:16px 16px 16px;border-radius:24px}
  html[data-ui] #v-inicio .hero-av{top:14px;right:14px;transform:none}
  html[data-ui] #v-inicio .hero-av .avatar{box-shadow:0 0 0 3px rgba(255,255,255,.4),0 10px 20px -10px rgba(0,0,0,.55)}
  html[data-ui] #v-inicio>.stack>.hero .vh-badge{display:block;max-width:calc(100% - 70px);margin-bottom:10px!important;padding:3px 9px;font-size:.58rem;white-space:nowrap;overflow:hidden}
  html[data-ui] #v-inicio>.stack>.hero .vh-badge{text-overflow:ellipsis}
  html[data-ui] #v-inicio>.stack>.hero .vh-badge .dot{display:inline-block;vertical-align:middle;margin-right:5px}
  html[data-ui] #v-inicio>.stack>.hero h2{font-size:1.3rem;line-height:1.2;padding-right:70px;margin:0;overflow-wrap:anywhere}
  html[data-ui] #v-inicio>.stack>.hero .hh-fecha{font-size:.7rem;margin-top:6px}
  html[data-ui] #v-inicio .hero-edit{top:auto;bottom:10px;right:18px;width:26px;height:26px}
  .hero-bloque .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .hero-bloque .hero-actions .btn-lg{align-self:stretch;height:100%;min-height:44px;width:100%;min-width:0;padding:12px 8px;font-size:.78rem;white-space:normal;text-align:center;line-height:1.2}
}
@media(max-width:359px){.hero-bloque .hero-actions{grid-template-columns:1fr}}

/* AUTH */
.auth-card{border-radius:26px;padding:22px;box-shadow:var(--pop)}
.auth-h{letter-spacing:-.045em}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== CAPA UI ESTILO FIGMA v2 — sólo tokens del tema (se adapta a los 20 temas) ===== */
:root{--fx-spring:cubic-bezier(.2,.9,.25,1.08);--fx-out:cubic-bezier(.16,1,.3,1);--fx-t:transform .18s var(--fx-spring),background-color .16s var(--fx-out),border-color .16s,color .16s,box-shadow .22s var(--fx-out),opacity .2s}
.hero canvas.rfx{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none;border-radius:inherit;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.45) 36%,#000 74%);mask-image:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.45) 36%,#000 74%)}
.hero.rfx-on .hbg::before{display:none!important}

/* --- foco visible universal (usa el color del tema) --- */
:is(button,.pick,.input,select,input,textarea,a[href],[role=button]):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.modal :is(input,select,textarea):not([type=checkbox]):not([type=radio]){border-radius:10px}
.modal :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}

/* --- botones --- */
body .btn{gap:7px;font-weight:600;letter-spacing:-.011em;transition:var(--fx-t)}
body .btn:not(.ai):not(.btn-icon){--pad:8px 15px;min-height:36px}
body .btn-lg:not(.ai):not(.btn-icon){--pad:11px 20px;min-height:44px;border-radius:12px}
body .btn:active:not(:disabled){transform:scale(.97)}
body .btn:disabled,body .ai:disabled{opacity:.5}
.hero .btn-inverse{box-shadow:var(--b-inner),0 10px 20px -12px rgba(0,0,0,.45)}
.hero .btn-ghost{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* --- resto de controles e íconos (antes sin tocar) --- */
:where(.ibtn,.qbtn,.mbtn,.dp-nav,.ic-b,.mk-b,.hk-b,.pk-btn,.pass-eye,.m-x){transition:var(--fx-t)}
.ibtn,.qbtn,.mbtn,.dp-nav,.ic-b,.pk-btn{border-radius:11px}
.qbtn:hover,.mbtn:hover,.dp-nav:hover,.ic-b:hover,.mk-b:hover,.hk-b:hover,.pk-btn:hover{transform:translateY(-1px);box-shadow:var(--b-soft)}
.ibtn:active,.qbtn:active,.mbtn:active,.dp-nav:active,.ic-b:active,.mk-b:active,.hk-b:active,.pk-btn:active{transform:scale(.94)}
.fbtn,.hk-chip,.ic-chip,.net-chip{min-height:28px;font-weight:650;transition:var(--fx-t)}
.pick{min-height:38px;border-radius:11px;transition:var(--fx-t)}
.pick:focus-visible,.pick:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.seg{padding:3px}
.sbtn{min-height:30px;font-weight:650}
.tab{min-height:32px}
.nav-item{border-radius:12px;min-height:38px;transition:var(--fx-t)}
.nav-item:hover{background:var(--tint)}
.menu{border-radius:14px;box-shadow:var(--pop)}
.menu-item,.dd-opt{min-height:34px;border-radius:10px}
.menu-item:hover,.dd-opt:hover{background:var(--tint)}
.toast,.glo-bal{border-radius:14px;box-shadow:var(--pop)}
.qs-panel{border-radius:26px;box-shadow:var(--pop)}
.qsheet .qb{border-radius:16px}

/* --- modales --- */
body .modal{background:var(--scrim);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);transition:opacity .25s var(--fx-out)}
body .modal-box{color:var(--text);border-radius:20px;box-shadow:var(--pop);opacity:0;transform:translateY(16px) scale(.96);transition:transform .42s var(--fx-spring),opacity .22s}
body .modal.on .modal-box{opacity:1;transform:none}
body .modal-box.form{width:min(94vw,440px)}
.m-head{padding:15px 50px 12px 18px;gap:11px;background:var(--raise)}
.m-head h3,.m-tt{font-size:.95rem;font-weight:700;letter-spacing:-.022em}
.m-kicker{font-size:.58rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.m-x{top:11px;right:11px;width:30px;height:30px;border-radius:50%}
.m-x:hover{transform:rotate(90deg)}
.m-body{padding:15px 18px 8px;scrollbar-width:thin}
.m-foot{padding:12px 18px 15px;gap:9px;background:var(--raise)}
.m-foot .btn:not(.ai),.modal-actions .btn:not(.ai){min-height:40px}
body .modal-box:not(.form){padding:18px}
.modal-box h3{font-weight:700;letter-spacing:-.022em}

/* --- celular: hoja inferior con asa --- */
@media(max-width:640px){
 body .modal{padding:0;place-items:end center;align-content:end}
 body .modal-box,body .modal-box.form{width:100%!important;max-width:none!important;border-radius:24px 24px 0 0;opacity:1;transform:translateY(105%);max-height:min(92dvh,calc(100dvh - 20px))}
 body .modal.on .modal-box{transform:none}
 body .modal-box:not(.form){padding:26px 16px calc(16px + env(safe-area-inset-bottom))}
 body .modal-box::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--ctl-line-2);opacity:.75;z-index:4}
 .m-head{padding-top:22px}
 .m-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
 .m-foot .btn:not(.ai),.modal-actions .btn:not(.ai){min-height:46px;font-size:.8rem}
}
@media(pointer:coarse){
 body .btn:not(.ai):not(.btn-icon){min-height:44px}
 body .btn-icon,body .ai:not(.mini){min-height:38px}
 :where(.ibtn,.qbtn,.dp-nav,.ai.mini){position:relative}
 .ibtn::after,.qbtn::after,.dp-nav::after,.ai.mini::after{content:'';position:absolute;inset:-8px}
 .menu-item,.dd-opt,.nav-item{min-height:42px}
}
/* X de cierre con giro en todos los modales (los que llevan título suelto) */
.modal-box>.m-x{top:12px;right:12px}
.modal-box:not(.form)>h3{padding-right:34px}
@media(max-width:640px){body .modal-box>.m-x{top:16px;right:12px}}
@media(prefers-reduced-motion:reduce){body .btn,body .modal-box,.m-x,.pick,.nav-item{transition-duration:.01ms!important}}

/* ===== BOTONES DE ACCIÓN v3: Aceptar · Cancelar · Editar · Modificar · Eliminar ===== */
html body .ai{--c:var(--text);--ink:var(--text);--on:var(--text);position:relative;width:auto;min-width:38px;height:36px;padding:0 10px;border:0;border-radius:11px;gap:7px;font-size:.74rem;font-weight:650;letter-spacing:-.01em;line-height:1;transition:var(--fx-t)}
html body .ai svg{width:16px;height:16px;stroke-width:2.05}
html body .ai.mini{min-width:30px;height:30px;padding:0 7px;border-radius:9px}
html body .ai.mini svg{width:15px;height:15px}
html body .ai.grande{min-width:44px;height:42px;padding:0 12px;border-radius:12px}
html body .ai.grande svg{width:18px;height:18px}
html body .ai.ai-ok{--c:var(--success);--ink:var(--ink-ok);--on:var(--on-ok)}
html body .ai.ai-edit{--c:var(--warn);--ink:var(--ink-warn);--on:var(--on-warn)}
html body .ai.ai-del{--c:var(--danger);--ink:var(--ink-bad);--on:var(--on-bad)}
/* sólido: acciones principales (aceptar, modificar) */
html body .ai.ai-ok,html body .ai.ai-edit,html body .ai.ai-del{background:var(--c);background-image:none;color:var(--on);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 66%,#000),inset 0 1px 0 rgba(255,255,255,.3),0 8px 16px -10px var(--c)}
html body .ai.ai-ok:hover:not(:disabled),html body .ai.ai-edit:hover:not(:disabled),html body .ai.ai-del:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 66%,#000),inset 0 1px 0 rgba(255,255,255,.34),0 12px 22px -10px var(--c)}
/* tintado: filas de lista, Cancelar y Eliminar en los pies de modal */
html body .ai.mini.ai-ok,html body .ai.mini.ai-edit,html body .ai.mini.ai-del,html body .m-foot .ai.ai-del,html body .modal-actions .ai.ai-del{background:color-mix(in srgb,var(--c) 13%,var(--surface));background-image:none;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 38%,transparent)}
html body .ai.mini.ai-ok:hover:not(:disabled),html body .ai.mini.ai-edit:hover:not(:disabled),html body .ai.mini.ai-del:hover:not(:disabled),html body .m-foot .ai.ai-del:hover:not(:disabled),html body .modal-actions .ai.ai-del:hover:not(:disabled){filter:none;background:color-mix(in srgb,var(--c) 24%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 58%,transparent),0 6px 14px -8px var(--c)}
/* neutro: Cancelar / Cerrar / Restablecer */
html body .ai.ai-neu{background:var(--surface-2);background-image:none;color:var(--text);box-shadow:inset 0 0 0 1px var(--b-hair),var(--b-soft)}
html body .ai.ai-neu:hover:not(:disabled){filter:none;background:var(--b-fill-2);box-shadow:inset 0 0 0 1px var(--b-hair-2),var(--b-soft-hi)}
html body .ai.mini.ai-neu{box-shadow:inset 0 0 0 1px var(--b-hair)}
html body .ai:active:not(:disabled){transform:scale(.95)}
html body .ai:focus-visible{outline:2px solid var(--c);outline-offset:2px}
html body .ai:disabled{opacity:.45;box-shadow:none}
/* con palabra: pies de modal siempre; secciones en PC */
html body :is(.m-foot,.modal-actions,.dp-foot) .ai:not(.mini){height:40px;padding:0 15px;border-radius:12px}
html body :is(.m-foot,.modal-actions,.dp-foot) .ai:not(.mini):not(.ancho)[aria-label]::after{content:attr(aria-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
@media(min-width:700px) and (hover:hover){html body :is(main,.herobar) .ai:not(.mini):not(.ancho)[aria-label]::after{content:attr(aria-label);white-space:nowrap}}
/* «Modificar / agregar» (Cuentas, Calendario, Calendario grupal, Lista de compras, Control de stock): solo el ícono también en PC; el nombre queda en el title y en el aria-label */
html body :is(#btn-mgr,#gg-mgr,#pc-tips,#cl-tips,#cp-rub-mgr,#sk-rub-mgr).ai::after{content:none}
@media(max-width:640px){html body :is(.m-foot,.modal-actions,.dp-foot) .ai:not(.mini){height:46px}}
/* rótulo flotante en los íconos chicos (PC) */
@media(hover:hover){html body .ai.mini[data-tip]:is(:hover,:focus-visible)::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:8px;background:var(--text);color:var(--bg);font-size:.64rem;font-weight:650;letter-spacing:0;white-space:nowrap;pointer-events:none;z-index:200;box-shadow:var(--pop)}}
/* el ancho fijo de .ai.grande / .ai.mini de la app ganaba por especificidad: se libera */
html body .ai.grande,html body .ai.mini,html body .ai.mini.ancho,html body .ai.grande.ancho{width:auto}
/* hover legible: relleno sólido semántico + tinta medida por tema */
html body .ai.ai-edit:hover:not(:disabled),html body .ai.ai-edit:focus-visible:not(:disabled){background:var(--warn) !important;color:var(--on-warn) !important;border-color:color-mix(in srgb,var(--warn) 66%,#000) !important;filter:none !important}
html body .ai.ai-del:hover:not(:disabled),html body .ai.ai-del:focus-visible:not(:disabled){background:var(--danger) !important;color:var(--on-bad) !important;border-color:color-mix(in srgb,var(--danger) 66%,#000) !important;filter:none !important}
html body .ai.ai-ok:hover:not(:disabled),html body .ai.ai-ok:focus-visible:not(:disabled){background:var(--success) !important;color:var(--on-ok) !important;filter:none !important}
html body .ai:is(:hover,:focus-visible):not(:disabled) :is(svg,span,i){color:inherit !important;stroke:currentColor}
/* ícono del ítem activo de la barra lateral */
html body .nav-item.on svg{color:var(--on-primary) !important;stroke:currentColor;opacity:1 !important;background:transparent !important}


/* ===== Botones de fila · solo ícono, estilo Figma (Categorías, Tipo de gasto, Rubros, Tipos de evento) ===== */
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini,
html body #et-list .et-linea .ai.fx-ib{width:32px;height:32px;min-height:0;padding:0;border-radius:10px;gap:0;display:inline-grid;place-items:center;
  background:color-mix(in srgb,var(--c) 11%,var(--surface));background-image:none;color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 1px 2px rgba(0,0,0,.06);
  transition:background-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),color .18s}
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini svg,
html body #et-list .et-linea .ai.fx-ib svg{width:16px;height:16px;stroke-width:2;flex:none}
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini:hover:not(:disabled),
html body #et-list .et-linea .ai.fx-ib:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 66%,#000),0 6px 14px -6px var(--c)}
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini:active:not(:disabled),
html body #et-list .et-linea .ai.fx-ib:active:not(:disabled){transform:scale(.92)}
/* acciones en la misma línea que el nombre, a la derecha */
html body :is(#cat-list,#tip-list,#rub-list) .li.v-it{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px}
html body :is(#cat-list,#tip-list,#rub-list) .li.v-it .vq{flex:1 1 150px;align-items:center}
html body :is(#cat-list,#tip-list,#rub-list) .li.v-it .va{margin-top:0;flex:none;flex-wrap:nowrap;gap:6px}
html body :is(#cat-list,#tip-list,#rub-list) .li.v-it .pk{flex:1 1 100%}
/* Tipos de evento · al editar, Cancelar y Guardar bajan a su propia línea con aire respecto al cuadro de texto */
html body #et-list .et-fila.on .et-acts{flex:1 1 100%;order:3;justify-content:flex-end;margin:12px 0 2px;gap:8px}
html body #et-list .et-fila.on .et-op{order:4;margin-top:6px}
html body #et-list .et-fila.on .et-acts .ai{height:38px;padding:0 15px;border-radius:12px}
html body #et-list .et-linea .ai.fx-ib.ancho{width:auto;padding:0 11px;gap:6px;display:inline-flex;font-size:.72rem}
/* Categorías · Tipo de gasto · Rubros: el botón de borrar se arma en el lugar y pasa a «¿Seguro?» */
html body :is(#cat-list,#tip-list,#rub-list) .ai.mini.ancho{width:auto;padding:0 11px;gap:6px;display:inline-flex;font-size:.72rem}
/* botones de fila: color opaco y sólido */
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini:is(.ai-ok,.ai-edit,.ai-del),
html body #et-list .et-linea .ai.fx-ib:is(.ai-edit,.ai-del){background:var(--c);background-image:none;color:var(--on);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 66%,#000),inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px -6px var(--c)}
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini:is(.ai-ok,.ai-edit,.ai-del):hover:not(:disabled),
html body #et-list .et-linea .ai.fx-ib:is(.ai-edit,.ai-del):hover:not(:disabled){filter:brightness(1.08);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 66%,#000),inset 0 1px 0 rgba(255,255,255,.34),0 8px 16px -6px var(--c)}
html body :is(#cat-list,#tip-list,#rub-list,#et-list) .ai.mini.ai-neu{background:var(--surface-2);background-image:none;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--b-hair),0 1px 2px rgba(0,0,0,.06)}
/* Legibilidad en los 20 temas: el relleno del botón principal no se aclara arriba (bajaba el contraste del texto en Coral, Cielo y Bloom) */
html body .btn-primary{background-color:var(--primary);background-image:none}
/* Móvil: en la grilla de 2 columnas de los botones del hero, estos cuatro se estiraban al ancho de la
   columna y a la altura de la fila. Quedan del tamaño del de Cuentas: solo ícono, sin estirarse. */
@media(max-width:639px){
  html body .hero-bloque .hero-actions>#cp-rub-mgr,
  html body .hero-bloque .hero-actions>#sk-rub-mgr,
  html body .hero-bloque .hero-actions>#pc-tips,
  html body .hero-bloque .hero-actions>#cl-tips{justify-self:start;align-self:center;width:auto;min-width:44px;height:42px;padding:0 12px}
}

/* ============================================================
   LOGIN v2 · estilo Figma
   Todo cuelga de #auth: pisa las capas anteriores sin tocar el resto de la app.
   ============================================================ */
html body #auth{display:block;padding:0;background:var(--bg);animation:none}
#auth .auth-shell{width:100%;max-width:none;min-height:100dvh;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:0;align-items:stretch}

/* ---- panel de marca ---- */
#auth .auth-side{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;gap:0;
  padding:max(20px,env(safe-area-inset-top)) 22px 52px;color:var(--on-primary);border-radius:0;
  background:
    radial-gradient(55% 75% at 100% 0%,color-mix(in srgb,var(--primary-2) 85%,transparent),transparent 62%),
    radial-gradient(70% 90% at 0% 115%,color-mix(in srgb,var(--deep) 85%,transparent),transparent 62%),
    var(--primary)}
#auth .auth-side::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-160px;top:-170px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--on-primary) 22%,transparent),transparent);pointer-events:none}
#auth .auth-logo{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;letter-spacing:-.035em}
#auth .auth-logo .app-ic{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--on-primary) 25%,transparent),0 6px 14px -6px rgba(0,0,0,.45)}
#auth .auth-h{margin:18px 0 0;font-size:clamp(1.55rem,7.4vw,2rem);font-weight:700;letter-spacing:-.05em;line-height:1.04;max-width:15ch}
#auth .auth-tag,#auth .auth-feats,#auth .auth-preview{display:none}

/* ---- columna del formulario (en el celular sube como una hoja) ---- */
#auth .auth-main{position:relative;z-index:1;width:100%;max-width:none;margin:-26px 0 0;align-self:stretch;
  padding:28px 20px calc(30px + env(safe-area-inset-bottom,0px));background:var(--bg);border-radius:26px 26px 0 0;
  box-shadow:0 -14px 34px -20px rgba(9,14,26,.45)}
#auth .auth-main .brand{display:none}
#auth .auth-card{max-width:400px;margin:0 auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}

#auth .auth-head h2{margin:0 0 6px;font-size:1.42rem;font-weight:700;letter-spacing:-.045em;line-height:1.1;color:var(--text)}
#auth .auth-head p{margin:0 0 20px;font-size:.78rem;line-height:1.5;color:var(--ink-soft);max-width:38ch}

/* ---- pestañas con indicador deslizante ---- */
#auth .tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;margin:0 0 24px;border-radius:14px;border:0;
  background:color-mix(in srgb,var(--text) 6%,var(--surface-2));box-shadow:inset 0 0 0 1px var(--hair)}
#auth .tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:11px;background:var(--surface);
  box-shadow:0 1px 3px rgba(10,15,30,.16),0 0 0 1px var(--hair);transition:transform .38s var(--out)}
#auth .tabs:has(#tab-signup.on)::before{transform:translateX(100%)}
#auth .tab{position:relative;z-index:1;min-height:36px;padding:0 12px;border-radius:11px;background:none !important;box-shadow:none !important;
  font-size:.76rem;font-weight:600;color:var(--muted);transition:color .2s}
#auth .tab.on{color:var(--text)}
@supports not selector(:has(a)){
  #auth .tabs::before{display:none}
  #auth .tab.on{background:var(--surface) !important;box-shadow:0 1px 3px rgba(10,15,30,.16),0 0 0 1px var(--hair) !important}
}

/* ---- campos ---- */
#auth .field{gap:7px;margin-bottom:15px}
#auth .field label{font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:1.1}
#auth .input,#auth .pick{min-height:46px;padding:0 14px;border-radius:12px;font-size:.84rem;background:var(--surface);
  border:1px solid var(--ctl-line);box-shadow:0 1px 2px rgba(10,15,30,.05);transition:border-color .18s,box-shadow .18s,background-color .18s}
#auth .input::placeholder{color:var(--muted);opacity:.75}
#auth .input:hover:not(:focus),#auth .pick:hover{border-color:var(--ctl-line-2)}
#auth .input:focus,#auth .pick.on{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
#auth .input.err,#auth .pick.err{border-color:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 22%,transparent)}
#auth .ifield>.fi{left:14px;width:17px;height:17px}
#auth .ifield>.input{padding-left:41px}
#auth .pass-wrap .input{padding-right:48px}
#auth .pass-eye{right:6px;width:34px;height:34px;border-radius:9px}
#auth .pick{gap:10px}
#auth .pick .ic{width:17px;height:17px}
#auth .frow{gap:12px}
#auth .hint{font-size:.66rem;color:var(--muted)}

#auth .lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#auth .lbl-link{background:none;border:0;padding:0;cursor:pointer;font-size:.68rem;font-weight:600;color:var(--ink-link);text-decoration:none;border-radius:6px}
#auth .lbl-link:hover{text-decoration:underline;text-underline-offset:3px}

#auth .auth-sep{margin:6px 0 12px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---- requisitos de contraseña como píldoras ---- */
#auth .pw-rules{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
#auth .pw-rules li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:.62rem;font-weight:600;line-height:1.3;
  color:var(--muted);background:color-mix(in srgb,var(--text) 5%,transparent);box-shadow:inset 0 0 0 1px var(--hair);transition:color .2s,background-color .2s,box-shadow .2s}
#auth .pw-rules li::before{width:auto;content:"○";font-size:.7em}
#auth .pw-rules li.ok{color:var(--ink-ok);background:color-mix(in srgb,var(--success) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 32%,transparent)}
#auth .pw-rules li.ok::before{content:"✓"}

/* ---- errores y botón principal ---- */
#auth .err-msg:not(:empty){margin:2px 0 6px;padding:10px 12px;border-radius:12px;font-size:.72rem;font-weight:500;line-height:1.4;color:var(--ink-bad);
  background:color-mix(in srgb,var(--danger) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 26%,transparent)}
#auth .btn-primary.btn-lg{width:100%;min-height:48px;margin-top:8px;padding:0 20px;border-radius:12px;font-size:.86rem;font-weight:600;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -10px var(--glow-p)}
#auth .btn-primary.btn-lg svg{transition:transform .28s var(--out)}
#auth .btn-primary.btn-lg:hover:not(:disabled) svg{transform:translateX(3px)}
#auth .auth-foot{margin-top:20px;justify-content:center;gap:6px}
#auth .auth-foot .tiny{font-size:.72rem}
#auth .auth-foot button[data-goto]{font-size:.72rem;font-weight:600;color:var(--ink-link);text-decoration:none}
#auth .auth-foot button[data-goto]:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- escritorio: marco partido con panel redondeado ---- */
@media(min-width:880px){
  #auth .auth-shell{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);grid-template-rows:1fr;padding:14px;gap:0}
  #auth .auth-side{min-height:calc(100dvh - 28px);padding:40px 44px;border-radius:28px;justify-content:space-between;
    box-shadow:0 30px 60px -34px color-mix(in srgb,var(--primary) 70%,#000)}
  #auth .auth-logo{font-size:1.1rem}
  #auth .auth-logo .app-ic{width:38px;height:38px}
  #auth .auth-preview{display:block;position:relative;margin:28px 0 8px;max-width:360px}
  #auth .auth-h{margin:0;font-size:clamp(2.3rem,3.8vw,3.3rem);max-width:12ch}
  #auth .auth-tag{display:block;margin:14px 0 0;font-size:.92rem;line-height:1.55;max-width:40ch;opacity:.9}
  #auth .auth-feats{display:grid;gap:8px;margin:22px 0 0}
  #auth .auth-feats li{align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-size:.78rem;color:inherit;
    background:color-mix(in srgb,var(--on-primary) 11%,transparent);backdrop-filter:blur(12px);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 16%,transparent)}
  #auth .auth-main{margin:0;display:grid;place-items:center;padding:40px 32px;background:none;border-radius:0;box-shadow:none}
  #auth .auth-card{width:100%}
  #auth .auth-head h2{font-size:1.7rem}
  #auth .auth-head p{font-size:.82rem}
}

/* ---- vista previa decorativa (panel de marca) ---- */
#auth .ap-card{padding:16px 16px 14px;border-radius:20px;color:var(--on-primary);
  background:color-mix(in srgb,var(--on-primary) 13%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 22%,transparent),0 24px 40px -24px rgba(0,0,0,.5)}
#auth .ap-top{display:flex;align-items:center;gap:8px;font-size:.7rem}
#auth .ap-top b{font-weight:600;flex:1}
#auth .ap-top em{font-style:normal;font-size:.58rem;font-weight:600;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--on-primary) 16%,transparent)}
#auth .ap-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
#auth .ap-amt{display:flex;align-items:baseline;gap:8px;margin:12px 0 2px;font-size:1.7rem;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#auth .ap-amt i{font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:0;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--on-primary) 18%,transparent)}
#auth .ap-spark{display:block;width:100%;height:56px;color:var(--on-primary)}
#auth .ap-rows{display:grid;gap:9px;margin-top:10px}
#auth .ap-rows div{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:10px;font-size:.66rem}
#auth .ap-rows span{opacity:.88}
#auth .ap-rows u{display:block;height:6px;border-radius:99px;text-decoration:none;background:color-mix(in srgb,var(--on-primary) 16%,transparent);position:relative;overflow:hidden}
#auth .ap-rows u::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--on-primary)}
#auth .ap-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;font-size:.66rem;font-weight:600;white-space:nowrap;
  color:var(--text);background:var(--surface);box-shadow:0 12px 24px -10px rgba(0,0,0,.45),0 0 0 1px var(--hair)}
#auth .ap-chip svg{color:var(--success)}
#auth .ap-chip-a{right:-18px;top:-16px;animation:apFloat 6s ease-in-out infinite}
#auth .ap-chip-b{left:-14px;bottom:-14px;animation:apFloat 7s -2s ease-in-out infinite}
@keyframes apFloat{50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){#auth .ap-chip-a,#auth .ap-chip-b{animation:none}#auth .tabs::before{transition:none}}

/* campos obligatorios del registro */
#auth #pane-signup .field>label::after{content:" *";color:var(--danger);font-weight:700}

/* Portadas fotográficas: áreas amplias que mantienen el encuadre calculado para cada pantalla. */
html[data-ui] #v-inicio>.stack>.hero{--ha:clamp(96px,24vw,138px);min-height:clamp(240px,24vw,323px);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 36px}
html[data-ui] #v-inicio .hero-av{top:50%;right:72px;transform:translateY(-50%)}
html[data-ui] #v-inicio .hero-edit{top:16px;right:16px;bottom:auto;width:36px;height:36px}
html[data-ui] #v-grupo>.hero{min-height:clamp(240px,24vw,323px);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 36px}
html[data-ui] #v-grupo .hero-edit{position:absolute;top:16px;right:16px;z-index:5;width:36px;height:36px;padding:0;display:inline-grid;place-items:center;cursor:pointer;border-radius:50%;background:color-mix(in srgb,var(--on-primary) 18%,transparent);color:var(--on-primary);border:1px solid color-mix(in srgb,var(--on-primary) 34%,transparent);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
html[data-ui] #v-grupo .hero-edit:hover{background:var(--on-primary);color:var(--primary)}
html[data-ui] #v-grupo .hero.has-bg .hero-edit{background:color-mix(in srgb,var(--primary) var(--hxp,96%),transparent)}
html[data-ui] #v-grupo .vh-head{width:min(700px,calc(100% - 48px));max-width:calc(100% - 48px)}
html[data-ui] .section-hero-copy,html[data-ui] .group-hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-left:18px;min-width:0}
html[data-ui] .section-hero-copy::before,html[data-ui] .group-hero-copy::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:4px;background:var(--on-primary);opacity:.72}
html[data-ui] .section-hero-kicker,html[data-ui] .group-hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;text-transform:uppercase;color:var(--on-primary)}
html[data-ui] .section-hero-kicker::before,html[data-ui] .group-hero-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
html[data-ui] .section-hero-copy h2{font-size:clamp(1.65rem,3.4vw,2.7rem);line-height:1.04;text-wrap:balance}
html[data-ui] .section-hero-message{max-width:52ch;margin:0;color:var(--on-primary);font-size:clamp(.78rem,1.15vw,.94rem);line-height:1.45;opacity:.9}
html[data-ui] .vh:has(.section-hero-copy){min-height:190px;display:flex;align-items:flex-end;padding:24px 28px}
html[data-ui] .vh:has(.section-hero-copy) .vh-head{width:100%;align-items:flex-end}
html[data-ui] #v-grupo .vh-head h2{font-size:clamp(2rem,4.5vw,3.6rem);line-height:1.02;max-width:15ch;text-wrap:balance}
html[data-ui] #v-grupo .group-hero-message{max-width:50ch;margin:0;color:var(--on-primary);font-size:clamp(.84rem,1.3vw,1rem);line-height:1.45}
html[data-ui] #v-grupo .group-hero-meta{display:inline-flex;align-items:center;gap:7px;margin-top:3px;color:var(--on-primary);font-size:.72rem;font-weight:700}
html[data-ui] #v-grupo .group-hero-meta svg{flex:none}
html[data-ui] #v-grupo .hero.has-bg .group-hero-copy{background:color-mix(in srgb,var(--primary) var(--hxp,96%),transparent);border-radius:10px;padding:10px 14px 10px 26px;margin-left:-8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) var(--hxp,96%),transparent)}
html[data-ui] #v-grupo .hero.has-bg .group-hero-copy::before{left:10px;top:12px;bottom:12px}
html[data-ui] .hero.has-bg .hero-edit{position:absolute;z-index:5}
html[data-ui] .tb-brand{appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:5px 7px;margin:-5px -7px;border-radius:9px;cursor:pointer;transition:background-color var(--t) var(--ease)}
html[data-ui] .tb-brand:hover{background:var(--hover)}
html[data-ui] .tb-brand:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
html[data-ui] .side-brand{appearance:none;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:12px}
html[data-ui] .side-brand:hover{background:var(--hover)}
html[data-ui] .side-brand:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* La edición enseña los dos recortes reales mientras se arrastra y se ajusta el zoom. */
html[data-ui] #hk-box{aspect-ratio:2.4/1;min-height:72px}
html[data-ui] #hk-mo{aspect-ratio:1.15/1}
html[data-ui] .hk-tel{width:76px}
html[data-ui] .hc-live{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.7fr);gap:10px;margin-top:12px}
html[data-ui] .hc-live-item{min-width:0;display:flex;flex-direction:column;gap:5px}
html[data-ui] .hc-live-item>span{color:var(--muted);font-size:.6rem;font-weight:700}
html[data-ui] .hc-live-hero{width:100%;padding:0;border-radius:8px;min-height:0}
html[data-ui] #hc-pc{aspect-ratio:2.4/1}
html[data-ui] #hc-mobile{aspect-ratio:1.15/1}
/* Bienvenida a la familia: imagen a ancho completo y formulario en el mismo diálogo. */
html[data-ui] #m-create .create-welcome,html[data-ui] body #m-create .create-welcome{width:min(94vw,520px);max-width:520px;padding:0;overflow:hidden}
html[data-ui] #m-create .create-visual{height:190px;overflow:hidden;background:var(--surface-2)}
html[data-ui] #m-create .create-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
html[data-ui] #m-create .m-x{z-index:2;background:var(--raise);color:var(--text)}
html[data-ui] #m-create .create-content{padding:24px 26px 26px}
html[data-ui] #m-create .create-kicker{display:block;color:var(--ink-p);font-size:.62rem;font-weight:800;margin-bottom:8px}
html[data-ui] #m-create .create-content h3{padding:0;font-size:1.38rem;line-height:1.15}
html[data-ui] #m-create .create-copy{color:var(--muted);font-size:.82rem;line-height:1.5;margin:10px 0 22px}
html[data-ui] #m-create .field{margin-bottom:16px}
html[data-ui] #m-create .modal-actions{margin-top:0}
@media(max-width:639px){
  html[data-ui] #v-inicio>.stack>.hero{--ha:clamp(98px,29vw,116px);min-height:240px;padding:20px 18px 22px;padding-right:18px;justify-content:flex-end}
  html[data-ui] #v-inicio .hero-av{top:50%;right:18px;transform:translateY(-50%)}
  html[data-ui] #v-inicio .hero-edit{top:16px;right:16px;bottom:auto;width:32px;height:32px}
  html[data-ui] #v-inicio>.stack>.hero .vh-badge{max-width:calc(100% - 4px);margin-bottom:10px!important}
  html[data-ui] #v-inicio>.stack>.hero h2{padding-right:0;max-width:100%}
  html[data-ui] #v-grupo>.hero{min-height:225px;padding:20px 18px 22px;justify-content:flex-end}
  html[data-ui] #v-grupo .hero-edit{top:16px;right:16px;width:32px;height:32px}
  html[data-ui] #v-grupo .vh-head{width:100%;max-width:100%}
  html[data-ui] #v-grupo .group-hero-copy{gap:6px;padding-left:15px}
  html[data-ui] #v-grupo .vh-head h2{font-size:clamp(1.85rem,10vw,2.75rem);max-width:12ch}
  html[data-ui] #v-grupo .group-hero-message{font-size:.8rem;max-width:34ch}
  html[data-ui] #v-grupo .group-hero-meta{font-size:.68rem}
  html[data-ui] .vh:has(.section-hero-copy){min-height:168px;padding:20px 18px}
  html[data-ui] .vh:has(.section-hero-copy) .vh-head{align-items:flex-start;gap:14px}
  html[data-ui] .section-hero-copy{gap:6px;padding-left:15px}
  html[data-ui] .section-hero-copy h2{font-size:clamp(1.55rem,8vw,2.2rem)}
  html[data-ui] .section-hero-message{font-size:.78rem;max-width:36ch}
  html[data-ui] body #m-create .create-welcome{width:100%;max-width:none;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0}
  html[data-ui] #m-create .create-visual{height:clamp(145px,23dvh,220px)}
  html[data-ui] #m-create .create-content{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  html[data-ui] #m-create .create-copy{margin-bottom:16px}
}

/* ---------- v3-5 · editor de acomodo: foto entera + dos recuadros ---------- */
#m-hcrop .modal-box{max-width:min(620px,100%)}
.hc-stage{aspect-ratio:auto;max-height:none;min-height:110px;background:#0b1220;touch-action:none}
.hc-stage::after{content:none}
.hc-ley i{background:#0b1220}
.hc-ley i.pc{border-color:#fff}
.hc-ley i.mo{border-color:#fbbf24;border-style:dashed}
.hc-ley span:last-child{margin-left:auto;font-weight:600}
html[data-ui] .hc-live{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
html[data-ui] #hc-pc,html[data-ui] #hc-mobile{min-height:0;height:auto}

/* ============================================================
   v3-5 · HERO UNIFICADO — todos hablan como "Mi grupo": copy a la IZQUIERDA, mismo cuerpo de texto
   ============================================================ */
html[data-ui] .vh:has(.section-hero-copy){min-height:clamp(220px,20vw,280px);padding:28px 36px}
html[data-ui] .vh:has(.section-hero-copy) .vh-head{width:min(700px,calc(100% - 48px));max-width:calc(100% - 48px);align-items:flex-start}
html[data-ui] .section-hero-copy{align-items:flex-start;text-align:left}
html[data-ui] .section-hero-copy h2{font-size:clamp(2rem,4.5vw,3.6rem);line-height:1.02;max-width:15ch;text-wrap:balance}
html[data-ui] .section-hero-message{max-width:50ch;font-size:clamp(.84rem,1.3vw,1rem);line-height:1.45;opacity:1}
@media(max-width:639px){
  html[data-ui] .vh:has(.section-hero-copy){min-height:200px;padding:20px 18px}
  html[data-ui] .vh:has(.section-hero-copy) .vh-head{width:100%;max-width:100%}
  html[data-ui] .section-hero-copy h2{font-size:clamp(1.85rem,10vw,2.75rem);max-width:12ch}
  html[data-ui] .section-hero-message{font-size:.8rem;max-width:34ch}
}

/* ---------- INICIO · portada atrapante ---------- */
html[data-ui] #v-inicio>.stack>.hero{--ha:clamp(104px,17vw,176px);min-height:clamp(290px,27vw,390px);display:flex;flex-direction:column;justify-content:flex-end;padding:30px 36px}
html[data-ui] #v-inicio>.stack>.hero .vh-head{width:min(660px,calc(100% - var(--ha) - 120px));max-width:100%}
html[data-ui] #v-inicio .hero-av{z-index:2;right:clamp(40px,7vw,96px)}
html[data-ui] #v-inicio .inicio-hero-copy{gap:10px}
html[data-ui] #v-inicio>.stack>.hero .inicio-hero-copy h2#hero-hi{font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1;font-weight:800;letter-spacing:-.04em;text-transform:none;max-width:none;margin:0;padding:0;text-wrap:balance;overflow-wrap:anywhere}
html[data-ui] #v-inicio>.stack>.hero .hh-sal{display:block;font-size:.38em;font-weight:650;letter-spacing:.01em;opacity:.95;margin-bottom:.4em}
html[data-ui] #v-inicio>.stack>.hero .hh-nom{display:block;background:none;color:inherit;padding:0;border-radius:0;text-transform:uppercase;font-weight:800;box-shadow:none}
html[data-ui] #v-inicio #hero-hi::after{content:'';display:block;width:min(132px,34%);height:4px;margin-top:14px;border-radius:4px;background:linear-gradient(90deg,var(--on-primary),transparent)}
html[data-ui] #v-inicio .group-hero-message{max-width:46ch;margin:0;color:var(--on-primary);font-size:clamp(.84rem,1.3vw,1rem);line-height:1.45}
html[data-ui] #v-inicio .group-hero-meta{display:inline-flex;align-items:center;gap:7px;color:var(--on-primary);font-size:.72rem;font-weight:700}
html[data-ui] #v-inicio .group-hero-meta svg{flex:none}
html[data-ui] #v-inicio .hero-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
html[data-ui] #v-inicio .hero-pill{display:inline-flex;align-items:center;max-width:100%;padding:5px 11px;border-radius:999px;background:var(--on-primary);color:var(--primary);font-size:.68rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
html[data-ui] #v-inicio .hero.has-bg .group-hero-copy{background:color-mix(in srgb,var(--primary) var(--hxp,96%),transparent);border-radius:10px;padding:10px 14px 10px 26px;margin-left:-8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) var(--hxp,96%),transparent)}
html[data-ui] #v-inicio .hero.has-bg .group-hero-copy::before{left:10px;top:12px;bottom:12px}
/* el avatar: aro de luz que gira y resplandor que respira */
html[data-ui] #v-inicio .hero-av::before{content:'';position:absolute;inset:-9px;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 28%,color-mix(in srgb,var(--on-primary) 90%,transparent) 48%,transparent 62%,color-mix(in srgb,var(--accent) 90%,transparent) 82%,transparent 96%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:hiSpin 9s linear infinite}
html[data-ui] #v-inicio .hero-av::after{content:'';position:absolute;inset:-34px;border-radius:50%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--on-primary) 24%,transparent),transparent 72%);animation:hiPulse 5.5s ease-in-out infinite}
@keyframes hiSpin{to{transform:rotate(360deg)}}
@keyframes hiPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
/* aurora: tres manchas del propio tema (colores ya amortiguados por vhVars para no restar contraste) */
html[data-ui] #v-inicio>.stack>.hero>.hero-aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.hero-aura i{position:absolute;display:block;border-radius:50%;filter:blur(34px);will-change:transform}
.hero-aura i:nth-child(1){width:48%;aspect-ratio:1;left:-10%;top:-34%;background:var(--vh1,rgba(255,255,255,.14));animation:hiA 17s ease-in-out infinite alternate}
.hero-aura i:nth-child(2){width:40%;aspect-ratio:1;right:4%;bottom:-42%;background:var(--vh3,rgba(255,255,255,.1));animation:hiB 21s ease-in-out infinite alternate}
.hero-aura i:nth-child(3){width:30%;aspect-ratio:1;left:40%;top:8%;background:var(--vh2,rgba(0,0,0,.2));animation:hiC 25s ease-in-out infinite alternate}
@keyframes hiA{to{transform:translate3d(18%,22%,0) scale(1.2)}}
@keyframes hiB{to{transform:translate3d(-22%,-16%,0) scale(1.16)}}
@keyframes hiC{to{transform:translate3d(-26%,14%,0) scale(.86)}}
.hero.has-bg .hero-aura,.hero.has-fx .hero-aura{display:none}
body.no-anim .hero-aura i,body.no-anim #v-inicio .hero-av::before,body.no-anim #v-inicio .hero-av::after{animation:none}
/* entrada escalonada del texto */
@keyframes hiIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  body:not(.no-anim) #v-inicio .inicio-hero-copy>*{animation:hiIn .7s var(--ease) both}
  body:not(.no-anim) #v-inicio .inicio-hero-copy>:nth-child(2){animation-delay:.07s}
  body:not(.no-anim) #v-inicio .inicio-hero-copy>:nth-child(3){animation-delay:.15s}
  body:not(.no-anim) #v-inicio .inicio-hero-copy>:nth-child(4){animation-delay:.23s}
  body:not(.no-anim) #v-inicio .inicio-hero-copy>:nth-child(5){animation-delay:.31s}
}
@media(prefers-reduced-motion:reduce){.hero-aura i,#v-inicio .hero-av::before,#v-inicio .hero-av::after{animation:none!important}}
@media(max-width:639px){
  html[data-ui] #v-inicio>.stack>.hero{--ha:76px;min-height:310px;padding:20px 18px 24px;border-radius:24px}
  html[data-ui] #v-inicio>.stack>.hero .vh-head{width:100%;max-width:100%}
  html[data-ui] #v-inicio .hero-av{top:18px;right:20px;transform:none}
  html[data-ui] #v-inicio .hero-av::after{inset:-20px}
  html[data-ui] #v-inicio .hero-edit{top:auto;bottom:12px;right:14px}
  html[data-ui] #v-inicio .inicio-hero-copy{gap:7px;padding-left:15px}
  html[data-ui] #v-inicio>.stack>.hero .inicio-hero-copy h2#hero-hi{font-size:clamp(1.9rem,10.5vw,2.6rem);max-width:calc(100% - var(--ha) - 10px)}
  html[data-ui] #v-inicio .group-hero-message{font-size:.8rem;max-width:34ch}
  html[data-ui] #v-inicio .group-hero-meta{font-size:.68rem}
  .hero-aura i{filter:blur(24px)}
}

/* ===== v3-6 · barra compacta bajo el header + collage de Mi grupo ===== */
/* La barra compacta (título + botones de la sección) vive DEBAJO del header de la app: antes tenía el
   mismo top y quedaba tapada por él. */
.herobar{top:calc(var(--h) + 6px);height:52px;z-index:58;padding:0 8px 0 10px;
  box-shadow:var(--el2);transform:translateY(-8px)}
.herobar.on{transform:none}
.hb-lead{max-width:38%}
.hb-actions{padding:0 2px;gap:6px;align-items:center;align-self:stretch}
/* la copia de los botones trae del hero un margen, un relleno y un borde de arriba: acá no van */
.herobar .hb-espejo,.herobar .hb-actions>.hero-actions{margin:0;padding:0;border:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;height:100%;background:none}
/* los botones de la barra miden lo mismo que la barra: nada se corta ni se sale */
.herobar .hb-actions .btn:not(.ai):not(.btn-icon){--pad:0 12px;min-height:34px;height:34px;padding:0 12px;font-size:.72rem;border-radius:11px;white-space:nowrap}
.herobar .hb-actions .btn-lg:not(.ai):not(.btn-icon){min-height:34px;height:34px;padding:0 12px;font-size:.72rem}
.herobar .hb-actions .btn.ai,.herobar .hb-actions .btn-icon{height:34px;min-height:34px}
@media(max-width:480px){.hb-lead{max-width:30%}}
.herobar .hb-actions :is(.pick,.seg,.input){min-height:34px;max-height:36px;font-size:.72rem}
.herobar .hb-actions .seg>*{min-height:30px}

/* collage de fotos de los integrantes (hero de Mi grupo) */
#v-grupo .grp-collage{display:none;position:absolute;z-index:2;top:50%;right:clamp(28px,6vw,84px);
  width:var(--gc,clamp(160px,22vw,250px));height:var(--gc,clamp(160px,22vw,250px));transform:translateY(-50%);isolation:isolate;pointer-events:none}
#v-grupo .hero.has-collage .grp-collage{display:block}
#v-grupo .grp-collage::after{content:'';position:absolute;inset:-16%;border-radius:50%;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--on-primary) 24%,transparent),transparent 72%);animation:hiPulse 5.5s ease-in-out infinite}
#v-grupo .gc-i{position:absolute;width:var(--s);aspect-ratio:1;left:calc(var(--x) - var(--s) / 2);top:calc(var(--y) - var(--s) / 2);
  animation:gcFloat var(--fd,6s) ease-in-out var(--fl,0s) infinite alternate;will-change:transform}
#v-grupo .gc-av{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background-size:cover;background-position:center;color:#fff;font-weight:800;font-size:calc(var(--gc,200px) * var(--s-n,.4) * .34);
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--on-primary) 55%,transparent),0 14px 26px -12px rgba(0,0,0,.6);
  animation:gcPop .75s var(--spring) both;animation-delay:calc(var(--i) * .09s)}
#v-grupo .gc-i .avf{filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
#v-grupo .gc-i.main::before{content:'';position:absolute;inset:-9px;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 28%,color-mix(in srgb,var(--on-primary) 90%,transparent) 48%,transparent 62%,color-mix(in srgb,var(--accent) 90%,transparent) 82%,transparent 96%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:hiSpin 9s linear infinite}
#v-grupo .gc-more .gc-av{background:var(--on-primary);color:var(--primary);text-shadow:none;box-shadow:0 10px 20px -10px rgba(0,0,0,.55)}
@keyframes gcFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--fx,0px),var(--fy,-7px),0)}}
@keyframes gcPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
@media(min-width:640px){
  html[data-ui] #v-grupo .hero.has-collage .vh-head{width:min(700px,calc(100% - var(--gc,250px) - 120px))}
}
@media(max-width:639px){
  #v-grupo .grp-collage{--gc:132px;top:54px;right:12px;transform:none}
  html[data-ui] #v-grupo>.hero.has-collage{min-height:320px}
}
body.no-anim #v-grupo .gc-i,body.no-anim #v-grupo .gc-av,body.no-anim #v-grupo .gc-i.main::before,body.no-anim #v-grupo .grp-collage::after{animation:none}
@media(prefers-reduced-motion:reduce){#v-grupo .gc-i,#v-grupo .gc-av,#v-grupo .gc-i.main::before,#v-grupo .grp-collage::after{animation:none!important}}

/* ===== v3-7 · PORTADAS COMPACTAS Y TRANSLÚCIDAS ===== */
/* Todas las secciones secundarias comparten la misma escala y altura mínima. */
html[data-ui] .vh:has(.section-hero-copy){
  min-height:152px;padding:18px 24px;isolation:isolate;
  background:color-mix(in srgb,var(--primary) 90%,var(--surface));
}
html[data-ui] .vh:has(.section-hero-copy) .vh-head{
  width:100%;max-width:100%;gap:7px;align-items:flex-start;
}
html[data-ui] .section-hero-copy{gap:4px;padding-left:14px;max-width:720px}
html[data-ui] .section-hero-copy::before{width:3px;top:2px;bottom:2px;opacity:.62}
html[data-ui] .section-hero-copy h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.06;max-width:20ch}
html[data-ui] .section-hero-message{font-size:clamp(.72rem,1vw,.82rem);line-height:1.35;max-width:58ch;opacity:.88}
html[data-ui] .section-hero-kicker{font-size:.59rem;opacity:.84}

/* Una luz muy leve da profundidad y hereda los colores de cada tema. */
html[data-ui] .vh:not(.has-bg)::before{
  content:'';position:absolute;inset:-45% -12%;z-index:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 35%,color-mix(in srgb,var(--on-primary) 10%,transparent) 49%,transparent 63%);
  transform:translateX(-34%);animation:vhSoftSweep 14s ease-in-out infinite alternate;
}
html[data-ui] .vh>:not(.hbg):not(.hero-aura){position:relative;z-index:1}
@keyframes vhSoftSweep{to{transform:translateX(34%)}}

/* Inicio y Mi Grupo conservan la foto protagonista, pero ocupan menos alto. */
html[data-ui] #v-inicio>.stack>.hero,
html[data-ui] #v-grupo>.hero{
  min-height:224px;padding:22px 28px;border-radius:var(--r-xl);
}
html[data-ui] #v-inicio>.stack>.hero{--ha:clamp(86px,13vw,126px)}
html[data-ui] #v-inicio>.stack>.hero .vh-head{
  width:min(590px,calc(100% - var(--ha) - 92px));max-width:100%;gap:6px;
}
html[data-ui] #v-grupo .vh-head{width:min(620px,calc(100% - 44px));max-width:calc(100% - 44px);gap:6px}
html[data-ui] #v-inicio .inicio-hero-copy,
html[data-ui] #v-grupo .group-hero-copy{gap:5px;padding-left:14px}
html[data-ui] #v-inicio>.stack>.hero .inicio-hero-copy h2#hero-hi,
html[data-ui] #v-grupo .vh-head h2{font-size:clamp(1.65rem,3.3vw,2.6rem);line-height:1.03}
html[data-ui] #v-inicio>.stack>.hero .hh-sal{margin-bottom:.25em}
html[data-ui] #v-inicio #hero-hi::after{height:3px;margin-top:8px;width:min(100px,30%)}
html[data-ui] #v-inicio .group-hero-message,
html[data-ui] #v-grupo .group-hero-message{font-size:clamp(.74rem,1vw,.84rem);line-height:1.35}
html[data-ui] #v-inicio .group-hero-meta,
html[data-ui] #v-grupo .group-hero-meta{font-size:.66rem}
html[data-ui] #v-inicio .hero-pills{gap:5px}
html[data-ui] #v-inicio .hero-pill{padding:4px 9px;font-size:.62rem}

/* Con fotografía, la caja del texto deja ver el fondo en todos los temas. */
html[data-ui] #v-inicio .hero.has-bg .group-hero-copy,
html[data-ui] #v-grupo .hero.has-bg .group-hero-copy{
  background:color-mix(in srgb,var(--primary) 68%,transparent);
  padding:8px 12px 8px 22px;margin-left:-6px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-primary) 18%,transparent),0 10px 26px -18px rgba(0,0,0,.6);
  backdrop-filter:blur(7px) saturate(120%);
}
html[data-ui] #v-inicio .hero.has-bg .group-hero-copy::before,
html[data-ui] #v-grupo .hero.has-bg .group-hero-copy::before{left:9px;top:9px;bottom:9px}
html[data-ui] #v-inicio .hero.has-bg::after,
html[data-ui] #v-grupo .hero.has-bg::after{
  background:linear-gradient(104deg,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%);
}

@media(max-width:639px){
  html[data-ui] .vh:has(.section-hero-copy){min-height:140px;padding:15px 16px}
  html[data-ui] .section-hero-copy{gap:3px;padding-left:12px}
  html[data-ui] .section-hero-copy h2{font-size:clamp(1.25rem,6.5vw,1.7rem);max-width:19ch}
  html[data-ui] .section-hero-message{font-size:.7rem;max-width:42ch}
  html[data-ui] #v-inicio>.stack>.hero,
  html[data-ui] #v-grupo>.hero{min-height:210px;padding:17px 16px 19px}
  html[data-ui] #v-inicio>.stack>.hero{--ha:68px}
  html[data-ui] #v-inicio>.stack>.hero .vh-head,
  html[data-ui] #v-grupo .vh-head{width:100%;max-width:100%}
  html[data-ui] #v-inicio .hero-av{top:16px;right:18px}
  html[data-ui] #v-inicio .hero-edit{bottom:10px;right:12px}
  html[data-ui] #v-inicio>.stack>.hero .inicio-hero-copy h2#hero-hi,
  html[data-ui] #v-grupo .vh-head h2{font-size:clamp(1.45rem,8vw,2rem);max-width:calc(100% - 70px)}
  html[data-ui] #v-inicio .group-hero-message,
  html[data-ui] #v-grupo .group-hero-message{font-size:.7rem;max-width:34ch}
  #v-grupo .grp-collage{--gc:96px;top:48px;right:10px}
  html[data-ui] #v-grupo>.hero.has-collage{min-height:230px}
}
@media(prefers-reduced-motion:reduce){html[data-ui] .vh:not(.has-bg)::before{animation:none}}
html[data-ui] body.no-anim .vh:not(.has-bg)::before{animation:none}

/* uso con teclado: anillo visible al moverse con Tab (no aparece al tocar con el dedo o el mouse) */
:is(button,a,[role="button"],[tabindex],input,select,textarea,summary):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.modal :is(input,select,textarea):focus-visible,.input:focus-visible{outline:none}

/* ---------- botón «Reportar fallos/errores» (barra lateral) ---------- */
.rep-btn{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin-bottom:7px;border-radius:14px;
  border:1px solid var(--line-p);background:linear-gradient(135deg,var(--tint),transparent 70%),var(--glass-2,var(--surface));
  color:var(--text);text-align:left;cursor:pointer;overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s,background .18s}
.rep-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--primary) 14%,transparent) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;pointer-events:none}
.rep-btn:hover{border-color:var(--primary);box-shadow:0 8px 22px -14px var(--primary);transform:translateY(-1px)}
.rep-btn:hover::after{transform:translateX(100%)}
.rep-btn:active{transform:translateY(0) scale(.99)}
.rep-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:linear-gradient(140deg,var(--primary),var(--primary-2,var(--primary)));color:var(--on-primary,#fff);
  box-shadow:0 6px 14px -8px var(--primary)}
.rep-ic svg{width:16px;height:16px}
.rep-tx{display:flex;flex-direction:column;min-width:0;line-height:1.15;flex:1}
.rep-tx b{font-size:.72rem;font-weight:700;line-height:1.2}
.rep-tx small{font-size:.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-go{flex:none;width:14px;height:14px;color:var(--ink-p);transition:transform .18s}
.rep-btn:hover .rep-go{transform:translateX(2px)}
body.no-anim .rep-btn::after{display:none}
@media(prefers-reduced-motion:reduce){.rep-btn,.rep-btn::after,.rep-go{transition:none}}

/* ---------- ventanas de reporte y respuesta ---------- */
html[data-ui] .rep-box,.rep-box{width:min(94vw,540px);max-width:540px;padding:0;overflow:hidden;max-height:92dvh;overflow-y:auto}
.rep-cover{height:180px;overflow:hidden;background:var(--surface-2)}
.rep-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.rep-body{padding:22px 24px 24px}
.rep-kicker{display:block;color:var(--ink-p);font-size:.62rem;font-weight:800;letter-spacing:.08em;margin-bottom:6px}
.rep-body h3{padding:0;font-size:1.3rem;line-height:1.15;margin:0 0 6px}
.rep-copy{color:var(--muted);font-size:.8rem;margin:0 0 14px}
.rep-ops{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.rep-ops legend{font-size:.74rem;font-weight:700;margin-bottom:8px;padding:0}
.rep-op{position:relative;display:block;cursor:pointer}
.rep-op input{position:absolute;opacity:0;width:1px;height:1px}
.rep-op span{display:flex;flex-direction:column;gap:2px;height:100%;padding:9px 10px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);transition:border-color .15s,background .15s,box-shadow .15s}
.rep-op b{font-size:.72rem}
.rep-op small{font-size:.62rem;color:var(--muted);line-height:1.25}
.rep-op:hover span{border-color:var(--line-p);background:var(--hover)}
.rep-op input:checked + span{border-color:var(--primary);background:var(--tint);box-shadow:0 0 0 3px var(--ring)}
.rep-op input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.rep-det{resize:none;min-height:84px;max-height:320px;overflow-y:auto;line-height:1.45;font:inherit}
.rep-meta{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.rep-cnt{font-size:.62rem;color:var(--muted);flex:none}
.rv-card{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-top:12px;background:var(--surface)}
.rv-ans{border-color:var(--line-p);background:var(--tint)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.rv-lbl{display:block;font-size:.62rem;font-weight:800;letter-spacing:.06em;color:var(--ink-p);text-transform:uppercase;margin-bottom:4px}
.rv-txt{margin:0;font-size:.82rem;white-space:pre-wrap;word-break:break-word}

/* ---------- foto de Inicio: acceso directo a Configuración ---------- */
#v-inicio .hero-av[role="button"]{cursor:pointer}
#v-inicio .hero-av[role="button"] .avatar{transition:transform .2s,box-shadow .2s}
#v-inicio .hero-av[role="button"]:hover .avatar{transform:scale(1.04)}

@media(max-width:640px){
  html[data-ui] .rep-box,.rep-box{width:100%;max-width:none;border-radius:24px 24px 0 0}
  .rep-cover{height:clamp(130px,22dvh,200px)}
  .rep-body{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .rep-ops{grid-template-columns:1fr 1fr}
}