:root {
    --sidebar-brand-width: 155px;
    --sidebar-brand-icon-width: 98px;
    --sidebar-brand-name-size: 24px;
    --banner-logo-width: 225px;
    --banner-name-size: 60px;

    /* Sidebar VetMind */

    --vm-sidebar-start: #0b2b3a;
    --vm-sidebar-middle: #0e3b4c;
    --vm-sidebar-end: #123f46;

    --vm-sidebar-text: #dce8e8;
    --vm-sidebar-muted: #9fb7b7;

    --vm-sidebar-hover: rgba(126, 190, 184, 0.10);
    --vm-sidebar-active: rgba(126, 190, 184, 0.18);

    --vm-sidebar-accent: #78aaa6;

    /* =========================================
       VETMIND - TEMA GLOBAL
       ========================================= */

    --vm-primary: #0d6efd;
    --vm-page-background: #f5f7fb;
    --vm-surface: #ffffff;

    /* Navbar VetMind */
    --vm-navbar-background: #f4f9f8;
    --vm-navbar-border: rgba(78, 127, 128, 0.12);

    /* Barra superior */
    --vm-navbar-padding-y: 0.50rem;
    --vm-navbar-padding-x: 1.25rem;

    /* Contenido principal */
    --vm-content-padding-top: 1.35rem;
    --vm-content-padding-x: 2.5rem;
    --vm-content-padding-bottom: 1.5rem;
}

/*
 * Marca VetMind reutilizable.
 *
 * Variantes:
 * - vetmind-brand--banner
 * - vetmind-brand--card
 * - vetmind-brand--footer
 */

.vetmind-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.vetmind-brand__icon {
    display: block;
    height: auto;
}

.vetmind-brand__name {
    display: inline-flex;
    align-items: baseline;
    font-family:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    -webkit-text-stroke:
        1px
        rgba(24, 76, 83, 0.42);
    filter:
        drop-shadow(
            0 2px 1px
            rgba(18, 57, 62, 0.20)
        );
}

.vetmind-brand__part {
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.vetmind-brand__vet {
    background-image:
        linear-gradient(
            180deg,
            #c8ded9 0%,
            #8fb7b2 48%,
            #4d7c80 100%
        );
    -webkit-text-stroke-color:
        rgba(43, 87, 91, 0.32);
}

.vetmind-brand__mind {
    background-image:
        linear-gradient(
            180deg,
            #7fa9a5 0%,
            #4f7f80 48%,
            #234f55 100%
        );
}

.vetmind-brand__i {
    position: relative;
    display: inline-block;
    width: 0.34em;
    margin-left: 0.06em;
    margin-right: 0.02em;
    font-size: 0.80em;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    vertical-align: baseline;
    -webkit-text-stroke-width: 1.2px;
}

.vetmind-brand__i-letter {
    position: relative;
    bottom: 0.04em;
    display: inline-block;
    background-image:
        linear-gradient(
            180deg,
            #7fa9a5 0%,
            #4f7f80 48%,
            #234f55 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transform: scaleY(0.74);
    transform-origin: center bottom;
    -webkit-text-stroke:
        1.2px
        rgba(24, 76, 83, 0.42);
}

.vetmind-brand__heart {
    position: absolute;
    top: -0.34em;
    left: 50%;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    font-size: 0.44em;
    font-weight: 700;
    line-height: 1;
    color: #79aaa6;
    -webkit-text-fill-color: #79aaa6;
    -webkit-text-stroke:
        1px
        rgba(24, 76, 83, 0.25);
}

/*
 * Marca grande del banner izquierdo.
 */

.vetmind-brand--banner .vetmind-brand__icon {
    width:
        clamp(
            210px,
            16.5vw,
            var(--banner-logo-width)
        );
    max-width: 58%;
    filter:
        drop-shadow(
            0 9px 12px
            rgba(24, 76, 83, 0.16)
        );
}

.vetmind-brand--banner .vetmind-brand__name {
    margin-top: 8px;
    font-size:
        clamp(
            54px,
            4.6vw,
            var(--banner-name-size)
        );
}

/*
 * Marca dentro de la tarjeta de inicio de sesión.
 */

.vetmind-brand.vetmind-brand--card {
    margin-bottom: 20px;
}

.vetmind-brand--card .vetmind-brand__icon {
    width: 122px;
    max-width: 48%;
    filter: none;
}

.vetmind-brand--card .vetmind-brand__name {
    margin-top: 6px;
    font-size: 40px;
}

/*
 * Marca horizontal para el footer.
 */

.vetmind-brand.vetmind-brand--footer {
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    gap: 8px;
}

.vetmind-brand--footer .vetmind-brand__icon {
    width: 38px;
    max-width: none;
    filter: none;
}

.vetmind-brand--footer .vetmind-brand__name {
    margin: 0;
    font-size: 26px;
    filter:
        drop-shadow(
            0 1px 1px
            rgba(18, 57, 62, 0.16)
        );
}

/*
 * Marca dentro del menú lateral.
 */

.vetmind-brand.vetmind-brand--sidebar {
    box-sizing: border-box;

    width: var(--sidebar-brand-width);

    padding: 10px 10px 12px;
    margin: -6px auto -20px;

    border: 1px solid rgba(159, 209, 204, 0.07);
    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(159, 209, 204, 0.09),
            transparent 68%
        ),
        rgba(8, 45, 59, 0.22);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(2px);
}

.vetmind-brand--sidebar .vetmind-brand__icon {
    width: var(--sidebar-brand-icon-width);
    max-width: 100%;
    filter:
        drop-shadow(
            0 3px 7px
            rgba(0, 0, 0, 0.22)
        );
}

.vetmind-brand--sidebar .vetmind-brand__name {
    margin-top: 5px;
    font-size: var(--sidebar-brand-name-size);
    -webkit-text-stroke:
        0.8px
        rgba(218, 238, 234, 0.30);
}

.vetmind-brand--sidebar .vetmind-brand__mind,
.vetmind-brand--sidebar .vetmind-brand__i-letter {
    background-image:
        linear-gradient(
            180deg,
            #acd0cb 0%,
            #78aaa6 48%,
            #4f8182 100%
        );
}

/* Integra la zona del logo con el fondo del sidebar */
.sidebar-brand,
.sidebar-brand:hover,
.sidebar-brand:focus {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    .vetmind-brand--card .vetmind-brand__icon {
        width: 132px;
        max-width: 44vw;
    }

    .vetmind-brand--card .vetmind-brand__name {
        margin-top: 8px;
        font-size:
            clamp(
                36px,
                12vw,
                46px
            );
    }

    .vetmind-brand--footer .vetmind-brand__icon {
        width: 32px;
    }

    .vetmind-brand--footer .vetmind-brand__name {
        font-size: 22px;
    }
}

@media (max-height: 650px) and (min-width: 768px) {
    .vetmind-brand--banner .vetmind-brand__icon {
        width: 170px;
    }

    .vetmind-brand--banner .vetmind-brand__name {
        margin-top: 4px;
        font-size: 48px;
    }

    .vetmind-brand--card .vetmind-brand__icon {
        width: 100px;
    }

    .vetmind-brand--card .vetmind-brand__name {
        font-size: 34px;
    }
}


/* =========================================================
   VETMIND - LAYOUT GLOBAL
   ========================================================= */

/*
 * Barra superior.
 * Sobrescribe la plantilla sin modificar app.css.
 */
.navbar {
    padding-top: var(--vm-navbar-padding-y) !important;
    padding-bottom: var(--vm-navbar-padding-y) !important;
    padding-left: var(--vm-navbar-padding-x) !important;
    padding-right: var(--vm-navbar-padding-x) !important;

    background-color:
        var(--vm-navbar-background) !important;

    border-bottom:
        1px solid
        var(--vm-navbar-border) !important;

    box-shadow: none !important;
}

/*
 * Contenido de cada pantalla.
 * Reduce el espacio vacío entre navbar y título.
 */
.content {
    padding-top: var(--vm-content-padding-top) !important;
    padding-left: var(--vm-content-padding-x) !important;
    padding-right: var(--vm-content-padding-x) !important;
    padding-bottom: var(--vm-content-padding-bottom) !important;
}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 991.98px) {

    .content {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {

    .content {
        padding-top: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* =========================================================
   VETMIND - LINKS DEL SIDEBAR
   ========================================================= */


   /* =========================================================
   VETMIND - SIDEBAR
   ========================================================= */

.sidebar {
    background:
        var(--vm-sidebar-start) !important;
}

.sidebar-content {
    background:
        linear-gradient(
            165deg,
            var(--vm-sidebar-start) 0%,
            var(--vm-sidebar-middle) 48%,
            var(--vm-sidebar-end) 100%
        ) !important;
}

/*
 * El menú usa el fondo continuo de sidebar-content.
 * No reiniciamos el degradado aquí.
 */
.sidebar-nav {
    background: transparent !important;
}

/* =========================================================
   LINKS
   ========================================================= */







.sidebar .sidebar-link,
.sidebar a.sidebar-link {
    margin: 1px 8px;
    padding: 8px 12px;

    border: 0 !important;
    border-radius: 8px;

    background: transparent !important;
    color: var(--vm-sidebar-text) !important;

    box-shadow: none !important;

    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.sidebar .sidebar-link i {
    color: var(--vm-sidebar-muted) !important;
    transition: color .15s ease;
}

.sidebar .sidebar-link:hover {
    background-color: rgba(126, 190, 184, .10) !important;
    color: #fff !important;
}

.sidebar .sidebar-link:hover i {
    color: #9fd1cc !important;
}

.sidebar .sidebar-item.active > .sidebar-link {
    background:
        linear-gradient(
            90deg,
            rgba(126, 190, 184, .22),
            rgba(126, 190, 184, .10)
        ) !important;

    color: #fff !important;

    box-shadow:
        inset 3px 0 0 var(--vm-sidebar-accent) !important;
}

.sidebar .sidebar-item.active > .sidebar-link i {
    color: #a7d9d4 !important;
}

.sidebar .sidebar-header {
    color: var(--vm-sidebar-muted) !important;

    margin-top: 7px;
    margin-bottom: 2px;

    padding-top: 8px;
    padding-bottom: 4px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .06em;
    text-transform: uppercase;
}

.sidebar .sidebar-item {
    margin-bottom: 0;
}

.sidebar .sidebar-link:focus {
    outline: none;

    background-color:
        rgba(126, 190, 184, .10) !important;

    box-shadow: none !important;
}









/* =========================================================
   SCROLLBAR SIDEBAR
   ========================================================= */

.sidebar-content {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(159, 209, 204, 0.55)
        transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color:
        rgba(159, 209, 204, 0.45);

    border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color:
        rgba(159, 209, 204, 0.70);
}


/* =========================================================
   SCROLL GENERAL DEL SISTEMA
   ========================================================= */

html {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(76, 111, 122, 0.28)
        transparent;
}

html::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background-color: rgba(76, 111, 122, 0.22);
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(76, 111, 122, 0.38);
}