/*! YSFReflector Dashboard - DARK PRO */

*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #1e293b;
}

::before,
::after {
    --tw-content: "";
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    margin: 0;
    line-height: inherit;
    min-height: 100vh;
    color: #f8fafc;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(8, 145, 178, .12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(14, 116, 144, .10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #020617 0%,
            #07111f 48%,
            #020617 100%
        );
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button {
    cursor: pointer;
}

img,
svg,
video {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

/* =========================================================
   BASE
========================================================= */

.min-h-screen {
    min-height: 100vh;
}

.text-white {
    color: #f8fafc;
}

.text-transparent {
    color: transparent;
}

/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* =========================================================
   DARK PRO CARDS
========================================================= */

.card-glossy {

    border-radius: 1rem;

    border-width: 1px;

    border-color: rgba(71, 85, 105, .45);

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .92),
            rgba(8, 15, 28, .82)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .035);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:
        all .3s cubic-bezier(.4, 0, .2, 1);
}

.card-glossy:hover {

    background:
        linear-gradient(
            145deg,
            rgba(17, 30, 50, .96),
            rgba(8, 18, 32, .90)
        );

    border-color:
        rgba(34, 211, 238, .28);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .5),
        0 0 30px rgba(14, 165, 233, .08),
        inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary {

    background-image:
        linear-gradient(
            to right,
            #0369a1,
            #0891b2
        );

    color: #fff;

    font-weight: 600;

    padding: .75rem 1.5rem;

    border-radius: .75rem;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .35),
        0 0 18px rgba(8, 145, 178, .12);

    transition:
        all .3s ease;
}

.btn-primary:hover {

    background-image:
        linear-gradient(
            to right,
            #0284c7,
            #06b6d4
        );

    transform:
        translateY(-1px)
        scale(1.02);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .4),
        0 0 25px rgba(6, 182, 212, .20);
}

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-secondary {

    background:
        rgba(15, 23, 42, .75);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(71, 85, 105, .65);

    color: #f8fafc;

    font-weight: 600;

    padding: .75rem 1.5rem;

    border-radius: .75rem;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .3);

    transition:
        all .3s ease;
}

.btn-secondary:hover {

    background:
        rgba(30, 41, 59, .85);

    border-color:
        rgba(34, 211, 238, .35);
}

/* =========================================================
   INPUT
========================================================= */

.input-glossy {

    background:
        rgba(2, 6, 23, .72);

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(71, 85, 105, .65);

    border-radius: .5rem;

    color: #f8fafc;

    padding:
        .75rem 1rem;

    transition:
        all .3s ease;
}

.input-glossy::placeholder {
    color: #64748b;
}

.input-glossy:focus {

    outline: none;

    border-color:
        #0891b2;

    box-shadow:
        0 0 0 2px
        rgba(8, 145, 178, .18),

        0 0 20px
        rgba(8, 145, 178, .08);
}

/* =========================================================
   TABLE
========================================================= */

.table-glossy {

    width: 100%;

    text-align: left;
}

.table-glossy thead {

    background:
        rgba(15, 23, 42, .95);

    backdrop-filter:
        blur(12px);
}

.table-glossy th {

    padding:
        1rem 1.5rem;

    color:
        #94a3b8;

    font-size:
        .75rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}

.table-glossy td {

    padding:
        1rem 1.5rem;

    border-bottom:
        1px solid
        rgba(51, 65, 85, .55);

    color:
        #e2e8f0;
}

.table-glossy tbody tr {

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.table-glossy tbody tr:hover {

    background:
        rgba(8, 145, 178, .055);
}

/* =========================================================
   COMMON LAYOUT
========================================================= */

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    inset: 0;
}

.left-0 {
    left: 0;
}

.left-20 {
    left: 5rem;
}

.right-20 {
    right: 5rem;
}

.top-0 {
    top: 0;
}

.top-20 {
    top: 5rem;
}

.bottom-20 {
    bottom: 5rem;
}

.-z-10 {
    z-index: -10;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mb-2 {
    margin-bottom: .5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mr-2 {
    margin-right: .5rem;
}

.mr-3 {
    margin-right: .75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

.mt-1 {
    margin-top: .25rem;
}

.mt-2 {
    margin-top: .5rem;
}

.mt-3 {
    margin-top: .75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-12 {
    margin-top: 3rem;
}

/* =========================================================
   DISPLAY
========================================================= */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

/* =========================================================
   SIZES
========================================================= */

.h-3 {
    height: .75rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-20 {
    height: 5rem;
}

.h-32 {
    height: 8rem;
}

.h-96 {
    height: 24rem;
}

.h-full {
    height: 100%;
}

.w-3 {
    width: .75rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-20 {
    width: 5rem;
}

.w-96 {
    width: 24rem;
}

.w-full {
    width: 100%;
}

.max-w-xs {
    max-width: 20rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-5xl {
    max-width: 64rem;
}

.flex-1 {
    flex: 1 1 0%;
}

/* =========================================================
   GRID
========================================================= */

.grid-cols-1 {
    grid-template-columns:
        repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-left: .75rem;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
}

/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

/* =========================================================
   BORDERS
========================================================= */

.rounded {
    border-radius: .25rem;
}

.rounded-xl {
    border-radius: .75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-white\/10 {
    border-color:
        rgba(255,255,255,.08);
}

.border-white\/20 {
    border-color:
        rgba(255,255,255,.12);
}

.border-red-500 {
    border-color:
        rgb(239 68 68);
}

.border-red-500\/50 {
    border-color:
        rgba(239,68,68,.5);
}

.border-yellow-500 {
    border-color:
        rgb(234 179 8);
}

/* =========================================================
   BACKGROUNDS
========================================================= */

.bg-white\/5 {
    background-color:
        rgba(255,255,255,.025);
}

.bg-white\/10 {
    background-color:
        rgba(255,255,255,.045);
}

.bg-white\/20 {
    background-color:
        rgba(255,255,255,.08);
}

.bg-blue-500 {
    background-color:
        #0891b2;
}

.bg-blue-500\/20 {
    background-color:
        rgba(8,145,178,.14);
}

.bg-green-500\/20 {
    background-color:
        rgba(34,197,94,.12);
}

.bg-orange-500\/20 {
    background-color:
        rgba(249,115,22,.12);
}

.bg-purple-500 {
    background-color:
        #0e7490;
}

.bg-purple-500\/20 {
    background-color:
        rgba(14,116,144,.12);
}

.bg-red-500 {
    background-color:
        #ef4444;
}

.bg-red-500\/20 {
    background-color:
        rgba(239,68,68,.14);
}

.bg-red-500\/30 {
    background-color:
        rgba(239,68,68,.20);
}

.bg-yellow-500\/20 {
    background-color:
        rgba(234,179,8,.12);
}

/* =========================================================
   GRADIENTS
========================================================= */

.bg-gradient-to-br {

    background-image:
        linear-gradient(
            to bottom right,
            var(--tw-gradient-stops)
        );
}

.bg-gradient-to-r {

    background-image:
        linear-gradient(
            to right,
            var(--tw-gradient-stops)
        );
}

.from-slate-900 {

    --tw-gradient-from:
        #020617;

    --tw-gradient-to:
        rgba(2,6,23,0);

    --tw-gradient-stops:
        var(--tw-gradient-from),
        var(--tw-gradient-to);
}

.via-blue-900 {

    --tw-gradient-to:
        rgba(7,17,31,0);

    --tw-gradient-stops:
        var(--tw-gradient-from),
        #07111f,
        var(--tw-gradient-to);
}

.to-slate-900 {

    --tw-gradient-to:
        #020617;
}

.from-blue-200 {

    --tw-gradient-from:
        #67e8f9;

    --tw-gradient-to:
        rgba(103,232,249,0);

    --tw-gradient-stops:
        var(--tw-gradient-from),
        var(--tw-gradient-to);
}

.to-purple-200 {

    --tw-gradient-to:
        #7dd3fc;
}

.bg-clip-text {

    -webkit-background-clip: text;

    background-clip: text;
}

/* =========================================================
   TEXT
========================================================= */

.text-center {
    text-align: center;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: .025em;
}

.text-blue-300 {
    color: #67e8f9;
}

.text-blue-400 {
    color: #22d3ee;
}

.text-blue-600 {
    color: #0891b2;
}

.text-green-400 {
    color: #4ade80;
}

.text-green-500 {
    color: #22c55e;
}

.text-orange-400 {
    color: #fb923c;
}

.text-purple-400 {
    color: #67e8f9;
}

.text-red-400 {
    color: #f87171;
}

.text-red-500 {
    color: #ef4444;
}

.text-white\/60 {
    color:
        rgba(226,232,240,.65);
}

.text-white\/80 {
    color:
        rgba(241,245,249,.82);
}

.underline {
    text-decoration-line: underline;
}

/* =========================================================
   OPACITY / FILTERS
========================================================= */

.opacity-20 {
    opacity: .12;
}

.blur-3xl {
    filter:
        blur(64px);
}

.filter {
    filter:
        var(--tw-blur)
        var(--tw-brightness)
        var(--tw-contrast)
        var(--tw-grayscale)
        var(--tw-hue-rotate)
        var(--tw-invert)
        var(--tw-saturate)
        var(--tw-sepia)
        var(--tw-drop-shadow);
}

/* =========================================================
   SHADOW
========================================================= */

.shadow-glossy {

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.42),

        inset 0 1px 0
        rgba(255,255,255,.035);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes pulse {

    50% {
        opacity: .5;
    }
}

.animate-pulse {

    animation:
        pulse 2s
        cubic-bezier(.4,0,.6,1)
        infinite;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (min-width: 768px) {

    .md\:col-span-2 {
        grid-column:
            span 2 / span 2;
    }

    .md\:grid-cols-2 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media (min-width: 1024px) {

    .lg\:mt-0 {
        margin-top: 0;
    }

    .lg\:grid-cols-2 {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .lg\:flex-row {
        flex-direction: row;
    }
}

/* =========================================================
   DARK PRO OVERRIDES
   Para clases de color que siguen existiendo
   en el HTML original.
========================================================= */

.text-purple-400 {
    color: #67e8f9 !important;
}

.bg-purple-500 {
    background-color: #0e7490 !important;
}

.bg-purple-500\/20 {
    background-color:
        rgba(14,116,144,.12) !important;
}

.to-purple-200 {
    --tw-gradient-to:
        #7dd3fc !important;
}

.from-blue-200 {
    --tw-gradient-from:
        #67e8f9 !important;
}

.to-blue-700 {
    --tw-gradient-to:
        #0369a1 !important;
}

.from-blue-500 {
    --tw-gradient-from:
        #0284c7 !important;
}

.from-blue-600 {
    --tw-gradient-from:
        #0369a1 !important;
}

.to-blue-600 {
    --tw-gradient-to:
        #0891b2 !important;
}

.to-blue-700 {
    --tw-gradient-to:
        #0e7490 !important;
}

.text-blue-400 {
    color: #22d3ee !important;
}

.text-blue-300 {
    color: #67e8f9 !important;
}

.bg-blue-500 {
    background-color:
        #0891b2 !important;
}

.bg-blue-500\/20 {
    background-color:
        rgba(8,145,178,.14) !important;
}

.focus\:ring-blue-500:focus {
    --tw-ring-color:
        rgba(8,145,178,1) !important;
}

.hover\:text-blue-200:hover {
    color: #a5f3fc !important;
}

.hover\:text-blue-300:hover {
    color: #67e8f9 !important;
}