/* ================================================================
   V05.1.0 · FASE 1 · ENVOLVENTE GENERAL
   Reforma exclusivamente estética del cascarón.
   NO toca motores, datos, subrayado, planificador, intro, superbotones
   ni subbotones. Dirección aprobada: Pedeplanifiqueitor + glamour limpio.
   ================================================================ */
:root{
  --f1-bg-deep:#1f171e;
  --f1-bg-mid:#2a2229;
  --f1-bg-soft:#352c34;
  --f1-plum:#5b2448;
  --f1-pink:#e4338d;
  --f1-pink-soft:#f2a5c8;
  --f1-gold:#c99b45;
  --f1-paper:#fffaf4;
  --f1-paper-2:#fff7f0;
  --f1-panel-line:rgba(112,67,91,.20);
  --f1-shadow:0 20px 48px rgba(13,8,13,.24);
  --f1-shadow-soft:0 12px 28px rgba(13,8,13,.15);
}

/* 1 · FONDO GENERAL: escenario elegante, sin lunares ni ruido */
html,body{background:var(--f1-bg-deep)!important;}
body{
  background:
    radial-gradient(circle at 76% -10%,rgba(228,51,141,.14),transparent 34%),
    radial-gradient(circle at 18% 108%,rgba(106,49,94,.16),transparent 36%),
    linear-gradient(145deg,var(--f1-bg-mid) 0%,var(--f1-bg-soft) 48%,var(--f1-bg-deep) 100%)!important;
}
.appFrame{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.appMain{background:transparent!important;}
.viewport{
  background:
    radial-gradient(circle at 82% 2%,rgba(228,51,141,.055),transparent 31%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035))!important;
  padding:18px 24px 18px 22px!important;
}
.appShell{
  background:transparent!important;
  gap:22px!important;
  padding:0!important;
  height:100%!important;
}

/* 2 · CABECERA: más limpia, premium y luminosa */
.topbar{
  min-height:98px!important;
  padding:16px 30px 14px 32px!important;
  background:
    linear-gradient(90deg,rgba(228,51,141,.105),transparent 30%),
    linear-gradient(180deg,rgba(47,36,46,.98),rgba(37,29,36,.98))!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 12px 34px rgba(8,5,8,.22)!important;
  backdrop-filter:blur(12px) saturate(1.06);
}
.brand{gap:14px!important;}
.brandLogoSmall{
  width:68px!important;height:68px!important;
  filter:drop-shadow(0 9px 18px rgba(228,51,141,.25))!important;
}
.topbar .brand h1{color:#fff8fb!important;font-size:32px!important;text-shadow:0 1px 0 rgba(255,255,255,.04);}
.topbar .brand p{color:#e9b6cf!important;font-weight:700!important;}
.searchRow{
  height:50px!important;
  background:rgba(255,252,250,.98)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  border-radius:15px!important;
  box-shadow:0 12px 28px rgba(9,6,9,.23)!important;
}
.searchRow:focus-within{
  border-color:rgba(228,51,141,.46)!important;
  box-shadow:0 12px 30px rgba(9,6,9,.22),0 0 0 3px rgba(228,51,141,.11)!important;
}
.topModeHint{
  background:linear-gradient(145deg,#fffdfb,#fff4f9)!important;
  border:1px solid rgba(228,51,141,.21)!important;
  border-radius:15px!important;
  box-shadow:0 10px 24px rgba(8,5,8,.18)!important;
}
.topModeHint span{color:#8b5b72!important;}
.topModeHint strong{color:#281c25!important;}

/* 3 · SIDEBAR EXTERIOR: mismo universo que Pedeplanifiqueitor.
   NO se toca aquí el diseño de los cinco superbotones ni sus hijos. */
.sideRail{
  background:
    radial-gradient(circle at 50% -3%,rgba(228,51,141,.15),transparent 28%),
    linear-gradient(180deg,#251c24 0%,#211920 55%,#1b131a 100%)!important;
  border-right:1px solid rgba(255,255,255,.075)!important;
  box-shadow:14px 0 34px rgba(8,5,8,.20)!important;
  padding:12px 10px 14px!important;
  gap:12px!important;
}
.railLogo{
  padding:4px 8px 12px!important;
  border-bottom:1px solid rgba(255,255,255,.085)!important;
}
.railLogoSeal{
  width:90px!important;height:90px!important;
  filter:drop-shadow(0 10px 20px rgba(228,51,141,.27))!important;
}
.railLogo strong{color:#fff8fb!important;font-size:19px!important;}
.railLogo span{color:#dca6c0!important;font-size:9.7px!important;}
.railNav{scrollbar-color:rgba(228,51,141,.24) transparent;}
.sideRail::-webkit-scrollbar,.railNav::-webkit-scrollbar{width:6px!important;}
.sideRail::-webkit-scrollbar-thumb,.railNav::-webkit-scrollbar-thumb{background:rgba(228,51,141,.22)!important;border-radius:99px!important;}
.studentCard{
  background:linear-gradient(145deg,#241722,#352030)!important;
  border:1px solid rgba(228,51,141,.20)!important;
  box-shadow:0 14px 28px rgba(8,5,8,.24)!important;
  border-radius:17px!important;
}

/* 4 · PANELES PRINCIPALES: papel claro, profundidad y más aire */
.leftPanel,.rightPanel{
  border:1px solid var(--f1-panel-line)!important;
  border-radius:24px!important;
  box-shadow:var(--f1-shadow)!important;
  overflow:hidden!important;
}
.leftPanel,.leftPanel.relatedMainView{
  background:linear-gradient(180deg,var(--f1-paper),var(--f1-paper-2))!important;
}
.rightPanel{
  background:linear-gradient(180deg,#fffdfb 0%,#fff8fb 100%)!important;
}
.leftPanel:before{
  height:4px!important;
  background:linear-gradient(90deg,#bf2d77 0%,#e34a98 46%,#c99b45 100%)!important;
  opacity:.84!important;
}
.articleHeader{
  padding:30px 30px 14px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,246,250,.90))!important;
  border-bottom:1px solid rgba(112,67,91,.13)!important;
}
.articleHeader h2{color:#251c23!important;}
.articleHeader .eyebrow{color:#95506f!important;}
.articleHeader p{color:#bf2d77!important;}
.legalText{
  background:linear-gradient(180deg,#fffdf9,#fffaf4)!important;
  color:#201b20!important;
  padding:28px 36px 50px!important;
}
.sideHeader{
  padding:19px 22px 13px!important;
  background:linear-gradient(135deg,#fffdfc,#fff5f9)!important;
  border-bottom:1px solid rgba(112,67,91,.13)!important;
}
.sideHeader h3{color:#2a1d27!important;}
.personaBox{
  padding:11px 22px 15px!important;
  background:rgba(255,255,255,.60)!important;
  border-bottom:1px solid rgba(112,67,91,.11)!important;
}
.sideContent{
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,249,252,.84))!important;
}
body.lolaMode .rightPanel{
  border-color:rgba(228,51,141,.32)!important;
  box-shadow:0 20px 48px rgba(13,8,13,.22),0 0 0 1px rgba(228,51,141,.06)!important;
}

/* 5 · PIE Y RESPIRACIÓN GENERAL */
.footer{
  min-height:42px!important;
  background:linear-gradient(180deg,#252029,#201a21)!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  color:#d9cbd3!important;
  padding:0 26px!important;
}
.footer strong{color:#f079b1!important;}

/* iPad horizontal: conservar la misma envolvente sin alterar la arquitectura táctil existente. */
@media (pointer:coarse) and (min-width:901px) and (max-width:1366px){
  .topbar{grid-template-columns:260px minmax(220px,1fr) 140px!important;}
  .brandLogoSmall{width:46px!important;height:46px!important;}
  .brand{gap:8px!important;}
  .brand h1{font-size:19px!important;white-space:nowrap!important;}
  .brand p{font-size:9.5px!important;white-space:nowrap!important;}
  .viewport{padding:10px!important;}
  .appShell{gap:10px!important;padding:0!important;}
  .topbar{min-height:86px!important;padding:calc(10px + var(--ipad-safe-top)) 12px 10px 14px!important;}
  .sideRail{padding:10px 8px calc(10px + var(--ipad-safe-bottom))!important;gap:8px!important;}
  .leftPanel,.rightPanel{border-radius:18px!important;}
  .articleHeader{padding:20px 18px 10px!important;}
  .legalText{padding:18px 20px 32px!important;}
  .sideHeader{padding:14px 14px 9px!important;}
  .personaBox{padding:8px 12px 10px!important;}
  .footer{min-height:34px!important;padding:6px 12px calc(6px + var(--ipad-safe-bottom))!important;}
}

/* iPad vertical/estrecho: solo piel; la lógica del cajón sigue siendo la existente. */
@media (pointer:coarse) and (max-width:900px){
  .viewport{padding:0 8px!important;}
  .appShell{gap:8px!important;padding:8px 0!important;height:calc(100vh - 180px - var(--ipad-safe-top) - var(--ipad-safe-bottom))!important;}
  .topbar{padding:calc(10px + var(--ipad-safe-top)) 12px 10px!important;}
  .sideRail{padding:calc(12px + var(--ipad-safe-top)) 10px calc(12px + var(--ipad-safe-bottom))!important;}
  .leftPanel,.rightPanel{border-radius:18px!important;}
}