/* BERLAP INSPECT · barra superior y panel general en teléfonos/tablets.
   Optimización visual: no modifica estados, informes ni datos guardados. */
@media (max-width:1050px){
  .topbar{gap:10px}
  .topbar>div:first-child{display:flex;align-items:center;gap:9px!important;min-width:0;flex:1 1 auto}
  .topbar .top-context{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .top-context strong{display:inline;overflow:hidden;text-overflow:ellipsis}
  .topbar .top-actions{flex:0 0 auto;min-width:0;gap:8px}
  /* El botón compacta las tres opciones, sin retirar ninguna funcionalidad. */
  .topbar #berlapCloudArea{position:relative;display:block;flex:0 0 auto}
  .topbar #berlapCloudArea #cloudMobileToggle{
    display:inline-flex;align-items:center;justify-content:center;
    gap:6px;min-height:44px;min-width:75px;
    padding:8px 12px;white-space:nowrap;
    border:1px solid #b7d9eb;border-radius:11px;
    background:#ecf7ff;color:#145a84;font-size:12px;font-weight:800;
  }
  .topbar #berlapCloudArea.cloud-is-connected #cloudMobileToggle:before{
    content:"";width:7px;height:7px;flex:0 0 7px;
    background:#0ca679;border-radius:50%;
  }
  .topbar #berlapCloudArea #berlapCloudTools{
    display:none;position:absolute;top:calc(100% + 12px);right:-44px;
    width:min(310px,calc(100vw - 24px));max-width:calc(100vw - 24px);
    background:#fff;border:1px solid #dce8f1;border-radius:16px;
    box-shadow:0 18px 50px #092d4a38;
    padding:13px;z-index:60;flex-direction:column;align-items:stretch;
    flex-wrap:nowrap;gap:9px;
  }
  .topbar #berlapCloudArea.mobile-open #berlapCloudTools{display:flex}
  .topbar #berlapCloudArea #berlapCloudTools>button{
    display:block;width:100%;min-height:46px;padding:12px 14px;
    font-size:13px;line-height:1.35;text-align:left;white-space:normal;
    overflow-wrap:anywhere;
  }
  .topbar #berlapCloudArea #berlapCloudTools>button:first-child{
    background:#e7f4fc;color:#0b5e90;
  }
  .topbar>.top-actions>.status-pill,
  .topbar .top-actions>.status-pill,
  .topbar .top-actions>.pill-demo{display:none}
}
@media (min-width:761px) and (max-width:1050px){
  .topbar .top-context{font-size:11px;max-width:230px}
  .topbar .top-initial{flex-shrink:0}
}
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:clip}
  .shell,.workspace,.page{min-width:0}
  .topbar{
    box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;
    justify-content:space-between;height:62px;min-height:62px;
    padding:0 12px;gap:8px;
  }
  .topbar>div:first-child{flex:1 1 auto;min-width:0;gap:8px!important}
  .topbar .mobile-menu{
    width:44px;height:44px;min-width:44px;min-height:44px;
    flex:0 0 44px;display:grid!important;place-items:center;
    border-radius:12px;
  }
  .topbar .top-context{
    font-size:0;line-height:1.2;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar .top-context strong{
    font-size:12px;letter-spacing:0;font-weight:800;
    display:inline-block;vertical-align:middle;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .topbar .top-actions{display:flex;flex:0 0 auto;gap:7px;align-items:center}
  .topbar .top-initial{
    width:33px;height:33px;flex:0 0 33px;
    font-size:12px;border-radius:10px;
  }
  .topbar #berlapCloudArea #cloudMobileToggle{min-height:43px;min-width:72px;padding:7px 9px;font-size:11px}
  .sidebar{overflow-y:auto;overscroll-behavior:contain;max-height:100dvh}
  .sidebar .nav-btn{min-height:46px}
  .dashboard-page{padding:21px 13px 44px;overflow-x:clip}
  .dashboard-page .heading{display:block;margin-bottom:19px}
  .dashboard-page .heading>div:first-child{max-width:100%;min-width:0}
  .dashboard-page .heading h1{font-size:clamp(23px,6.5vw,29px);line-height:1.17;overflow-wrap:normal}
  .dashboard-page .heading .eyebrow{font-size:10px;letter-spacing:.14em}
  .dashboard-page .heading .subtitle{font-size:12px;line-height:1.6}
  /* El hero ya ofrece “Comenzar inspección”: evitamos el botón + duplicado. */
  .dashboard-page .heading>.btn{display:none}
  .dashboard-page .dashboard-top,.dashboard-page .bottom-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .dashboard-page .hero{min-height:245px;padding:24px 22px;border-radius:19px}
  .dashboard-page .hero h2{font-size:clamp(22px,6vw,26px);line-height:1.25}
  .dashboard-page .hero p{font-size:12px;line-height:1.65}
  .dashboard-page .hero .btn{min-height:46px;font-size:12px;max-width:100%;white-space:normal}
  .dashboard-page .quick-card{padding:20px 17px;border-radius:19px;min-width:0}
  .dashboard-page .quick-flow{gap:2px}
  .dashboard-page .quick-item{font-size:10px}
  .dashboard-page .quick-item .symbol{width:35px;height:35px}
  .dashboard-page .quick-chevron{font-size:16px}
  .dashboard-page .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dashboard-page .metric{min-width:0;padding:16px 12px;min-height:116px}
  .dashboard-page .metric small{font-size:10px;max-width:85%;overflow-wrap:anywhere}
  .dashboard-page .metric b{font-size:26px}
  .dashboard-page .metric .symbol{right:10px;top:12px;width:30px;height:30px}
  .dashboard-page .metric em{font-size:10px}
  .dashboard-page .panel{min-width:0}
  .dashboard-page .table-wrap{max-width:100%;overflow-x:auto}
  .page:not(.dashboard-page):not(.inspection-page) .heading>.btn{font-size:11px;min-height:44px;white-space:normal}
}
@media (max-width:360px){
 .topbar{padding:0 9px;gap:5px}
 .topbar>div:first-child{gap:5px!important}
 .topbar .top-actions{gap:5px}
 .topbar .top-context strong{font-size:11px}
 .topbar #berlapCloudArea #cloudMobileToggle{min-width:68px;padding:7px}
 .dashboard-page{padding-left:10px;padding-right:10px}
 .dashboard-page .hero{padding:22px 17px}
}
@media print{
 .topbar #berlapCloudArea #berlapCloudTools{display:none!important}
}