/* Capa visual común de todas las páginas (planilla, ritmos, formulario y admin).
   Se carga después del estilo de cada página: bordes y sombras más suaves, campos y botones
   con respuesta al tocarlos, y movimiento solo cuando alguien hace algo (abrir, cambiar, confirmar). */
:root{
  --r-card:14px; --r-ctl:8px; --ease:cubic-bezier(.2,.75,.25,1);
  --edge:rgba(18,19,22,.08);
  --lift:0 1px 2px rgba(18,19,22,.05),0 10px 28px -16px rgba(18,19,22,.22);
  --ring:0 0 0 3px rgba(166,219,39,.42);
  --hover:rgba(18,19,22,.045);
  --glass:rgba(241,242,238,.78);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --edge:rgba(255,255,255,.07);
    --lift:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -18px rgba(0,0,0,.75);
    --ring:0 0 0 3px rgba(205,232,47,.30);
    --hover:rgba(255,255,255,.05);
    --glass:rgba(13,14,16,.74);
  }
}
:root[data-theme="dark"]{
  --edge:rgba(255,255,255,.07);
  --lift:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -18px rgba(0,0,0,.75);
  --ring:0 0 0 3px rgba(205,232,47,.30);
  --hover:rgba(255,255,255,.05);
  --glass:rgba(13,14,16,.74);
}

/* ---------- superficies ---------- */
.card{border-radius:var(--r-card);box-shadow:0 0 0 1px var(--edge),var(--lift)}
.hero{border-radius:18px}
.stats{border-radius:10px}
.welcome,.banner,.reminder,.libhint,.irnote{border-radius:0 10px 10px 0}

/* ---------- campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
  border-radius:var(--r-ctl);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
@media (hover:hover){
  input:not([type=checkbox]):not([type=radio]):not(:disabled):not(:focus):hover,
  select:not(:disabled):not(:focus):hover,textarea:not(:disabled):not(:focus):hover{border-color:var(--muted)}
}
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--focus)!important;box-shadow:var(--ring);
}
/* los campos de la tabla de la planilla (sin borde propio) también muestran el anillo */
input.cell:focus-visible,select.cell:focus-visible{border-radius:6px}
[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px rgba(212,60,66,.35)!important}
input[type=checkbox]{transition:transform .12s ease}
input[type=checkbox]:active{transform:scale(.88)}

/* ---------- botones ---------- */
.btn,.tchip,.chip,.tab,.menu summary{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s var(--ease);
}
.btn{border-radius:var(--r-ctl)}
@media (hover:hover){
  .btn:not(.primary):not(:disabled):hover{background:var(--hover);border-color:var(--muted)}
  .btn.primary:not(:disabled):hover{filter:none;box-shadow:0 6px 18px -8px rgba(166,219,39,.75)}
  .tab:not([aria-current="true"]):hover{background:var(--hover);border-color:var(--muted)}
}
.btn:not(:disabled):active,.tchip:active,.chip:active,.tab:active,.menu summary:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default}
/* segundo click: el botón respira en rojo mientras espera */
@media (prefers-reduced-motion:no-preference){
  .btn.armed,.tchip[data-armed="1"]{animation:armed 1.1s ease-in-out infinite}
  @keyframes armed{50%{box-shadow:0 0 0 4px rgba(212,60,66,.18)}}
}

/* ---------- pestañas de hojas ---------- */
.tab{border-radius:10px}

/* ---------- menús, diálogos y explicaciones ---------- */
.menu-panel{border-radius:12px;box-shadow:0 0 0 1px var(--edge),0 18px 44px -14px rgba(0,0,0,.45)}
dialog{border-radius:18px;box-shadow:0 0 0 1px var(--edge),0 34px 90px -24px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,11,13,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  dialog[open]{animation:dlg-in .24s var(--ease)}
  dialog[open]::backdrop{animation:fade-in .24s ease}
  .menu[open] .menu-panel{animation:drop-in .18s var(--ease)}
  [data-tip]:hover::after,[data-tip]:focus-visible::after{animation:tip-in .16s ease .25s both}
  @keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
  @keyframes drop-in{from{opacity:0;transform:translateY(-6px)}}
  @keyframes fade-in{from{opacity:0}}
  @keyframes tip-in{from{opacity:0;translate:0 -3px}}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  /* en el celular los menús salen desde abajo */
  .menu[open] .menu-panel{animation:sheet-in .24s var(--ease)}
  @keyframes sheet-in{from{opacity:0;transform:translateY(24px)}}
}

/* ---------- tablas ---------- */
@media (hover:hover){ .scroll tbody tr{transition:background-color .12s ease} }

/* ---------- respuesta a los cambios ---------- */
/* un valor que cambió se ilumina un momento, para ver qué movió el cambio */
@media (prefers-reduced-motion:no-preference){
  .chg{animation:chg 1.1s ease-out}
  @keyframes chg{0%,25%{background-color:rgba(205,232,47,.30)}100%{background-color:transparent}}
  .moved td{animation:chg 1s ease-out}
  .reveal{animation:reveal .45s var(--ease) both}
  @keyframes reveal{from{opacity:0;transform:translateY(8px)}}
}

/* ---------- carga: bloques que laten mientras llegan los datos ---------- */
.sk{display:grid;gap:16px}
.sk i{display:block;border-radius:var(--r-card);background:var(--surface);box-shadow:0 0 0 1px var(--edge);position:relative;overflow:hidden}
.sk i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--hover) 50%,transparent 80%);transform:translateX(-100%)}
@media (prefers-reduced-motion:no-preference){ .sk i::after{animation:shimmer 1.3s ease-in-out infinite} @keyframes shimmer{to{transform:translateX(100%)}} }

/* ---------- Sign in with Discord: la cuenta en la cabecera y la pantalla de "solo pilotos" ---------- */
.ffbar{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.ffme{position:relative;flex:0 0 auto;z-index:5}
.hero-top>.ffme{margin-left:auto}
.fftheme{flex:0 0 auto;width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border-radius:999px;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);transition:background-color .16s ease,border-color .16s ease;position:relative;z-index:5}
.fftheme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.fftheme:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}}
.fftheme:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(205,232,47,.45)}
.ffme-in,.ffme-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--body);color:#fff;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease}
.ffme-in{padding:8px 14px}
.ffme-in svg,.ffgate-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.ffme-in:hover,.ffme-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}}
.ffme-in:focus-visible,.ffme-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(205,232,47,.45)}
.ffme-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:#2E3138}
.ffme-av.big{width:40px;height:40px}
.ffme-ini{display:inline-grid;place-items:center;font:700 13px/1 var(--body);color:#121316;background:var(--logo-green,#9FE015)}
.ffme-nm{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffme-chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;opacity:.7}
.ffme-pop{position:fixed;z-index:900;width:260px;max-width:calc(100vw - 32px);background:var(--surface);color:var(--ink);
  border-radius:12px;box-shadow:0 0 0 1px var(--edge),0 18px 44px -14px rgba(0,0,0,.55);padding:14px;animation:ffpop .16s var(--ease)}
@keyframes ffpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ffme-who{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ffme-who>span:not(.ffme-av){display:flex;flex-direction:column;min-width:0}
.ffme-who b{font:600 15px/1.25 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ffme-who small{font:400 13px/1.3 var(--body);color:var(--muted)}
.ffme-lvl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font:400 13px/1.3 var(--body);color:var(--muted)}
.ffme-tag{font:600 12px/1 var(--body);padding:4px 8px;border-radius:999px;background:var(--row);color:var(--ink);border:1px solid var(--line)}
.ffme-tag.admin,.ffme-tag.member{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ffme-nav{display:flex;flex-direction:column;margin:0 -6px 10px;padding-top:8px;border-top:1px solid var(--line)}
.ffme-nav a{font:500 14px/1.2 var(--body);color:var(--ink);text-decoration:none;padding:8px 6px;border-radius:6px}
@media (hover:hover){.ffme-nav a:hover{background:var(--hover)}}
.ffme-link{display:block;font:600 14px/1.3 var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin:0 0 12px}
.ffme-out{width:100%;font:600 14px/1 var(--body);padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.ffme-out:hover{background:var(--hover)}}
@media (max-width:560px){.ffme-nm{max-width:110px}.ffme-in span{font-size:13px}}

body.ffgated{overflow:hidden}
.ffgate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(10,11,13,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:ffin .2s ease}
@keyframes ffin{from{opacity:0}to{opacity:1}}
.ffgate-card{width:min(440px,100%);background:var(--surface);color:var(--ink);border-radius:18px;padding:28px 26px 24px;
  box-shadow:0 0 0 1px var(--edge),0 34px 90px -24px rgba(0,0,0,.65);text-align:center}
.ffgate-logo{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--accent);color:var(--accent-ink);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.ffgate-card h2{font:700 22px/1.2 var(--cond);margin:0 0 10px;letter-spacing:-.01em}
.ffgate-card p{font:400 15px/1.5 var(--body);margin:0 0 12px;color:var(--ink)}
.ffgate-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;margin:6px 0 12px;width:100%}
.ffgate-out{margin-top:6px}
.ffgate-fine{font-size:13px!important;color:var(--muted)!important}
.ffgate-flag{font-size:14px!important;color:var(--danger)!important;margin:10px 0 0!important}
.fftoast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1001;max-width:calc(100vw - 32px);background:var(--ink);color:var(--bg);
  font:500 14px/1.4 var(--body);padding:10px 16px;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:opacity .5s ease}
.fftoast.gone{opacity:0}