.sbp-container,




.sbp-wrap {




  max-width: 1100px;




  margin: 0 auto;




  padding: 32px 18px;




}




.sbp-profile-grid {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));




  gap: 18px;




}




.sbp-card,




.sbp-booking-form,




.sbp-login-box,




.sbp-course-row {




  border: 1px solid #e5e7eb;




  border-radius: 18px;




  background: #fff;




  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);




}




.sbp-card,




.sbp-booking-form,




.sbp-login-box {




  padding: 22px;




}




.sbp-card h2,




.sbp-course-row h2 {




  margin-top: 0;




}




.sbp-button {




  display: inline-block;




  border: 0;




  border-radius: 999px;




  background: #0f766e;




  color: #fff !important;




  padding: 12px 18px;




  text-decoration: none;




  font-weight: 700;




  cursor: pointer;




}




.sbp-button:disabled {




  opacity: 0.55;




  cursor: not-allowed;




}




.sbp-secondary {




  background: #334155;




}




.sbp-filters {




  display: flex;




  flex-wrap: wrap;




  gap: 10px;




  margin: 20px 0;




}




.sbp-filters input,




.sbp-filters select,




.sbp-booking-form input,




.sbp-booking-form select,




.sbp-booking-form textarea {




  width: 100%;




  max-width: 100%;




  border: 1px solid #cbd5e1;




  border-radius: 12px;




  padding: 10px;




}




.sbp-filters input,




.sbp-filters select {




  width: auto;




}




.sbp-row {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));




  gap: 12px;




}




.sbp-booking-form fieldset {




  border: 1px solid #e2e8f0;




  border-radius: 14px;




  margin: 18px 0;




  padding: 18px;




}




.sbp-check {




  display: block;




  margin: 8px 0;




}




.sbp-booking-group {




  border-top: 1px solid #e2e8f0;




  padding: 14px 0;




}




.sbp-booking-group:first-of-type {




  border-top: 0;




  padding-top: 0;




}




.sbp-help,




.sbp-muted {




  color: #64748b;




}




.sbp-notice {




  background: #ecfeff;




  border: 1px solid #99f6e4;




  border-radius: 14px;




  padding: 12px;




}




.sbp-schedules {




  padding-left: 20px;




}




.sbp-description {




  line-height: 1.65;




}




.sbp-course-list {




  display: flex;




  flex-direction: column;




  gap: 20px;




}




.sbp-course-row {




  display: grid;




  grid-template-columns: minmax(240px, 34%) 1fr;




  overflow: hidden;




}




.sbp-course-row__media {




  min-height: 240px;




  background: #e2e8f0;




}




.sbp-course-cover,




.sbp-course-cover-placeholder {




  display: block;




  width: 100%;




  height: 100%;




  min-height: 240px;




  object-fit: cover;




}




.sbp-course-cover-placeholder {




  background: linear-gradient(135deg, #dbeafe, #e2e8f0);




}




.sbp-course-row__content {




  padding: 26px;




}




.sbp-course-prices {




  display: flex;




  gap: 10px;




  flex-wrap: wrap;




  margin: 14px 0 20px;




}




.sbp-course-prices span,




.sbp-live-price {




  background: #ecfeff;




  border: 1px solid #99f6e4;




  border-radius: 12px;




  padding: 10px 12px;




}




.sbp-class-cover-wrap {




  margin: 24px 0;




  overflow: hidden;




  border-radius: 20px;




}




.sbp-class-cover {




  display: block;




  width: 100%;




  height: auto;




  max-height: 560px;




  object-fit: cover;




}




.sbp-public-price-table-wrap {




  overflow-x: auto;




  margin: 16px 0 26px;




}




.sbp-public-price-table {




  width: 100%;




  border-collapse: collapse;




}




.sbp-public-price-table th,




.sbp-public-price-table td {




  padding: 12px;




  border-bottom: 1px solid #e2e8f0;




  text-align: left;




}




.sbp-live-price {




  margin-top: 16px;




}




.sbp-coupon-field[hidden] {




  display: none;




}




.sbp-coupon-field {




  margin-top: 16px;




  padding-top: 16px;




  border-top: 1px solid #e2e8f0;




}




@media (max-width: 720px) {




  .sbp-course-row {




    grid-template-columns: 1fr;




  }




  .sbp-course-row__media,




  .sbp-course-cover,




  .sbp-course-cover-placeholder {




    min-height: 200px;




  }




  .sbp-filters input,




  .sbp-filters select,




  .sbp-filters button {




    width: 100%;




  }




}




.sbp-season-badge {




  display: inline-block;




  margin: 8px 0 4px;




  padding: 9px 13px;




  border-radius: 999px;




  background: #eff6ff;




  border: 1px solid #bfdbfe;




}




.sbp-public-calendar {




  margin: 28px 0;




}




.sbp-public-calendar__header {




  display: flex;




  justify-content: space-between;




  gap: 16px;




  align-items: flex-end;




  margin-bottom: 14px;




}




.sbp-public-calendar__header h2 {




  margin: 0;




}




.sbp-calendar-cutoff {




  margin: 0;




  font-size: 0.92rem;




  color: #475569;




}




.sbp-session-list {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));




  gap: 12px;




}




.sbp-session-card {




  display: flex;




  flex-direction: column;




  gap: 7px;




  border: 1px solid #dbeafe;




  background: #f8fbff;




  border-radius: 14px;




  padding: 14px;




}




.sbp-session-card time {




  font-weight: 700;




}




.sbp-session-card strong {




  color: #0f766e;




}




.sbp-session-card--full {




  opacity: 0.64;




  background: #f8fafc;




  border-color: #e2e8f0;




}




.sbp-session-card--full strong {




  color: #64748b;




}




.sbp-booking-session-list {




  margin: 8px 0 18px;




  padding-left: 20px;




}




.sbp-booking-session-list li {




  margin: 6px 0;




}




.sbp-booking-session--cancelled {




  text-decoration: line-through;




  color: #64748b;




}




@media (max-width: 720px) {




  .sbp-public-calendar__header {




    display: block;




  }




  .sbp-calendar-cutoff {




    margin-top: 8px;




  }




}









.sbp-calendar-toolbar {




  display: flex;




  align-items: center;




  justify-content: center;




  gap: 10px;




  margin: 18px 0;




}




.sbp-calendar-toolbar select {




  min-width: 190px;




  border: 1px solid #cbd5e1;




  border-radius: 10px;




  padding: 9px 12px;




  background: #fff;




}




.sbp-calendar-nav,




.sbp-calendar-today {




  border: 1px solid #cbd5e1;




  background: #fff;




  border-radius: 10px;




  padding: 9px 13px;




  cursor: pointer;




  font-weight: 700;




}




.sbp-calendar-nav {




  font-size: 1.35rem;




  line-height: 1;




}




.sbp-calendar-nav:disabled {




  opacity: 0.35;




  cursor: not-allowed;




}




.sbp-calendar-legend {




  display: flex;




  justify-content: flex-end;




  gap: 14px;




  margin: 0 0 10px;




  font-size: 0.86rem;




  color: #475569;




}




.sbp-calendar-legend span {




  display: flex;




  align-items: center;




  gap: 6px;




}




.sbp-dot {




  width: 9px;




  height: 9px;




  border-radius: 50%;




  display: inline-block;




}




.sbp-dot--available {




  background: #0f766e;




}




.sbp-dot--full {




  background: #94a3b8;




}




.sbp-calendar-month__title {




  text-align: center;




  margin: 0 0 12px;




}




.sbp-calendar-weekdays,




.sbp-calendar-grid {




  display: grid;




  grid-template-columns: repeat(7, minmax(0, 1fr));




  gap: 7px;




}




.sbp-calendar-weekdays {




  margin-bottom: 7px;




}




.sbp-calendar-weekdays span {




  text-align: center;




  font-size: 0.82rem;




  font-weight: 700;




  color: #64748b;




}




.sbp-calendar-day {




  min-height: 118px;




  border: 1px solid #e2e8f0;




  border-radius: 12px;




  background: #fff;




  padding: 8px;




  overflow: hidden;




}




.sbp-calendar-day--empty {




  background: #f8fafc;




  border-style: dashed;




}




.sbp-calendar-day--has-session {




  border-color: #bfdbfe;




  background: #f8fbff;




}




.sbp-calendar-day__number {




  display: flex;




  justify-content: space-between;




  align-items: center;




  margin-bottom: 7px;




}




.sbp-calendar-day__weekday {




  display: none;




  color: #64748b;




  font-size: 0.78rem;




}




.sbp-calendar-day__number strong {




  font-size: 0.9rem;




}




.sbp-calendar-events {




  display: flex;




  flex-direction: column;




  gap: 5px;




}




.sbp-calendar-event {




  border-left: 3px solid #0f766e;




  background: #ecfeff;




  border-radius: 7px;




  padding: 5px 6px;




  display: flex;




  flex-direction: column;




  font-size: 0.76rem;




  line-height: 1.25;




}




.sbp-calendar-event time {




  font-weight: 700;




}




.sbp-calendar-event span {




  color: #0f766e;




}




.sbp-calendar-event--full {




  border-left-color: #94a3b8;




  background: #f1f5f9;




}




.sbp-calendar-event--full span {




  color: #64748b;




}




.sbp-calendar-month[hidden] {




  display: none !important;




}




@media (max-width: 720px) {




  .sbp-calendar-toolbar {




    flex-wrap: wrap;




  }




  .sbp-calendar-toolbar select {




    order: -1;




    width: 100%;




  }




  .sbp-calendar-today {




    flex: 1;




  }




  .sbp-calendar-weekdays {




    display: none;




  }




  .sbp-calendar-grid {




    grid-template-columns: 1fr;




    gap: 8px;




  }




  .sbp-calendar-day--empty,




  .sbp-calendar-day:not(.sbp-calendar-day--has-session) {




    display: none;




  }




  .sbp-calendar-day {




    min-height: 0;




    display: grid;




    grid-template-columns: 70px 1fr;




    gap: 10px;




  }




  .sbp-calendar-day__number {




    display: block;




    margin: 0;




  }




  .sbp-calendar-day__weekday {




    display: block;




  }




  .sbp-calendar-day__number strong {




    font-size: 1.25rem;




  }




  .sbp-calendar-event {




    font-size: 0.84rem;




    flex-direction: row;




    justify-content: space-between;




    align-items: center;




  }




  .sbp-calendar-legend {




    justify-content: flex-start;




  }




}




.sbp-calendar-feedback {




  min-height: 1.4em;




  margin: 0 0 10px;




  color: #475569;




  text-align: center;




  font-size: 0.9rem;




}




.sbp-calendar-feedback--error {




  color: #b91c1c;




}




.sbp-calendar-widget--loading [data-calendar-content] {




  opacity: 0.55;




  pointer-events: none;




}




.sbp-calendar-widget--loading [data-calendar-content]::before {




  content: "Cargando…";




  display: block;




  text-align: center;




  font-weight: 700;




  padding: 8px;




}




.sbp-calendar-toolbar button:disabled,




.sbp-calendar-toolbar select:disabled {




  opacity: 0.5;




  cursor: not-allowed;




}









.sbp-notice--important {




  border-left: 4px solid currentColor;




  font-weight: 500;




}









/* Flujo de inscripción familiar 3.4.0 */




.sbp-booking-form--steps {




  max-width: 920px;




}




.sbp-step > legend {




  display: flex;




  align-items: center;




  gap: 10px;




  font-size: 1.08rem;




  font-weight: 800;




  padding: 0 6px;




}




.sbp-step > legend span {




  display: inline-flex;




  align-items: center;




  justify-content: center;




  width: 30px;




  height: 30px;




  border-radius: 50%;




  background: #0f766e;




  color: #fff;




  font-size: 0.92rem;




}




.sbp-new-participant[hidden] {




  display: none !important;




}




.sbp-new-participant {




  margin-top: 14px;




  padding: 16px;




  border: 1px dashed #94a3b8;




  border-radius: 14px;




  background: #f8fafc;




}




.sbp-participant-registration-status,




.sbp-registration-plan-notice {




  margin-top: 14px;




}




.sbp-notice--family {




  background: #fff7ed;




  border-color: #fdba74;




  color: #7c2d12;




}




.sbp-payment-registration-help {




  font-weight: 600;




}




.sbp-add-participant-toggle {




  font-size: 0.92rem;




  padding: 10px 15px;




}




.sbp-participant-select option {




  color: #0f172a;




}









/* Perfil resumido de cursillistas: [swim_cursillistas] */




.sbp-participants-profile__header {




  margin-bottom: 20px;




}




.sbp-participants-profile__header h2 {




  margin-bottom: 6px;




}




.sbp-participants-profile__header p {




  margin-top: 0;




  color: #64748b;




}




.sbp-participant-list {




  display: grid;




  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));




  gap: 18px;




}




.sbp-participant-summary {




  display: flex;




  flex-direction: column;




  gap: 18px;




}




.sbp-participant-summary__heading {




  display: flex;




  justify-content: space-between;




  align-items: flex-start;




  gap: 16px;




}




.sbp-participant-summary__heading h3 {




  margin: 0 0 6px;




}




.sbp-status-badge {




  display: inline-flex;




  align-items: center;




  border-radius: 999px;




  padding: 6px 10px;




  font-size: 0.8rem;




  font-weight: 700;




  background: #e2e8f0;




  color: #334155;




}




.sbp-status-badge--active {




  background: #dcfce7;




  color: #166534;




}




.sbp-status-badge--inactive {




  background: #f1f5f9;




  color: #64748b;




}




.sbp-participant-summary__section {




  border-top: 1px solid #e2e8f0;




  padding-top: 16px;




}




.sbp-participant-summary__section h4 {




  margin: 0 0 12px;




}




.sbp-registration-state {




  display: flex;




  flex-direction: column;




  gap: 5px;




  border-radius: 12px;




  padding: 12px 14px;




  border: 1px solid #cbd5e1;




  background: #f8fafc;




}




.sbp-registration-state--paid {




  border-color: #86efac;




  background: #f0fdf4;




}




.sbp-registration-state--pending {




  border-color: #fde68a;




  background: #fffbeb;




}




.sbp-registration-state--expired {




  border-color: #fecaca;




  background: #fef2f2;




}




.sbp-participant-bookings {




  display: flex;




  flex-direction: column;




  gap: 10px;




}




.sbp-participant-booking {




  display: grid;




  gap: 7px;




  border: 1px solid #dbeafe;




  border-left: 4px solid #0f766e;




  border-radius: 10px;




  padding: 11px 12px;




  background: #f8fbff;




}




.sbp-participant-booking > div {




  display: flex;




  justify-content: space-between;




  gap: 12px;




  flex-wrap: wrap;




}




.sbp-participant-booking > div:first-child {




  display: block;




}




.sbp-participant-booking > div:first-child span {




  display: block;




  margin-top: 3px;




}




.sbp-participant-booking--finished {




  border-left-color: #94a3b8;




  background: #f8fafc;




  opacity: 0.82;




}




.sbp-notice--important {




  background: #fff7ed;




  border-color: #fdba74;




}




@media (max-width: 600px) {




  .sbp-participant-list {




    grid-template-columns: 1fr;




  }




  .sbp-participant-summary__heading {




    align-items: flex-start;




  }




  .sbp-participant-booking > div {




    display: block;




  }




  .sbp-participant-booking > div span,




  .sbp-participant-booking > div strong {




    display: block;




    margin-top: 3px;




  }




}




.sbp-check > input[type="radio"],




.sbp-check > input[type="checkbox"] {




  width: auto;




  padding: 0;




}




.sbp-booking-option-row {




  display: block;




  clear: both;




  width: 100%;




  margin: 8px 0;




}




.sbp-booking-option-row > .sbp-check {




  display: block;




  width: 100%;




  box-sizing: border-box;




}




#sbp-booking-form .sbp-reservation-only {




  display: block !important;




  clear: both !important;




  width: 100% !important;




  float: none !important;




}




#sbp-booking-form .sbp-booking-group {




  display: block !important;




  clear: both !important;




  width: 100% !important;




  max-width: 100% !important;




  float: none !important;




  flex: 0 0 100% !important;




  flex-direction: column !important;




}




#sbp-booking-form .sbp-booking-option-row {




  display: block !important;




  clear: both !important;




  width: 100% !important;




  max-width: 100% !important;




  float: none !important;




  flex: 0 0 100% !important;




  margin: 8px 0 !important;




}




#sbp-booking-form .sbp-booking-option-row > .sbp-check {




  display: block !important;




  width: 100% !important;




  max-width: 100% !important;




  float: none !important;




  box-sizing: border-box !important;




}




#sbp-booking-form .sbp-booking-option-row > .sbp-combination-option {




  display: flex !important;




}




.sbp-group-instruction {




  margin: 8px 0 12px;




  color: #475569;




  font-size: 0.92rem;




}




.sbp-combination-option {




  display: flex !important;




  align-items: flex-start;




  gap: 8px;




  padding: 12px;




  border: 1px solid #dbe4ee;




  border-radius: 12px;




  background: #f8fafc;




}




.sbp-combination-option > input {




  width: auto !important;




  margin-top: 3px;




}




.sbp-combination-option span,




.sbp-combination-option small {




  display: block;




}




.sbp-combination-option small {




  margin-top: 4px;




  color: #64748b;




  line-height: 1.45;




}




.sbp-combination-option:has(input:checked) {




  border-color: #0f766e;




  background: #ecfeff;




}




.sbp-combination-option:has(input:disabled) {




  opacity: 0.58;




}




.sbp-calendar-actions {




  display: flex;




  justify-content: center;




  margin: 0 0 14px;




}




.sbp-calendar-next-available:disabled {




  opacity: 0.55;




  cursor: not-allowed;




}




.sbp-calendar-event--highlight {




  outline: 3px solid #f59e0b;




  outline-offset: 2px;




  animation: sbp-calendar-highlight 1.6s ease-out;




}




@keyframes sbp-calendar-highlight {




  0% {




    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.65);




  }




  100% {




    box-shadow: 0 0 0 14px rgba(245, 158, 11, 0);




  }




}




.sbp-wrap .sbp-description.sbp-description--collapsible .sbp-description__toggle {




  display: none !important;




  appearance: none;




  border: 0 !important;




  background: transparent !important;




  color: #0f766e !important;




  font: inherit;




  font-weight: 700 !important;




  line-height: 1.4 !important;




  min-height: 0 !important;




  padding: 0 !important;




  text-align: left !important;




  text-decoration: underline !important;




  text-transform: none !important;




  box-shadow: none !important;




  cursor: pointer !important;




}




.sbp-wrap .sbp-description.sbp-description--collapsible .sbp-description__toggle[hidden] {




  display: none !important;




}




@media (max-width: 720px) {




  .sbp-wrap




    .sbp-description.sbp-description--collapsible:not(.is-expanded)




    .sbp-description__body {




    display: -webkit-box !important;




    -webkit-line-clamp: 4 !important;




    -webkit-box-orient: vertical !important;




    max-height: none !important;




    overflow: hidden !important;




  }




  .sbp-wrap




    .sbp-description.sbp-description--collapsible.is-expanded




    .sbp-description__body {




    display: block !important;




    -webkit-line-clamp: initial !important;




    max-height: none !important;




    overflow: visible !important;




  }




  .sbp-wrap




    .sbp-description.sbp-description--collapsible




    .sbp-description__toggle:not([hidden]) {




    display: inline-block !important;




    margin-top: 4px !important;




  }




}