/* ═══ Tareas 3.0 · base: color, tipografía, estructura ═══ */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --bg-hover:#f2f2f2;
  --bg-strong:#ebebeb;
  --text:#111111;
  --text-muted:#5c5c5c;
  --text-dim:#737373;
  --text-inverse:#ffffff;
  --border:#e4e4e4;
  --border-strong:#d4d4d4;
  --red:#c62828;
  --red-soft:#fdecec;
  --amber:#b26a00;
  --amber-ink:#7a4a00;
  --amber-soft:#fdf3e3;
  --green:#2e7d32;
  --green-soft:#eaf4ea;
  --chart-1:#111111; --chart-2:#4a4a4a; --chart-3:#777777;
  --chart-4:#a0a0a0; --chart-5:#c2c2c2; --chart-6:#dadada; --chart-7:#8f8f8f;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --sidebar-w:64px;
  --sidebar-open:232px;
  --topbar-h:64px;
  --content-max:1200px;
  --content-wide:1600px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,.14);
  --glass:rgba(255,255,255,.72);
  --glass-blur:saturate(180%) blur(18px);
  /* Vidrio líquido: solo para el riel del menú y los paneles flotantes.
     Espejo opaco en escala de grises: sin saturar, para no meter tinte. */
  --liquid:linear-gradient(152deg,rgba(253,253,253,.88) 0%,rgba(240,240,240,.70) 38%,rgba(226,226,226,.60) 72%,rgba(236,236,236,.74) 100%);
  --liquid-blur:blur(26px) brightness(1.04);
  --liquid-edge:rgba(255,255,255,.9);
  --liquid-shadow:
    0 18px 46px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.7),
    inset -1px 0 0 rgba(0,0,0,.035),
    inset 0 -1px 0 rgba(0,0,0,.06);
  --sidebar-gap:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.015em}
h1{font-size:22px}
h2{font-size:16px}
h3{font-size:14px}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--text); outline-offset:2px; border-radius:4px}
::selection{background:var(--bg-strong)}
[hidden]{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── Estructura ── */
.app{display:flex; min-height:100vh; min-height:100dvh}

/* ── Barra lateral de vidrio líquido, se abre al pasar el mouse ── */
.sidebar{
  position:fixed; inset:var(--sidebar-gap) auto var(--sidebar-gap) var(--sidebar-gap); z-index:40;
  width:var(--sidebar-w); display:flex; flex-direction:column; gap:4px;
  padding:12px 10px; border:1px solid var(--liquid-edge); border-radius:24px;
  background:var(--liquid); -webkit-backdrop-filter:var(--liquid-blur); backdrop-filter:var(--liquid-blur);
  box-shadow:var(--liquid-shadow);
  overflow:hidden; transition:width .14s cubic-bezier(.32,.72,0,1), box-shadow .14s ease;
}
/* Reflejo del espejo: una franja diagonal clara que cruza el riel. */
.sidebar::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 58%,rgba(255,255,255,.45) 76%,rgba(255,255,255,0) 92%);
  mix-blend-mode:screen; opacity:.9;
}
.sidebar > *{position:relative; z-index:1}
/* Sin backdrop-filter (Firefox viejo): se sirve opaco, no transparente a medias. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar{background:var(--bg-soft)}
}
.app.sidebar-peek .sidebar, .sidebar:has(:focus-visible){width:var(--sidebar-open)}
@media (prefers-reduced-motion:reduce){ .sidebar{transition:none} }
.sidebar-logo{
  display:flex; align-items:center; gap:12px; height:44px;
  padding:0 10px; margin-bottom:8px; font-weight:700; letter-spacing:-.02em; white-space:nowrap;
}
.sidebar-logo i{font-size:20px; flex:0 0 auto; width:20px; text-align:center}
.ux-rail-open{display:none}
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:0 10px; height:42px; border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--text-muted); cursor:pointer; white-space:nowrap; text-align:left;
}
a.nav-item{text-decoration:none; font:inherit}
.nav-item i{font-size:19px; flex:0 0 auto; width:20px; text-align:center}
.nav-txt{opacity:0; transition:opacity .1s ease; overflow:hidden; text-overflow:ellipsis}
.app.sidebar-peek .nav-txt, .sidebar:has(:focus-visible) .nav-txt{opacity:1}
.nav-item:hover{background:rgba(0,0,0,.05); color:var(--text)}
.nav-item.active{background:rgba(0,0,0,.09); color:var(--text); font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.sidebar-foot{margin-top:auto; padding-top:8px; border-top:1px solid rgba(0,0,0,.07)}
.sidebar-foot .nav-item{height:48px}
.avatar-slot{flex:0 0 auto; display:inline-flex}

/* ── Contenido ── */
.main{flex:1; min-width:0; margin-left:calc(var(--sidebar-w) + var(--sidebar-gap)*2); display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:30;
  height:var(--topbar-h); display:flex; align-items:center;
  padding:0 24px; border-bottom:1px solid var(--border);
  background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.topbar-inner{display:flex; align-items:center; gap:14px; width:100%; max-width:var(--content-wide); margin:0 auto}
.board-search{position:relative; flex:1; max-width:460px; display:flex; align-items:center}
.board-search > i{position:absolute; left:12px; font-size:15px; color:var(--text-dim); pointer-events:none}
.board-search input{
  width:100%; height:38px; padding:0 52px 0 34px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-soft); outline:none;
}
.board-search input:focus{background:var(--bg); border-color:var(--text); box-shadow:0 0 0 3px var(--bg-strong)}
.board-search kbd{
  position:absolute; right:10px; padding:2px 6px; font-size:11px; color:var(--text-dim);
  border:1px solid var(--border-strong); border-radius:5px; background:var(--bg);
}
.topbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.content-area{flex:1; width:100%; max-width:var(--content-max); margin:0 auto; padding:24px}
.content-area.wide{max-width:var(--content-wide)}
.content-area.wide > .page-heading{display:none}
.page-heading{margin-bottom:18px}
.view{display:none}
.view.active{display:block}
.view-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.block{margin-top:28px}
.block-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}

/* ── Navegación inferior, solo en móvil ── */
.bottom-nav{display:none}

@media (max-width:768px){
  .sidebar{display:none}
  .main{margin-left:0}
  .topbar{padding:0 14px}
  .topbar-inner{gap:10px}
  .topbar .btn-txt, .board-search kbd{display:none}
  .content-area{padding:16px 14px 92px}
  .bottom-nav{
    position:fixed; inset:auto 0 0 0; z-index:45;
    display:flex; align-items:stretch; justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 2px; border:0; background:transparent; color:var(--text-dim);
    font-size:10px; cursor:pointer; border-radius:var(--radius-sm);
  }
  .bn-item i{font-size:20px}
  .bn-item.active{color:var(--text); font-weight:600}
  .bn-ico-wrap{position:relative; display:inline-flex}
}