/* Ritmo Diario · sistema visual "Liquid Glass" (versión sobria: fondo apenas teñido)
   Materiales translúcidos con backdrop-filter sobre un fondo ambiental de color.
   Respeta modo claro/oscuro, prefers-reduced-motion, prefers-reduced-transparency y forced-colors. */

:root{
  color-scheme:light;
  --bg:#EAF1EE; --ink:#12201A; --muted:#4C5F57; --line:rgba(18,32,26,.12);
  --surface:#FFFFFF; --solid:#F7FAF8;
  --accent:#1D6A55; --accent-2:#2A8A6E; --accent-ink:#FFFFFF; --accent-soft:rgba(29,106,85,.13);
  --energy:#A9650A; --mood:#5148B0; --err:#B3261E;
  --plate:#FFFFFF; --plate-rim:#DCE5E0; --fig:#16231E; --ground:#C3D0C9;
  /* vidrio */
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(250,253,251,.74); --glass-bar:rgba(255,255,255,.62);
  --fill:rgba(255,255,255,.55); --fill-strong:rgba(255,255,255,.8);
  --rim:rgba(255,255,255,.9); --rim-brd:rgba(255,255,255,.55); --rim-low:rgba(18,32,26,.06); --hair:rgba(18,32,26,.07);
  --spec:rgba(255,255,255,.6);
  --shadow:0 1px 2px rgba(15,40,32,.05),0 12px 32px -12px rgba(15,40,32,.24);
  --shadow-float:0 2px 6px rgba(15,40,32,.06),0 18px 44px -14px rgba(15,40,32,.32);
  --blur:blur(20px) saturate(180%);
  --blur-strong:blur(28px) saturate(200%);
  --blob1:rgba(110,205,168,.3); --blob2:rgba(246,206,140,.24); --blob3:rgba(190,180,245,.22); --blob4:rgba(140,205,222,.2);
  /* tipo y forma */
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:26px; --r-sm:16px;
  /* movimiento: resorte (con rebote) y resorte suave */
  --spring:cubic-bezier(.3,1.35,.45,1); --spring-soft:cubic-bezier(.2,.9,.3,1);
  --dur:.55s;
}
@supports (transition-timing-function:linear(0,1)){:root{
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --spring-soft:linear(0,.06 3%,.22 7%,.5 13%,.76 20%,.92 28%,1.01 37%,1.025 45%,1.015 55%,1 70%,1);
}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0A110F; --ink:#E8F0EC; --muted:#A1B3AB; --line:rgba(255,255,255,.11);
  --surface:#17201C; --solid:#141C19;
  --accent:#5EC3A3; --accent-2:#7AD4B6; --accent-ink:#06201A; --accent-soft:rgba(94,195,163,.17);
  --energy:#F0B24C; --mood:#ADA4F5; --err:#F2B8B5;
  --plate:#EEF2EF; --plate-rim:#C3CEC8; --fig:#E6EEEA; --ground:#3A4A43;
  --glass:rgba(28,38,34,.55); --glass-strong:rgba(20,29,26,.74); --glass-bar:rgba(30,40,36,.6);
  --fill:rgba(255,255,255,.075); --fill-strong:rgba(255,255,255,.13);
  --rim:rgba(255,255,255,.17); --rim-brd:rgba(255,255,255,.1); --rim-low:rgba(0,0,0,.35); --hair:rgba(255,255,255,.06);
  --spec:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-float:0 2px 6px rgba(0,0,0,.35),0 18px 44px -14px rgba(0,0,0,.8);
  --blob1:rgba(30,120,92,.28); --blob2:rgba(120,82,25,.18); --blob3:rgba(70,58,150,.22); --blob4:rgba(25,85,100,.2);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A110F; --ink:#E8F0EC; --muted:#A1B3AB; --line:rgba(255,255,255,.11);
  --surface:#17201C; --solid:#141C19;
  --accent:#5EC3A3; --accent-2:#7AD4B6; --accent-ink:#06201A; --accent-soft:rgba(94,195,163,.17);
  --energy:#F0B24C; --mood:#ADA4F5; --err:#F2B8B5;
  --plate:#EEF2EF; --plate-rim:#C3CEC8; --fig:#E6EEEA; --ground:#3A4A43;
  --glass:rgba(28,38,34,.55); --glass-strong:rgba(20,29,26,.74); --glass-bar:rgba(30,40,36,.6);
  --fill:rgba(255,255,255,.075); --fill-strong:rgba(255,255,255,.13);
  --rim:rgba(255,255,255,.17); --rim-brd:rgba(255,255,255,.1); --rim-low:rgba(0,0,0,.35); --hair:rgba(255,255,255,.06);
  --spec:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-float:0 2px 6px rgba(0,0,0,.35),0 18px 44px -14px rgba(0,0,0,.8);
  --blob1:rgba(30,120,92,.28); --blob2:rgba(120,82,25,.18); --blob3:rgba(70,58,150,.22); --blob4:rgba(25,85,100,.2);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]:not([hidden=until-found i]){display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100dvh}
/* Fondo ambiental: le da al vidrio algo de color para refractar */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 50% at 4% 0%,var(--blob1),transparent 70%),
    radial-gradient(55% 42% at 104% 16%,var(--blob2),transparent 70%),
    radial-gradient(65% 48% at 96% 96%,var(--blob3),transparent 72%),
    radial-gradient(60% 46% at -4% 76%,var(--blob4),transparent 70%),
    var(--bg)}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0;font-weight:700}
h1{font-size:32px;letter-spacing:-.02em}
h2{font-size:22px;letter-spacing:-.01em}
h3{font-size:17px}
p{margin:0}
a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.muted{color:var(--muted)}
.small{font-size:13px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline-offset:1px}

/* ---------- Materiales ---------- */
/* Vidrio regular: blur + saturación, reflejo especular arriba a la izquierda y borde iluminado */
.glass,.card{
  background:linear-gradient(155deg,var(--spec) 0%,transparent 38%),var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--rim-brd);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--rim-low),0 0 0 .5px var(--hair),var(--shadow);
}
.card{border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- Botones ---------- */
.btn{border:0;border-radius:999px;padding:12px 20px;font-weight:600;min-height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 20px -10px var(--accent);
  transition:transform var(--dur) var(--spring),box-shadow .2s,background-color .2s,opacity .2s}
.btn.ghost,.btn.soft{color:var(--ink);background:var(--fill);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-brd),0 0 0 .5px var(--hair)}
.btn.soft{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--fill)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btn:active:not(:disabled){transform:scale(.95);transition-duration:.12s}
@media (hover:hover){.btn:hover:not(:disabled){filter:brightness(1.04)}}

/* ---------- Campos ---------- */
input[type=text],input[type=number],input[type=time],input[type=password],input:not([type]),textarea{
  width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--fill);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);transition:border-color .2s,background-color .2s}
input:focus,textarea:focus{background:var(--fill-strong);border-color:var(--accent)}
::placeholder{color:var(--muted);opacity:.8}

/* ---------- Páginas de cuenta (login, signup, invitaciones) ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;
  padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.auth .card{width:100%;max-width:400px;padding:28px 24px;gap:16px;animation:rise .7s var(--spring-soft) both}
.auth .brand{display:flex;align-items:center;gap:12px}
.auth .brand img{width:52px;height:52px;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px -8px rgba(15,40,32,.5)}
.auth h1{font-size:30px}
.auth p{color:var(--muted)}
.auth label{font-weight:600;display:flex;flex-direction:column;gap:6px}
.auth label small{font-weight:400;color:var(--muted)}
.auth .pk{display:flex;flex-direction:column;gap:12px}
.auth .pk[hidden]{display:none}
.auth .pk .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.auth .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:var(--rim,rgba(127,127,127,.25))}
.err{color:var(--err);font-weight:600;background:color-mix(in srgb,var(--err) 12%,transparent);border-radius:12px;padding:10px 12px}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Menos transparencia: materiales sólidos, sin blur ni fondo de color */
@media (prefers-reduced-transparency:reduce){
  :root{--glass:var(--solid);--glass-strong:var(--solid);--glass-bar:var(--solid);--fill:var(--surface);--fill-strong:var(--surface);--spec:transparent;--blur:none;--blur-strong:none}
  :root:not([data-theme]){--rim-brd:var(--line)}
  body::before{background:var(--bg)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:var(--solid);--glass-strong:var(--solid);--glass-bar:var(--solid);--fill:var(--surface)}
}
@media (forced-colors:active){
  .glass,.card,.btn{border:1px solid CanvasText}
}