/* FIX30.43.7 · Responsive real para experiencias públicas
   Citas: citas.sioxware.com/{empresa}
   Notas: notas.sioxware.com/{empresa}
   Objetivo: ningún layout público debe ensanchar el viewport del teléfono/tablet.
*/

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.booking-public-body,
body.student-portal-body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
.booking-public-body *,
.student-portal-body *{
  box-sizing:border-box;
}
.booking-public-body img,
.student-portal-body img,
.booking-public-body svg,
.student-portal-body svg{
  max-width:100%;
  height:auto;
}
.booking-public-body button,
.booking-public-body a,
.booking-public-body input,
.booking-public-body select,
.booking-public-body textarea,
.student-portal-body button,
.student-portal-body a,
.student-portal-body input,
.student-portal-body select,
.student-portal-body textarea{
  touch-action:manipulation;
}

/* Regla crítica: los hijos de grid/flex no conservan un min-content ancho
   que termine ensanchando todo el documento. */
.booking-public-shell,
.booking-public-main,
.booking-public-main > *,
.booking-public-topbar,
.booking-public-brand,
.booking-hero,
.booking-hero-copy,
.booking-hero-badge,
.booking-step-card,
.booking-step-card > *,
.booking-service-grid,
.booking-selector-grid,
.booking-selection-strip,
.booking-slot-groups,
.booking-slot-group,
.booking-slot-grid,
.booking-client-grid,
.booking-form-footer,
.booking-availability-head,
.booking-day-strip,
.student-portal-shell,
.student-portal-main,
.student-portal-main > *,
.student-portal-topbar,
.student-portal-brand,
.student-login-wrap,
.student-login-card,
.student-login-copy,
.student-login-form-wrap,
.student-dashboard-hero,
.student-summary-card,
.student-summary-main,
.student-summary-grid,
.student-section,
.student-section > *,
.student-current-grid,
.student-current-course,
.student-plan-card,
.student-plan-head,
.student-plan-row,
.student-plan-terms,
.student-attendance-grid,
.student-attendance-card,
.student-document-grid,
.student-document-card,
.student-schedule-grid,
.student-schedule-day,
.student-calendar-events,
.student-alert-list,
.student-alert-card,
.student-analytics-grid,
.student-history-wrap{
  min-width:0;
  max-width:100%;
}

.booking-public-shell,
.student-portal-shell{
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-x:clip;
}
.booking-public-main,
.student-portal-main{
  width:100%;
}
.booking-field,
.booking-field input,
.booking-field select,
.booking-field textarea,
.student-login-form,
.student-login-form label,
.student-login-form input,
.student-login-form select,
.student-login-form textarea{
  min-width:0;
  max-width:100%;
  width:100%;
}
.booking-contact-row span,
.booking-hours-chip,
.booking-selection-strip strong,
.student-portal-brand strong,
.student-portal-brand small,
.student-current-course h3,
.student-current-course p,
.student-plan-row strong,
.student-plan-row small,
.student-alert-card p,
.student-schedule-class,
.student-calendar-events article{
  overflow-wrap:anywhere;
  word-break:normal;
}
.booking-day-strip,
.student-history-wrap{
  width:100%;
  max-width:100%;
}

.booking-service-price,
.student-status,
.student-alert-badge{
  max-width:100%;
  overflow-wrap:anywhere;
}
.student-status,
.student-alert-badge{
  white-space:normal;
}

/* Tablet */
@media (max-width:1024px){
  .booking-public-shell,
  .student-portal-shell{
    width:calc(100% - 24px);
    max-width:960px;
  }
  .booking-public-topbar,
  .student-portal-topbar{
    gap:12px;
  }
  .booking-hero{
    padding:28px;
  }
  .booking-selector-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .booking-date-field{
    grid-column:1/-1;
  }
  .booking-selection-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-login-card{
    width:100%;
  }
  .student-history-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  .student-history-table{
    min-width:760px;
  }
}

/* Celulares y tablets compactas */
@media (max-width:768px){
  html,
  body.booking-public-body,
  body.student-portal-body{
    max-width:100vw;
  }
  .booking-public-shell,
  .student-portal-shell{
    width:100%;
    max-width:100%;
    margin:0;
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  .booking-public-topbar,
  .student-portal-topbar{
    width:100%;
    padding-left:2px;
    padding-right:2px;
    flex-wrap:wrap;
  }
  .booking-public-brand,
  .student-portal-brand{
    min-width:0;
    max-width:100%;
    flex:1 1 220px;
  }
  .booking-brand-copy,
  .student-portal-brand>span:last-child{
    min-width:0;
  }
  .booking-brand-copy strong,
  .student-portal-brand strong{
    max-width:min(62vw,420px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .booking-secure-chip,
  .student-secure-chip{
    flex:0 0 auto;
  }

  /* Citas */
  .booking-hero{
    width:100%;
    padding:24px 20px;
    border-radius:22px;
    gap:18px;
    align-items:stretch;
    flex-direction:column;
  }
  .booking-hero-copy,
  .booking-hero-badge{
    width:100%;
    min-width:0;
  }
  .booking-hero h1{
    font-size:clamp(28px,8vw,38px);
    letter-spacing:-.8px;
  }
  .booking-hero p{
    font-size:14px;
    line-height:1.55;
  }
  .booking-step-card,
  .booking-empty-card,
  .booking-unavailable-card{
    width:100%;
    padding:20px;
    border-radius:20px;
  }
  .booking-service-grid,
  .booking-selector-grid,
  .booking-client-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .booking-date-field,
  .booking-client-grid .span-2{
    grid-column:auto;
  }
  .booking-service-card{
    width:100%;
    grid-template-columns:auto minmax(0,1fr) auto;
  }
  .booking-selection-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .booking-field input,
  .booking-field select,
  .booking-field textarea{
    font-size:16px;
    min-height:50px;
  }
  .booking-primary-button{
    min-height:50px;
    width:100%;
    font-size:14px;
  }
  .booking-form-footer{
    align-items:stretch;
    flex-direction:column;
    gap:12px;
  }
  .booking-availability-head,
  .booking-slot-group-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .booking-hours-chip{
    align-self:flex-start;
    max-width:100%;
    white-space:normal;
  }
  .booking-day-strip{
    display:grid;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    overflow:visible;
    padding-bottom:0;
  }
  .booking-day-card{
    min-width:0;
    width:100%;
  }
  .booking-slot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .booking-slot-btn{
    min-width:0;
    min-height:60px;
  }

  /* Portal de notas */
  .student-portal-main{
    min-width:0;
    width:100%;
  }
  .student-dashboard-hero,
  .student-summary-card,
  .student-section,
  .student-login-card,
  .student-password-card,
  .student-unavailable-card{
    width:100%;
    max-width:100%;
    border-radius:20px!important;
    border-left:1px solid var(--sp-line,#e2e8f0)!important;
    border-right:1px solid var(--sp-line,#e2e8f0)!important;
  }
  .student-dashboard-hero{
    padding:22px 18px;
    align-items:flex-start;
    flex-direction:column;
  }
  .student-account-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px;
    width:100%;
  }
  .student-account-actions>*{
    min-width:0;
  }
  .student-secondary-button,
  .student-primary-button{
    min-height:48px;
    justify-content:center;
  }
  .student-login-card{
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
  }
  .student-login-copy,
  .student-login-form-wrap,
  .student-password-card{
    width:100%;
    padding:24px 20px;
  }
  .student-login-copy h1{
    font-size:clamp(29px,8vw,36px);
  }
  .student-login-form input,
  .student-login-form select,
  .student-login-form textarea{
    font-size:16px;
    min-height:50px;
  }
  .student-login-form button{
    min-height:50px;
    font-size:14px;
  }
  .student-summary-main{
    gap:14px;
  }
  .student-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-summary-grid>*{
    min-width:0;
  }
  .student-current-grid,
  .student-attendance-grid,
  .student-document-grid,
  .student-calendar-events,
  .student-analytics-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .student-current-course{
    min-width:0;
  }
  .student-document-card{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .student-document-card>strong{
    white-space:normal;
  }
  .student-schedule-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-schedule-class{
    min-width:0;
  }
  .student-plan-head{
    min-width:0;
  }
  .student-history-wrap{
    min-width:0;
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  /* Historial como tarjetas también en tablet compacta: nunca fuerza ancho desktop. */
  .student-history-wrap{
    overflow:visible;
    border:0;
    border-radius:0;
  }
  .student-history-table,
  .student-history-table thead,
  .student-history-table tbody,
  .student-history-table tr,
  .student-history-table th,
  .student-history-table td{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .student-history-table{
    min-width:0!important;
    border-collapse:separate;
  }
  .student-history-table thead{display:none;}
  .student-history-table tbody{display:grid;gap:10px;}
  .student-history-table tr{
    padding:12px 13px;
    border:1px solid #e1e8f0;
    border-radius:14px;
    background:#fff;
  }
  .student-history-table td{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:9px;
    align-items:start;
    padding:7px 0;
    border-top:1px solid #edf1f5;
    overflow-wrap:anywhere;
  }
  .student-history-table td:first-child{border-top:0;}
  .student-history-table td::before{
    color:#718196;
    font-size:8px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .student-history-table td:nth-child(1)::before{content:"Periodo";}
  .student-history-table td:nth-child(2)::before{content:"Materia";}
  .student-history-table td:nth-child(3)::before{content:"Profesor";}
  .student-history-table td:nth-child(4)::before{content:"Ordinaria";}
  .student-history-table td:nth-child(5)::before{content:"Extraordinario";}
  .student-history-table td:nth-child(6)::before{content:"Final";}
  .student-history-table td:nth-child(7)::before{content:"Resultado";}
  .student-history-table td[colspan]{display:block;text-align:center;}
  .student-history-table td[colspan]::before{display:none;}
}

/* Teléfonos */
@media (max-width:520px){
  .booking-public-shell,
  .student-portal-shell{
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
  }
  .booking-public-topbar,
  .student-portal-topbar{
    padding-top:max(12px,env(safe-area-inset-top));
    padding-bottom:14px;
  }
  .booking-brand-logo,
  .booking-brand-mark,
  .student-brand-logo,
  .student-brand-mark{
    width:42px!important;
    height:42px!important;
    border-radius:13px!important;
  }
  .booking-brand-copy strong,
  .student-portal-brand strong{
    font-size:14px;
    max-width:68vw;
  }
  .booking-brand-copy small,
  .student-portal-brand small{
    font-size:10px;
  }
  .booking-secure-chip,
  .student-secure-chip{
    display:none!important;
  }
  .booking-public-main,
  .student-portal-main{
    gap:10px;
  }

  /* Citas: tarjetas contenidas dentro del ancho real del teléfono. */
  .booking-hero,
  .booking-step-card,
  .booking-empty-card,
  .booking-unavailable-card{
    border-radius:18px!important;
  }
  .booking-hero{
    padding:22px 17px;
  }
  .booking-step-card{
    padding:18px 15px;
  }
  .booking-step-head{
    align-items:flex-start;
  }
  .booking-step-number{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .booking-step-head h2{
    font-size:18px;
  }
  .booking-service-card{
    grid-template-columns:auto minmax(0,1fr);
    padding:14px;
  }
  .booking-service-price{
    grid-column:2;
    justify-self:start;
    margin-top:2px;
  }
  .booking-selection-strip{
    grid-template-columns:minmax(0,1fr);
  }
  .booking-contact-row{
    gap:7px;
  }
  .booking-contact-row span{
    width:100%;
    max-width:100%;
    border-radius:12px;
  }
  .booking-selected-slot{
    align-items:flex-start;
  }
  .booking-slot-grid{
    gap:8px;
  }
  .booking-day-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .booking-form-footer p{
    font-size:10.5px;
    line-height:1.45;
  }
  .booking-public-footer,
  .student-portal-footer{
    padding-bottom:max(18px,env(safe-area-inset-bottom));
  }

  /* Portal: todo en una columna cuando el ancho lo requiere. */
  .student-dashboard-hero,
  .student-summary-card,
  .student-section,
  .student-login-card,
  .student-password-card,
  .student-unavailable-card{
    border-radius:18px!important;
  }
  .student-section,
  .student-summary-card{
    padding:16px;
  }
  .student-account-actions{
    grid-template-columns:minmax(0,1fr);
  }
  .student-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .student-progress-circle{
    flex:0 0 86px;
    width:86px;
    height:86px;
  }
  .student-current-course{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .student-course-result{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .student-attendance-head{
    gap:9px;
  }
  .student-attendance-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-schedule-grid,
  .student-calendar-events,
  .student-analytics-grid{
    grid-template-columns:minmax(0,1fr);
  }


}

/* Teléfonos muy angostos */
@media (max-width:380px){
  .booking-public-shell,
  .student-portal-shell{
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
  }
  .booking-slot-grid,
  .student-summary-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .booking-day-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .student-progress-circle{
    width:80px;
    height:80px;
    flex-basis:80px;
  }
  .student-summary-main{
    align-items:flex-start;
    flex-direction:column;
  }
  .student-history-table td{
    grid-template-columns:88px minmax(0,1fr);
  }
}

/* Tablet horizontal: aprovechar el ancho, sin usar medidas de escritorio. */
@media (min-width:769px) and (max-width:1180px){
  .booking-service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-current-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .student-schedule-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (hover:none) and (pointer:coarse){
  .booking-service-card:hover,
  .booking-slot-btn:hover,
  .student-document-card:hover{
    transform:none;
    box-shadow:none;
  }
  .booking-primary-button,
  .booking-slot-btn,
  .student-primary-button,
  .student-secondary-button{
    min-height:48px;
  }
}