:root {
  color-scheme: light;
}

body {
  background: #f4f8fb;
  color: #102033;
}

#root main.bg-slate-950 {
  background:
    linear-gradient(180deg, #f8fbfd 0%, #edf6f9 42%, #f6fafc 100%);
  color: #102033;
}

#root #inicio > .absolute.inset-0:first-child {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(34, 211, 238, 0.24), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(14, 165, 233, 0.18), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.12), transparent 36%);
}

#root #inicio > .absolute.inset-0:nth-child(2) {
  background-image: linear-gradient(to bottom, rgba(248, 251, 253, 0.28), #f4f8fb 94%);
}

#root header.bg-slate-950\/85 {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 47, 65, 0.12);
  box-shadow: 0 14px 36px rgba(15, 47, 65, 0.08);
}

#root .border-white\/10,
#root .border-white\/20,
#root .border-cyan-300\/20,
#root .border-cyan-300\/30 {
  border-color: rgba(15, 47, 65, 0.13);
}

#root .bg-white\/10,
#root .bg-white\/\[0\.06\],
#root .bg-white\/\[0\.07\],
#root .bg-cyan-300\/10 {
  background-color: rgba(255, 255, 255, 0.72);
}

#root .text-white,
#root .text-slate-200 {
  color: #102033;
}

#root .text-slate-300 {
  color: #425466;
}

#root .text-slate-400 {
  color: #64748b;
}

#root .text-cyan-200,
#root .text-cyan-300 {
  color: #087c95;
}

#root .hover\:text-white:hover {
  color: #071827;
}

#root .hover\:bg-white\/10:hover,
#root .hover\:bg-white\/15:hover {
  background-color: rgba(8, 145, 178, 0.10);
}

#root section#inicio .bg-slate-900,
#root section#inicio .bg-slate-800 {
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#root section#inicio .bg-slate-800 {
  background-color: rgba(237, 247, 250, 0.92);
}

#root section#inicio .shadow-cyan-950\/40 {
  --tw-shadow-color: rgba(15, 47, 65, 0.13);
}

#root section#cerraduras.bg-white {
  background: #fbfdfe;
}

#root section#cerraduras .bg-slate-950 {
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.24), transparent 35%),
    linear-gradient(135deg, #0f2635 0%, #113d50 100%);
}

#root section#cerraduras .bg-slate-950,
#root section#cerraduras .bg-slate-950 .text-white {
  color: #f8fafc;
}

#root section#cerraduras .bg-slate-950 .text-slate-300 {
  color: #d7e7ee;
}

#root section#cerraduras .bg-slate-950 .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.11);
}

#root section#camaras .border-white\/10,
#root section#control-acceso .border-white\/10,
#root section#camaras .bg-white\/\[0\.06\],
#root section#control-acceso.bg-white\/\[0\.06\] {
  background-color: rgba(255, 255, 255, 0.76);
  border-color: rgba(15, 47, 65, 0.13);
  box-shadow: 0 20px 50px rgba(15, 47, 65, 0.08);
}

#root section#instalacion.bg-slate-900 {
  background:
    linear-gradient(180deg, #edf7fa 0%, #f6fbfd 100%);
}

#root section#instalacion .bg-white\/\[0\.06\] {
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 42px rgba(15, 47, 65, 0.07);
}

#root section#respaldo > div {
  background:
    linear-gradient(135deg, rgba(207, 250, 254, 0.72), rgba(255, 255, 255, 0.84));
  box-shadow: 0 24px 56px rgba(8, 145, 178, 0.13);
}

#root footer.bg-slate-950 {
  background: #eef7fa;
  border-color: rgba(15, 47, 65, 0.12);
  color: #102033;
}

#root .shadow-slate-950\/20,
#root .shadow-xl,
#root .shadow-2xl {
  --tw-shadow-color: rgba(15, 47, 65, 0.12);
}

#root a.bg-cyan-400,
#root .bg-cyan-400 {
  background-color: #07b6d5;
}

#root a.bg-cyan-400:hover,
#root .hover\:bg-cyan-300:hover {
  background-color: #22d3ee;
}

#root a.bg-slate-950 {
  background-color: #102033;
  color: #f8fafc;
}

#root a.bg-slate-950:hover,
#root .hover\:bg-slate-800:hover {
  background-color: #1f3448;
}