@import url('./vendor/montserrat/montserrat.css');

/*
 * DIVA · Sistema visual unificado v13.1
 * Capa final para las 35 pantallas públicas, master, centro de belleza y clienta.
 * Mantiene la identidad neumórfica original y corrige navegación,
 * jerarquía, formularios, tablas, modales y adaptación responsive.
 */

:root {
  --diva-unified: 1;
  --diva-bg: #f3eeee;
  --diva-surface: #f6f1f0;
  --diva-primary: #a67c72;
  --diva-primary-dark: #80534a;
  --diva-primary-light: #c9a39b;
  --diva-text: #654942;
  --diva-muted: #987c76;
  --diva-success: #4f9164;
  --diva-danger: #b45d55;
  --diva-warning: #c49539;
  --diva-info: #5d7fa6;
  --diva-shadow: rgba(166, 124, 114, .23);
  --diva-shadow-strong: rgba(128, 83, 74, .28);
  --diva-light: rgba(255, 255, 255, .96);
  --diva-radius-sm: 16px;
  --diva-radius-md: 22px;
  --diva-radius-lg: 30px;
  --diva-radius-xl: 38px;
  --diva-content: 1320px;
}

html {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  color-scheme: light;
  background: #ded7d5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body[data-diva-level] {
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--diva-text);
  background:
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, .9), transparent 30%),
    var(--diva-bg);
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-diva-level] *,
body[data-diva-level] *::before,
body[data-diva-level] *::after {
  box-sizing: border-box;
}

body[data-diva-level] :is(button, input, select, textarea) {
  font: inherit;
}

/*
 * Las capas visuales heredan Montserrat para textos y controles, pero nunca
 * deben reemplazar la fuente interna de Font Awesome. Estas reglas se cargan
 * al final para proteger los iconos incluso en las pantallas Pro.
 */
body[data-diva-level] :is(.fa-solid, .fas) {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal;
  font-weight: 900 !important;
}

body[data-diva-level] :is(.fa-regular, .far) {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal;
  font-weight: 400 !important;
}

body[data-diva-level] :is(.fa-brands, .fab) {
  font-family: "Font Awesome 6 Brands" !important;
  font-style: normal;
  font-weight: 400 !important;
}

body[data-diva-level] :is(img, svg, canvas, video) {
  max-width: 100%;
}

body[data-diva-level] img {
  height: auto;
}

body[data-diva-level] :is(h1, h2, h3, h4, p, strong, span, small, label, td, th, a) {
  overflow-wrap: anywhere;
}

body[data-diva-level] :is(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

body[data-diva-level] :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(93, 127, 166, .3) !important;
  outline-offset: 3px;
}

body[data-diva-level] :is(button, [role='button']):disabled,
body[data-diva-level] :is(button, [role='button'])[aria-disabled='true'] {
  opacity: .56;
  cursor: not-allowed;
}

body[data-diva-level] ::selection {
  color: #fff;
  background: var(--diva-primary);
}

body[data-diva-level] ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body[data-diva-level] ::-webkit-scrollbar-track {
  background: rgba(166, 124, 114, .08);
  border-radius: 999px;
}

body[data-diva-level] ::-webkit-scrollbar-thumb {
  background: rgba(166, 124, 114, .38);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

/* Estructura común */
body[data-diva-level] :is(.app-container, .pro-shell, .shell) {
  min-width: 0;
}

body[data-diva-level] .app-container {
  width: 100%;
  max-width: 450px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--diva-bg);
}

body[data-diva-level='admin'][data-diva-screen='login'] .app-container {
  max-width: 1180px;
}

body[data-diva-level='client'][data-diva-screen='register'] .app-container {
  max-width: 760px;
}

body[data-diva-level] .scroll-area {
  min-width: 0;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

body[data-diva-level] .pro-shell,
body[data-diva-level] .shell {
  width: min(100%, var(--diva-content));
  max-width: var(--diva-content);
  margin-inline: auto;
}

body[data-diva-level] :is(
  .desktop-layout,
  .desktop-grid,
  .pro-grid,
  .stats-grid,
  .summary-grid,
  .actions-grid,
  .business-list,
  .recent-list,
  .form-row,
  .pro-row,
  .pro-stats,
  .pro-summary
) > * {
  min-width: 0;
}

/* Cabeceras: misma escala visual en pantallas antiguas y nuevas */
body[data-diva-level] :is(.top-bar, .header, .pro-topbar, .topbar) {
  min-width: 0;
  gap: 14px;
}

body[data-diva-level] :is(.brand-box, .profile-box, .pro-brand, .brand, .mini-brand) {
  min-width: 0;
}

body[data-diva-level] :is(.brand-text, .hello, .pro-brand > div, .brand-copy) {
  min-width: 0;
}

body[data-diva-level] :is(.logo-mini, .pro-brand img, .brand-logo, .mini-brand img) {
  flex: 0 0 auto;
  object-fit: contain;
}

body[data-diva-level] :is(.logo-mini, .pro-brand img) {
  width: 56px;
  height: 56px;
  padding: 6px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--diva-bg);
  box-shadow:
    8px 8px 18px var(--diva-shadow),
    -8px -8px 18px var(--diva-light);
}

body[data-diva-level] .logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body[data-diva-level] :is(.circle-btn, .icon-btn, .pro-icon-btn, .logout-btn, .back-btn) {
  flex: 0 0 auto;
  border: 0;
  color: var(--diva-primary);
  background: var(--diva-bg);
  box-shadow:
    7px 7px 16px var(--diva-shadow),
    -7px -7px 16px var(--diva-light);
}

body[data-diva-level] :is(.circle-btn, .icon-btn, .pro-icon-btn, .logout-btn, .back-btn):active {
  transform: scale(.94);
  box-shadow:
    inset 4px 4px 10px rgba(166, 124, 114, .18),
    inset -4px -4px 10px rgba(255, 255, 255, .92);
}

body[data-diva-level] :is(.page-title, .section-title, .pro-card-head) {
  min-width: 0;
}

body[data-diva-level] :is(.page-title h1, .page-title h2, .section-title h2, .section-title h3) {
  color: var(--diva-primary-dark);
  line-height: 1.15;
}

/* Hero y tarjetas */
body[data-diva-level] :is(.hero-card, .pro-hero, .status-hero, .title-box) {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .62);
  background:
    linear-gradient(145deg, rgba(166, 124, 114, .08), rgba(255, 255, 255, .42)),
    var(--diva-bg);
  box-shadow:
    12px 12px 28px var(--diva-shadow),
    -11px -11px 26px var(--diva-light);
}

body[data-diva-level] :is(.hero-card, .pro-hero) {
  border-radius: var(--diva-radius-xl);
}

body[data-diva-level] :is(.hero-card h1, .hero-card h2, .pro-hero h1, .status-hero h1) {
  color: var(--diva-primary-dark);
  line-height: 1.08;
}

body[data-diva-level] :is(.hero-card p, .pro-hero p, .status-hero p) {
  color: var(--diva-muted);
  line-height: 1.65;
}

body[data-diva-level] :is(
  .stat-card,
  .summary-card,
  .summary-box,
  .action-card,
  .quick-card,
  .recent-card,
  .create-card,
  .payments-panel-card,
  .info-card,
  .support-card,
  .session-card,
  .profile-card,
  .scanner-card,
  .manual-card,
  .progress-card,
  .form-shell,
  .feature-card,
  .card,
  .pro-card,
  .pro-stat
) {
  min-width: 0;
  border-color: rgba(255, 255, 255, .64);
  background-color: var(--diva-bg);
}

body[data-diva-level] :is(.stat-card, .summary-card, .summary-box, .pro-stat) {
  border-radius: 26px;
}

body[data-diva-level] :is(
  .action-card,
  .quick-card,
  .recent-card,
  .create-card,
  .payments-panel-card,
  .info-card,
  .support-card,
  .session-card,
  .profile-card,
  .scanner-card,
  .manual-card,
  .progress-card,
  .form-shell,
  .card,
  .pro-card
) {
  border-radius: var(--diva-radius-lg);
}

body[data-diva-level] :is(.action-card, .quick-card, .support-card, .pro-btn, .btn, .btn-primary, .btn-secondary) {
  text-decoration: none;
}

body[data-diva-level] :is(.action-card, .quick-card, .support-card):hover {
  transform: translateY(-2px);
}

body[data-diva-level] :is(.loading-card, .pro-empty, .empty-state, .empty-card) {
  min-height: 110px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px 18px;
  border-radius: var(--diva-radius-md);
  color: var(--diva-muted);
  background: rgba(255, 255, 255, .32);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

/* Formularios y acciones */
body[data-diva-level] :is(
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea,
  .input,
  .select,
  .textarea,
  .pro-input,
  .pro-select,
  .pro-textarea,
  .security-input
) {
  max-width: 100%;
  border-color: transparent;
  color: var(--diva-text);
  background-color: var(--diva-bg);
}

body[data-diva-level] :is(input, select, textarea)::placeholder {
  color: rgba(152, 124, 118, .72);
  opacity: 1;
}

body[data-diva-level] :is(input, select, textarea):disabled {
  opacity: .68;
  cursor: not-allowed;
}

body[data-diva-level] :is(.form, .pro-form, .security-form) {
  min-width: 0;
}

body[data-diva-level] :is(.input-group, .form-field, .field, .pro-field, .security-field) {
  min-width: 0;
}

body[data-diva-level] :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .pro-btn, .modal-btn, .primary-btn, .secondary-btn) {
  min-height: 48px;
  max-width: 100%;
  border-radius: 18px;
  font-weight: 800;
  line-height: 1.25;
}

body[data-diva-level] :is(.btn, .btn-primary, .btn-secondary, .btn-danger, .pro-btn, .modal-btn, .primary-btn, .secondary-btn):active {
  transform: scale(.98);
}

body[data-diva-level] :is(.pro-actions, .actions, .modal-actions, .card-actions, .form-actions) {
  min-width: 0;
  flex-wrap: wrap;
}

/* Tablas, gráficas y listados extensos */
body[data-diva-level] :is(.pro-table-wrap, .table-wrap, .table-container) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--diva-radius-md);
}

body[data-diva-level] :is(.pro-table, table) {
  max-width: 100%;
}

body[data-diva-level] .pro-chart {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

body[data-diva-level] .pro-chart canvas {
  width: 100% !important;
  max-width: 100% !important;
}

body[data-diva-level] :is(.pro-list, .payments-list, .recent-list, .services-list, .reviews-list) {
  min-width: 0;
}

/* Modales y mensajes */
body[data-diva-level] :is(.modal-overlay, .diva-ui-overlay) {
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

body[data-diva-level] .modal-overlay {
  z-index: 100020 !important;
  overscroll-behavior: contain;
}

body[data-diva-level] .modal-overlay .modal-card {
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px));
  padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  scroll-padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 22px));
  overscroll-behavior: contain;
}

body.diva-modal-open .diva-main-nav,
body.diva-modal-open .diva-pwa-notification-fab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-diva-level='client'][data-diva-screen='salon'] #appointmentForm {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

body[data-diva-level='client'][data-diva-screen='salon'] #submitAppointmentBtn,
body[data-diva-level='client'][data-diva-screen='salon'] #waitlistBtn {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

body[data-diva-level] :is(.modal-card, .diva-ui-dialog) {
  width: min(100%, 470px);
  max-width: 470px;
  max-height: min(88dvh, 760px);
  overflow: auto;
  border-radius: var(--diva-radius-lg);
}

body[data-diva-level] :is(.toast, .diva-ui-toast-stack) {
  max-width: min(430px, calc(100vw - 30px));
}

/* Navegación única: móvil abajo, escritorio a la izquierda. */
body[data-diva-level] .diva-main-nav {
  position: fixed;
  z-index: 1200;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  width: auto;
  max-width: 620px;
  min-height: 70px;
  margin: 0 auto;
  padding: 7px;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  transform: none;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 25px;
  background: rgba(243, 238, 238, .96);
  box-shadow:
    9px 9px 22px rgba(82, 51, 43, .2),
    -8px -8px 20px rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-diva-level] .diva-main-nav a {
  min-width: 0;
  min-height: 54px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  overflow: hidden;
  border-radius: 18px;
  color: var(--diva-muted);
  font-size: clamp(.48rem, 2vw, .6rem);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  text-decoration: none;
}

body[data-diva-level] .diva-main-nav a i {
  width: auto;
  flex: 0 0 auto;
  font-size: 1rem;
  text-align: center;
}

body[data-diva-level] .diva-main-nav a.active,
body[data-diva-level] .diva-main-nav a[aria-current] {
  color: var(--diva-primary-dark);
  background: rgba(255, 255, 255, .56);
  box-shadow:
    inset 3px 3px 7px rgba(166, 124, 114, .1),
    inset -3px -3px 7px rgba(255, 255, 255, .82);
}

body.diva-has-nav .scroll-area {
  padding-bottom: max(176px, calc(env(safe-area-inset-bottom) + 164px));
}

body.diva-has-nav.pro-page {
  padding-bottom: max(176px, calc(env(safe-area-inset-bottom) + 164px));
}

@media (max-width: 899px) {
  body[data-diva-level] .diva-pwa-notification-fab {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 94px));
  }
}

/* Tabletas */
@media (min-width: 600px) and (max-width: 899px) {
  body[data-diva-level] .app-container {
    max-width: 860px;
  }

  body[data-diva-level] .scroll-area {
    padding-inline: 34px;
  }

  body[data-diva-level] .diva-main-nav {
    right: 34px;
    left: 34px;
    max-width: 760px;
    min-height: 76px;
    border-radius: 28px;
  }

  body[data-diva-level] .diva-main-nav a {
    min-height: 60px;
    flex-direction: row;
    gap: 7px;
    font-size: .68rem;
  }

  body[data-diva-level] :is(.pro-row.two, .form-row, .summary-grid, .stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Escritorio: todos los módulos usan la misma barra lateral y el mismo lienzo. */
@media (min-width: 900px) {
  body[data-diva-level] {
    background:
      radial-gradient(circle at top right, rgba(255, 255, 255, .62), transparent 30%),
      var(--diva-bg);
  }

  body[data-diva-level].diva-has-nav .app-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 286px;
  }

  body[data-diva-level].diva-has-nav .scroll-area {
    width: 100%;
    padding: 36px 44px 64px;
  }

  body[data-diva-level].diva-has-nav.pro-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 36px 44px 64px 310px;
  }

  body[data-diva-level].diva-has-nav .pro-shell {
    width: min(100%, var(--diva-content));
    max-width: var(--diva-content);
    margin-inline: auto;
  }

  body[data-diva-level] .diva-main-nav {
    top: 26px;
    right: auto;
    bottom: 26px;
    left: 26px;
    width: 224px;
    max-width: 224px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    overflow-y: auto;
    border-radius: 34px;
  }

  body[data-diva-level] .diva-main-nav::before {
    min-height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: var(--diva-primary-dark);
    font-size: .98rem;
    font-weight: 800;
  }

  body[data-diva-level='super'] .diva-main-nav::before { content: 'Diva Master'; }
  body[data-diva-level='admin'] .diva-main-nav::before { content: 'Diva Centro de belleza'; }
  body[data-diva-level='client'] .diva-main-nav::before { content: 'Diva Clienta'; }

  body[data-diva-level] .diva-main-nav a {
    width: 100%;
    min-height: 58px;
    flex: 0 0 58px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 15px;
    border-radius: 20px;
    font-size: .78rem;
    text-align: left;
  }

  body[data-diva-level] .diva-main-nav a i {
    width: 22px;
    font-size: 1rem;
  }

  body[data-diva-level] :is(.top-bar, .header, .pro-topbar) {
    margin-bottom: 30px;
  }

  body[data-diva-level] :is(.logo-mini, .pro-brand img) {
    width: 62px;
    height: 62px;
    border-radius: 21px;
  }

  body[data-diva-level] :is(.hero-card, .pro-hero) {
    min-height: 220px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body[data-diva-level] :is(.hero-card h1, .hero-card h2, .pro-hero h1) {
    max-width: 920px;
    font-size: clamp(2rem, 3vw, 3rem);
  }

  body[data-diva-level] :is(.hero-card p, .pro-hero p) {
    max-width: 780px;
    font-size: .9rem;
  }

  body[data-diva-level] :is(.stats-grid, .pro-stats) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  body[data-diva-level] :is(.summary-grid, .pro-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-diva-level] :is(.stat-card, .summary-card, .pro-stat) {
    min-height: 122px;
  }

  body[data-diva-level] .pro-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-diva-level] .pro-grid.sidebar {
    grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
  }

  body[data-diva-level] :is(.pro-card, .create-card, .payments-panel-card, .info-card, .session-card) {
    padding: 24px;
  }

  body[data-diva-level] .pro-chart {
    height: 300px;
  }
}

@media (min-width: 900px) and (max-width: 1120px) {
  body[data-diva-level].diva-has-nav .app-container {
    padding-left: 252px;
  }

  body[data-diva-level].diva-has-nav.pro-page {
    padding-left: 274px;
  }

  body[data-diva-level] .diva-main-nav {
    width: 194px;
    max-width: 194px;
  }

  body[data-diva-level].diva-has-nav .scroll-area {
    padding-inline: 32px;
  }
}

/* Teléfonos */
@media (max-width: 599px) {
  body[data-diva-level='admin'][data-diva-screen='login'] .app-container,
  body[data-diva-level='client'][data-diva-screen='register'] .app-container {
    max-width: 450px;
  }

  body[data-diva-level] .pro-page,
  body[data-diva-level].pro-page {
    width: 100%;
  }

  body[data-diva-level] :is(.pro-actions .pro-btn, .pro-actions .pro-select) {
    width: 100%;
    max-width: none !important;
  }

  body[data-diva-level] :is(input, select, textarea) {
    font-size: 16px !important;
  }

  body[data-diva-level] :is(.modal-actions, .diva-ui-dialog-actions) {
    grid-template-columns: 1fr;
  }

  body[data-diva-level] :is(.modal-btn, .diva-ui-btn) {
    width: 100%;
  }

  body[data-diva-level] .pro-card-head {
    flex-wrap: wrap;
  }
}

@media (max-width: 390px) {
  body[data-diva-level] .scroll-area {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-diva-level].pro-page {
    padding-right: 18px;
    padding-left: 18px;
  }

  body[data-diva-level] .diva-main-nav {
    right: 8px;
    left: 8px;
    padding-inline: 5px;
  }

  body[data-diva-level] .diva-main-nav a {
    font-size: .47rem;
  }

  body[data-diva-level] :is(.hero-card, .pro-hero) {
    border-radius: 30px;
  }

  body[data-diva-level] :is(.pro-card, .create-card, .payments-panel-card, .info-card, .session-card) {
    border-radius: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-diva-level] *,
  body[data-diva-level] *::before,
  body[data-diva-level] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}