/* Phone card layout. Loaded after module styles to resolve legacy breakpoints. */
@media (max-width:767px){
 html[data-theme] body[class*="cuik-page-"] :is(.geo-main,.territorial-main,.eb-main,.push-main,.soc-main,.main,.core-shell-main){
  min-width:0!important;max-width:100%!important;box-sizing:border-box;
 }
 html[data-theme] body[class*="cuik-page-"] :is(
 .card,.panel,.kpi,.geo-kpi,.soc-kpi-card,.soc-panel,.geo-panel,.summary-card,.metric-card,.stat-tile,
 .table-card,.chart-card,.hero,.hero-main,.scope-banner,.executive-summary,.quick,.module-card,
 .fichas-query-workspace,.fichas-search-panel,.core-config-panel,.assistant-layout
 ){
  min-width:0!important;max-width:100%!important;box-sizing:border-box;
  overflow-wrap:anywhere;text-align:start;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.card,.panel,.hero,.hero-main,.kpi,.geo-kpi,.soc-kpi-card,.geo-panel,.soc-panel,.executive-summary)>*{
  min-width:0;max-width:100%;box-sizing:border-box;
 }
 /* Decorative circles must not increase the card's scroll width. */
 html[data-theme] body[class*="cuik-page-"] :is(.kpi,.geo-kpi,.soc-kpi-card,.hero,.hero-main){overflow:clip!important}
 html[data-theme] body[class*="cuik-page-"] :is(.hero,.hero-main,.executive-summary,.card,.panel){padding:16px}
 html[data-theme] body[class*="cuik-page-"] :is(.bottom-grid,.dashboard-grid,.three-grid,.chart-grid,.geo-chart-grid,.quick-grid,.detail-grid,.learning-detail-grid){
  grid-template-columns:minmax(0,1fr)!important;gap:12px!important;min-width:0!important;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.kpi-grid,.geo-kpi-grid,.soc-kpis,.cal-kpis,.stats-grid){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;align-items:stretch;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.kpi-top,.card-head,.panel-head,.section-toolbar,.hero-actions,.control-row){
  flex-wrap:wrap;gap:10px;min-width:0;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.kpi-title,.kpi-foot,.kpi-sub,.subtitle,.section-sub,.summary-text){
  white-space:normal!important;overflow-wrap:anywhere;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.hero h1,.hero h2,.hero-main h1,.hero-main h2){
  font-size:clamp(22.56px,6.5vw,30.08px)!important;line-height:1.2!important;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.chart,.geo-chart){width:100%!important;min-width:0!important;max-width:100%!important}
 html[data-theme] body[class*="cuik-page-"] :is(.spark,.sparkline) :is(svg,canvas){max-width:100%!important}
 html[data-theme] body[class*="cuik-page-"] :is(.table-wrap,.table-scroll,.table-responsive,.tracking-table-wrap,.reader-table-wrap){
  width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.message,.answer-card,.source-inspector,.plain-message){min-width:0;max-width:100%;overflow-wrap:anywhere}
 html[data-theme] body[class*="cuik-page-"] .plain-message{white-space:pre-wrap}
}
@media (max-width:479px){
 html[data-theme] body[class*="cuik-page-"] :is(.kpi-grid,.geo-kpi-grid,.soc-kpis,.cal-kpis,.stats-grid){grid-template-columns:minmax(0,1fr)!important}
 html[data-theme] body[class*="cuik-page-"] :is(.hero-actions,.control-row){display:flex;flex-direction:column;align-items:stretch}
 html[data-theme] body[class*="cuik-page-"] :is(.hero-actions,.control-row)>:is(button,a){width:100%;justify-content:center;white-space:normal}
}
@media (max-width:767px){
 html[data-theme] body[class*="cuik-page-"] :is(.kpi,.geo-kpi,.soc-kpi-card,.hero,.hero-main)::after{
  right:0!important;max-width:100%!important;transform:none!important;
 }
 html[data-theme] body[class*="cuik-page-"] :is(.table-toolbar,.control-group){min-width:0!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important}
 html[data-theme] body[class*="cuik-page-"] :is(.table-toolbar,.control-group) :is(input,select,textarea){min-width:0!important;width:100%!important;max-width:100%!important}
 html[data-theme] body.cuik-page-campana .hero{padding:0!important}
}
@media (max-width:767px){
 html[data-theme] body[class*="cuik-page-"] .hero::before{left:0!important;right:0!important;width:100%!important;max-width:100%!important}
}
@media (max-width:767px){
 html[data-theme] body[class*="cuik-page-"] .hero::after{left:auto!important}
}