:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--ink:#12366b;--navy:#0b2a5c;--acc:#1f8bff}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body.hz-shell,body.hz-shell *{box-sizing:border-box}
body.hz-shell{font-family:Poppins,system-ui,sans-serif;color:var(--ink);min-height:100vh;padding:2.2vw;overflow-x:hidden;margin:0;
background:
radial-gradient(60% 50% at 8% 90%,rgba(120,180,255,.55),transparent 70%),
radial-gradient(40% 40% at 50% 20%,rgba(255,255,255,.7),transparent 70%),
linear-gradient(90deg,transparent 0 33%,rgba(255,255,255,.35) 33% 36%,transparent 36% 62%,rgba(90,140,200,.25) 62% 68%,transparent 68%),
linear-gradient(180deg,#8fc0f2 0%,#b7d6f3 35%,#dbe9f6 65%,#bcd2e8 100%);background-attachment:fixed}
body.hz-shell::after{content:"";position:fixed;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#2f7a3a,#4c9a4f 50%,transparent 72%);filter:blur(10px);opacity:.75;pointer-events:none}
.app{display:grid;grid-template-columns:215px 1fr;gap:1.6vw;max-width:1600px;margin:auto;position:relative;z-index:1}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(190,220,250,.28));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(60,150,255,.35),0 0 24px rgba(60,160,255,.35),0 20px 50px rgba(30,80,150,.2),inset 0 0 30px rgba(255,255,255,.35)}
aside.glass{border-radius:30px;padding:26px 14px;display:flex;flex-direction:column;gap:6px;align-self:start;min-height:calc(100vh - 4.4vw);max-height:960px}
.logo{text-align:center;margin-bottom:14px}
.logo b{display:block;font:italic 700 15px Poppins;color:var(--navy);letter-spacing:.3px;margin-top:2px}
.back{display:flex;align-items:center;gap:14px;border-radius:24px;padding:11px 18px;margin:6px 0 14px;font-weight:600;color:#1a5aa8;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:0 0 14px rgba(60,160,255,.4)}
.lbl{font-size:11px;letter-spacing:1.6px;font-weight:600;color:#3d78bd;margin:8px 8px 4px}
.nav{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:20px;font-size:14px;font-weight:500;color:#1e4f95;position:relative;cursor:pointer;transition:.2s}
.nav:not(.on):after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;background:rgba(255,255,255,.7)}
.nav:hover{background:rgba(255,255,255,.4)}
.nav.on{color:#fff;font-weight:600;background:linear-gradient(90deg,#1f7bf0,#4ab0ff);box-shadow:0 0 18px rgba(31,139,255,.7),inset 0 0 0 1px rgba(255,255,255,.6);margin:0 -6px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hz-board{border-radius:26px;padding:18px 26px 24px;position:relative;display:flex;flex-direction:column;box-sizing:border-box}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;border-radius:40px;padding:10px 20px}
.brand{display:flex;align-items:center;gap:14px}
.brand b{display:block;font-size:18px;color:#fff;font-weight:600;line-height:1.1}
.brand small{font-size:13px;color:#e6f2ff}
.brand.glass{
  padding:9px 20px;
  border-radius:30px;
  gap:12px;
}
.brand.glass b{
  color:#fff;
  font-weight:700;
  text-shadow:0 2px 8px rgba(10,40,100,.45);
}
.brand.glass small{
  color:#eaf4ff;
  text-shadow:0 1px 6px rgba(10,40,100,.4);
}
.date{display:flex;align-items:center;gap:12px;color:#fff;font-weight:500;font-size:15px;padding:9px 24px;border-radius:30px;white-space:nowrap}
.hz-board > h1{font-size:clamp(34px,4.2vw,62px);font-weight:700;color:#fff;margin-top:22px;letter-spacing:-.5px;text-shadow:0 4px 18px rgba(20,70,150,.35)}
.hz-board > h1.board-title{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  max-width:100%;
  margin-top:14px;
  margin-bottom:0;
  padding:10px 24px;
  border-radius:30px;
  font-size:clamp(24px,3vw,40px);
  font-weight:800;
  letter-spacing:-0.4px;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(10,40,100,.45), 0 0 1px rgba(0,0,0,.25);
  box-sizing:border-box;
}
.sub{color:#eaf4ff;font-size:15px;display:flex;gap:18px;margin:2px 4px 10px;flex-wrap:wrap}
.tag{position:absolute;right:70px;top:100px;font:600 34px/1.05 Caveat,cursive;color:#fff;transform:rotate(-8deg);text-shadow:0 2px 10px rgba(20,70,150,.4);text-align:center}
.tag svg{display:block;margin:0 0 0 26px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;margin-top:8px;padding-top:22px;overflow:visible;align-content:start}
.card{position:relative;border-radius:20px;padding:18px 18px 14px;aspect-ratio:1/1;width:100%;min-height:0;height:auto;display:flex;flex-direction:column;transform:rotate(var(--r,0deg));transition:.25s;overflow:hidden;
background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(200,225,250,.38));backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.85);
box-shadow:0 10px 24px rgba(30,80,150,.2),inset 0 0 22px rgba(255,255,255,.45)}
.card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 18px 34px rgba(30,80,150,.3),0 0 22px rgba(60,160,255,.5)}
.k{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.7px;color:#0d4a9e;text-transform:uppercase}
.k .i{width:22px;height:22px;flex:none}
.t{font:700 28px/1.08 Caveat,cursive;color:#0a2f66;margin:10px 0 6px;font-style:italic;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.t.p{font:700 18px/1.25 Poppins,sans-serif;font-style:normal;margin-top:10px;letter-spacing:-.2px}
.b{font:500 13.5px/1.45 Poppins,sans-serif;color:#14386f;flex:1;min-height:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.h{font:600 20px/1.35 Caveat,cursive;color:#0f3270;flex:1;font-style:italic}
.m{display:flex;align-items:center;gap:8px;font:600 12.5px/1 Poppins,sans-serif;color:#1a5aa8;margin-top:10px}
.m .i{width:16px;height:16px;flex:none;opacity:.95}
.u{height:2px;width:56px;background:linear-gradient(90deg,#27a0ff,transparent);margin-top:8px}
.u+.m{margin-top:6px}
.yellow{background:linear-gradient(150deg,#ffe58a,#f6c93c);border-color:#fff3b8;box-shadow:0 10px 26px rgba(240,180,30,.45),0 0 22px rgba(255,210,80,.6);color:#1a2438}
.yellow .t,.yellow .h{color:#1a2040}
.yellow .m,.yellow .k,.yellow .b{color:#243048}
.pink{background:linear-gradient(150deg,#ffd2ea,#f4a9d8);border-color:#ffe3f3;box-shadow:0 10px 26px rgba(230,100,180,.35),0 0 22px rgba(255,150,220,.5)}
.pink .k{color:#8a1f72}
.pink .t,.pink .h{color:#3a1460}
.pink .b,.pink .m{color:#4a1d6e}
.dark{background:linear-gradient(150deg,#0b2f68,#08234f);border-color:#2f8bff;box-shadow:0 0 0 1px #2f8bff,0 0 26px rgba(40,140,255,.8)}
.dark .k{color:#c8ddff}
.dark .m{color:#b7d2ff}
.dark .t{color:#ffd23f;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dark .h,.dark .b{color:#eef5ff;font-weight:500}
.photo{background:linear-gradient(150deg,rgba(30,120,230,.9),rgba(20,90,200,.85));border-color:#58b0ff;box-shadow:0 0 26px rgba(40,150,255,.8)}
.photo .k,.photo .m,.photo .t{color:#fff}
.photo .b{color:#eef6ff;font-size:13px;font-weight:500}
.photo .row{display:flex;gap:10px;flex:1}
.pic{width:46%;min-width:88px;margin-top:-10px;border-radius:6px;border:2px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.3);transform:rotate(3deg);align-self:center;height:100px;position:relative;overflow:hidden;background:linear-gradient(#8fc8f5 0 38%,#4f7a52 38% 52%,#5a95b8 52% 70%,#2f6f9a 70%)}
.pic:before{content:"";position:absolute;left:14%;top:30%;width:66%;height:30%;background:linear-gradient(#e7ecef,#b9c4cc);border-top:4px solid #8a949c}
.pic:after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 2px,transparent 2px 6px)}
.tape{position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;transform:rotate(-2deg);opacity:.85;background:var(--c,#3ea0ff);box-shadow:0 2px 4px rgba(0,0,0,.12)}
.pin{position:absolute;top:-12px;right:26px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,transparent 35%),var(--c,#2a8cff);box-shadow:0 6px 8px rgba(0,0,0,.3)}
.pin:after{content:"";position:absolute;left:9px;top:18px;width:3px;height:14px;background:#888;transform:rotate(-30deg);border-radius:2px;opacity:.6}
.clip{position:absolute;top:-22px;right:18px;width:30px;height:56px;color:#7b8fa5}
.clip.d{color:#222}
/* ===== GLASS v2: azulado, borde de luz, reflejo especular ===== */
body.hz-shell{background:linear-gradient(180deg,#7db8ee 0%,#a9d0f3 40%,#cfe4f6 70%,#a9c6e2 100%)}
body.hz-shell::before{content:"";position:fixed;inset:-30px;z-index:0;pointer-events:none;filter:blur(14px);
background:
radial-gradient(28% 40% at 10% 22%,rgba(255,255,255,.85),transparent 70%),
radial-gradient(26% 36% at 88% 12%,rgba(255,255,255,.7),transparent 70%),
linear-gradient(90deg,transparent 0 17%,rgba(255,255,255,.6) 17% 20%,transparent 20% 44%,rgba(110,150,200,.45) 44% 50%,transparent 50% 74%,rgba(255,255,255,.55) 74% 77%,transparent 77%),
linear-gradient(172deg,transparent 28%,rgba(80,125,180,.6) 28% 46%,rgba(120,160,205,.4) 46% 60%,transparent 60%),
linear-gradient(180deg,transparent 58%,rgba(240,248,255,.75) 82%,rgba(190,212,235,.9))}
.glass,.card{position:relative;isolation:isolate;border:0}
.glass::before,.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:3;
background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.55) 12%,rgba(120,200,255,.18) 38%,rgba(90,190,255,.45) 70%,#fff 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass::after,.card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
background:
linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 26%,transparent 42%),
radial-gradient(90% 55% at 50% 118%,rgba(70,185,255,.42),transparent 65%),
radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.5),transparent 70%)}
.glass{background:linear-gradient(150deg,rgba(210,232,255,.42),rgba(110,170,235,.26) 55%,rgba(90,165,240,.32));
backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
box-shadow:0 0 22px rgba(70,170,255,.45),0 18px 44px rgba(20,80,160,.25),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -26px 40px rgba(70,175,255,.22),inset 0 0 36px rgba(255,255,255,.22)}
.card:not(.yellow):not(.pink):not(.dark):not(.photo){background:linear-gradient(155deg,rgba(225,240,255,.6),rgba(130,185,240,.3) 60%,rgba(100,175,245,.36));
backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
box-shadow:0 12px 26px rgba(20,80,170,.28),0 0 16px rgba(90,180,255,.4),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -18px 28px rgba(70,180,255,.28),inset 0 0 26px rgba(255,255,255,.25)}
.yellow{background:linear-gradient(150deg,rgba(255,236,140,.95),rgba(245,196,50,.88))}
.yellow,.pink{box-shadow:0 12px 26px rgba(40,90,170,.25),0 0 22px rgba(255,255,255,.5),inset 0 1px 0 #fff,inset 0 -16px 26px rgba(255,255,255,.3)}
.pink{background:linear-gradient(150deg,rgba(255,215,238,.95),rgba(245,170,220,.9))}
.dark{background:linear-gradient(150deg,rgba(12,52,112,.96),rgba(6,32,78,.96));box-shadow:0 0 0 1px rgba(80,170,255,.7),0 0 26px rgba(40,150,255,.85),inset 0 0 22px rgba(60,160,255,.3),inset 0 -14px 24px rgba(40,150,255,.35)}
.photo{background:linear-gradient(150deg,rgba(40,140,240,.95),rgba(20,95,205,.92));box-shadow:0 0 28px rgba(50,160,255,.85),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -16px 26px rgba(120,210,255,.4)}
.card:hover{box-shadow:0 20px 38px rgba(20,80,170,.35),0 0 26px rgba(110,200,255,.7)}
.nav.on{background:linear-gradient(90deg,rgba(25,120,245,.95),rgba(80,185,255,.9));box-shadow:0 0 20px rgba(40,150,255,.8),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55)}
.back,.date,.top,.board-title,.brand.glass{border-radius:inherit}
.back{border-radius:24px}.top{border-radius:40px}.date,.board-title,.brand.glass{border-radius:30px}
aside.glass{border-radius:30px}.hz-board{border-radius:26px}
/* ===== GLASS v3: borde biselado hiperrealista ===== */
.glass::before,.card::before{padding:2.6px;background:
radial-gradient(280px circle at var(--px,15%) var(--py,0px),#fff 0,rgba(255,255,255,.55) 35%,transparent 72%),
radial-gradient(46px circle at 0 0,#fff,transparent),
radial-gradient(46px circle at 100% 100%,#fff,transparent),
radial-gradient(34px circle at 100% 0,rgba(210,242,255,.95),transparent),
radial-gradient(34px circle at 0 100%,rgba(210,242,255,.95),transparent),
linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.5) 14%,rgba(110,205,255,.55) 45%,rgba(50,160,255,.8) 76%,rgba(255,255,255,.95))}
.card::before{padding:2px}
.glass::after,.card::after{background:
linear-gradient(90deg,transparent 3%,rgba(255,255,255,.95) 18%,rgba(255,255,255,.25) 62%,transparent 95%) top 4px left 0/100% 1.6px no-repeat,
linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.15) 55%,transparent) left 4px top 0/1.6px 100% no-repeat,
linear-gradient(90deg,transparent 5%,rgba(120,225,255,.95) 50%,transparent 95%) bottom 4px left 0/100% 1.6px no-repeat,
linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 26%,transparent 42%),
radial-gradient(90% 55% at 50% 118%,rgba(70,185,255,.45),transparent 65%),
radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.5),transparent 70%)}
.card::after{background-position:top 3px left 0,left 3px top 0,bottom 3px left 0,0 0,0 0,0 0}
.glass{box-shadow:0 0 0 1px rgba(35,115,230,.5),0 0 28px rgba(70,175,255,.55),0 18px 44px rgba(20,80,160,.25),inset 2px 2px 3px rgba(255,255,255,.85),inset -2px -2px 5px rgba(130,215,255,.75),inset 0 -26px 40px rgba(70,175,255,.25),inset 0 0 36px rgba(255,255,255,.22)}
.card:not(.yellow):not(.pink):not(.dark):not(.photo){box-shadow:0 0 0 1px rgba(35,115,230,.5),0 12px 26px rgba(20,80,170,.28),0 0 18px rgba(90,185,255,.5),inset 2px 2px 3px rgba(255,255,255,.9),inset -2px -2px 4px rgba(130,215,255,.8),inset 0 -18px 28px rgba(70,180,255,.28),inset 0 0 26px rgba(255,255,255,.25)}
.yellow{--vsh:0 12px 26px rgba(240,180,30,.4),0 0 22px rgba(255,220,100,.6)}
.pink{--vsh:0 12px 26px rgba(230,100,180,.35),0 0 22px rgba(255,160,225,.55)}
.dark{--vsh:0 0 26px rgba(40,150,255,.9),0 10px 24px rgba(10,40,100,.4)}
.photo{--vsh:0 0 28px rgba(50,160,255,.9),0 10px 24px rgba(10,60,150,.35)}
.card.yellow,.card.pink,.card.dark,.card.photo{box-shadow:var(--vsh),0 0 0 1px rgba(35,115,230,.45),inset 2px 2px 3px rgba(255,255,255,.8),inset -2px -2px 5px rgba(130,215,255,.7),inset 0 -16px 26px rgba(255,255,255,.22)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tag{display:none}}
@media(max-width:820px){.app{grid-template-columns:1fr}aside.glass{min-height:0;flex-direction:row;flex-wrap:wrap;padding:14px}.lbl,.logo b{display:none}.nav.on{margin:0}.hz-board{padding:16px}.top{flex-wrap:wrap}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid{grid-template-columns:1fr}body.hz-shell{padding:12px}}

/* Bridge Django → Hidrozen (tal cual) */
body.hz-shell {
  margin: 0 !important;
  padding: 2.2vw !important;
  background:
    url("../img/noticia-embalse-mariposa.png") center / cover no-repeat fixed !important;
  background-attachment: fixed !important;
  font-family: Poppins, system-ui, sans-serif !important;
}
body.hz-shell::before {
  content: "";
  position: fixed;
  inset: -30px;
  z-index: 0;
  pointer-events: none;
  filter: none;
  background: rgba(255, 255, 255, 0.12);
}
body.hz-shell::after {
  opacity: 0.28;
}
body.hz-shell .dash-ambient,
body.hz-shell .dash-top,
body.landing-page .intranet-footer {
  display: none !important;
}
body.hz-shell .app-main,
body.hz-shell .landing-home,
body.hz-shell .intranet-main {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  max-width: none !important;
}
body.hz-shell .app {
  width: 100%;
  z-index: auto;
}
body.hz-shell .hz-board {
  position: sticky;
  top: 2.2vw;
  z-index: 1;
  overflow: visible;
  max-height: none;
}
body.hz-shell .card {
  overflow: visible;
}
body.hz-shell .card .b {
  overflow: hidden;
  color: inherit;
}
body.hz-shell .card .b p,
body.hz-shell .card .b li,
body.hz-shell .card .b span {
  color: inherit !important;
  font: inherit !important;
}
body.hz-shell .card.dark .b,
body.hz-shell .card.dark .b p {
  color: #eef5ff !important;
}
body.hz-shell .card.yellow .b,
body.hz-shell .card.yellow .b p {
  color: #243048 !important;
}
body.hz-shell .card.pink .b,
body.hz-shell .card.pink .b p {
  color: #4a1d6e !important;
}
body.hz-shell .visor-body .t {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
}
body.hz-shell .visor-body .b {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: unset;
  display: block;
}
body.hz-shell aside.glass {
  position: sticky;
  top: 2.2vw;
  z-index: 3;
  align-self: start;
}
body.hz-shell .hz-board > * { position: relative; z-index: 2; }
body.hz-shell .hz-board .tag {
  z-index: 3;
  position: absolute;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font: 600 38px/1.05 Caveat, cursive !important;
  color: #fff !important;
  transform: rotate(-8deg);
  text-shadow: 0 2px 10px rgba(20, 70, 150, 0.4);
  text-align: center;
  right: 70px;
  top: 120px;
}
body.hz-shell .logo img,
body.hz-shell .brand img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin: 0 auto;
}
body.hz-shell .brand img {
  width: 40px;
  height: 40px;
  margin: 0;
}
/* Chinchetas y clips (imágenes) — cintas siguen con .tape */
body.hz-shell .card .hz-pin,
body.hz-shell .card .hz-clip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(8, 35, 85, 0.28));
  opacity: 1;
  mix-blend-mode: normal;
}
/* Chincheta solo en esquinas superiores (vista realista) */
body.hz-shell .card .hz-pin {
  width: 38px;
  height: auto;
  bottom: auto;
}
body.hz-shell .card .hz-pin.pin-tr {
  top: -14px;
  right: 14px;
  left: auto;
  transform: rotate(10deg);
}
body.hz-shell .card .hz-pin.pin-tl {
  top: -14px;
  left: 14px;
  right: auto;
  transform: rotate(-8deg);
}
body.hz-shell .card .hz-pin.pin-inset.pin-tr {
  top: -10px;
  right: 28px;
  transform: rotate(6deg);
}
body.hz-shell .card .hz-pin.pin-inset.pin-tl {
  top: -10px;
  left: 28px;
  transform: rotate(-5deg);
}
/* Clip: cuelga del borde y entra en la nota (efecto de sujetar el papel) */
body.hz-shell .card .hz-clip {
  width: 40px;
  height: auto;
}
body.hz-shell .card .hz-clip.clip-tr {
  top: -26px;
  right: 22px;
  left: auto;
  transform: rotate(18deg);
}
body.hz-shell .card .hz-clip.clip-tl {
  top: -26px;
  left: 22px;
  right: auto;
  transform: rotate(-18deg) scaleX(-1);
}
body.hz-shell .card.yellow .hz-pin,
body.hz-shell .card.pink .hz-pin {
  width: 40px;
}
body.hz-shell .visor-body .hz-pin,
body.hz-shell .visor-body .hz-clip,
body.hz-shell .visor-body .tape {
  display: none !important;
}
body.hz-shell .hz-board .grid { position: relative; z-index: 2; }
body.hz-shell a.nav { text-decoration: none; color: inherit; }
body.hz-shell button.back {
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
body.hz-shell a.back { text-decoration: none; }
body.hz-shell .nav.on { color: #fff; }

/* Menú contraído */
body.hz-shell .app.is-slim {
  grid-template-columns: 88px minmax(0, 1fr);
}
body.hz-shell .app.is-slim aside.glass {
  width: 76px;
  min-width: 76px;
  padding: 18px 10px 16px;
  align-items: center;
  max-height: none;
}
body.hz-shell .app.is-slim .logo b,
body.hz-shell .app.is-slim .lbl,
body.hz-shell .app.is-slim .back span {
  display: none !important;
}
body.hz-shell .app.is-slim a.nav {
  width: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  justify-content: center;
  gap: 0;
  border-radius: 16px;
  font-size: 0;
  line-height: 0;
  color: transparent !important;
}
body.hz-shell .app.is-slim a.nav svg.i {
  width: 22px;
  height: 22px;
  color: #1e4f95;
}
body.hz-shell .app.is-slim a.nav.on {
  width: 54px;
  margin: 0;
  color: transparent !important;
}
body.hz-shell .app.is-slim a.nav.on svg.i {
  color: #fff;
}
body.hz-shell .app.is-slim a.nav:not(.on)::after {
  display: none;
}
body.hz-shell .app.is-slim .back {
  width: 48px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  gap: 0;
  margin: 6px 0 12px;
}
body.hz-shell .app.is-slim .back .collapse-chevron {
  transform: rotate(180deg);
}
body.hz-shell .app.is-slim .logo img {
  width: 40px;
  height: 40px;
}
@media (max-width: 820px) {
  body.hz-shell .app.is-slim {
    grid-template-columns: 1fr;
  }
  body.hz-shell .app.is-slim aside.glass {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
body.hz-shell .inst {
  position: relative;
  z-index: 4;
  margin-top: 2.4vw;
  padding-top: 8px;
  background: rgba(244, 248, 252, 0.97);
  border-radius: 28px 28px 24px 24px;
  color: #0a2540;
  box-shadow:
    0 -18px 48px rgba(20, 70, 140, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.hz-shell .card.abre-detalle { cursor: pointer; }
body.hz-shell .card .b p { margin: 0; color: inherit; font: inherit; }
body.hz-shell .empty-board { color: #fff; margin-top: 18px; }
body.hz-shell .board-edit {
  display: inline-flex; margin: 8px 0 0; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.35);
  color: #0b2a5c; font-size: .78rem; font-weight: 600; text-decoration: none;
  position: relative; z-index: 4;
}
body.hz-shell .visor { z-index: 40; }
@media (max-width: 820px) {
  body.hz-shell { padding: 12px !important; }
  body.hz-shell .hz-board,
  body.hz-shell aside.glass {
    top: 12px;
  }
}

/* App en pantallas chicas: barra inferior fija */
@media (max-width: 820px) {
  html { height: 100%; }
  body.hz-shell {
    min-height: 100dvh;
    padding: 0 0 calc(86px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y: none;
  }
  body.hz-shell .app,
  body.hz-shell .app.is-slim {
    display: block;
    max-width: none;
    gap: 0;
  }
  body.hz-shell aside.glass,
  body.hz-shell .app.is-slim aside.glass {
    position: fixed;
    z-index: 30;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    height: 68px;
    margin: 0;
    padding: 6px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 22px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 32px rgba(8, 32, 72, 0.32);
  }
  body.hz-shell aside.glass::-webkit-scrollbar { display: none; }
  body.hz-shell aside .logo,
  body.hz-shell aside .back,
  body.hz-shell aside .lbl { display: none !important; }
  body.hz-shell aside a.nav,
  body.hz-shell .app.is-slim a.nav {
    flex: 0 0 auto;
    width: auto;
    min-width: 72px;
    min-height: 56px;
    height: auto;
    margin: 0;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    color: #1e4f95 !important;
    white-space: nowrap;
    scroll-snap-align: center;
  }
  body.hz-shell aside a.nav svg.i,
  body.hz-shell .app.is-slim a.nav svg.i {
    width: 20px;
    height: 20px;
    color: #1e4f95;
  }
  body.hz-shell aside a.nav.on,
  body.hz-shell .app.is-slim a.nav.on {
    width: auto;
    margin: 0;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(31, 139, 255, 0.55);
  }
  body.hz-shell aside a.nav.on svg.i,
  body.hz-shell .app.is-slim a.nav.on svg.i { color: #fff; }
  body.hz-shell aside a.nav:not(.on)::after { display: none; }
  body.hz-shell .hz-board {
    position: relative;
    top: auto;
    border-radius: 0 0 22px 22px;
    padding: 16px 14px 18px;
  }
  body.hz-shell .hz-board > h1,
  body.hz-shell .hz-board > h1.board-title {
    font-size: 32px;
    margin-top: 12px;
  }
  body.hz-shell .tag { display: none; }
  body.hz-shell .top { flex-wrap: wrap; gap: 8px; }
  body.hz-shell .date { font-size: 13px; padding: 8px 14px; }
  body.hz-shell .grid { grid-template-columns: 1fr; gap: 14px; }
  body.hz-shell .card { --r: 0deg; transform: none; }
  body.hz-shell .inst {
    margin: 12px 10px 0;
    border-radius: 22px;
  }
  body.hz-shell .inst-band { padding: 28px 16px; }
  body.hz-shell .inst-access { grid-template-columns: 1fr; }
  body.hz-shell .inst-access-card { min-height: 0; }
}