/* Socios Pro v1.9.7 - consistent, legible 12h schedule display.
   Presentation-only: never changes native input values or reservation calculation. */

/* React's original time groups float at 50%, leaving too little space for 12h labels.
   Each time field now occupies one clearly separated row inside its day card. */
html.ec-admin-active .servicios-config-container .day-item-card .time-inputs-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  clear:both!important;
  gap:13px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 0 10px!important;
  padding:0!important;
  height:auto!important;
  overflow:visible!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .time-group{
  display:flex!important;
  float:none!important;
  clear:both!important;
  flex:0 0 100%!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:5px!important;
  margin:0!important;
  position:relative!important;
  box-sizing:border-box!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .time-group label{
  display:block!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35!important;
  margin:0!important;
  white-space:normal!important;
  color:var(--ec-muted,#48616b)!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .time-group input[type=time]{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  min-height:50px!important;
  height:50px!important;
  margin:0!important;
  padding:8px 45px 8px 14px!important;
  font-size:15px!important;
  border-radius:12px!important;
  letter-spacing:normal!important;
  line-height:1.3!important;
}

/* The text overlay is only a readable label for the unchanged native 24-hour value.
   Position it on the field, not over the adjacent label or another control. */
html.ec-admin-active .servicios-config-container .ec-hour12-host{
  position:relative!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html.ec-admin-active .servicios-config-container .ec-hour12-host .ec-hour12-display{
  position:absolute!important;
  top:auto!important;
  bottom:14px!important;
  left:14px!important;
  right:42px!important;
  display:block!important;
  max-width:calc(100% - 56px)!important;
  margin:0!important;
  padding:0!important;
  font:700 14px/1.5 system-ui,sans-serif!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  pointer-events:none!important;
  z-index:3!important;
  color:var(--ec-ink,#18343c)!important;
  background:transparent!important;
  letter-spacing:normal!important;
}
html.ec-admin-active .servicios-config-container .ec-hour12-host:focus-within .ec-hour12-display{
  opacity:0!important;
}
html.ec-admin-active .servicios-config-container .ec-hour12-host:focus-within input[type=time]{
  color:var(--ec-ink,#18343c)!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Lunch times sit inside their respective weekday and need the same full width. */
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-fields-v195{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-fields-v195[hidden]{display:none!important;}
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-fields-v195 label{
  display:flex!important;
  flex-direction:column!important;
  position:relative!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  font-size:12px!important;
  line-height:1.35!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-fields-v195 input[type=time]{
  height:50px!important;
  min-height:50px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  border-radius:12px!important;
  padding:8px 45px 8px 14px!important;
  font-size:15px!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-day-v195{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  gap:10px!important;
  margin:16px 0 0!important;
  padding:14px 0 0!important;
}
html.ec-admin-active .servicios-config-container .day-item-card .ec-lunch-check{
  display:flex!important;
  width:100%!important;
  gap:10px!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  line-height:1.4!important;
  white-space:normal!important;
}

/* Generated appointment times: no collision or ellipsis for a.m./p.m. */
html.ec-admin-active .servicios-config-container .slots-container{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  clear:both!important;
}
html.ec-admin-active .servicios-config-container .slots-wrapper{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  gap:8px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
html.ec-admin-active .servicios-config-container .slots-wrapper .slot-pill{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  min-height:43px!important;
  height:auto!important;
  margin:0!important;
  padding:8px 5px!important;
  font:650 clamp(11px,.85vw,13px)/1.35 system-ui,sans-serif!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-align:center!important;
  border-radius:11px!important;
  box-sizing:border-box!important;
}
html.ec-admin-active .servicios-config-container .day-item-card{
  overflow:visible!important;
  gap:10px!important;
}
html.ec-admin-active .servicios-config-container .day-config-content{
  clear:both!important;
  gap:13px!important;
}

/* On the appointment page, keep full "9:00 a. m." labels and preserve the click handlers. */
html body .flexGrapHoras button{
  box-sizing:border-box!important;
  white-space:normal!important;
  min-height:52px!important;
  height:auto!important;
  line-height:1.4!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  padding:10px 12px!important;
  text-align:center!important;
}

/* Public opening-hours modal: safe spacing in light and dark themes. */
html body .modal-horarios .horarioItem{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}
html body .modal-horarios .horarioHoras{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  line-height:1.35!important;
}
html body .modal-horarios .horarioHoras span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:break-word!important;
  font-size:clamp(12px,1vw,15px)!important;
}

@media(max-width:680px){
 html body .modal-horarios .horarioItem{align-items:flex-start!important;}
 html body .modal-horarios .horarioHoras{justify-content:flex-start!important;width:100%!important;}
}
html[data-theme=dark].ec-admin-active .servicios-config-container .ec-hour12-host .ec-hour12-display{
  color:#e9f6fa!important;
}