/* Estructura de páginas y fondos globales. Mantener prioridades durante la migración. */
/* ------------------ Variables del fondo ------------------ */
:root {
  --paw-bg-base: var(--color-bg, #f6f9fc);
  --paw-pattern-size: 520px 520px;
  --paw-pattern-opacity: 0.25;
}

/* Dark mode opcional */
:root[data-theme="dark"] {
  --paw-bg-base: #0f172a;
  --paw-pattern-opacity: 0.16;
}

/* ------------------ Fondo base del body ------------------ */
body {
  background: var(--paw-bg-base);
}

/* ------------------ Páginas donde aparecerán las patitas ------------------ */
.page,
.clients-page,
.reports-page,
.page-usuarios,
.page.dashboard,
.page.servicios,
.page.servicios-dia,
.page.mascotas,
.page.caja,
.page.configuracion {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* ------------------ Fondo suave de cada página ------------------ */
.page::before,
.clients-page::before,
.reports-page::before,
.page-usuarios::before,
.page.dashboard::before,
.page.servicios::before,
.page.servicios-dia::before,
.page.mascotas::before,
.page.caja::before,
.page.configuracion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(circle at top right, rgba(34, 199, 169, 0.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.07), transparent 32%),
    var(--paw-bg-base);
}

/* ------------------ Patrón real de patitas ------------------ */
.page::after,
.clients-page::after,
.reports-page::after,
.page-usuarios::after,
.page.dashboard::after,
.page.servicios::after,
.page.servicios-dia::after,
.page.mascotas::after,
.page.caja::after,
.page.configuracion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: var(--paw-pattern-opacity);

  background-image:
  url("data:image/svg+xml,%3Csvg width='520' height='520' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2322c7a9'%3E%3Cg opacity='0.95' transform='translate(52 48) rotate(-22) scale(0.62)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.65' transform='translate(330 80) rotate(18) scale(0.50)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.75' transform='translate(170 225) rotate(34) scale(0.58)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.55' transform='translate(405 330) rotate(-35) scale(0.48)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.70' transform='translate(70 410) rotate(12) scale(0.52)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

background-size: 520px 520px;
background-position: 25px 40px;
background-repeat: repeat;
}

/* ------------------ Asegura que el contenido quede encima ------------------ */
.page > *,
.clients-page > *,
.reports-page > *,
.page-usuarios > *,
.page.dashboard > *,
.page.servicios > *,
.page.servicios-dia > *,
.page.mascotas > *,
.page.caja > *,
.page.configuracion > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Fondo de patitas para Login
   ========================================================= */

body.login-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paw-bg-base);
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(circle at top left, rgba(34, 199, 169, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.10), transparent 32%),
    var(--paw-bg-base);
}

body.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: 0.22;

  background-image:
  url("data:image/svg+xml,%3Csvg width='520' height='520' viewBox='0 0 520 520' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2322c7a9'%3E%3Cg opacity='0.95' transform='translate(52 48) rotate(-22) scale(0.62)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.65' transform='translate(330 80) rotate(18) scale(0.50)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.75' transform='translate(170 225) rotate(34) scale(0.58)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.55' transform='translate(405 330) rotate(-35) scale(0.48)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3Cg opacity='0.70' transform='translate(70 410) rotate(12) scale(0.52)'%3E%3Cellipse cx='28' cy='42' rx='15' ry='12'/%3E%3Cellipse cx='10' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='27' cy='12' rx='7' ry='10'/%3E%3Cellipse cx='44' cy='20' rx='7' ry='10'/%3E%3Cellipse cx='55' cy='36' rx='7' ry='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

background-size: 520px 520px;
background-position: 25px 40px;
background-repeat: repeat;
}

/* =========================================================
   Ajuste para que las páginas no tapen el fondo global
   ========================================================= */

.page.dashboard,
.page.servicios,
.page.servicios-dia,
.page.mascotas,
.page.caja,
.page.configuracion,
.clients-page,
.reports-page,
.page-usuarios {
  background: transparent !important;
}