/* V53.6.0 · iPad/PWA — capa táctil separada. No modifica el CSS funcional de escritorio. */
:root{
  --ipad-safe-top: env(safe-area-inset-top, 0px);
  --ipad-safe-right: env(safe-area-inset-right, 0px);
  --ipad-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ipad-safe-left: env(safe-area-inset-left, 0px);
}

html, body { overscroll-behavior: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) {
  button, .railItem, summary, select { min-height: 44px; }
  input, select, textarea { font-size:16px !important; }
  .legalText, .sideContent, .sideRail, .viewport { -webkit-overflow-scrolling: touch; }
  .railItem:hover, .miniBtn:hover, .ghostBtn:hover { transform:none !important; }
}

/* iPad horizontal: conserva la arquitectura completa, pero cabe sin scroll horizontal global. */
@media (pointer: coarse) and (min-width: 901px) and (max-width: 1366px) {
  body { overflow:hidden !important; }
  .appFrame {
    grid-template-columns: 210px minmax(0,1fr) !important;
    border-radius:0 !important;
    min-width:0 !important;
    padding-left:var(--ipad-safe-left);
    padding-right:var(--ipad-safe-right);
  }
  .sideRail {
    display:flex !important;
    padding:10px 8px calc(10px + var(--ipad-safe-bottom)) !important;
    gap:8px !important;
  }
  .railLogoSeal { width:82px !important; height:82px !important; }
  .railLogo strong { font-size:17px !important; }
  .railLogo span { font-size:9px !important; }
  .railGroupSummary { grid-template-columns:32px 1fr 12px !important; padding:8px 8px !important; }
  .railGroupSummary b { font-size:11px !important; }
  .railGroupSummary em { font-size:8.5px !important; line-height:1.18 !important; }
  .railItem { min-height:38px !important; padding:6px 7px !important; grid-template-columns:26px 1fr !important; }
  .railItem b { font-size:11px !important; }
  .railItem span { font-size:16px !important; }
  .studentCard { padding:9px 10px !important; }
  .studentCard strong { font-size:12px !important; }

  .appMain { min-width:0 !important; }
  .topbar {
    min-height:86px !important;
    grid-template-columns: 210px minmax(280px,1fr) 150px !important;
    gap:10px !important;
    padding:calc(10px + var(--ipad-safe-top)) 12px 10px 14px !important;
  }
  .brandLogoSmall { width:54px !important; height:54px !important; }
  .brand { gap:9px !important; }
  .brand h1 { font-size:25px !important; }
  .brand p { font-size:11px !important; }
  .searchRow { height:46px !important; }
  .topModeHint { min-width:0 !important; padding:8px 9px !important; }
  .topModeHint span { font-size:9px !important; }
  .topModeHint strong { font-size:12px !important; }

  .viewport { padding:0 10px !important; min-width:0 !important; }
  .appShell, .appShell.expanded {
    height:calc(100vh - 136px - var(--ipad-safe-top) - var(--ipad-safe-bottom)) !important;
    min-width:0 !important;
    width:100% !important;
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr) !important;
    gap:10px !important;
    padding:10px 0 !important;
  }
  .appShell.expanded { grid-template-columns:minmax(0,1fr) minmax(420px,1.05fr) !important; }
  .leftPanel, .rightPanel { min-width:0 !important; border-radius:18px !important; }
  .appShell.expanded .rightPanel { min-width:0 !important; }
  .articleHeader { padding:20px 18px 10px !important; gap:10px !important; }
  .articleHeader h2 { font-size:28px !important; }
  .articleHeader p { font-size:18px !important; }
  .statusBox { min-width:120px !important; padding:8px 9px !important; }
  .legalText { padding:18px 20px 32px !important; font-size:max(15px,var(--text-size)) !important; line-height:1.72 !important; }
  .sideHeader { padding:14px 14px 9px !important; }
  .sideHeader h3 { font-size:21px !important; }
  .personaBox { padding:8px 12px 10px !important; }
  .mainButtons { padding:8px 12px !important; gap:7px !important; }
  .mainButtons button { font-size:11.5px !important; padding:8px 9px !important; }
  .sideContent { padding:12px 13px calc(18px + var(--ipad-safe-bottom)) !important; }
  .footer { min-height:34px !important; padding:6px 12px calc(6px + var(--ipad-safe-bottom)) !important; font-size:9px !important; }
}

/* iPad vertical/estrecho: la navegación se convierte en cajón lateral, sin eliminarla. */
@media (pointer: coarse) and (max-width: 900px) {
  body { overflow:hidden !important; }
  .appFrame { grid-template-columns:1fr !important; border-radius:0 !important; }
  .sideRail {
    display:flex !important;
    position:fixed !important;
    z-index:5000 !important;
    top:0; bottom:0; left:0;
    width:min(82vw,320px) !important;
    transform:translateX(-105%);
    transition:transform .24s ease;
    padding:calc(12px + var(--ipad-safe-top)) 10px calc(12px + var(--ipad-safe-bottom)) !important;
    box-shadow:18px 0 48px rgba(0,0,0,.32) !important;
  }
  body.ipadNavOpen .sideRail { transform:translateX(0); }
  body.ipadNavOpen::after {
    content:""; position:fixed; inset:0; z-index:4990; background:rgba(12,8,20,.44); backdrop-filter:blur(2px);
  }
  .appMain { width:100%; min-width:0 !important; }
  .topbar {
    grid-template-columns:minmax(0,1fr) !important;
    min-height:auto !important;
    gap:8px !important;
    padding:calc(10px + var(--ipad-safe-top)) 12px 10px !important;
  }
  .brand { padding-left:48px; }
  .brandLogoSmall { width:48px !important; height:48px !important; }
  .brand h1 { font-size:25px !important; }
  .topModeHint { display:none !important; }
  .viewport { padding:0 8px !important; }
  .appShell, .appShell.expanded {
    grid-template-columns:1fr !important;
    min-width:0 !important;
    width:100% !important;
    height:calc(100vh - 180px - var(--ipad-safe-top) - var(--ipad-safe-bottom)) !important;
    gap:8px !important;
    padding:8px 0 !important;
  }
  .leftPanel { min-height:48vh !important; }
  .rightPanel { min-height:42vh !important; }
  .appShell.expanded .rightPanel { min-width:0 !important; }
  .articleHeader { padding:16px 15px 9px !important; }
  .articleHeader h2 { font-size:27px !important; }
  .legalText { padding:16px !important; }
  .footer { display:none !important; }
}

.ipadNavToggle {
  display:none;
  position:fixed;
  z-index:5100;
  left:calc(10px + var(--ipad-safe-left));
  top:calc(10px + var(--ipad-safe-top));
  width:44px; height:44px;
  border:2px solid rgba(255,255,255,.32);
  border-radius:14px;
  background:linear-gradient(135deg,#20152b,#d91b7f);
  color:#fff;
  font-size:21px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
@media (pointer: coarse) and (max-width:900px){ .ipadNavToggle{display:grid;place-items:center;} }

.ipadInstallHint {
  position:fixed; z-index:6000; right:calc(14px + var(--ipad-safe-right)); bottom:calc(14px + var(--ipad-safe-bottom));
  width:min(420px,calc(100vw - 28px)); padding:13px 42px 13px 15px; border-radius:18px;
  color:#fff; background:linear-gradient(135deg,#20152b,#7b2cff 70%,#d91b7f); border:1px solid rgba(255,255,255,.26);
  box-shadow:0 18px 44px rgba(0,0,0,.28); font-size:13px; line-height:1.35; font-weight:750;
}
.ipadInstallHint b{display:block;font-size:15px;margin-bottom:3px}.ipadInstallHint button{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:18px}