/* Campus Virtual V8 · Etapa 2B
   Capa responsive incremental: navegación, safe areas, targets táctiles y superficies densas. */

:root{
  --safe-area-top:env(safe-area-inset-top,0px);
  --safe-area-right:env(safe-area-inset-right,0px);
  --safe-area-bottom:env(safe-area-inset-bottom,0px);
  --safe-area-left:env(safe-area-inset-left,0px);
  --mobile-header-height:64px;
}

.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}
.mobile-menu-toggle,.mobile-account-link,.mobile-nav-layer{display:none}
.responsive-scroll-hint{display:none}
.topbar{padding-left:max(4vw,var(--safe-area-left));padding-right:max(4vw,var(--safe-area-right))}
.footer{padding-right:max(4vw,var(--safe-area-right));padding-bottom:max(34px,var(--safe-area-bottom));padding-left:max(4vw,var(--safe-area-left))}
.responsive-data-scroll{min-width:0}

@media(max-width:1180px){
  .shell,.future-shell{max-width:100%}
  .future-process-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teacher-bottom-grid{grid-template-columns:1fr}
  .academic-course-row{grid-template-columns:minmax(0,1fr) auto}
  .academic-course-row>*{min-width:0}
}

@media(max-width:860px){
  html{scroll-padding-top:calc(var(--mobile-header-height) + var(--safe-area-top) + 12px)}
  body{min-width:320px;overflow-x:hidden}
  body.mobile-nav-open{overflow:hidden;overscroll-behavior:none}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){font-size:16px}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select){min-height:44px}
  :where(input,select,textarea,[contenteditable="true"]){scroll-margin-top:calc(var(--mobile-header-height) + var(--safe-area-top) + 18px)}

  .topbar,.canvas-v032 .topbar{
    height:auto;min-height:calc(var(--mobile-header-height) + var(--safe-area-top));
    padding:var(--safe-area-top) max(12px,var(--safe-area-right)) 0 max(12px,var(--safe-area-left));
    gap:10px;z-index:60;
  }
  .topbar .brand{min-width:0;flex:1;gap:9px}
  .topbar .brand .seal{width:40px;height:40px;flex:0 0 auto;font-size:9px}
  .topbar .brand span:last-child{display:grid;min-width:0}
  .topbar .brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .topbar .brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  .topbar .top-actions{display:none}
  .mobile-menu-toggle,.mobile-account-link{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border:1px solid #d3dfe1;border-radius:13px;background:#fff;color:#153f52;cursor:pointer}
  .mobile-menu-toggle{order:-1}
  .mobile-menu-icon{display:grid;gap:4px;width:19px}
  .mobile-menu-icon i{display:block;height:2px;border-radius:99px;background:currentColor}
  .mobile-account-link span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0d6872;color:#fff;font-size:12px;font-weight:900}
  .mobile-menu-toggle:focus-visible,.mobile-account-link:focus-visible,.mobile-nav-drawer :focus-visible{outline:3px solid rgba(24,125,145,.35);outline-offset:2px}

  .mobile-nav-layer[hidden]{display:none}
  .mobile-nav-layer{position:fixed;z-index:100;inset:0;display:block;padding-right:var(--safe-area-right);padding-left:var(--safe-area-left)}
  .mobile-nav-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(5,24,31,.62);opacity:0;transition:opacity .2s ease;cursor:pointer}
  .mobile-nav-drawer{position:relative;display:flex;flex-direction:column;width:min(88vw,360px);height:var(--visual-viewport-height,100dvh);max-height:100dvh;padding-top:var(--safe-area-top);padding-bottom:max(14px,var(--safe-area-bottom));background:#fff;box-shadow:24px 0 70px rgba(5,24,31,.28);transform:translateX(calc(-100% - var(--safe-area-left)));transition:transform .22s ease;overflow:hidden;outline:0}
  .mobile-nav-layer.is-open .mobile-nav-backdrop{opacity:1}
  .mobile-nav-layer.is-open .mobile-nav-drawer{transform:translateX(0)}
  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px;padding:10px 14px;border-bottom:1px solid #e3eaec}
  .mobile-nav-brand{display:flex;align-items:center;gap:10px;min-width:0}
  .mobile-nav-brand .campus-brand-mark{width:46px;height:46px;padding:3px;border:1px solid #d7e3e5;border-radius:14px;box-shadow:0 6px 16px rgba(10,53,65,.12)}
  .mobile-nav-brand .campus-brand-mark img{border-radius:10px}
  .mobile-nav-brand>span:last-child{display:grid;min-width:0}
  .mobile-nav-brand b{font-size:14px}
  .mobile-nav-brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#68797e;font-size:10px}
  .mobile-nav-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border:1px solid #d9e3e5;border-radius:13px;background:#f7f9f9;color:#254b58;font-size:25px;line-height:1;cursor:pointer}
  .mobile-nav-links{display:grid;align-content:start;gap:3px;min-height:0;padding:12px;overflow-y:auto;overscroll-behavior:contain}
  .mobile-nav-links a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;min-height:48px;padding:4px 12px 4px 4px;border-radius:12px;color:#294752;font-size:14px;font-weight:750}
  .mobile-nav-links a>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#edf5f5;color:#0c6872;font-weight:900}
  .mobile-nav-links a:hover,.mobile-nav-links a[aria-current="page"]{background:#e8f3f3;color:#0b5964}
  .mobile-nav-links a[aria-current="page"]{box-shadow:inset 3px 0 #0e7b82}
  .mobile-nav-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#0e7180;color:#fff;font-size:10px}
  .mobile-nav-account{display:grid;gap:8px;margin-top:auto;padding:14px;border-top:1px solid #e3eaec;background:#f7fafa}
  .mobile-nav-account>div{display:grid;gap:2px;padding:2px 4px 8px}
  .mobile-nav-account>div b{font-size:13px}.mobile-nav-account>div small{color:#64777d;font-size:10px}
  .mobile-nav-account>a,.mobile-nav-account .ghost{display:flex;align-items:center;min-height:44px;width:100%;padding:9px 12px;border:1px solid #d9e4e6;border-radius:11px;background:#fff;color:#294d58;font-size:12px;font-weight:800}
  .mobile-nav-account .ghost{justify-content:center}

  .shell,.future-shell{width:100%;padding-right:max(14px,var(--safe-area-right));padding-left:max(14px,var(--safe-area-left))}
  .footer{padding-right:max(18px,var(--safe-area-right));padding-bottom:max(24px,var(--safe-area-bottom));padding-left:max(18px,var(--safe-area-left));gap:12px;flex-wrap:wrap}
  :where(.primary,.secondary,.ghost,.ghost-link,.backlink,.manage-link,.hero-primary-action,.canvas-side-button,.future-rail-button,.teacher-card-actions a,.agenda-actions a,.audit-filters a,.invite-revoke,.communication-admin-actions button,.communication-edit-panel>summary){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .topbar .brand{min-height:44px}
  .future-info-card>a,.future-rail-item>a{display:flex;align-items:center;min-height:44px}
  :where(button,a,summary,input,select,textarea){touch-action:manipulation}

  .future-hero,.invite-hero,.admin-security-hero,.user-control-hero,.account-security-hero{padding:24px 20px;border-radius:20px}
  .future-hero h1,.invite-hero h1{font-size:clamp(30px,9vw,42px)}
  .future-hero-teacher,.future-hero-panel{grid-template-columns:1fr}
  .future-process-strip{grid-template-columns:1fr 1fr;gap:10px}
  .teacher-grid,.future-course-grid,.teacher-bottom-grid{grid-template-columns:1fr}
  .teacher-card-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .teacher-card-actions a{width:100%;text-align:center}

  .canvas-layout,.canvas-v032 .canvas-layout{display:block;min-height:0}
  .canvas-sidebar{display:none}
  .canvas-main-area,.canvas-v032 .canvas-main-area{padding:14px max(14px,var(--safe-area-right)) max(24px,var(--safe-area-bottom)) max(14px,var(--safe-area-left))}
  .canvas-banner{padding:14px}
  .canvas-board,.canvas-v032 .canvas-board{gap:16px;margin-top:16px}
  .canvas-title-row h1,.canvas-v032 .tidy-heading h1{font-size:30px}
  .canvas-highlight-card,.canvas-v032 .tidy-hero{padding:18px}
  .canvas-highlight-copy h2{font-size:28px}.canvas-highlight-copy p{font-size:16px}
  .canvas-highlight-actions,.canvas-v032 .tidy-actions{display:grid;grid-template-columns:1fr}
  .canvas-highlight-actions a,.canvas-v032 .tidy-actions a{width:100%;min-height:44px;text-align:center}
  .canvas-course-grid,.canvas-double-grid,.canvas-right-column,.canvas-v032 .tidy-course-grid,.canvas-v032 .tidy-secondary-grid,.canvas-v032 .tidy-right-column,.canvas-v032 .tidy-stats{grid-template-columns:1fr}
  .canvas-course-card,.canvas-info-card,.canvas-v032 .tidy-course-card,.canvas-v032 .tidy-info-card,.canvas-v032 .tidy-side-card{padding:17px}
  .canvas-course-card h3{font-size:25px}.canvas-section-head h2{font-size:27px}

  .users-admin-shell,.invite-shell,.admin-security-shell,.global-command-shell,.communications-shell,.coursework-shell,.activity-shell{width:100%;padding-right:max(14px,var(--safe-area-right));padding-left:max(14px,var(--safe-area-left))}
  .users-admin-hero,.invite-hero,.admin-security-hero{align-items:flex-start;flex-direction:column}
  .users-hero-actions,.admin-security-actions{width:100%;align-items:stretch;flex-direction:column}
  .users-hero-actions a,.admin-security-actions a{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;text-align:center}
  .user-create-roles label,.status-toggle{min-height:44px}
  .user-search-console{grid-template-columns:1fr}
  .user-search-main,.user-search-console button{grid-column:auto}
  .user-search-console button{width:100%}
  .user-directory-card{overflow:hidden}
  .user-directory-card,.invite-list-card,.audit-console,.invite-admin-layout>*{min-width:0;max-width:100%}
  .responsive-data-scroll,.invite-table-wrap,.audit-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
  .responsive-data-scroll:focus-visible,.invite-table-wrap:focus-visible,.audit-table-wrap:focus-visible{outline:3px solid rgba(24,125,145,.30);outline-offset:-3px}
  .responsive-scroll-hint{display:flex;align-items:center;min-height:40px;margin:0;padding:8px 18px;border-top:1px solid #e7edef;border-bottom:1px solid #e7edef;background:linear-gradient(90deg,#f5f9f9 75%,#dcebec);color:#526a72;font-size:11px;font-weight:750}
  .user-directory-grid{min-width:760px}
  .user-directory-labels span:nth-child(3),.user-directory-row>div:nth-child(3){display:block}
  .invite-admin-layout{grid-template-columns:1fr}
  .invite-create-card{position:static;top:auto}
  .audit-console>header{align-items:flex-start;flex-direction:column;padding:18px}
  .audit-filters{flex-wrap:nowrap;width:100%;padding-bottom:4px;overflow-x:auto;overscroll-behavior-inline:contain}
  .audit-filters a{min-height:44px;white-space:nowrap}
  .admin-nav,.catalog-admin-nav{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .admin-nav a,.catalog-admin-nav a{flex:0 0 auto;min-height:44px}
  .academic-course-row{grid-template-columns:1fr;gap:12px}
  .academic-course-row>*{width:100%}
  .academic-people-grid,.academic-settings-grid{grid-template-columns:1fr}

  .communication-read-metrics{display:grid}
  .communication-admin-row{grid-template-columns:1fr}
  .communication-admin-actions{grid-template-columns:1fr 1fr}
  .communication-edit-panel[open]>form{inset:calc(var(--safe-area-top) + 10px) max(12px,var(--safe-area-right)) auto max(12px,var(--safe-area-left));max-height:calc(var(--visual-viewport-height,100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 20px);padding:20px;overflow:auto}
  .communication-edit-panel form{grid-template-columns:1fr}
  .communication-edit-panel form label,.communication-edit-panel form label:nth-of-type(1),.communication-edit-panel form label:nth-of-type(2),.communication-edit-panel form button{grid-column:auto}
  .communications-inbox-toolbar{align-items:stretch;flex-direction:column}
  .communications-inbox-toolbar nav{max-width:100%;justify-content:flex-start;overflow-x:auto}

  .confirm-dialog{width:min(520px,calc(100% - 24px));max-height:calc(var(--visual-viewport-height,100dvh) - var(--safe-area-top) - var(--safe-area-bottom) - 24px);margin:auto}
  .confirm-dialog-card{max-height:inherit;padding:22px;overflow:auto;overscroll-behavior:contain}
  .confirm-dialog-actions{display:grid;grid-template-columns:1fr 1fr;position:sticky;bottom:0;padding-top:12px;background:#fff}
  .confirm-dialog-actions button{min-height:44px;width:100%}

  .login-body,.activate-body{min-height:var(--visual-viewport-height,100dvh)}
  .login-one-screen .login-panel{min-height:var(--visual-viewport-height,100dvh);padding-top:max(28px,var(--safe-area-top));padding-right:max(20px,var(--safe-area-right));padding-bottom:max(28px,var(--safe-area-bottom));padding-left:max(20px,var(--safe-area-left))}
  .activate-shell{padding-top:max(22px,var(--safe-area-top));padding-right:max(14px,var(--safe-area-right));padding-bottom:max(28px,var(--safe-area-bottom));padding-left:max(14px,var(--safe-area-left))}
  .activate-form-grid{grid-template-columns:1fr}.activate-form-grid .span-2{grid-column:auto}
}

@media(max-width:600px){
  .topbar .brand small{display:none}
  .future-process-strip{grid-template-columns:1fr}
  .future-hero-panel{min-width:0}
  .user-admin-kpis,.admin-security-kpis,.invite-kpis,.communications-kpis{grid-template-columns:1fr}
  .identity-form-grid,.identity-admin-card .identity-form-grid,.invite-form-grid{grid-template-columns:1fr}
  .identity-form-grid .span-2{grid-column:auto}
  .user-create-footer{align-items:stretch;flex-direction:column-reverse}
  .user-create-footer button{width:100%}
  .communication-admin-actions,.confirm-dialog-actions{grid-template-columns:1fr}
  .confirm-dialog-card{padding:20px}.confirm-dialog-card h2{font-size:23px}
  .agenda-event{grid-template-columns:28px 64px minmax(0,1fr);gap:12px}
  .agenda-actions{grid-column:2/-1;display:grid;grid-template-columns:1fr}
  .agenda-actions>a{width:100%}
}

@media(max-width:420px){
  .topbar .brand b{font-size:12px}
  .canvas-main-area,.canvas-v032 .canvas-main-area{padding-right:max(10px,var(--safe-area-right));padding-left:max(10px,var(--safe-area-left))}
  .canvas-highlight-card,.canvas-v032 .tidy-hero,.canvas-course-card,.canvas-info-card,.canvas-v032 .tidy-course-card,.canvas-v032 .tidy-info-card,.canvas-v032 .tidy-side-card{padding:15px}
}

@media(max-width:860px) and (orientation:landscape){
  :root{--mobile-header-height:56px}
  .topbar,.canvas-v032 .topbar{min-height:calc(var(--mobile-header-height) + var(--safe-area-top))}
  .mobile-nav-head{min-height:58px}.mobile-nav-links{grid-template-columns:1fr 1fr}
  .mobile-nav-account{grid-template-columns:1fr 1fr}.mobile-nav-account>div{grid-column:1/-1}.mobile-nav-account form{grid-column:1/-1}
  .confirm-dialog-card{padding:18px}.confirm-dialog-card h2{margin:5px 0 8px}.confirm-dialog-card p{margin-bottom:8px}.confirm-dialog-actions{margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-nav-backdrop,.mobile-nav-drawer{transition:none}
}