/* Live Connect Portal V3.7 — canonical responsive layer
   Purpose: centralize responsive behavior without rewriting the approved desktop UI. */

/* Intrinsic sizing guards */
:where(.container,.section,.card,.course-card,.special-course-card,.offer-plan,.portal-content,.central-content,.modal-panel,.form-grid,.course-grid,.special-course-grid,.course-fact-cards,.academic-summary-cards,.admin-top-actions,.central-toolbar) > *{min-width:0}
:where(img,svg,video,canvas){max-width:100%}
:where(h1,h2,h3,h4,p,a,button,label,span,strong,small){overflow-wrap:break-word}

/* Internal horizontal scrolling is preferable to viewport overflow for data tables. */
:where(.table-wrap,.central-table-wrap,.admin-table-wrap,.academic-table-wrap){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}

/* Avoid fixed/floating actions colliding with device safe areas. */
.floating-whatsapp{right:max(16px,env(safe-area-inset-right))}
.back-to-top{right:max(16px,env(safe-area-inset-right))}

/* Tablet / compact desktop: single application breakpoint. */
@media (max-width:1020px){
  .desktop-nav{display:none}
  .mobile-toggle{display:inline-flex}
  .school-central .portal-side{top:var(--admin-mobile-top,0);bottom:0;height:auto}
  .school-central .portal-menu-backdrop{inset:var(--admin-mobile-top,0) 0 0}
  .course-fact-cards.has-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .special-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .central-content{margin-left:0}
}

/* Phone / narrow tablet: primary content becomes one-column unless 2-up facts remain useful. */
@media (max-width:760px){
  :root{--page-inline:16px}
  .container,.portal-content{padding-left:var(--page-inline);padding-right:var(--page-inline)}
  .course-grid,.special-course-grid,.offer-compare-grid,.commercial-mode-picker,.fast-class-grid{grid-template-columns:1fr}
  .offer-plan.fast{transform:none}
  .special-course-facts.large{grid-template-columns:1fr}
  .modal-panel{width:calc(100% - 18px);max-height:92dvh}
  .course-family-tabs{scroll-padding-inline:var(--page-inline)}
  .course-family-tabs a{min-height:42px;display:inline-flex;align-items:center}
  .floating-whatsapp{bottom:calc(92px + env(safe-area-inset-bottom))}
  .back-to-top{bottom:calc(146px + env(safe-area-inset-bottom))}
  input,select,textarea,button{max-width:100%}
}

/* Small phones: eliminate avoidable multi-column compression. */
@media (max-width:430px){
  :root{--page-inline:14px}
  .course-fact-cards,.course-fact-cards.has-four,.academic-summary-cards,.saving-pair,.fast-benefits{grid-template-columns:1fr}
  .offer-mobile-tabs{grid-template-columns:1fr}
  .day-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .central-searchbox,.approval-box{min-width:0;width:100%}
  .admin-top-actions,.central-toolbar{width:100%;flex-wrap:wrap}
  .admin-top-actions > *,.central-toolbar > *{max-width:100%}
}

/* Minimum supported width guard (320px class devices). */
@media (max-width:360px){
  :root{--page-inline:12px}
  .btn,.course-family-tabs a{white-space:normal;text-align:center}
  .fast-periods{gap:6px}
  .fast-periods span{padding:7px 9px}
  .modal-header,.modal-body{padding-left:12px;padding-right:12px}
}

/* Respect reduced-motion users without changing normal animation design. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
}

/* V4.1 — editor 360° de alunos e multiformação */
.student-editor-top{display:flex;justify-content:flex-start;margin-bottom:14px}
.student-profile-form>details{grid-column:1/-1}
.student-editor-advanced{border:1px solid var(--line,#dfe6ef);border-radius:14px;padding:12px 14px;background:var(--surface,#fff)}
.student-editor-advanced summary{cursor:pointer;font-weight:700;margin:-2px 0 10px}
.student-enrollment-editor{border:1px solid var(--line,#dfe6ef);border-radius:16px;padding:16px;margin:0 0 16px;background:var(--surface,#fff)}
.student-enrollment-editor.is-cancelled{opacity:.78}
.student-enrollment-editor .panel-head{margin-bottom:14px}
.student-enrollment-editor .panel-head h3{margin:3px 0 2px}
.student-enrollment-editor .panel-head p{margin:0}
.student-editor-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:760px){
  .student-enrollment-editor{padding:13px}
  .student-editor-actions .btn{width:100%}
  .student-editor-advanced{padding:10px}
}

/* V4.2 — Visual enrollment editor */
.visual-enrollment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.visual-enrollment-summary>div{border:1px solid var(--line,#dfe6ef);border-radius:14px;padding:12px 14px;background:#f8fbff}
.visual-enrollment-summary small{display:block;color:var(--muted,#65748b);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.visual-enrollment-summary strong{display:block;color:var(--navy,#102448);font-size:.92rem;line-height:1.3}
.visual-form-section{grid-column:1/-1;margin:8px 0 -2px;padding-top:9px;border-top:1px solid var(--line,#dfe6ef)}
.visual-form-section:first-of-type{border-top:0;padding-top:0}
.visual-enrollment-form .central-field textarea{min-height:104px}
.visual-enrollment-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.visual-editor-note{margin-top:14px}
.modal-panel:has(.visual-enrollment-form){width:min(96vw,980px)!important}
@media(max-width:720px){
  .visual-enrollment-summary{grid-template-columns:1fr}
  .visual-enrollment-actions .btn{width:100%}
  .modal-panel:has(.visual-enrollment-form){width:calc(100% - 14px)!important;max-height:94dvh!important}
}


/* V5.3 — final cross-device guards */
html,body,#app{max-width:100%;overflow-x:hidden}
:where(.page-shell,.container,.portal-content,.course-detail,.course-hero,.course-grid,.special-course-grid,.offer-compare-grid,.commercial-mode-picker,.form-grid,.modal-panel,.student-dashboard,.student-area,.campaign-card)>*{min-width:0}
:where(img,video,canvas){height:auto}
:where(input,select,textarea,button,.btn){min-width:0;max-width:100%}
.modal-root{padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
@media(pointer:coarse){:where(.btn,button:not(.central-sort),input,select){min-height:44px}}
@media(max-width:760px){
  .modal-panel{max-width:calc(100vw - 14px);max-height:calc(100dvh - 14px)}
  .modal-header{position:sticky;top:0;z-index:2;background:var(--surface,#fff)}
  .form-actions,.modal-actions{display:grid;grid-template-columns:1fr;width:100%}.form-actions .btn,.modal-actions .btn{width:100%}
  .course-hero,.special-course-hero{overflow:hidden}
}
@media(max-width:360px){
  :root{--page-inline:10px}
  .container,.portal-content{padding-left:var(--page-inline);padding-right:var(--page-inline)}
  .course-card,.special-course-card,.offer-plan{border-radius:14px}
}
@media(min-width:1600px){.central-content,.portal-content{max-width:1600px;margin-inline:auto}}