/* File: assets/css/vbc.css */ .vbc-widget { color: #2b2b33; background: #ffffff; border-radius: 16px; padding: 16px; box-shadow: 0 8px 24px rgba(155, 107, 255, 0.12); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } .vbc-row { display: flex; gap: 16px; flex-wrap: wrap; } .vbc-col { min-width: 260px; } .vbc-grow { flex: 1; } .vbc-label { display: block; margin-bottom: 8px; font-weight: 600; } .vbc-input { width: 100%; padding: 10px 12px; border: 1px solid #e9e9ee; border-radius: 10px; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; } .vbc-input:focus { border-color: #9B6BFF; box-shadow: 0 0 0 3px rgba(155, 107, 255, .15); } #vbc-calendar { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; align-items: flex-start; } .vbc-month { background: linear-gradient(180deg, #fff, #faf7ff); border: 1px solid #e9e9ee; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.05); } .vbc-month-header { background: linear-gradient(90deg, #9B6BFF, #BFA4FF); color: #fff; padding: 10px 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .vbc-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 10px; } .vbc-day { text-align: center; padding: 8px 0; border-radius: 8px; cursor: pointer; user-select: none; background: #fff; border: 1px solid #eee; transition: transform .1s, background .2s, color .2s, border-color .2s; } .vbc-day:hover { transform: translateY(-1px); } .vbc-day.vbc-today { border-color: #BFA4FF; } .vbc-day.vbc-selected { background: #9B6BFF; color: #fff; border-color: #9B6BFF; box-shadow: 0 6px 12px rgba(155, 107, 255, 0.25); } .vbc-day.vbc-disabled { background: #f4f4f7; color: #9a9aa3; cursor: not-allowed; border-style: dashed; } .vbc-weekday { font-size: 12px; color: #6b6b76; text-transform: uppercase; } #vbc-times { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .vbc-time { padding: 8px 10px; border-radius: 8px; border: 1px solid #e9e9ee; background: #fff; cursor: pointer; } .vbc-time.vbc-selected { background: #BFA4FF; border-color: #BFA4FF; color: #fff; } .vbc-time.vbc-disabled { background: #efeff5; color: #9a9aa3; cursor: not-allowed; } .vbc-form { margin-top: 16px; display: grid; gap: 12px; } .vbc-field label { display: block; margin-bottom: 6px; font-weight: 600; } .vbc-btn { background: linear-gradient(90deg, #9B6BFF, #BFA4FF); color: #fff; border: 0; padding: 12px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; box-shadow: 0 8px 16px rgba(155, 107, 255, .25); } @media (max-width: 900px) { #vbc-calendar { grid-template-columns: 1fr; } } /* Layout: producto arriba, calendario abajo */ .vbc-row--product .vbc-col, .vbc-row--calendar .vbc-col, .vbc-col--full { flex: 1 0 100%; width: 100%; } .vbc-row--product { margin-bottom: 12px; } /* === Overrides para agrandar el calendario (colocar al final) === */ .vbc-widget { max-width: 100%; } #vbc-calendar { grid-template-columns: repeat(3, minmax(280, 1fr)); gap: 14; } .vbc-month-header { padding: 14px 16px; font-size: 20px; } .vbc-month-grid { gap: 10px; padding: 16px; } .vbc-day { padding: 12px 0; min-height: 48px; font-size: 16px; }

/* Spinner de carga */
.vbc-loading-spinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #6b6b76;
  font-size: 14px;
}

.vbc-spinner {
  border: 3px solid #e9e9ee;
  border-top: 3px solid #9B6BFF;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: vbc-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes vbc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinner pequeño para botón */
.vbc-btn-spinner {
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: vbc-spin 0.6s linear infinite;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.vbc-btn.vbc-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Asteriscos requeridos */
.vbc-required,
.vbc-required-conditional {
  color: #e74c3c;
  font-weight: bold;
  margin-left: 2px;
}

.vbc-required-conditional {
  display: none;
}

.vbc-required-conditional.vbc-show {
  display: inline;
}

/* Info de timezone */
.vbc-timezone-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f0ebff 0%, #faf7ff 100%);
  border-left: 3px solid #9B6BFF;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  color: #6b6b76;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(155, 107, 255, 0.08);
}

.vbc-timezone-info svg {
  color: #9B6BFF;
  flex-shrink: 0;
}

.vbc-timezone-info span {
  line-height: 1.4;
  font-weight: 500;
}