/*
 * Bubbles Plugin — Tech Dashboard Content
 * tech.css
 * Depende de: variables.css → base.css → tech.css
 */

/* ═══════════════════════════════════════════════════
   1. MAIN HEADER
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-main__header { margin-bottom: var(--b-space-lg); }
#bubbles-app .b-main__header-name { font-size: 28px; font-weight: 700; letter-spacing: -.8px; color: var(--b-brand); }
#bubbles-app .b-main__header .b-text-lg { font-size: var(--b-font-size); color: var(--b-text-muted); font-weight: var(--b-font-weight); }

/* ═══════════════════════════════════════════════════
   2. CARD BASE
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-card { background: var(--b-bg); border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-lg); padding: var(--b-pad-card); font-size: var(--b-font-size); color: var(--b-text); }
#bubbles-app .b-card--flush    { padding: 0; overflow: hidden; border-radius: var(--b-radius-lg); background: #fff; }
#bubbles-app .b-card--relative { position: relative; }
#bubbles-app .b-card__body    { padding: var(--b-space-md) var(--b-space-lg); background: #fff; }
#bubbles-app .b-card-aside    { flex-shrink: 0; text-align: right; }
#bubbles-app .b-card-actions  { display: flex; gap: var(--b-space-sm); margin-top: var(--b-space-md); align-items: center; }
#bubbles-app .b-card-loading  { position: absolute; inset: 0; background: rgba(255,255,255,0.85); display: none; align-items: center; justify-content: center; border-radius: var(--b-radius-lg); z-index: 10; }
#bubbles-app .b-card-loading:not(.b-hidden) { display: flex; }

/* ═══════════════════════════════════════════════════
   3. TABS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-tabs--border { display: flex; flex-wrap: nowrap; background: #fff; border-bottom: 2px solid var(--b-border); overflow-x: auto; scrollbar-width: none; }
#bubbles-app .b-tabs--border::-webkit-scrollbar { display: none; }
#bubbles-app .b-tabs--border .b-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-space-sm); flex: 1; min-width: 0; padding: var(--b-space-md) var(--b-space-lg); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: 2px; font-size: 16px; font-weight: 600; font-family: var(--b-font); color: var(--b-text-muted); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: color var(--b-transition), border-color var(--b-transition); -webkit-appearance: none; appearance: none; outline: none; }
#bubbles-app .b-tabs--border .b-tab:hover { color: var(--b-text); }
#bubbles-app .b-tabs--border .b-tab:focus { outline: none; }
#bubbles-app .b-tabs--border .b-tab.is-active { color: var(--b-brand); border-color: var(--b-brand); font-weight: 700; }
#bubbles-app .b-tab--stripe.is-active { color: #635bff; border-color: #635bff; }
#bubbles-app .b-tabs--border .b-tab svg { flex-shrink: 0; width: 14px; height: 14px; }

@media (max-width: 767px) {
  #bubbles-app .b-tabs--border .b-tab { flex-direction: column; padding: var(--b-space-sm) var(--b-space-md); font-size: 11px; gap: 3px; }
  #bubbles-app .b-tabs--border .b-tab svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════
   4. JOB CARDS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-schedule-list { display: flex; flex-direction: column; gap: var(--b-space-sm); }

#bubbles-app .b-card--normal,
#bubbles-app .b-card--urgent,
#bubbles-app .b-card--done,
#bubbles-app .b-card--en-route,
#bubbles-app .b-card--in-progress,
#bubbles-app .b-card--today { background: #fff; border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-lg); padding: var(--b-space-md) var(--b-space-lg); transition: box-shadow var(--b-transition); }
#bubbles-app .b-card--normal:hover,
#bubbles-app .b-card--urgent:hover { box-shadow: var(--b-shadow-md); }
#bubbles-app .b-card--normal      { border-left: var(--b-border-accent) solid var(--b-border); }
#bubbles-app .b-card--urgent      { border-left: var(--b-border-accent) solid var(--b-danger); }
#bubbles-app .b-card--done        { border-left: var(--b-border-accent) solid var(--b-success); }
#bubbles-app .b-card--en-route    { border-left: var(--b-border-accent) solid var(--b-primary); }
#bubbles-app .b-card--in-progress { border-left: var(--b-border-accent) solid var(--b-warning); }
#bubbles-app .b-card--today       { border-left: var(--b-border-accent) solid var(--b-border); }

#bubbles-app .b-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-space-md); min-width: 0; }
#bubbles-app .b-card-body { flex: 1; min-width: 0; }
#bubbles-app .b-card-title { font-size: var(--b-font-size); font-weight: 600; color: var(--b-text); margin-bottom: var(--b-space-xs); display: flex; align-items: center; gap: var(--b-space-xs); flex-wrap: wrap; }
#bubbles-app .b-card-meta { font-size: var(--b-font-size); color: var(--b-text-muted); display: flex; flex-wrap: wrap; gap: var(--b-space-xs) var(--b-space-sm); margin-top: var(--b-space-xs); }
#bubbles-app .b-card-meta a:hover { text-decoration: underline; }
#bubbles-app .b-price      { font-size: var(--b-font-size-lg); font-weight: 700; color: var(--b-text); line-height: 1.2; }
#bubbles-app .b-price-rate { font-size: var(--b-font-size); color: var(--b-text-hint); margin-top: 2px; }

#bubbles-app .b-job-card__header { display: flex; align-items: center; justify-content: space-between; padding: var(--b-space-md) var(--b-space-lg); }
#bubbles-app .b-job-card__footer { border-top: var(--b-border-width) solid var(--b-border); padding: var(--b-space-sm) var(--b-space-lg); display: flex; align-items: center; justify-content: space-between; }
#bubbles-app .b-job-card__payout-label  { font-size: var(--b-font-size); color: var(--b-text-hint); margin-bottom: 2px; }
#bubbles-app .b-job-card__payout-amount { font-size: 28px; font-weight: 700; color: var(--b-success-text); line-height: 1; margin: 0; }
#bubbles-app .b-job-card__main { padding: var(--b-space-md) var(--b-space-lg); border-top: var(--b-border-width) solid var(--b-border); display: flex; flex-direction: column; gap: var(--b-space-sm); }
#bubbles-app .b-job-card__vehicle     { font-size: var(--b-font-size); font-weight: 600; color: var(--b-text); margin: 0; }
#bubbles-app .b-job-card__vehicle-sub { font-size: var(--b-font-size); color: var(--b-text-muted); font-weight: normal; margin: 2px 0 0; }
#bubbles-app .b-job-card__meta        { display: flex; flex-wrap: wrap; gap: var(--b-space-xs) var(--b-space-md); }
#bubbles-app .b-job-card__meta-item   { display: flex; align-items: center; gap: 4px; font-size: var(--b-font-size); color: var(--b-text-muted); }
#bubbles-app .b-job-card__meta-item svg { flex-shrink: 0; opacity: .6; }
#bubbles-app .b-job-card__actions { display: flex; gap: var(--b-space-sm); padding: var(--b-space-md) var(--b-space-lg); border-top: var(--b-border-width) solid var(--b-border); align-items: center; flex-wrap: wrap; }

#bubbles-app .b-job-detail { border-top: var(--b-border-width) solid var(--b-border); padding: var(--b-space-md) var(--b-space-lg); display: flex; flex-direction: column; gap: 6px; margin: 0; }
#bubbles-app .b-job-detail__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--b-space-md); font-size: var(--b-font-size); }
#bubbles-app .b-job-detail__row dt { color: var(--b-text-muted); font-weight: normal; flex-shrink: 0; }
#bubbles-app .b-job-detail__row dd { color: var(--b-text); text-align: right; margin: 0; }
#bubbles-app .b-job-detail__row--price dt,
#bubbles-app .b-job-detail__row--price dd { font-weight: 600; color: var(--b-success-text); }
#bubbles-app .b-job-detail__row--bio dd  { max-width: 300px; white-space: normal; }
#bubbles-app .b-job-response { font-size: var(--b-font-size); font-weight: 500; min-height: 18px; padding-top: var(--b-space-xs); }

/* Review */
#bubbles-app .b-btn-review { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
#bubbles-app .b-review-stars { font-size: 15px; letter-spacing: 1px; color: #f59e0b; line-height: 1; }
#bubbles-app .b-review-popup__stars { display: flex; align-items: center; gap: 6px; margin-bottom: var(--b-space-md); }
#bubbles-app .b-review-comment { font-size: var(--b-font-size); color: var(--b-text); line-height: 1.6; margin: 0 0 var(--b-space-lg); font-style: italic; }

@media (max-width: 480px) {
  #bubbles-app .b-card-row   { flex-direction: column; }
  #bubbles-app .b-card-aside { text-align: left; }
}

/* ═══════════════════════════════════════════════════
   5. BOTONES
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-space-xs); padding: var(--b-pad-btn); border-radius: var(--b-radius-md); border: var(--b-border-width) solid transparent; font-size: var(--b-font-size); font-weight: 600; font-family: var(--b-font); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background var(--b-transition), opacity var(--b-transition); -webkit-appearance: none; appearance: none; outline: none; }
#bubbles-app .b-btn:hover    { opacity: .85; }
#bubbles-app .b-btn:active   { transform: scale(.98); }
#bubbles-app .b-btn:disabled { opacity: .4; cursor: not-allowed; }
#bubbles-app .b-btn:focus    { outline: none; }
#bubbles-app .b-btn--primary   { background: var(--b-success-bg); color: var(--b-success-text); border-color: var(--b-success-border); flex: 1; }
#bubbles-app .b-btn--secondary { background: transparent; color: var(--b-text-muted); border-color: var(--b-border-strong); }
#bubbles-app .b-btn--ghost     { background: var(--b-bg-surface); color: var(--b-text-muted); border-color: var(--b-border); }
#bubbles-app .b-btn--danger    { background: var(--b-danger-bg); color: var(--b-danger-text); border-color: var(--b-danger); }
#bubbles-app .b-btn--info      { background: var(--b-primary-bg); color: var(--b-primary-text); border-color: var(--b-border); }
#bubbles-app .b-btn--outline   { background: transparent; color: var(--b-danger-text); border-color: var(--b-danger); }
#bubbles-app .b-btn--stripe    { background: #635bff; color: #fff; border-color: #635bff; }
#bubbles-app .b-btn--outline:hover   { background: var(--b-danger-bg); opacity: 1; }
#bubbles-app .b-btn--stripe:hover    { background: #4f46e5; opacity: 1; }
#bubbles-app .b-btn--secondary:hover { background: var(--b-bg-hover); color: var(--b-text); opacity: 1; }
#bubbles-app .b-btn--ghost:hover     { background: var(--b-bg-hover); opacity: 1; }
#bubbles-app .b-btn--sm { padding: 4px 12px; font-size: var(--b-font-size); }
#bubbles-app .b-form-actions .b-btn--primary,
#bubbles-app .b-form-footer  .b-btn--primary { flex: unset; width: auto; min-width: 130px; }
#bubbles-app .b-link { color: var(--b-primary); text-decoration: none; }
#bubbles-app .b-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   6. BADGES Y TAGS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--b-space-xs); border-radius: var(--b-radius-full); font-size: var(--b-font-size); font-weight: 700; line-height: 1; }
#bubbles-app .b-badge--danger  { background: var(--b-danger);  color: #fff; }
#bubbles-app .b-badge--success { background: var(--b-success); color: #fff; }
#bubbles-app .b-badge--primary { background: var(--b-primary); color: #fff; }
#bubbles-app .b-badge--warning { background: var(--b-warning); color: #fff; }

#bubbles-app .b-tag { display: inline-block; padding: var(--b-pad-tag); border-radius: var(--b-radius-full); font-size: var(--b-font-size); font-weight: 500; white-space: nowrap; }
#bubbles-app .b-tag--primary { background: var(--b-primary-bg); color: var(--b-primary-text); }
#bubbles-app .b-tag--success { background: var(--b-success-bg); color: var(--b-success-text); }
#bubbles-app .b-tag--danger  { background: var(--b-danger-bg);  color: var(--b-danger-text); }
#bubbles-app .b-tag--warning { background: var(--b-warning-bg); color: var(--b-warning-text); }
#bubbles-app .b-tag--neutral { background: var(--b-neutral-bg); color: var(--b-neutral-text); }

/* ═══════════════════════════════════════════════════
   7. STATS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-space-sm); margin-bottom: var(--b-space-md); }
#bubbles-app .b-stat     { border-radius: var(--b-radius-lg); padding: var(--b-pad-stat); border: var(--b-border-width) solid transparent; }
#bubbles-app .b-stat-lbl { font-size: var(--b-font-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--b-space-sm); }
#bubbles-app .b-stat-val { font-size: var(--b-font-size-xl); font-weight: 700; line-height: 1; letter-spacing: -.5px; }
#bubbles-app .b-stat--pending { background: var(--b-stat-pending-bg); border-color: #fde68a; }
#bubbles-app .b-stat--pending .b-stat-lbl,
#bubbles-app .b-stat--pending .b-stat-val { color: var(--b-stat-pending-text); }
#bubbles-app .b-stat--earned  { background: var(--b-stat-earned-bg); border-color: #bbf7d0; }
#bubbles-app .b-stat--earned  .b-stat-lbl,
#bubbles-app .b-stat--earned  .b-stat-val { color: var(--b-stat-earned-text); }
#bubbles-app .b-stat--tips    { background: var(--b-stat-tips-bg); border-color: #f9a8d4; }
#bubbles-app .b-stat--tips    .b-stat-lbl,
#bubbles-app .b-stat--tips    .b-stat-val { color: var(--b-stat-tips-text); }
#bubbles-app .b-stat--jobs    { background: var(--b-stat-jobs-bg); border-color: #bfdbfe; }
#bubbles-app .b-stat--jobs    .b-stat-lbl,
#bubbles-app .b-stat--jobs    .b-stat-val { color: var(--b-stat-jobs-text); }
#bubbles-app .b-stat-val--success { color: var(--b-success-text); }
#bubbles-app .b-stat-val--warning { color: var(--b-warning-text); }

@media (max-width: 767px) {
  #bubbles-app .b-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════
   8. SECTION LABELS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-section-label { font-size: var(--b-font-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--b-text-hint); margin-bottom: var(--b-space-md); }
#bubbles-app .b-section-h3    { font-size: var(--b-font-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--b-text-muted); border-bottom: var(--b-border-width) solid var(--b-border); padding-bottom: var(--b-space-sm); margin: var(--b-space-lg) 0 var(--b-space-md); }

/* ═══════════════════════════════════════════════════
   9. EMPTY STATE
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--b-space-xl) var(--b-space-lg); text-align: center; color: var(--b-text-muted); background: var(--b-bg); border-radius: var(--b-radius-lg); border: var(--b-border-width) dashed var(--b-border); }
#bubbles-app .b-empty-state__icon { font-size: 2rem; margin-bottom: var(--b-space-sm); color: var(--b-text-muted); display: flex; justify-content: center; }
#bubbles-app .b-empty-state__icon svg { width: 36px; height: 36px; opacity: .6; }
#bubbles-app .b-empty-state p { font-size: var(--b-font-size); margin: 0; }

/* ═══════════════════════════════════════════════════
   10. NOTICES
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-notice          { padding: var(--b-space-md); border-radius: var(--b-radius-md); font-size: var(--b-font-size); border: var(--b-border-width) solid transparent; margin-bottom: var(--b-space-lg); }
#bubbles-app .b-notice--success { background: var(--b-success-bg); color: var(--b-success-text); border-color: var(--b-success-border); }
#bubbles-app .b-notice--warning { background: var(--b-warning-bg); color: var(--b-warning-text); border-color: #fde68a; }
#bubbles-app .b-notice--error   { background: var(--b-danger-bg);  color: var(--b-danger-text);  border-color: #fecaca; }
#bubbles-app .b-notice--info    { background: var(--b-primary-bg); color: var(--b-primary-text); border-color: var(--b-border); }
#bubbles-app .b-notice--flex    { display: flex; align-items: center; gap: var(--b-space-md); }
#bubbles-app .b-notice__icon    { font-size: 20px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   11. PROFILE
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-profile-stack { display: flex; flex-direction: column; gap: var(--b-space-md); }
#bubbles-app .b-profile-header { display: flex; align-items: center; gap: var(--b-space-lg); padding: var(--b-space-lg); }
#bubbles-app .b-profile-avatar-circle { width: 72px; height: 72px; border-radius: var(--b-radius-full); overflow: hidden; border: 2px solid var(--b-border); background: var(--b-bg-surface); flex-shrink: 0; }
#bubbles-app .b-profile-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bubbles-app .b-profile-header__info { flex: 1; min-width: 0; }
#bubbles-app .b-profile-header__name { font-size: var(--b-font-size-lg); font-weight: 700; margin: 0 0 4px; color: var(--b-text); }
#bubbles-app .b-profile-header__pending { margin-top: 6px; margin-bottom: 0; }
#bubbles-app .b-profile-header__actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
#bubbles-app .b-profile-avatar-status { padding: 0 var(--b-space-lg) var(--b-space-md); font-size: var(--b-font-size); font-weight: 500; }
#bubbles-app .b-profile-section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--b-space-sm) var(--b-space-lg); border-bottom: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-profile-section-header .b-section-label { margin: 0; }
#bubbles-app .b-profile-edit-body { padding: var(--b-space-md) var(--b-space-lg); display: flex; flex-direction: column; gap: var(--b-space-md); }
#bubbles-app .b-profile-edit-body .b-field { margin-bottom: 0; }
#bubbles-app .b-profile-tags-row { display: flex; gap: var(--b-space-sm); flex-wrap: wrap; padding: var(--b-space-md) var(--b-space-lg); }

/* Avatar camera button — solo móvil/tablet */
#bubbles-app .bb-avatar-camera-btn { display: none; }
@media (max-width: 1023px) { #bubbles-app .bb-avatar-camera-btn { display: inline-flex; } }
@media (max-width: 480px) {
  #bubbles-app .b-profile-header { flex-wrap: wrap; }
  #bubbles-app .b-profile-header__actions { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════
   12. FORM FIELDS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-field { margin-bottom: var(--b-space-lg); }
#bubbles-app .b-field label,
#bubbles-app .b-field > label { display: block; font-size: var(--b-font-size); font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--b-text-muted); margin-bottom: var(--b-space-sm); }
#bubbles-app .b-field input[type="text"],
#bubbles-app .b-field input[type="email"],
#bubbles-app .b-field input[type="number"],
#bubbles-app .b-field input[type="tel"],
#bubbles-app .b-field input[type="time"],
#bubbles-app .b-field textarea,
#bubbles-app .b-field select { width: 100%; padding: var(--b-space-sm) var(--b-space-md); border: var(--b-border-width) solid var(--b-border-strong); border-radius: var(--b-radius-md); font-size: var(--b-font-size); font-family: var(--b-font); color: var(--b-text); background: var(--b-bg); line-height: var(--b-line-height); transition: border-color var(--b-transition), box-shadow var(--b-transition); }
#bubbles-app .b-field input:focus,
#bubbles-app .b-field textarea:focus,
#bubbles-app .b-field select:focus { outline: none; border-color: var(--b-text); box-shadow: var(--b-shadow-focus); }
#bubbles-app .b-field textarea    { resize: vertical; }
#bubbles-app .b-field small       { display: block; font-size: var(--b-font-size); color: var(--b-text-hint); margin-top: var(--b-space-xs); }
#bubbles-app .b-field-row         { display: flex; gap: var(--b-space-md); flex-wrap: wrap; }
#bubbles-app .b-field-row .b-field { flex: 1 1 200px; }
#bubbles-app .b-field--checkboxes  { display: flex; flex-wrap: wrap; gap: var(--b-space-lg); }
#bubbles-app .b-field--checkboxes label { display: inline-flex; align-items: center; gap: var(--b-space-sm); font-size: var(--b-font-size); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--b-text); cursor: pointer; margin: 0; }
#bubbles-app .b-field-error   { font-size: var(--b-font-size); color: var(--b-danger-text); margin-top: var(--b-space-xs); }
#bubbles-app .b-input--invalid { border-color: var(--b-danger) !important; }
#bubbles-app .b-form-actions  { margin-top: var(--b-space-xl); padding-top: var(--b-space-lg); border-top: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-form-footer   { display: flex; flex-direction: column; gap: var(--b-space-sm); margin-top: var(--b-space-xl); }
#bubbles-app .b-form-note     { font-size: var(--b-font-size); color: var(--b-text-hint); margin: 0; }

@media (max-width: 480px) {
  #bubbles-app .b-field-row { flex-direction: column; }
  #bubbles-app .b-field     { margin-bottom: var(--b-space-md); }
}

/* ═══════════════════════════════════════════════════
   13. AVAILABILITY
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-availability-list { display: flex; flex-direction: column; gap: var(--b-space-sm); }
#bubbles-app .b-availability-item { background: var(--b-bg); border-radius: var(--b-radius-lg); padding: var(--b-space-md) var(--b-space-lg); border: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-availability-row         { display: flex; align-items: center; gap: var(--b-space-md); }
#bubbles-app .b-availability-row--top    { justify-content: space-between; margin-bottom: var(--b-space-md); }
#bubbles-app .b-availability-row--times  { flex-wrap: wrap; gap: var(--b-space-md); }
#bubbles-app .b-availability-row--disabled { opacity: .4; pointer-events: none; }
#bubbles-app .b-availability-day          { font-size: var(--b-font-size); font-weight: 600; color: var(--b-text); }
#bubbles-app .b-availability-toggle-label { display: inline-flex; align-items: center; gap: var(--b-space-sm); font-size: var(--b-font-size); color: var(--b-text-muted); cursor: pointer; }
#bubbles-app .b-availability-time         { flex: 1 1 130px; min-width: 0; max-width: 200px; }
#bubbles-app .b-availability-time__label  { display: block; font-size: var(--b-font-size); color: var(--b-text-hint); margin-bottom: var(--b-space-xs); }
#bubbles-app .b-availability-time__input  { width: 100%; padding: var(--b-space-sm) var(--b-space-md); border: var(--b-border-width) solid var(--b-border-strong); border-radius: var(--b-radius-md); font-size: var(--b-font-size); font-family: var(--b-font); color: var(--b-text); background: var(--b-bg); }

/* ═══════════════════════════════════════════════════
   14. PORTFOLIO
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-portfolio               { padding: 0 0 var(--b-space-xl); }
#bubbles-app .b-portfolio__stats        { display: flex; align-items: center; background: var(--b-bg); border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-lg); padding: var(--b-space-lg) var(--b-space-xl); margin-bottom: var(--b-space-lg); }
#bubbles-app .b-portfolio__stats .b-stat { flex: 1; text-align: center; background: transparent; border: none; padding: var(--b-space-md); }
#bubbles-app .b-portfolio__stats .b-stat-val { font-size: 2rem; }
#bubbles-app .b-portfolio__star         { color: #f59e0b; }
#bubbles-app .b-portfolio__stat-divider { width: 1px; height: 40px; background: var(--b-border); flex-shrink: 0; }
#bubbles-app .b-portfolio__section      { margin-bottom: var(--b-space-xl); }
#bubbles-app .b-portfolio__reviews      { display: flex; flex-direction: column; gap: var(--b-space-md); }
#bubbles-app .b-portfolio__review-card  { background: var(--b-bg); border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-lg); padding: var(--b-space-md) var(--b-space-lg); }
#bubbles-app .b-portfolio__review-header  { display: flex; align-items: center; gap: var(--b-space-md); margin-bottom: var(--b-space-md); }
#bubbles-app .b-portfolio__review-stars   { margin-left: auto; color: #f59e0b; font-size: var(--b-font-size-lg); letter-spacing: 2px; }
#bubbles-app .b-portfolio__review-comment { margin: 0; font-size: var(--b-font-size); color: var(--b-text-muted); line-height: 1.6; font-style: italic; }
#bubbles-app .b-portfolio__photo-grid     { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--b-space-sm); }
#bubbles-app .b-portfolio__photo-wrap     { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--b-radius-md); background: var(--b-bg-surface); }
#bubbles-app .b-portfolio__photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--b-transition-slow); }
#bubbles-app .b-portfolio__photo-wrap:hover img { transform: scale(1.05); }
/* Agregar a sección 14 PORTFOLIO en tech.css */

#bubbles-app .b-portfolio__section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: var(--b-space-md); }
#bubbles-app .b-portfolio__section-header .b-section-label { margin: 0; }
#bubbles-app .b-portfolio__review-info    { flex: 1; min-width: 0; }
#bubbles-app .b-portfolio__show-more      { text-align: center; margin-top: var(--b-space-md); }

#bubbles-app .b-portfolio__featured-btn {
  position:        absolute;
  top:             6px;
  right:           6px;
  background:      rgba(0,0,0,.45);
  border:          none;
  border-radius:   50%;
  width:           28px;
  height:          28px;
  cursor:          pointer;
  font-size:       14px;
  line-height:     1;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--b-transition);
}
#bubbles-app .b-portfolio__featured-btn.is-featured { background: #f59e0b; }
#bubbles-app .b-portfolio__featured-btn:hover       { background: #f59e0b; }
/* ═══════════════════════════════════════════════════
   15. PAYMENTS
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-period-filter { display: flex; gap: var(--b-space-sm); flex-wrap: wrap; margin-bottom: var(--b-space-md); }
#bubbles-app .b-period-btn { padding: var(--b-space-sm) var(--b-space-md); border-radius: var(--b-radius-full); border: var(--b-border-width) solid var(--b-border); background: var(--b-bg); color: var(--b-text-muted); font-size: var(--b-font-size); font-family: var(--b-font); cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; transition: background var(--b-transition), color var(--b-transition), border-color var(--b-transition); }
#bubbles-app .b-period-btn:hover     { color: var(--b-text); border-color: var(--b-border-strong); }
#bubbles-app .b-period-btn.is-active { background: var(--b-success-bg); color: var(--b-success-text); border-color: var(--b-success-border); font-weight: 600; }

#bubbles-app .b-table-wrap           { overflow-x: auto; }
#bubbles-app .b-earnings-table       { width: 100%; border-collapse: collapse; font-size: var(--b-font-size); }
#bubbles-app .b-earnings-table thead tr { border-bottom: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-earnings-table th   { text-align: left; padding: var(--b-space-sm) var(--b-space-md); font-weight: 600; color: var(--b-text-muted); }
#bubbles-app .b-earnings-table td   { padding: var(--b-space-md); border-bottom: var(--b-border-width) solid var(--b-border); color: var(--b-text); }
#bubbles-app .b-earnings-table td:first-child { color: var(--b-text-muted); }
#bubbles-app .b-earnings-table tr:last-child td { border-bottom: none; }
#bubbles-app .b-connect-box { background: var(--b-bg-surface); border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-lg); padding: var(--b-space-lg); margin-bottom: var(--b-space-md); }

/* ═══════════════════════════════════════════════════
   16. FOTO UPLOAD
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-photo-section  { margin-top: var(--b-space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-space-sm); padding: var(--b-space-md) var(--b-space-lg); border-top: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-photo-previews { display: flex; flex-wrap: wrap; gap: var(--b-space-xs); }
#bubbles-app .b-photo-thumb    { width: 52px; height: 52px; object-fit: cover; border-radius: var(--b-radius-md); border: var(--b-border-width) solid var(--b-border); }
#bubbles-app .b-photo-hint     { font-size: var(--b-font-size); color: var(--b-text-hint); margin: 0; width: 100%; }
#bubbles-app .b-photo-upload-btn.disabled { opacity: .4; pointer-events: none; }

/* ═══════════════════════════════════════════════════
   17. MODAL
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: var(--b-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--b-space-lg); }
#bubbles-app .b-modal-box     { max-width: 380px; width: 100%; margin: 0; }

/* ═══════════════════════════════════════════════════
   18. SWIPE HINT
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-swipe-hint      { display: flex; align-items: center; justify-content: space-between; font-size: var(--b-font-size); color: var(--b-text-hint); margin-bottom: var(--b-space-md); }
#bubbles-app .b-swipe-hint span { background: var(--b-bg-surface); border: var(--b-border-width) solid var(--b-border); border-radius: var(--b-radius-sm); padding: 2px var(--b-space-sm); }
@media (min-width: 768px) { #bubbles-app .b-swipe-hint { display: none; } }

/* ═══════════════════════════════════════════════════
   19. UTILIDADES EXTRA
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-text-right   { text-align: right; }
#bubbles-app .b-text-center  { text-align: center; }
#bubbles-app .b-text-warning { color: var(--b-warning-text); }
#bubbles-app .b-text-danger  { color: var(--b-danger-text); }
#bubbles-app .b-text-success { color: var(--b-success-text); }
#bubbles-app .b-ml-xs        { margin-left: var(--b-space-xs); }
#bubbles-app .b-mb-xs        { margin-bottom: var(--b-space-xs); }
#bubbles-app .b-mb-sm        { margin-bottom: var(--b-space-sm); }
#bubbles-app .b-mb-md        { margin-bottom: var(--b-space-md); }
#bubbles-app .b-mb-lg        { margin-bottom: var(--b-space-lg); }
#bubbles-app .b-mt-sm        { margin-top: var(--b-space-sm); }
#bubbles-app .b-mt-md        { margin-top: var(--b-space-md); }
#bubbles-app .b-mt-lg        { margin-top: var(--b-space-lg); }
#bubbles-app .b-text-muted   { color: var(--b-text-muted); }
#bubbles-app .b-text-xs      { font-size: var(--b-font-size-sm); }
#bubbles-app .b-text-sm      { font-size: var(--b-font-size); }
#bubbles-app .b-text-lg      { font-size: var(--b-font-size-lg); }
#bubbles-app .b-font-md      { font-weight: var(--b-font-weight-md); }
#bubbles-app .b-mb-xs        { margin-bottom: var(--b-space-xs); }
#bubbles-app .b-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bubbles-app .b-w-full       { width: 100%; }