
/* Los mensajes antiguos de cada página se capturan y se muestran mediante
   el toast global para mantener una sola estética en toda Diva. */
html[data-diva-ui-ready="true"] .toast:not(.diva-ui-toast) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

:root {
  --diva-ui-bg: #f3eeee;
  --diva-ui-primary: #a67c72;
  --diva-ui-primary-dark: #80534a;
  --diva-ui-primary-light: #c9a39b;
  --diva-ui-text: #654942;
  --diva-ui-muted: #987c76;
  --diva-ui-success: #4f9164;
  --diva-ui-danger: #b45d55;
  --diva-ui-warning: #c49539;
  --diva-ui-info: #5d7fa6;
  --diva-ui-shadow-dark: rgba(166, 124, 114, .27);
  --diva-ui-shadow-light: rgba(255, 255, 255, .96);
}

.diva-ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(63, 42, 37, .33);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.diva-ui-overlay.show {
  opacity: 1;
  visibility: visible;
}

.diva-ui-dialog {
  width: min(100%, 430px);
  max-height: min(86dvh, 720px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 32px;
  background: var(--diva-ui-bg);
  color: var(--diva-ui-text);
  padding: 24px 22px 21px;
  box-shadow:
    18px 18px 42px rgba(82, 51, 43, .28),
    -12px -12px 32px rgba(255,255,255,.80);
  transform: translateY(18px) scale(.97);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.diva-ui-overlay.show .diva-ui-dialog {
  transform: translateY(0) scale(1);
}

.diva-ui-dialog-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 15px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: var(--diva-ui-primary);
  background: linear-gradient(145deg, #eadfdd, #fff9f7);
  box-shadow:
    inset 5px 5px 12px rgba(166,124,114,.13),
    inset -5px -5px 12px rgba(255,255,255,.95);
}

.diva-ui-dialog[data-type="success"] .diva-ui-dialog-icon { color: var(--diva-ui-success); }
.diva-ui-dialog[data-type="error"] .diva-ui-dialog-icon,
.diva-ui-dialog[data-type="danger"] .diva-ui-dialog-icon { color: var(--diva-ui-danger); }
.diva-ui-dialog[data-type="warning"] .diva-ui-dialog-icon { color: var(--diva-ui-warning); }
.diva-ui-dialog[data-type="info"] .diva-ui-dialog-icon { color: var(--diva-ui-info); }

.diva-ui-dialog-title {
  margin: 0 0 9px;
  color: var(--diva-ui-primary-dark);
  font-size: 1.28rem;
  line-height: 1.22;
  font-weight: 800;
  text-align: center;
}

.diva-ui-dialog-message {
  color: var(--diva-ui-muted);
  font-size: .88rem;
  line-height: 1.58;
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.diva-ui-dialog-input {
  width: 100%;
  min-height: 118px;
  margin-top: 17px;
  resize: vertical;
  border: none;
  outline: none;
  border-radius: 21px;
  background: var(--diva-ui-bg);
  color: var(--diva-ui-text);
  padding: 16px 17px;
  font-size: .9rem;
  line-height: 1.5;
  font-weight: 650;
  box-shadow:
    inset 6px 6px 14px rgba(166,124,114,.18),
    inset -6px -6px 14px rgba(255,255,255,.95);
}

.diva-ui-dialog-input:focus {
  box-shadow:
    inset 6px 6px 14px rgba(166,124,114,.20),
    inset -6px -6px 14px rgba(255,255,255,.98),
    0 0 0 3px rgba(93,127,166,.14);
}

.diva-ui-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  margin-top: 20px;
}

.diva-ui-dialog-actions.single {
  grid-template-columns: 1fr;
}

.diva-ui-btn {
  min-height: 55px;
  border: none;
  border-radius: 21px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.diva-ui-btn:active { transform: scale(.97); }
.diva-ui-btn:focus-visible { outline: 3px solid rgba(93,127,166,.28); outline-offset: 3px; }
.diva-ui-btn:disabled { opacity: .58; cursor: not-allowed; }

.diva-ui-btn.secondary {
  color: var(--diva-ui-primary-dark);
  background: var(--diva-ui-bg);
  box-shadow:
    8px 8px 18px var(--diva-ui-shadow-dark),
    -8px -8px 18px var(--diva-ui-shadow-light);
}

.diva-ui-btn.primary {
  color: #fff;
  background: linear-gradient(145deg, #b88b80, #95685f);
  box-shadow:
    9px 9px 20px rgba(166,124,114,.34),
    -9px -9px 20px rgba(255,255,255,.84);
}

.diva-ui-btn.danger {
  color: #fff;
  background: linear-gradient(145deg, #c67b72, #a84f47);
  box-shadow:
    9px 9px 20px rgba(180,93,85,.30),
    -9px -9px 20px rgba(255,255,255,.84);
}

.diva-ui-toast-stack {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2147483200;
  width: min(calc(100% - 30px), 430px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.diva-ui-toast {
  min-height: 58px;
  border-radius: 20px;
  background: rgba(243,238,238,.97);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--diva-ui-primary-dark);
  box-shadow:
    9px 9px 22px rgba(82,51,43,.23),
    -8px -8px 18px rgba(255,255,255,.82);
  opacity: 0;
  transform: translateY(-14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}

.diva-ui-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.diva-ui-toast.hide { opacity: 0; transform: translateY(-10px) scale(.98); }

.diva-ui-toast-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.46);
  color: var(--diva-ui-primary);
}

.diva-ui-toast[data-type="success"] .diva-ui-toast-icon { color: var(--diva-ui-success); }
.diva-ui-toast[data-type="error"] .diva-ui-toast-icon { color: var(--diva-ui-danger); }
.diva-ui-toast[data-type="warning"] .diva-ui-toast-icon { color: var(--diva-ui-warning); }
.diva-ui-toast[data-type="notification"] .diva-ui-toast-icon { color: var(--diva-ui-info); }

.diva-ui-toast-copy { min-width: 0; flex: 1; }
.diva-ui-toast-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--diva-ui-primary-dark);
  font-size: .78rem;
  font-weight: 800;
}
.diva-ui-toast-copy span {
  display: block;
  color: var(--diva-ui-muted);
  font-size: .73rem;
  line-height: 1.45;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.diva-ui-toast-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--diva-ui-muted);
  cursor: pointer;
}

.diva-ui-sound-toggle {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: none;
  border-radius: 18px;
  background: var(--diva-ui-bg);
  color: var(--diva-ui-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  font-size: .77rem;
  font-weight: 800;
  box-shadow:
    inset 4px 4px 10px rgba(166,124,114,.13),
    inset -4px -4px 10px rgba(255,255,255,.92);
}

@media (max-width: 380px) {
  .diva-ui-overlay { padding: 16px; }
  .diva-ui-dialog { padding: 21px 17px 18px; border-radius: 28px; }
  .diva-ui-dialog-actions { grid-template-columns: 1fr; }
  .diva-ui-dialog-actions .secondary { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .diva-ui-overlay,
  .diva-ui-dialog,
  .diva-ui-toast,
  .diva-ui-btn { transition: none !important; }
}

/* Ajustes globales de experiencia: accesibilidad táctil, teclado y móviles. */
html[data-diva-ui-ready="true"] {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-diva-ui-ready="true"] :is(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

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

html[data-diva-ui-ready="true"] :is(button, [role="button"], .nav-item):disabled,
html[data-diva-ui-ready="true"] :is(button, [role="button"], .nav-item)[aria-disabled="true"] {
  opacity: .58;
  cursor: not-allowed;
}

html[data-diva-ui-ready="true"] :is(.bottom-nav, nav.bottom-nav) {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

html[data-diva-ui-ready="true"] img {
  max-width: 100%;
}

@media (max-width: 560px) {
  html[data-diva-ui-ready="true"] :is(button, .btn, .btn-primary, .primary-btn, .secondary-btn) {
    min-height: 46px;
  }

  html[data-diva-ui-ready="true"] :is(input, select, textarea) {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-diva-ui-ready="true"] *,
  html[data-diva-ui-ready="true"] *::before,
  html[data-diva-ui-ready="true"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
