/* PALUX 484 — compact-phone protection for the permanent Time Clock.
   Keeps short and narrow Android/iPhone screens usable without changing
   the time-clock workflow or desktop/tablet layout. */
@media (max-width:480px){
  body:has(#associateClockBar.associate-clock-bar:not(.hidden)) .main{
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }

  #associateClockBar.associate-clock-bar:not(.hidden){
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"summary details" "buttons buttons"!important;
    gap:6px 8px!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    max-height:none!important;
  }

  #associateClockBar .associate-clock-summary{
    gap:7px!important;
    overflow:hidden!important;
  }
  #associateClockBar .clock-live-dot{
    width:9px!important;
    height:9px!important;
    flex:0 0 9px!important;
    box-shadow:0 0 0 3px rgba(75,183,125,.15)!important;
  }
  #associateClockBar .associate-clock-summary>div{
    min-width:0!important;
  }
  #associateClockBar .associate-clock-summary small{
    font-size:8px!important;
    line-height:1.15!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #associateClockBar .associate-clock-summary strong{
    display:block!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #associateClockBar .clock-details-btn{
    min-height:34px!important;
    padding:6px 8px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  #associateClockBar .associate-clock-buttons{
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;
    gap:5px!important;
  }
  #associateClockBar .associate-clock-buttons button{
    min-height:34px!important;
    padding:6px 3px!important;
    font-size:9px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  #associateClockBar .associate-clock-buttons button:disabled{
    display:none!important;
  }

  /* Long translations such as “Comunicaciones” must not push the module
     statistic outside the screen on narrow or display-zoomed phones. */
  .module-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:10px!important;
    padding:15px!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  .module-hero>div:first-child{
    min-width:0!important;
  }
  .module-hero h2{
    max-width:100%!important;
    font-size:clamp(21px,7vw,27px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  .module-hero p{
    font-size:12px!important;
    line-height:1.35!important;
  }
  .module-hero>div:last-child{
    min-width:48px!important;
    max-width:78px!important;
    text-align:right!important;
    overflow-wrap:anywhere!important;
  }
  .module-hero .hero-stat{
    font-size:24px!important;
    line-height:1!important;
  }
  .module-hero>div:last-child small{
    display:block!important;
    margin-top:5px!important;
    font-size:8px!important;
    line-height:1.15!important;
  }
}

@media (max-width:350px){
  #associateClockBar .clock-details-btn{
    max-width:72px!important;
    white-space:normal!important;
  }
  .module-hero{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .module-hero>div:last-child{
    display:none!important;
  }
}

@media (max-width:480px) and (max-height:720px){
  .content{padding-top:10px!important;}
  .module-hero{margin-bottom:10px!important;}
}