:root {
    --app-bg: #f5f3ee;
    --app-surface: #ffffff;
    --app-ink: #0f172a;
    --app-muted: #475569;
    --app-border: rgba(15, 23, 42, .12);
    --app-brand: var(--ja-primary-action, #b95716);
    --app-brand-2: var(--ja-primary, #ef8838);
    --app-ring: rgba(11, 59, 91, .25);
}

/*html , body { height: 100%; }*/
body{
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(200,106,58,.16), transparent 55%),
    radial-gradient(900px 500px at 110% 10%, rgba(11,59,91,.16), transparent 55%),
    var(--app-bg);
  color: var(--app-ink);
}

.navbar.app-topbar{
  background: rgba(255,255,255,.8) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--app-border);
}

.app-context-strip{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
}

.navbar-brand{
  font-weight: 700;
  letter-spacing: .2px;
}

.btn-primary{
  --bs-btn-bg: var(--app-brand);
  --bs-btn-border-color: var(--app-brand);
  --bs-btn-hover-bg: var(--ja-primary-hover, #9f4710);
  --bs-btn-hover-border-color: var(--ja-primary-hover, #9f4710);
  --bs-btn-focus-shadow-rgb: 11,59,91;
}

.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color: rgba(11,59,91,.4);
  box-shadow: 0 0 0 .25rem var(--app-ring);
}

.auth-shell{
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

/* Registration shell: specificity also overrides the later global auth layer. */
.auth-shell.auth-shell-registration{
  background: transparent;
}

.auth-card{
  width: min(980px, 100%);
  border: 1px solid var(--app-border);
  border-radius: 18px;
}

.brand-mark{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(145deg, var(--app-brand), #0c5a84);
  box-shadow: 0 10px 25px rgba(11,59,91,.18);
}

.section-title{
  font-weight: 700;
  font-size: .9rem;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}

.card-soft{
  border: 1px dashed rgba(15, 23, 42, .18);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
}

/* FullCalendar theming */
.fc .fc-toolbar-title{
  font-weight: 700;
  letter-spacing: .2px;
}
.fc .fc-button-primary{
  background: var(--app-brand);
  border-color: var(--app-brand);
}
.fc .fc-button-primary:hover{
  background: var(--ja-primary-hover, #9f4710);
  border-color: var(--ja-primary-hover, #9f4710);
}
.fc .fc-button-primary:disabled{
  background: rgba(11,59,91,.55);
  border-color: rgba(11,59,91,.55);
}
.fc .fc-daygrid-event{
  border-radius: 10px;
}
a.fc-event{
  padding-left: 4px;
}
.fc .evt-confirmed{
  outline: 2px solid rgba(20, 184, 166, .35);
}
.fc .evt-noshow{
  opacity: .65;
  filter: grayscale(.2);
}
.fc .evt-operator-preview{
  --operator-color: #4F46E5;
  background: transparent !important;
  border-color: transparent !important;
  color: #0f172a !important;
  padding: 0 !important;
}
.fc .evt-operator-preview .fc-event-main{
  color: #0f172a !important;
  width: 100%;
}
.fc .fc-staff-calendar-preview.staff-calendar-preview{
  width: 100%;
  min-width: 0;
  padding: .35rem .55rem;
  border-left-color: var(--operator-color);
}
.fc .fc-staff-calendar-preview .staff-calendar-preview__title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-agenda-row{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding:.55rem 0;
  border-bottom:1px dashed rgba(15,23,42,.12);
}
.today-agenda-row:last-child{
  border-bottom:none;
}
.today-agenda-slot{
  min-width: 130px;
  color: var(--app-muted);
  font-size: .92rem;
}
.today-agenda-events{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.today-agenda-pill{
  --operator-color: #4F46E5;
  color:#0f172a;
  text-decoration:none;
}
.today-agenda-pill.staff-calendar-preview{
  border-left-color: var(--operator-color);
  min-width: 210px;
}
.today-agenda-pill:hover{
  filter: brightness(.98);
}

footer.footer{
  background: transparent;
}

/* CRUD Index shared tools */
.svg-inline--fa{
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -.125em;
}
.btn-reveal{
  color: var(--app-muted);
  border: 1px solid transparent;
  background: transparent;
  border-radius: .5rem;
}
.btn-reveal .svg-inline--fa{
  width: 1em;
  height: 1em;
}
.btn-reveal:hover,
.btn-reveal:focus{
  color: var(--app-ink);
  background: rgba(15, 23, 42, .06);
}
.dropdown-caret-none::after{
  display: inline-block;
}
.transition-none{
  transition: none !important;
}
#entityList .pagination,
#customersListRoot .pagination{
  gap: .35rem;
  margin-bottom: 0;
}
#entityList .pagination .page-item .page-link,
#customersListRoot .pagination .page-item .page-link{
  border-radius: .5rem;
  border-color: rgba(15, 23, 42, .12);
  color: var(--app-muted);
  min-width: 2.25rem;
  text-align: center;
}
#entityList .pagination .page-item.active .page-link,
#customersListRoot .pagination .page-item.active .page-link{
  background-color: var(--app-brand);
  border-color: var(--app-brand);
  color: #fff;
}
#entityList .pagination .page-item.disabled .page-link,
#customersListRoot .pagination .page-item.disabled .page-link{
  opacity: .6;
}

/* Customers */
.customer-shell{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-radius: 24px;
}
.customer-view-table .list.row{
  margin: 0 !important;
}
.customer-view-table .list > [data-customer-id]{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
.customer-table-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  overflow: hidden;
}
.customer-table-card table{
  margin-bottom: 0;
}
.customer-search-wrap .form-control,
.customer-search-wrap .input-group-text{
  border-color: rgba(15,23,42,.09);
  background: rgba(255,255,255,.95);
}
.customer-kpi{
  min-width: 124px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,.95));
}
.customer-kpi-label{
  display:block;
  font-size: .78rem;
  color: var(--app-muted);
}
.customer-kpi-value{
  display:block;
  font-size: 1.35rem;
  font-weight: 700;
}
.customer-state{
  border-radius: 18px;
}
.customer-state-loading{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: .95rem 1rem;
  border: 1px dashed rgba(37,99,235,.25);
  background: rgba(37,99,235,.04);
  color: var(--app-muted);
}

/* Staff */
.staff-calendar-preview{
  --operator-color: #4F46E5;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-left: 6px solid var(--operator-color);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--operator-color) 14%, #ffffff 86%);
  padding: .35rem .6rem;
  min-width: 170px;
}
.staff-calendar-preview__time{
  font-size: .75rem;
  font-weight: 700;
  color: #334155;
}
.staff-calendar-preview__title{
  font-size: .8rem;
  color: #0f172a;
}

.customer-state-empty,
.customer-state-no-results{
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding: 1.4rem;
  border: 1px dashed rgba(15,23,42,.12);
  background: rgba(245,243,238,.55);
}
.customer-empty-icon{
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  font-size: 1.6rem;
  background: linear-gradient(145deg, rgba(37,99,235,.12), rgba(200,106,58,.12));
  color: var(--app-brand);
}
.customer-card{
  height: 100%;
  display:flex;
  flex-direction:column;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow: 0 16px 30px rgba(15,23,42,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.customer-card-highlight{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 20px 38px rgba(37,99,235,.18);
  transform: translateY(-2px);
}
.customer-card-top{
  display:flex;
  gap:.9rem;
}
.customer-avatar{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-weight: 700;
  letter-spacing: .04em;
  color: white;
  background: linear-gradient(135deg, var(--app-brand), #7c3aed);
  box-shadow: 0 12px 25px rgba(37,99,235,.22);
}
.customer-name{
  margin: 0 0 .2rem 0;
  font-size: 1.04rem;
  font-weight: 700;
}
.customer-meta{
  color: var(--app-muted);
  font-size: .88rem;
}
.customer-card-body{
  margin-top: 1rem;
  display:grid;
  gap: 1rem;
}
.customer-inline-meta{
  display:flex;
  flex-wrap:wrap;
  gap: .75rem 1rem;
  color: var(--app-muted);
  font-size: .88rem;
}
.customer-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.75rem;
}
.customer-stat{
  border-radius: 16px;
  padding: .75rem .85rem;
  background: rgba(248,250,252,.92);
  border: 1px solid rgba(15,23,42,.06);
}
.customer-stat .label{
  display:block;
  font-size: .78rem;
  color: var(--app-muted);
  margin-bottom: .25rem;
}
.customer-card-footer{
  margin-top: auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  padding-top: 1rem;
}
.customer-center-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:.75rem;
}
.customer-center-option{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.78);
}
.customer-detail-card{
  height: 100%;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(248,250,252,.82);
}
.customer-detail-label{
  display:block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-muted);
  margin-bottom: .35rem;
}
.customer-detail-value{
  font-weight: 600;
}

@media (max-width: 767.98px){
  .customer-state-empty,
  .customer-state-no-results{
    flex-direction:column;
    align-items:flex-start;
  }
  .customer-kpi{
    flex: 1 1 calc(50% - .5rem);
  }
}

/* Global restyle layer */
.page-shell{max-width:1440px;margin-inline:auto}.page-hero{position:relative;overflow:hidden;border:1px solid var(--ja-border);border-radius:1.5rem;padding:1.35rem;background:linear-gradient(135deg,#fff 0%,#f7fbfd 52%,rgba(242,140,56,.12) 100%);box-shadow:var(--ja-shadow-sm)}.page-hero:after{content:"";position:absolute;right:-60px;top:-90px;width:220px;height:220px;border-radius:50%;background:rgba(11,47,68,.08)}.page-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ja-orange)}.page-actions{display:flex;flex-wrap:wrap;gap:.55rem}.kpi-card-modern{position:relative;overflow:hidden;border:1px solid var(--ja-border);border-radius:1.25rem;background:#fff;box-shadow:var(--ja-shadow-sm)}.kpi-card-modern:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--ja-navy),var(--ja-orange))}.kpi-icon{width:46px;height:46px;border-radius:1rem;display:grid;place-items:center;background:rgba(11,47,68,.08)}.section-card{border:1px solid var(--ja-border);border-radius:1.25rem;background:#fff;box-shadow:var(--ja-shadow-sm);overflow:hidden}.section-card-header{padding:1rem 1.15rem;border-bottom:1px solid var(--ja-border);display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(180deg,#fff,#fbfdff)}.quick-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.65rem}.quick-action-tile{display:flex;align-items:center;gap:.75rem;padding:.85rem;border:1px solid var(--ja-border);border-radius:1rem;text-decoration:none;color:var(--ja-ink);background:#fff}.quick-action-tile:hover{border-color:rgba(242,140,56,.45);box-shadow:var(--ja-shadow-sm);color:var(--ja-ink)}.quick-action-tile i{width:34px;height:34px;border-radius:.8rem;display:grid;place-items:center;background:rgba(11,47,68,.08);color:var(--ja-navy)}.quick-action-tile.action-primary{background:linear-gradient(135deg,var(--ja-orange),#f5a45f);color:#fff;border-color:transparent}.quick-action-tile.action-primary i{background:rgba(255,255,255,.2);color:#fff}.center-card{border:1px solid var(--ja-border);border-radius:1.15rem;background:#fff;box-shadow:var(--ja-shadow-sm)}.status-badge-soft{background:rgba(24,160,88,.1);color:#0b7a43;border:1px solid rgba(24,160,88,.2)}.auth-shell{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:2rem 1rem;background:radial-gradient(circle at top left,rgba(242,140,56,.16),transparent 32%),radial-gradient(circle at bottom right,rgba(11,47,68,.14),transparent 34%)}.auth-card{width:min(980px,100%);border:1px solid var(--ja-border);border-radius:1.5rem;box-shadow:var(--ja-shadow-md)}.public-shell{background:linear-gradient(180deg,#f8fbfd,#fff)}.app-topbar{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--ja-border)}.app-main-shell{min-height:calc(100vh - 190px)}.top-context{display:flex;align-items:center;gap:.5rem}.top-context .badge{border:1px solid var(--ja-border);border-radius:999px;padding:.5rem .7rem;background:#fff!important;color:var(--ja-ink)!important}.notification-dot{position:relative}.notification-dot:after{content:"";position:absolute;right:.35rem;top:.35rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ja-orange);border:2px solid #fff}.mobile-menu-brand{display:flex;align-items:center;gap:.65rem}.mobile-menu-section{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ja-muted);margin:1rem 0 .35rem}.mobile-menu-link{display:flex;align-items:center;gap:.7rem;border:1px solid transparent;border-radius:1rem;padding:.75rem .8rem}.mobile-menu-link i{width:1.25rem;text-align:center}.mobile-menu-link.mobile-cta{background:rgba(242,140,56,.14);color:#8a430e}.mobile-menu-link.mobile-whatsapp i{color:var(--ja-green)}

/* Appointment creation wizard */
.appointment-wizard-page{max-width:1440px}.appointment-wizard-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem;border:1px solid rgba(15,23,42,.08);border-radius:1.35rem;background:linear-gradient(135deg,#fff,#f8fbfd 55%,rgba(242,140,56,.12));box-shadow:0 12px 30px rgba(15,35,52,.06)}.appointment-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.appointment-stepper__item{position:relative;display:flex;align-items:center;gap:.65rem;width:100%;border:1px solid rgba(15,23,42,.10);border-radius:1rem;background:#fff;color:#64748b;padding:.8rem .9rem;text-align:left;box-shadow:0 8px 22px rgba(15,35,52,.05)}.appointment-stepper__item:after{content:"";position:absolute;left:calc(100% + .15rem);width:.35rem;height:2px;background:rgba(15,23,42,.14)}.appointment-stepper__item:last-child:after{display:none}.appointment-stepper__item.is-active{border-color:rgba(242,140,56,.55);color:#102033;box-shadow:0 12px 28px rgba(242,140,56,.14)}.appointment-stepper__item.is-complete{border-color:rgba(24,160,88,.3);color:#0b7a43;background:rgba(24,160,88,.06)}.appointment-stepper__item.is-locked{opacity:.58}.appointment-stepper__number{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:999px;background:#0b2f44;color:#fff;font-weight:800}.appointment-stepper__item.is-active .appointment-stepper__number{background:var(--ja-primary-action,#b95716)}.appointment-stepper__label{font-weight:800}.appointment-stepper__check{display:none;margin-left:auto}.appointment-stepper__item.is-complete .appointment-stepper__check{display:inline-flex}.appointment-wizard-panel,.appointment-summary-card{border:1px solid rgba(15,23,42,.09);border-radius:1.35rem;background:#fff;box-shadow:0 14px 34px rgba(15,35,52,.07);overflow:hidden}.appointment-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem;border-bottom:1px solid rgba(15,23,42,.08);background:linear-gradient(180deg,#fff,#fbfdff)}.appointment-panel__body{padding:1.25rem}.appointment-panel__footer{display:flex;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid rgba(15,23,42,.08);background:#fbfdff}.appointment-autocomplete{position:absolute;z-index:1080;width:100%;top:100%;left:0;margin-top:.35rem;max-height:280px;overflow:auto;box-shadow:0 18px 40px rgba(15,35,52,.16);border-radius:.9rem}.appointment-selected-box,.appointment-empty-inline{border:1px dashed rgba(15,23,42,.14);border-radius:.9rem;background:#f8fafc;padding:.8rem;color:#64748b}.appointment-service-list{display:grid;gap:.65rem}.appointment-service-pill{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(15,23,42,.09);border-radius:1rem;background:#fff;padding:.8rem .9rem;box-shadow:0 8px 20px rgba(15,35,52,.05)}.appointment-service-pill span{display:flex;flex-direction:column}.appointment-duration{display:inline-flex;align-items:center;border-radius:999px;padding:.45rem .7rem;background:rgba(11,47,68,.07);color:#0b2f44;font-weight:700}.appointment-slots{display:grid;gap:.75rem}.appointment-loading{display:flex;align-items:center;gap:.55rem;color:#64748b;padding:.9rem}.appointment-operator-slots{border:1px solid rgba(15,23,42,.09);border-radius:1rem;padding:1rem;background:#fff}.appointment-operator-slots__title{font-weight:800;margin-bottom:.75rem;color:#0b2f44}.appointment-slot-grid{display:flex;flex-wrap:wrap;gap:.55rem}.appointment-slot-grid .slot-item{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;border-radius:.75rem}.appointment-slot-grid .slot-item small{font-size:.72rem;opacity:.78}.appointment-summary-column{order:2}.appointment-summary-card{position:sticky;top:calc(68px + 1rem);padding:1.25rem}.appointment-summary-list{display:grid;grid-template-columns:minmax(92px,.8fr) 1.2fr;gap:.7rem 1rem}.appointment-summary-list dt{color:#64748b;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.appointment-summary-list dd{margin:0;font-weight:700;color:#102033}.appointment-confirm-summary{border:1px solid rgba(15,23,42,.08);border-radius:1rem;background:#f8fafc;padding:1rem}@media (max-width:991.98px){.appointment-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.appointment-stepper__item:after{display:none}.appointment-panel__header{flex-direction:column}.appointment-summary-card{position:static}.appointment-panel__footer{position:sticky;bottom:.5rem;z-index:5;border-radius:1rem;margin:0 .75rem .75rem;box-shadow:0 14px 32px rgba(15,35,52,.12)}}@media (max-width:575.98px){.appointment-wizard-hero{flex-direction:column}.appointment-stepper{grid-template-columns:1fr}.appointment-stepper__item{padding:.7rem}.appointment-summary-list{grid-template-columns:1fr}.appointment-panel__footer{flex-direction:column-reverse}.appointment-panel__footer .btn{width:100%}}

/* GUI reorganization: common disclosure, context and keyboard affordances. */
summary { cursor: pointer; font-weight: 600; }
summary:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.app-content, .top-context { min-width: 0; }
.top-context { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.top-context .badge { white-space: normal; overflow-wrap: anywhere; max-width: 16rem; }
dd, code, .billing-timeline { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .top-context { flex: 1 1 100%; justify-content: flex-start; } .billing-hero { flex-wrap: wrap; } .billing-hero h1 { font-size: 1.65rem; } }