/*========= IMPORTANDO HOJAS DE ESTILO =========*/
/* Bootstrap 3.3.7 */
@import url('./bootstrap.min.css');
/* Material design for Bootstrap */
@import url('./bootstrap-material-design.min.css');
@import url('./ripples.min.css');
/* Sweet Alert 2 */
@import url('./sweetalert2.css');
/* Material Design Iconic Font 2.2.0 */
@import url('./material-design-iconic-font.min.css');
/* trumbowyg */
@import url('./trumbowyg.min.css');

/*============ FUENTES ============*/
@font-face {
    font-family: 'RobotoCondensedLight';
    src: url('../fonts/robotocondensed-light.eot');
    src: url('../fonts/robotocondensed-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/robotocondensed-light.woff2') format('woff2'),
         url('../fonts/robotocondensed-light.woff') format('woff'),
         url('../fonts/robotocondensed-light.ttf') format('truetype'),
         url('../fonts/robotocondensed-light.svg#roboto_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoCondensed';
    src: url('../fonts/robotocondensed-regular.eot');
    src: url('../fonts/robotocondensed-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/robotocondensed-regular.woff2') format('woff2'),
         url('../fonts/robotocondensed-regular.woff') format('woff'),
         url('../fonts/robotocondensed-regular.ttf') format('truetype'),
         url('../fonts/robotocondensed-regular.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*============ PALETA PROFESIONAL VETERINARIA ============*/
:root{
    --vet-primary: #6D5DF6;          /* morado moderno */
    --vet-primary-dark: #4D3FD3;     /* morado profundo */
    --vet-primary-soft: #EDEBFF;     /* morado pastel claro */
    --vet-secondary: #31C6A8;        /* verde clínico */
    --vet-secondary-soft: #E8FAF6;
    --vet-warning: #F5A524;
    --vet-danger: #EF5350;
    --vet-bg: #F6F7FB;
    --vet-surface: #FFFFFF;
    --vet-border: #E7E9F2;
    --vet-text: #24243A;
    --vet-muted: #7A7D91;
    --vet-sidebar-text: #F8F8FF;
    --vet-shadow: 0 12px 32px rgba(39, 39, 68, .10);
    --vet-shadow-sm: 0 6px 18px rgba(39, 39, 68, .08);
    --vet-radius: 18px;
}

/*============ ESTILOS GENERALES ============*/
*{
    box-sizing: border-box;
}

body, html{
    background: var(--vet-bg);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    font-size: 16px;
    font-family: 'RobotoCondensed', Arial, sans-serif;
    color: var(--vet-text);
    overflow: hidden;
}

body{
    overflow-x: hidden;
}

a{
    color: var(--vet-primary);
}

a:hover,
a:focus{
    color: var(--vet-primary-dark);
    text-decoration: none;
}

.full-box{
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.cover{
    background: 50% 50% no-repeat;
    background-size: cover;
}

.text-titles{
    font-family: 'RobotoCondensedLight', Arial, sans-serif;
    color: var(--vet-text);
}

/*============ LOGIN PROFESIONAL ============*/
.containerLogin{
    height: 100%;
    background:
        linear-gradient(135deg, rgba(109,93,246,.88), rgba(49,198,168,.72)),
        url(../assets/img/login-font.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.containerLogin::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 28%);
    pointer-events: none;
}

.logInForm{
    position: absolute;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 380px;
    padding: 30px 28px;
    border-radius: 26px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 24px 70px rgba(27, 24, 61, .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.logInForm p,
.logInForm label{
    color: #fff;
}

.logInForm .form-control{
    color: #fff;
    border-bottom-color: rgba(255,255,255,.7);
}

.logInForm .form-control::placeholder{
    color: rgba(255,255,255,.8);
}

/*============ PARTES DEL DASHBOARD ============*/
.dashboard-sideBar,
.dashboard-contentPage{
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .3s ease-in-out;
}

/*============ SIDEBAR ============*/
.dashboard-sideBar,
.dashboard-sideBar-ct{
    width: 270px;
}

.dashboard-sideBar{
    left: 0;
    z-index: 2;
    border-right: none;
    overflow: hidden;
    box-shadow: 12px 0 35px rgba(36,36,58,.10);
}

.dashboard-sideBar-ct{
    position: relative;
    height: 100%;
    background:
        linear-gradient(180deg, #342B73 0%, #4D3FD3 45%, #6D5DF6 100%);
    padding: 0 12px 30px;
    overflow-y: scroll;
    scrollbar-color: rgba(255,255,255,.28) rgba(0,0,0,.08);
    scrollbar-width: thin;
}

.dashboard-sideBar-ct::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
        radial-gradient(circle at bottom right, rgba(49,198,168,.22), transparent 35%);
    pointer-events: none;
}

.dashboard-sideBar-title,
.dashboard-sideBar-title > i{
    height: 58px;
    line-height: 58px;
    color: #fff;
    font-size: 20px;
}

.dashboard-sideBar-title{
    position: relative;
    z-index: 1;
    font-weight: 600;
    letter-spacing: .2px;
}

.dashboard-sideBar-title > i{
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 40px;
    opacity: .95;
}

.dashboard-sideBar-UserInfo{
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
    color: var(--vet-sidebar-text);
    font-size: 14px;
    padding: 22px 12px;
    border-radius: 24px;
    margin: 8px 0 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.dashboard-sideBar-UserInfo figure img{
    width: 124px;
    height: 124px;
    border-radius: 30px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.15);
}

.dashboard-sideBar-UserInfo ul{
    margin-top: 15px;
}

.dashboard-sideBar-UserInfo ul > li,
.dashboard-sideBar-UserInfo ul > li > a{
    display: inline-block;
    color: #fff;
}

.dashboard-sideBar-UserInfo ul > li > a{
    outline: none;
    font-size: 20px;
    padding: 7px 9px;
    border-radius: 12px;
    transition: all .25s ease-in-out;
}

.dashboard-sideBar-UserInfo ul > li > a:hover{
    color: #fff;
    background: rgba(49,198,168,.26);
    transform: translateY(-2px);
}

.dashboard-sideBar-Menu{
    position: relative;
    z-index: 1;
    padding-top: 8px;
}

.dashboard-sideBar-Menu > li,
.dashboard-sideBar-Menu > li > a,
.dashboard-sideBar-Menu > li > ul > li,
.dashboard-sideBar-Menu > li > ul > li > a{
    line-height: 48px;
    font-family: "RobotoCondensedLight", Arial, sans-serif;
    display: block;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    border-radius: 15px;
    transition: all .25s ease-in-out;
    position: relative;
}

.dashboard-sideBar-Menu > li{
    margin-bottom: 4px;
}

.dashboard-sideBar-Menu > li > a > i{
    margin-right: 8px;
    width: 22px;
    text-align: center;
}

.dashboard-sideBar-Menu > li > a > i.zmdi-caret-down{
    line-height: 48px;
    transition: all .25s ease-in-out;
}

.dashboard-sideBar-Menu > li > a{
    padding: 0 15px;
    box-sizing: border-box;
    height: 48px;
    outline: none;
}

.dashboard-sideBar-Menu > li > a:hover,
.dashboard-sideBar-Menu > li > a:focus{
    background: rgba(255,255,255,.14);
    color: #fff;
    transform: translateX(3px);
}

.dashboard-sideBar-Menu > li > a:hover::before{
    content: "";
    position: absolute;
    left: 6px;
    top: 13px;
    width: 4px;
    height: 22px;
    background: var(--vet-secondary);
    border-radius: 10px;
}

.dashboard-sideBar-Menu > li > ul{
    position: relative;
    padding-top: 6px;
    height: 0;
    overflow: hidden;
}

.show-sideBar-SubMenu{
    height: auto !important;
    overflow: auto !important;
}

.dashboard-sideBar-Menu > li > ul > li,
.dashboard-sideBar-Menu > li > ul > li > a{
    height: 39px;
    line-height: 39px;
    border-radius: 12px;
}

.dashboard-sideBar-Menu > li > ul > li{
    padding-left: 22px;
}

.dashboard-sideBar-Menu > li > ul > li > a{
    border-left: 3px solid transparent;
    outline: none;
    padding-left: 12px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.05);
}

.dashboard-sideBar-Menu > li > ul > li > a:hover{
    border-left: 3px solid var(--vet-secondary);
    background: rgba(255,255,255,.12);
    color: #fff;
}

/*============ CONTENT PAGE ============*/
.dashboard-contentPage{
    right: 0;
    z-index: 1;
    padding-left: 270px;
    overflow-y: scroll;
    scrollbar-color: rgba(109,93,246,.35) #fff;
    scrollbar-width: thin;
    background:
        radial-gradient(circle at top right, rgba(109,93,246,.09), transparent 25%),
        var(--vet-bg);
}

/*============ NAVBAR ============*/
.dashboard-Navbar,
.dashboard-Navbar > ul,
.dashboard-Navbar > ul >li,
.dashboard-Navbar > ul > li > a{
    height: 58px;
    line-height: 58px;
}

.dashboard-Navbar > ul > li > a{
    outline: none;
}

.dashboard-Navbar{
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid var(--vet-border);
    box-shadow: 0 8px 24px rgba(39,39,68,.06);
    overflow: hidden;
    padding-right: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dashboard-Navbar > ul >li,
.dashboard-Navbar > ul > li > a{
    display: inline-block;
    width: 54px;
    text-align: center;
    color: var(--vet-primary-dark);
    margin: 0;
    padding: 0;
    font-size: 21px;
    transition: all .25s ease-in-out;
    position: relative;
    border-radius: 14px;
}

.dashboard-Navbar > ul > li > a:hover{
    background-color: var(--vet-primary-soft);
    color: var(--vet-primary-dark);
}

/*============ HOME / DASHBOARD TILES ============*/
.tile{
    max-width: 310px;
    height: 185px;
    background: var(--vet-surface);
    color: var(--vet-primary);
    position: relative;
    display: inline-block;
    box-shadow: var(--vet-shadow-sm);
    overflow: hidden;
    cursor: pointer;
    margin: 12px;
    border-radius: 24px;
    border: 1px solid var(--vet-border);
    transition: all .25s ease;
}

.tile::after{
    content: "";
    position: absolute;
    width: 155px;
    height: 155px;
    right: -45px;
    bottom: -55px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(109,93,246,.12), rgba(49,198,168,.14));
}

.tile:hover{
    transform: translateY(-6px);
    box-shadow: var(--vet-shadow);
}

.tile:hover > .tile-icon > i,
.tile:hover > .tile-number{
    color: var(--vet-primary-dark);
}

.tile-title,
.tile-icon,
.tile-number{
    position: absolute;
}

.tile-title{
    height: 48px;
    line-height: 48px;
    font-size: 19px;
    background: linear-gradient(135deg, var(--vet-primary), var(--vet-primary-dark));
    color: #fff;
    top: 0;
    left: 0;
    border-radius: 0 0 22px 0;
    padding: 0 16px;
    z-index: 1;
}

.tile-icon,
.tile-number{
    bottom: 0;
    height: 137px;
    width: 150px;
    z-index: 1;
}

.tile-icon{
    left: 0;
}

.tile-icon > i{
    line-height: 137px;
    font-size: 108px;
}

.tile-icon > i,
.tile-number{
    color: rgba(109,93,246,.34);
    transition: all .25s ease-in-out;
}

.tile-number{
    right: 0;
    user-select: none;
    text-align: center;
}

.tile-number > p{
    font-size: 66px;
    margin-bottom: 0;
    color: var(--vet-text);
}

.tile-number > small{
    font-size: 16px;
    color: var(--vet-muted);
}

/*============ TIMELINE ============*/
.cd-container {
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
}
.cd-container::after {
    content: '';
    display: table;
    clear: both;
}
#cd-timeline {
    position: relative;
    padding: 2em 0;
    margin-top: 2em;
    margin-bottom: 2em;
}
#cd-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18px;
    height: 100%;
    width: 4px;
    background: var(--vet-primary-soft);
    border-radius: 8px;
}
.cd-timeline-block {
    position: relative;
    margin: 2em 0;
}
.cd-timeline-block::after {
    content: "";
    display: table;
    clear: both;
}
.cd-timeline-block:first-child {
    margin-top: 0;
}
.cd-timeline-block:last-child {
    margin-bottom: 0;
}
.cd-timeline-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(109,93,246,.10);
    background: var(--vet-primary);
}
.cd-timeline-img img {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    border-radius: 50%;
}
.cd-timeline-content {
    position: relative;
    margin-left: 60px;
    border-radius: 18px;
    padding: 1em;
    background: linear-gradient(135deg, var(--vet-primary), var(--vet-primary-dark));
    color: #fff;
    box-shadow: var(--vet-shadow-sm);
}
.cd-timeline-content::after {
    content: "";
    display: table;
    clear: both;
}
.cd-timeline-content .cd-date {
    display: inline-block;
}
.cd-timeline-content p {
    margin: 1em 0;
    line-height: 1.6;
}
.cd-timeline-content .cd-date {
    float: left;
    padding: .8em 0;
}
.cd-timeline-content::before {
    content: '';
    position: absolute;
    top: 16px;
    right: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid var(--vet-primary);
}

/*============ CARDS MODERNAS ============*/
.card {
    height: 100%;
    border-radius: 24px;
    border: 1px solid var(--vet-border);
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
    background: var(--vet-surface);
    box-shadow: var(--vet-shadow-sm);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vet-shadow);
    border-color: rgba(109,93,246,.22);
}

.card-img-top {
    width: 100%;
    height: 205px;
    object-fit: cover;
    display: block;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.card-body {
    flex-grow: 1;
    padding: 1.2rem;
}

.card-title {
    font-size: 1.25rem;
    color: var(--vet-text);
    font-weight: 600;
}

.card-text {
    font-size: .98rem;
    color: var(--vet-muted);
}

.card-footer {
    background: #fbfbff;
    border-top: 1px solid var(--vet-border);
    padding: .9rem;
    text-align: center;
}

.card-footer .btn {
    border-radius: 999px;
    padding: 8px 22px;
}

.card-click {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.card-click:hover {
    transform: translateY(-4px) scale(1.005);
}

/*============ CONTENEDORES ============*/
.container-custom {
    width: 100%;
    padding-left: 8%;
    padding-right: 8%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/*============ PANELES ============*/
.panel {
    border: 1px solid var(--vet-border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--vet-shadow-sm);
    background: var(--vet-surface);
}

.panel-heading {
    background: linear-gradient(135deg, var(--vet-primary), var(--vet-primary-dark));
    color: white;
    border-radius: 22px 22px 0 0;
    border: none;
    padding: 14px 18px;
}

.panel-title{
    color: #fff;
}

.panel-body{
    background: var(--vet-surface);
}

.list-group-item {
    font-size: 16px;
    border-color: var(--vet-border);
}

/*============ BOTONES ============*/
.btn{
    border-radius: 999px !important;
    box-shadow: none !important;
    text-transform: none;
    transition: all .2s ease;
}

.btn:hover{
    transform: translateY(-1px);
}

.btn-primary,
.btn-info{
    background: var(--vet-primary) !important;
    border-color: var(--vet-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover{
    background: var(--vet-primary-dark) !important;
    border-color: var(--vet-primary-dark) !important;
}

.btn-success{
    background: var(--vet-secondary) !important;
    border-color: var(--vet-secondary) !important;
    color: #fff !important;
}

.btn-success:hover{
    background: #25A98F !important;
    border-color: #25A98F !important;
}

.btn-warning{
    background: var(--vet-warning) !important;
    border-color: var(--vet-warning) !important;
    color: #fff !important;
}

.btn-danger{
    background: var(--vet-danger) !important;
    border-color: var(--vet-danger) !important;
    color: #fff !important;
}

/*============ FORMULARIOS ============*/
.form-control{
    border-radius: 12px;
    border-color: var(--vet-border);
    box-shadow: none;
}

.form-control:focus{
    border-color: var(--vet-primary);
    box-shadow: 0 0 0 3px rgba(109,93,246,.13);
}

label{
    color: var(--vet-text);
    font-weight: 500;
}

select.form-control,
input.form-control,
textarea.form-control{
    background-color: #fff;
}

/*============ TABLAS Y DATATABLES ============*/
.table{
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.table > thead > tr > th{
    background: #F0EFFF;
    color: var(--vet-text);
    border-bottom: 1px solid var(--vet-border);
    font-weight: 600;
}

.table > tbody > tr:hover{
    background: #FBFAFF;
}

.dt-buttons .btn {
    border-radius: 999px !important;
    padding: 8px 14px;
    margin-left: 5px;
    font-size: 15px;
    box-shadow: var(--vet-shadow-sm) !important;
    transition: all .25s ease;
}

.dt-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--vet-shadow) !important;
}

.dt-buttons .btn-success {
    background: var(--vet-secondary) !important;
    border: none;
    color: white;
}

.dt-buttons .btn-info {
    background: var(--vet-primary) !important;
    border: none;
    color: white;
}

/*============ ACTIVIDADES / ESTADOS ============*/
.activity-label {
    font-weight: 500;
    color: var(--vet-text);
    transition: all .25s ease;
}

.activity-label.completed::before {
    content: "✔";
    color: var(--vet-secondary);
    margin-right: 8px;
}

.activity-label::before {
    content: "•";
    color: var(--vet-muted);
    margin-right: 8px;
}

.complete-btn {
    color: var(--vet-primary);
    font-weight: 600;
    text-decoration: none;
}

.complete-btn:hover {
    color: var(--vet-primary-dark);
    text-decoration: underline;
}

/*============ VALIDACIONES ============*/
.question-group {
    padding: 12px;
    border-left: 4px solid transparent;
    transition: all .25s ease;
    border-radius: 12px;
}

.question-group.has-error {
    border-color: var(--vet-danger);
    background-color: #FFF5F5;
}

#contenedor-encuesta {
    margin-top: 20px;
    padding: 18px;
    background-color: #fff;
    border-radius: 18px;
    border: 1px solid var(--vet-border);
    box-shadow: var(--vet-shadow-sm);
}

/*============ VIDEO RESPONSIVE ============*/
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    width: 90%;
    display: block;
    margin: 0 auto;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

canvas {
    margin-bottom: 40px;
}

/*============ SWEETALERT / MODALES ============*/
.swal2-popup{
    border-radius: 24px !important;
}

.modal-content{
    border-radius: 22px;
    border: none;
    box-shadow: var(--vet-shadow);
}

.modal-header{
    background: linear-gradient(135deg, var(--vet-primary), var(--vet-primary-dark));
    color: #fff;
    border-radius: 22px 22px 0 0;
}

/*============ RESPONSIVE ============*/
@media (max-width: 767px){
    .dashboard-sideBar{
        width: 100%;
        z-index: 99;
        background-image: none;
        background-color: transparent;
        border-right: none;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .dashboard-sideBar-ct,
    .dashboard-sideBar-bg{
        position: absolute;
        top: 0;
        left: 0;
    }
    .dashboard-sideBar-ct{
        border-right: 1px solid rgba(255, 255, 255, .3);
        z-index: 3;
        max-width: 270px;
        width: 100%;
        transition: all .3s ease-in-out;
        transform: translateX(-270px);
    }
    .dashboard-sideBar-bg{
        height: 100%;
        background-color: rgba(0, 0, 0, .58);
        z-index: 2;
    }
    .dashboard-contentPage{
        padding-left: 0;
    }
    .show-sidebar{
        pointer-events: auto !important;
        opacity: 1 !important;
    }
    .show-sidebar > .dashboard-sideBar-ct{
        transform: translateX(0) !important;
    }
    .container-custom{
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .hide-sidebar{
        pointer-events: none;
        opacity: 0;
        border-right: none;
        transform: translateX(-270px);
    }
    .no-paddin-left{
        padding-left: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px){
    .hide-sidebar{
        pointer-events: none;
        opacity: 0;
        border-right: none;
        transform: translateX(-270px);
    }
    .no-paddin-left{
        padding-left: 0;
    }
}

@media (min-width: 1200px){
    .hide-sidebar{
        pointer-events: none;
        opacity: 0;
        border-right: none;
        transform: translateX(-270px);
    }
    .no-paddin-left{
        padding-left: 0;
    }

    #cd-timeline {
        margin-top: 3em;
        margin-bottom: 3em;
    }
    #cd-timeline::before {
        left: 50%;
        margin-left: -2px;
    }
    .cd-timeline-block {
        margin: 4em 0;
    }
    .cd-timeline-block:first-child {
        margin-top: 0;
    }
    .cd-timeline-block:last-child {
        margin-bottom: 0;
    }
    .cd-timeline-img {
        width: 60px;
        height: 60px;
        left: 50%;
        margin-left: -30px;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    .cd-timeline-img img{
        width: 60px;
        height: 60px;
    }
    .cd-timeline-content .cd-date {
        color: var(--vet-primary-dark);
    }
    .cd-timeline-content {
        margin-left: 0;
        width: 45%;
    }
    .cd-timeline-content::before {
        top: 24px;
        left: 100%;
        border-color: transparent;
        border-left-color: var(--vet-primary);
    }
    .cd-timeline-content .cd-date {
        position: absolute;
        width: 100%;
        left: 122%;
        top: 6px;
        font-size: 16px;
        font-size: 1rem;
    }
    .cd-timeline-block:nth-child(even) .cd-timeline-content {
        float: right;
    }
    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
        top: 24px;
        left: auto;
        right: 100%;
        border-color: transparent;
        border-right-color: var(--vet-primary);
    }
    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
        left: auto;
        right: 122%;
        text-align: right;
    }
    
}
.form-group.is-focused .form-control{
    background-image: linear-gradient(to top, #fff 2px, transparent 2px) !important;
}

.form-group.is-focused label{
    color: #fff !important;
}

/* =========================================================
   AUTOALARMAS V&M - DISEÑO NEGRO / ROJO / BLANCO
   Reemplazo visual completo inspirado en el rótulo y mockup.
   ========================================================= */
:root{
    --auto-red:#e00000;
    --auto-red-2:#ff2525;
    --auto-red-dark:#8b0000;
    --auto-black:#050505;
    --auto-black-2:#0b0b0b;
    --auto-panel:#1b1b1b;
    --auto-panel-2:#242424;
    --auto-line:#383838;
    --auto-text:#f7f7f7;
    --auto-muted:#a9a9a9;
    --auto-green:#55c75a;
    --auto-yellow:#f3a51b;
    --auto-danger:#e22a2a;
    --auto-shadow:0 16px 36px rgba(0,0,0,.45);
    --auto-glow:0 0 22px rgba(224,0,0,.22);

    --vet-primary:var(--auto-red);
    --vet-primary-dark:var(--auto-red-dark);
    --vet-primary-soft:rgba(224,0,0,.12);
    --vet-secondary:var(--auto-red-2);
    --vet-bg:#101010;
    --vet-surface:var(--auto-panel);
    --vet-border:var(--auto-line);
    --vet-text:var(--auto-text);
    --vet-muted:var(--auto-muted);
}

html,
body{
    background:#080808 !important;
    color:var(--auto-text) !important;
}

body{
    background:
        radial-gradient(circle at 78% 0%, rgba(224,0,0,.14), transparent 26%),
        linear-gradient(135deg,#070707 0%,#171717 48%,#070707 100%) !important;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(110deg, transparent 0 78%, rgba(224,0,0,.25) 78% 79%, transparent 79% 100%),
        linear-gradient(110deg, transparent 0 82%, rgba(224,0,0,.65) 82% 83%, transparent 83% 100%);
    opacity:.4;
    z-index:0;
}

a{ color:var(--auto-red-2); }
a:hover,a:focus{ color:#fff; }
.text-titles{ color:var(--auto-text); }

/* Layout */
.dashboard-sideBar,
.dashboard-sideBar-ct{ width:300px !important; }
.dashboard-contentPage{
    padding-left:300px !important;
    background:
        radial-gradient(circle at 80% 10%, rgba(224,0,0,.13), transparent 24%),
        linear-gradient(135deg,#101010 0%,#1b1b1b 48%,#0a0a0a 100%) !important;
    scrollbar-color:rgba(224,0,0,.65) #111 !important;
}

/* Sidebar */
.dashboard-sideBar{
    box-shadow:12px 0 35px rgba(0,0,0,.55) !important;
    z-index:20 !important;
}
.dashboard-sideBar-bg{ background:rgba(0,0,0,.72) !important; }
.dashboard-sideBar-ct{
    padding:0 24px 24px !important;
    overflow-y:auto !important;
    background:
        linear-gradient(120deg, transparent 0 82%, rgba(224,0,0,.7) 82% 83.4%, transparent 83.4% 100%),
        linear-gradient(120deg, transparent 0 86%, rgba(224,0,0,.35) 86% 88%, transparent 88% 100%),
        linear-gradient(180deg,#060606 0%,#111 55%,#050505 100%) !important;
    border-right:1px solid rgba(255,255,255,.12);
}
.dashboard-sideBar-ct::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 0% 0%, rgba(224,0,0,.18), transparent 32%),
        linear-gradient(140deg, transparent 0 6%, rgba(224,0,0,.82) 6% 8%, transparent 8% 100%),
        linear-gradient(140deg, transparent 0 10%, rgba(224,0,0,.42) 10% 11.6%, transparent 11.6% 100%);
    opacity:.95;
}
.auto-sidebar-brand{
    position:relative;
    z-index:1;
    min-height:118px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 0 12px;
}
.auto-sidebar-logo{
    display:block;
    width:100%;
    text-align:center;
}
.auto-sidebar-logo img{
    width:205px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));
}
.auto-sidebar-close{
    position:absolute;
    right:-8px;
    top:14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:rgba(224,0,0,.9);
}
.auto-menu{ position:relative; z-index:1; padding-top:4px !important; }
.auto-menu > li{ margin:0 0 5px !important; }
.auto-menu > li > a{
    height:47px !important;
    line-height:47px !important;
    padding:0 15px !important;
    display:flex !important;
    align-items:center;
    gap:12px;
    color:#d9d9d9 !important;
    border-radius:8px !important;
    font-family:'RobotoCondensed',Arial,sans-serif !important;
    font-size:16px;
    letter-spacing:.2px;
    background:transparent !important;
    transition:all .22s ease !important;
}
.auto-menu > li > a i{
    width:22px !important;
    margin:0 !important;
    text-align:center;
    font-size:20px;
    color:#f5f5f5;
}
.auto-menu > li > a:hover,
.auto-menu > li > a:focus,
.auto-menu > li > a.active{
    background:linear-gradient(90deg,rgba(224,0,0,.92),rgba(125,0,0,.48)) !important;
    color:#fff !important;
    transform:translateX(2px);
    box-shadow:0 12px 24px rgba(224,0,0,.2);
}
.auto-menu > li > a.active::before{
    content:"";
    position:absolute;
    left:-24px;
    top:0;
    width:6px;
    height:100%;
    border-radius:0 8px 8px 0;
    background:#fff;
    box-shadow:0 0 18px rgba(255,255,255,.55);
}
.auto-menu > li > a:hover::before{ display:none !important; }
.auto-menu-section{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0 8px !important;
    color:var(--auto-red-2) !important;
    font-size:12px;
    font-weight:700;
    line-height:1 !important;
}
.auto-menu-section span{ white-space:nowrap; }
.auto-menu-section::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.22);
}
.auto-sidebar-help{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:72px;
    margin-top:34px;
    padding:14px 17px;
    border-radius:0 16px 16px 0;
    background:
        linear-gradient(120deg,rgba(224,0,0,.92) 0 7px,transparent 7px 12px,rgba(255,255,255,.04) 12px 100%),
        linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
}
.auto-sidebar-help i{ font-size:30px; color:#fff; }
.auto-sidebar-help small{ display:block; color:#d5d5d5; }
.auto-sidebar-help strong{ color:var(--auto-red-2); font-weight:700; }

/* Navbar */
.dashboard-Navbar.auto-navbar{
    height:78px !important;
    line-height:normal !important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 31px !important;
    position:relative;
    overflow:visible !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 6px 24px rgba(0,0,0,.38) !important;
    background:
        linear-gradient(110deg, transparent 0 32%, rgba(224,0,0,.8) 32% 33%, transparent 33% 70%, rgba(224,0,0,.75) 70% 71%, transparent 71% 100%),
        linear-gradient(180deg,#0d0d0d 0%,#161616 100%) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
.auto-navbar-left,
.auto-navbar-right{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
.auto-nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:42px !important;
    height:42px !important;
    border-radius:10px !important;
    color:#fff !important;
    background:transparent !important;
    font-size:24px !important;
}
.auto-nav-toggle:hover{ background:rgba(224,0,0,.25) !important; }
.auto-nav-title{
    font-size:19px;
    font-weight:700;
    color:#fff;
}
.auto-navbar-brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:235px;
    height:72px;
    overflow:hidden;
}
.auto-navbar-brand img{
    max-width:235px;
    max-height:72px;
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.auto-date-pill{
    display:flex;
    align-items:center;
    gap:10px;
    height:43px;
    padding:0 15px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.14);
    color:#e8e8e8;
    background:rgba(0,0,0,.25);
    box-shadow:inset 0 0 16px rgba(255,255,255,.02);
}
.auto-date-pill i{ color:var(--auto-red-2); font-size:20px; }
.auto-user-divider{
    width:1px;
    height:42px;
    background:rgba(255,255,255,.16);
}
.auto-user-box{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
}
.auto-user-box strong{ display:block; font-size:14px; line-height:1.2; }
.auto-user-box small{ display:block; color:#a8a8a8; font-size:12px; }
.auto-user-box a{ color:#fff; font-size:22px; }
.auto-logout-form{ display:none; }

/* Notificaciones */
.auto-noti-wrap{ position:relative !important; display:flex !important; align-items:center; justify-content:center; }
#btn-notificaciones.noti-btn{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#fff !important;
    font-size:24px !important;
    text-decoration:none !important;
}
#btn-notificaciones.noti-btn:hover{ background:rgba(224,0,0,.22) !important; }
#btn-notificaciones .noti-icon{ color:#fff !important; font-size:25px !important; }
#noti-badge.noti-badge{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    min-width:20px !important;
    height:20px !important;
    padding:0 5px !important;
    border-radius:999px !important;
    background:var(--auto-red) !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:20px !important;
    text-align:center !important;
    box-shadow:0 0 0 2px #111 !important;
}
#menu-notificaciones.noti-menu{
    display:none;
    position:fixed !important;
    width:390px;
    max-height:520px;
    overflow:hidden;
    border-radius:16px;
    background:#171717;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 45px rgba(0,0,0,.55);
    z-index:2147483000 !important;
    text-align:left !important;
}
#menu-notificaciones.noti-menu.noti-open{ display:block !important; }
.noti-header,.noti-footer{ background:#111; border-color:rgba(255,255,255,.1); }
.noti-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.noti-header span{ color:#fff; font-size:18px; font-weight:700; }
.noti-header-link,.noti-footer a{ color:var(--auto-red-2) !important; font-weight:700; }
.noti-body{ max-height:410px; overflow-y:auto; background:#171717; }
.noti-item{ display:flex; gap:12px; padding:12px 14px; color:#ddd !important; text-decoration:none !important; border-bottom:1px solid rgba(255,255,255,.07); }
.noti-item:hover,.noti-unread{ background:rgba(224,0,0,.10); }
.noti-avatar{ width:42px; height:42px; min-width:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--auto-red),#770000); }
.noti-content{ flex:1; min-width:0; }
.noti-title{ color:#fff; font-size:14px; font-weight:700; }
.noti-text{ color:#bbb; font-size:13px; line-height:1.35; }
.noti-time{ color:var(--auto-red-2); font-size:11px; font-weight:600; margin-top:5px; }
.noti-dot{ width:10px; height:10px; border-radius:50%; background:var(--auto-red-2); align-self:center; }
.noti-empty{ padding:38px 20px; text-align:center; color:#999; }
.noti-empty i{ font-size:38px; color:#555; display:block; margin-bottom:8px; }
.noti-footer{ padding:12px; text-align:center; border-top:1px solid rgba(255,255,255,.1); }

/* Dashboard principal */
.auto-dashboard{
    padding:24px 30px 28px;
    max-width:1780px;
    margin:0 auto;
    color:#fff;
}
.auto-dashboard-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.auto-dashboard-welcome h1{
    margin:0 0 5px;
    color:#fff;
    font-size:26px;
    font-weight:700;
}
.auto-dashboard-welcome p{
    margin:0;
    color:#c8c8c8;
    font-size:16px;
}
.auto-kpi-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(190px,1fr));
    gap:24px;
    margin-bottom:30px;
}
.auto-kpi-card{
    position:relative;
    min-height:150px;
    overflow:hidden;
    padding:24px 24px 18px;
    border-radius:11px;
    color:#fff !important;
    background:linear-gradient(145deg,#242424,#181818);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:var(--auto-shadow);
    text-decoration:none !important;
}
.auto-kpi-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 88% 25%, rgba(224,0,0,.18), transparent 26%);
    pointer-events:none;
}
.auto-kpi-card:hover{ transform:translateY(-4px); box-shadow:var(--auto-shadow),var(--auto-glow); }
.auto-kpi-info{ position:relative; z-index:1; }
.auto-kpi-info span{
    display:block;
    color:#e8e8e8;
    font-size:14px;
    letter-spacing:.3px;
    margin-bottom:6px;
}
.auto-kpi-info strong{
    display:block;
    color:#fff;
    font-size:34px;
    line-height:1.05;
    font-weight:700;
    margin-bottom:6px;
}
.auto-kpi-info small{
    display:block;
    color:#70d36b;
    font-size:14px;
}
.auto-kpi-icon{
    position:absolute;
    top:25px;
    right:23px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#e73535,#a60000);
    color:#fff;
    font-size:28px;
    box-shadow:0 10px 24px rgba(224,0,0,.35);
}
.auto-spark{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
    opacity:.96;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:100% 38px;
}
.auto-spark::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0; height:24px;
    background:linear-gradient(180deg,rgba(224,0,0,.14),rgba(224,0,0,.03));
}
.spark-1,.spark-2,.spark-3,.spark-4,.spark-5{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 42' preserveAspectRatio='none'%3E%3Cpolyline points='0,32 20,30 38,20 58,27 76,34 92,28 108,25 128,15 148,19 168,13 187,17 208,25 230,14 252,18 275,13 300,16' fill='none' stroke='%23e00000' stroke-width='2.8'/%3E%3C/svg%3E");
}
.spark-2{ filter:hue-rotate(4deg); }
.spark-3{ filter:brightness(1.18); }
.spark-4{ filter:brightness(.95); }
.spark-5{ filter:brightness(1.25); }

.auto-section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:2px 0 15px;
}
.auto-section-title span,.auto-panel-title span{
    width:3px;
    height:18px;
    border-radius:4px;
    background:var(--auto-red);
    box-shadow:0 0 12px rgba(224,0,0,.7);
}
.auto-section-title h2,.auto-panel-title h3{
    margin:0;
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;
}
.auto-section-title div{
    flex:1;
    height:1px;
    background:rgba(255,255,255,.17);
    margin-left:10px;
}
.auto-quick-grid{
    display:grid;
    grid-template-columns:repeat(9,minmax(110px,1fr));
    gap:13px;
    margin-bottom:22px;
}
.auto-quick-card{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:17px 10px;
    color:#fff !important;
    background:linear-gradient(145deg,#262626,#181818);
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    box-shadow:0 10px 25px rgba(0,0,0,.32);
    text-decoration:none !important;
    text-align:center;
    overflow:hidden;
    position:relative;
}
.auto-quick-card::after{
    content:"";
    position:absolute;
    width:70px;
    height:70px;
    right:-34px;
    bottom:-34px;
    border:1px solid rgba(224,0,0,.35);
    border-radius:50%;
}
.auto-quick-card > i{
    font-size:52px;
    color:#f3f3f3;
    line-height:1;
    text-shadow:0 0 20px rgba(255,255,255,.14);
}
.auto-quick-card strong{
    min-height:28px;
    color:#fff;
    font-size:14px;
    line-height:1.15;
    font-weight:700;
}
.auto-quick-card span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:linear-gradient(135deg,#ef3333,#af0000);
    color:#fff;
    font-size:18px;
}
.auto-quick-card:hover{ transform:translateY(-4px); border-color:rgba(224,0,0,.45); box-shadow:var(--auto-shadow),var(--auto-glow); }
.auto-dashboard-lower{
    display:grid;
    grid-template-columns:1.48fr 1fr;
    gap:18px;
}
.auto-panel{
    background:linear-gradient(145deg,#242424,#171717);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    box-shadow:var(--auto-shadow);
    padding:18px;
    overflow:hidden;
}
.auto-panel-title{
    display:flex;
    align-items:center;
    gap:9px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.12);
    margin-bottom:0;
}
.auto-table-responsive{ overflow-x:auto; }
.auto-table{
    width:100%;
    border-collapse:collapse;
    color:#ddd;
    min-width:760px;
}
.auto-table thead th{
    padding:15px 10px;
    color:var(--auto-red-2);
    background:transparent;
    font-weight:700;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.auto-table tbody td{
    padding:14px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#d5d5d5;
    font-size:14px;
    vertical-align:middle;
}
.auto-table tbody tr:hover{ background:rgba(224,0,0,.07); }
.auto-service-icons{ display:inline-flex; gap:9px; color:#f3f3f3; margin-right:8px; }
.auto-service-icons i{ font-size:18px; }
.auto-table small{ color:#aaa; }
.auto-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    padding:5px 10px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    border:1px solid currentColor;
}
.auto-status.ok{ color:#66d45f; background:rgba(69,160,73,.15); }
.auto-status.progress{ color:var(--auto-yellow); background:rgba(243,165,27,.14); }
.auto-status.danger{ color:#ff5555; background:rgba(224,42,42,.13); }
.auto-row-more{ color:#eee; font-size:22px; }
.auto-outline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    min-height:40px;
    padding:0 25px;
    color:var(--auto-red-2) !important;
    border:1px solid var(--auto-red-2);
    border-radius:6px;
    text-decoration:none !important;
    font-weight:700;
}
.auto-outline-btn:hover{ background:rgba(224,0,0,.18); color:#fff !important; }
.auto-right-widgets{ display:grid; gap:18px; }
.auto-best-list{ position:relative; padding-top:7px; }
.auto-best-list::after{
    content:"\f20f";
    font-family:'Material-Design-Iconic-Font';
    position:absolute;
    right:16px;
    bottom:-10px;
    color:rgba(255,255,255,.06);
    font-size:108px;
    pointer-events:none;
}
.auto-best-item{
    display:grid;
    grid-template-columns:24px minmax(150px,1fr) minmax(110px,210px) 35px;
    gap:10px;
    align-items:center;
    color:#ddd;
    margin:12px 0;
    position:relative;
    z-index:1;
}
.auto-best-item span{ color:#bbb; }
.auto-best-item strong{ color:#ddd; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auto-best-item div{ height:6px; border-radius:8px; background:rgba(255,255,255,.08); overflow:hidden; }
.auto-best-item em{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--auto-red),var(--auto-red-2)); }
.auto-best-item b{ color:#fff; text-align:right; }
.auto-state-content{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
    padding:24px 0 8px;
}
.auto-donut{
    width:155px;
    height:155px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 25px rgba(0,0,0,.2), 0 12px 25px rgba(0,0,0,.2);
}
.auto-donut > div{
    width:88px;
    height:88px;
    border-radius:50%;
    background:#242424;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
}
.auto-donut strong{ font-size:30px; line-height:1; }
.auto-donut small{ color:#aaa; }
.auto-state-legend{ min-width:210px; }
.auto-state-legend p{
    display:grid;
    grid-template-columns:16px 1fr 40px;
    gap:12px;
    align-items:center;
    margin:15px 0;
    color:#eee;
    font-size:16px;
}
.auto-state-legend span{ width:14px; height:14px; border-radius:50%; display:block; }
.state-ok{ background:#43a047; }
.state-progress{ background:var(--auto-yellow); }
.state-danger{ background:var(--auto-danger); }
.auto-state-legend b{ text-align:right; color:#fff; }
.auto-empty-row,.auto-empty-box{ color:#aaa; text-align:center; padding:22px; }

/* Login */
.containerLogin.auto-login-page{
    height:100%;
    min-height:100vh;
    overflow:hidden;
    background:
        radial-gradient(circle at 70% 12%, rgba(224,0,0,.28), transparent 24%),
        linear-gradient(135deg,#030303,#181818 48%,#050505) !important;
}
.containerLogin.auto-login-page::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg, transparent 0 9%, rgba(224,0,0,.85) 9% 10.5%, transparent 10.5% 100%),
        linear-gradient(120deg, transparent 0 13%, rgba(224,0,0,.45) 13% 14.5%, transparent 14.5% 100%),
        linear-gradient(120deg, transparent 0 78%, rgba(224,0,0,.78) 78% 79.2%, transparent 79.2% 100%),
        linear-gradient(120deg, transparent 0 82%, rgba(224,0,0,.42) 82% 83.5%, transparent 83.5% 100%);
    opacity:.85;
}
.auto-login-card.logInForm{
    max-width:455px !important;
    padding:34px 36px 38px !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(35,35,35,.94),rgba(10,10,10,.94)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 28px 80px rgba(0,0,0,.65),0 0 40px rgba(224,0,0,.18) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.auto-login-logo img{
    max-width:300px !important;
    max-height:165px;
    display:block;
    margin:0 auto 12px;
    object-fit:contain;
}
.auto-login-card h1{
    margin:6px 0 6px;
    color:#fff;
    text-align:center;
    font-size:26px;
    font-weight:800;
}
.auto-login-card > p{
    margin:0 0 24px;
    color:#bdbdbd !important;
    text-align:center;
    font-size:15px;
}
.auto-login-group{
    margin-bottom:24px !important;
    position:relative;
}
.auto-login-group label{ color:#ccc !important; }
.auto-login-group .form-control{
    height:44px;
    color:#fff !important;
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:9px !important;
    padding-left:14px !important;
    padding-right:45px !important;
    background-image:none !important;
}
.auto-login-group .form-control:focus{
    border-color:var(--auto-red-2) !important;
    box-shadow:0 0 0 3px rgba(224,0,0,.14) !important;
}
.auto-login-group > i,
.auto-login-eye{
    position:absolute;
    right:14px;
    top:35px;
    color:#fff;
    font-size:20px;
    cursor:pointer;
}
.auto-login-btn{
    width:100%;
    height:46px;
    background:linear-gradient(135deg,var(--auto-red),#970000) !important;
    border:0 !important;
    border-radius:9px !important;
    font-size:16px;
    font-weight:800;
    letter-spacing:.2px;
}
.auto-login-btn:hover{ box-shadow:0 12px 24px rgba(224,0,0,.28) !important; }
.form-group.is-focused label,
.form-group.is-focused label.control-label{ color:var(--auto-red-2) !important; }
.form-group.is-focused .form-control{ background-image:none !important; }

/* Estilo general del sistema: paneles, tablas y formularios */
.container-fluid{ color:#fff; }
.page-header{
    margin:24px 0 18px !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.page-header h1,
.page-header .text-titles{ color:#fff !important; }
.panel,
.card{
    background:linear-gradient(145deg,#242424,#171717) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    box-shadow:var(--auto-shadow) !important;
    color:#fff !important;
}
.panel-heading,
.modal-header{
    background:linear-gradient(90deg,#b10000,#4b0000) !important;
    border:0 !important;
    color:#fff !important;
    border-radius:12px 12px 0 0 !important;
}
.panel-title,.panel-heading h1,.panel-heading h2,.panel-heading h3{ color:#fff !important; }
.panel-body,.card-body,.card-footer{
    background:transparent !important;
    color:#e5e5e5 !important;
}
.card-title{ color:#fff !important; }
.card-text,.help-block{ color:#aaa !important; }
.list-group-item{
    background:#1b1b1b !important;
    color:#e9e9e9 !important;
    border-color:rgba(255,255,255,.1) !important;
}
.alert{ border-radius:10px !important; border:1px solid rgba(255,255,255,.14) !important; }
.alert-info,.alert-success,.alert-warning,.alert-danger{
    background:#181818 !important;
    color:#eaeaea !important;
}
label{ color:#e8e8e8 !important; }
.form-control,
select.form-control,
input.form-control,
textarea.form-control{
    color:#fff !important;
    background-color:#141414 !important;
    border:1px solid rgba(255,255,255,.15) !important;
    border-radius:8px !important;
    box-shadow:none !important;
    background-image:none !important;
}
.form-control:focus{
    border-color:var(--auto-red-2) !important;
    box-shadow:0 0 0 3px rgba(224,0,0,.13) !important;
}
select.form-control option{ background:#111; color:#fff; }
.table,
table.dataTable{
    background:#1a1a1a !important;
    color:#e6e6e6 !important;
    border-radius:10px !important;
    overflow:hidden;
}
.table > thead > tr > th,
table.dataTable thead th{
    background:#111 !important;
    color:var(--auto-red-2) !important;
    border-color:rgba(255,255,255,.12) !important;
}
.table > tbody > tr > td,
table.dataTable tbody td{
    color:#dedede !important;
    border-color:rgba(255,255,255,.08) !important;
}
.table-striped > tbody > tr:nth-of-type(odd){ background-color:rgba(255,255,255,.025) !important; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover,
table.dataTable tbody tr:hover{ background:rgba(224,0,0,.07) !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{ color:#ddd !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    background:#111 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    color:#fff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:#171717 !important;
    border-radius:7px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    color:#fff !important;
    background:linear-gradient(135deg,var(--auto-red),#850000) !important;
    border-color:var(--auto-red) !important;
}
.btn{
    border-radius:8px !important;
    font-weight:700 !important;
    text-transform:none !important;
}
.btn-primary,.btn-info,.btn-success{
    background:linear-gradient(135deg,var(--auto-red),#920000) !important;
    border-color:var(--auto-red) !important;
    color:#fff !important;
}
.btn-primary:hover,.btn-info:hover,.btn-success:hover{
    background:linear-gradient(135deg,#ff2b2b,#b00000) !important;
    border-color:#ff2b2b !important;
}
.btn-warning{ background:#f3a51b !important; border-color:#f3a51b !important; color:#111 !important; }
.btn-danger{ background:#d71920 !important; border-color:#d71920 !important; color:#fff !important; }
.modal-content{
    background:#1b1b1b !important;
    color:#eee !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:14px !important;
}
.modal-footer{ border-top:1px solid rgba(255,255,255,.1) !important; }
.close{ color:#fff !important; opacity:.9 !important; }
.tile{
    background:linear-gradient(145deg,#242424,#171717) !important;
    border-color:rgba(255,255,255,.12) !important;
    color:#fff !important;
}
.tile-title{ background:linear-gradient(135deg,var(--auto-red),#850000) !important; color:#fff !important; }
.tile-number > p{ color:#fff !important; }
.tile-number > small{ color:#aaa !important; }
.tile-icon > i{ color:rgba(224,0,0,.42) !important; }

@media (max-width:1400px){
    .auto-kpi-grid{ grid-template-columns:repeat(3,minmax(190px,1fr)); }
    .auto-quick-grid{ grid-template-columns:repeat(5,minmax(120px,1fr)); }
    .auto-dashboard-lower{ grid-template-columns:1fr; }
}
@media (max-width:991px){
    .dashboard-sideBar,
    .dashboard-sideBar-ct{ width:285px !important; }
    .dashboard-contentPage{ padding-left:0 !important; }
    .auto-navbar-brand{ display:none; }
    .auto-kpi-grid{ grid-template-columns:repeat(2,minmax(190px,1fr)); }
    .auto-quick-grid{ grid-template-columns:repeat(3,minmax(120px,1fr)); }
}
@media (max-width:767px){
    .dashboard-sideBar{ width:100% !important; }
    .dashboard-sideBar-ct{ max-width:285px !important; transform:translateX(-285px) !important; }
    .dashboard-Navbar.auto-navbar{ height:66px !important; padding:0 15px !important; }
    .auto-dashboard{ padding:18px 15px; }
    .auto-kpi-grid,.auto-quick-grid{ grid-template-columns:1fr; }
    .auto-state-content{ flex-direction:column; }
    #menu-notificaciones.noti-menu{ width:calc(100vw - 16px) !important; right:8px !important; left:8px !important; }
}


/* =========================================================
   AUTOALARMAS V&M - AJUSTE FINAL DE DISTRIBUCIÓN TIPO 80%
   Mantiene la misma composición del mockup en pantallas desktop.
   ========================================================= */
@media (min-width: 992px){
    body{ font-size:14px !important; }

    .dashboard-sideBar,
    .dashboard-sideBar-ct{ width:240px !important; }

    .dashboard-contentPage{
        padding-left:240px !important;
        overflow-x:hidden !important;
    }

    .dashboard-sideBar-ct{
        padding:0 18px 18px !important;
    }

    .auto-sidebar-brand{
        min-height:96px !important;
        padding:12px 0 8px !important;
    }

    .auto-sidebar-logo img{
        width:168px !important;
        max-width:168px !important;
    }

    .auto-menu{
        padding-top:2px !important;
    }

    .auto-menu > li{
        margin-bottom:2px !important;
    }

    .auto-menu > li > a{
        height:37px !important;
        line-height:37px !important;
        padding:0 12px !important;
        gap:9px !important;
        border-radius:7px !important;
        font-size:13.4px !important;
    }

    .auto-menu > li > a i{
        width:18px !important;
        font-size:16px !important;
    }

    .auto-menu > li > a.active::before{
        left:-18px !important;
        width:5px !important;
    }

    .auto-menu-section{
        margin:12px 0 6px !important;
        gap:10px !important;
        font-size:10.5px !important;
    }

    .auto-sidebar-help{
        min-height:58px !important;
        margin-top:18px !important;
        padding:10px 13px !important;
        gap:9px !important;
        border-radius:0 13px 13px 0 !important;
    }

    .auto-sidebar-help i{ font-size:24px !important; }
    .auto-sidebar-help small{ font-size:11.5px !important; }
    .auto-sidebar-help strong{ font-size:12.5px !important; }

    .dashboard-Navbar.auto-navbar{
        height:64px !important;
        min-height:64px !important;
        padding:0 24px !important;
    }

    .auto-navbar-left,
    .auto-navbar-right{
        gap:13px !important;
    }

    .auto-nav-toggle{
        width:35px !important;
        height:35px !important;
        font-size:22px !important;
    }

    .auto-nav-title{
        font-size:16px !important;
    }

    .auto-navbar-brand{
        width:190px !important;
        height:62px !important;
    }

    .auto-navbar-brand img{
        max-width:190px !important;
        max-height:62px !important;
    }

    .auto-navbar .auto-date-pill{
        display:none !important;
    }

    #btn-notificaciones.noti-btn{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        font-size:21px !important;
    }

    #btn-notificaciones .noti-icon{
        font-size:22px !important;
    }

    #noti-badge.noti-badge{
        top:-1px !important;
        right:-1px !important;
        min-width:18px !important;
        height:18px !important;
        line-height:18px !important;
        font-size:10px !important;
    }

    .auto-user-divider{
        height:36px !important;
    }

    .auto-user-box strong{
        font-size:12.5px !important;
    }

    .auto-user-box small{
        font-size:11px !important;
    }

    .auto-user-box a{
        font-size:19px !important;
    }

    .auto-dashboard{
        max-width:none !important;
        padding:18px 22px 20px !important;
    }

    .auto-dashboard-welcome{
        margin-bottom:14px !important;
    }

    .auto-dashboard-welcome h1{
        font-size:19px !important;
        margin-bottom:4px !important;
    }

    .auto-dashboard-welcome p{
        font-size:13px !important;
    }

    .auto-dashboard-date-pill{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        height:39px !important;
        padding:0 14px !important;
        border-radius:7px !important;
        border:1px solid rgba(255,255,255,.14) !important;
        background:rgba(0,0,0,.23) !important;
        color:#e8e8e8 !important;
        box-shadow:inset 0 0 16px rgba(255,255,255,.02) !important;
        font-size:12.3px !important;
        white-space:nowrap !important;
    }

    .auto-dashboard-date-pill i{
        color:var(--auto-red-2) !important;
        font-size:18px !important;
    }

    .auto-kpi-grid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:16px !important;
        margin-bottom:21px !important;
    }

    .auto-kpi-card{
        min-height:108px !important;
        padding:15px 16px 12px !important;
        border-radius:9px !important;
    }

    .auto-kpi-info span{
        font-size:11.4px !important;
        margin-bottom:4px !important;
    }

    .auto-kpi-info strong{
        font-size:25px !important;
        margin-bottom:4px !important;
    }

    .auto-kpi-info small{
        font-size:11.7px !important;
    }

    .auto-kpi-icon{
        width:42px !important;
        height:42px !important;
        top:17px !important;
        right:15px !important;
        font-size:21px !important;
    }

    .auto-spark{
        height:29px !important;
        background-size:100% 27px !important;
    }

    .auto-section-title{
        gap:8px !important;
        margin:0 0 12px !important;
    }

    .auto-section-title span,
    .auto-panel-title span{
        width:3px !important;
        height:15px !important;
    }

    .auto-section-title h2,
    .auto-panel-title h3{
        font-size:13px !important;
    }

    .auto-quick-grid{
        grid-template-columns:repeat(9,minmax(0,1fr)) !important;
        gap:10px !important;
        margin-bottom:16px !important;
    }

    .auto-quick-card{
        min-height:112px !important;
        padding:11px 6px !important;
        gap:8px !important;
        border-radius:8px !important;
    }

    .auto-quick-card > i{
        font-size:38px !important;
    }

    .auto-quick-card strong{
        font-size:11.2px !important;
        line-height:1.12 !important;
        min-height:24px !important;
    }

    .auto-quick-card span{
        width:20px !important;
        height:20px !important;
        font-size:15px !important;
    }

    .auto-dashboard-lower{
        grid-template-columns:minmax(0,1.48fr) minmax(350px,1fr) !important;
        gap:14px !important;
    }

    .auto-panel{
        padding:14px !important;
        border-radius:9px !important;
    }

    .auto-panel-title{
        gap:8px !important;
        padding-bottom:11px !important;
    }

    .auto-table{
        min-width:610px !important;
    }

    .auto-table thead th{
        padding:10px 8px !important;
        font-size:11.5px !important;
    }

    .auto-table tbody td{
        padding:9.5px 8px !important;
        font-size:11.7px !important;
    }

    .auto-service-icons{
        gap:6px !important;
        margin-right:5px !important;
    }

    .auto-service-icons i{
        font-size:15px !important;
    }

    .auto-table small{
        font-size:10.5px !important;
    }

    .auto-status{
        min-width:76px !important;
        padding:4px 8px !important;
        border-radius:7px !important;
        font-size:11.3px !important;
    }

    .auto-row-more{
        font-size:18px !important;
    }

    .auto-outline-btn{
        min-height:32px !important;
        padding:0 18px !important;
        margin-top:12px !important;
        border-radius:6px !important;
        font-size:12px !important;
    }

    .auto-right-widgets{
        gap:14px !important;
    }

    .auto-best-list{
        padding-top:5px !important;
    }

    .auto-best-list::after{
        font-size:86px !important;
        right:8px !important;
        bottom:-14px !important;
    }

    .auto-best-item{
        grid-template-columns:20px minmax(105px,1fr) minmax(90px,170px) 28px !important;
        gap:8px !important;
        margin:8px 0 !important;
        font-size:12px !important;
    }

    .auto-best-item div{
        height:5px !important;
    }

    .auto-state-content{
        gap:12px !important;
        padding:16px 0 4px !important;
    }

    .auto-donut{
        width:118px !important;
        height:118px !important;
    }

    .auto-donut > div{
        width:68px !important;
        height:68px !important;
    }

    .auto-donut strong{
        font-size:23px !important;
    }

    .auto-donut small{
        font-size:10px !important;
    }

    .auto-state-legend{
        min-width:168px !important;
    }

    .auto-state-legend p{
        grid-template-columns:13px 1fr 30px !important;
        gap:9px !important;
        margin:10px 0 !important;
        font-size:13px !important;
    }

    .auto-state-legend span{
        width:11px !important;
        height:11px !important;
    }
}

@media (min-width: 992px) and (max-width: 1180px){
    .dashboard-sideBar,
    .dashboard-sideBar-ct{ width:220px !important; }
    .dashboard-contentPage{ padding-left:220px !important; }
    .auto-sidebar-logo img{ width:150px !important; }
    .auto-menu > li > a{ font-size:12.8px !important; padding:0 10px !important; }
    .auto-dashboard{ padding-left:16px !important; padding-right:16px !important; }
    .auto-kpi-grid{ gap:10px !important; }
    .auto-quick-grid{ gap:8px !important; }
    .auto-dashboard-lower{ grid-template-columns:1fr !important; }
}

@media (max-width: 991px){
    .auto-dashboard-date-pill{ display:none !important; }
}

/* =========================================================
   AUTOALARMAS V&M - CORRECCIÓN FINAL
   1) Al ocultar el menú, el contenido usa todo el ancho.
   2) Compacta también los demás módulos al estilo 80%.
   ========================================================= */
.dashboard-contentPage{
    left:0 !important;
    width:auto !important;
}
.dashboard-contentPage.no-paddin-left,
.no-paddin-left.dashboard-contentPage{
    padding-left:0 !important;
}
.dashboard-sideBar.hide-sidebar{
    transform:translateX(-105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.dashboard-sideBar.show-sidebar{
    transform:translateX(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
@media (min-width:992px){
    .dashboard-contentPage.no-paddin-left .auto-dashboard{
        max-width:calc(100vw - 44px) !important;
    }
    .dashboard-contentPage.no-paddin-left .auto-dashboard-lower{
        grid-template-columns:minmax(0,1.48fr) minmax(350px,1fr) !important;
    }

    /* Ajuste 80% aplicado a todos los módulos internos */
    .dashboard-contentPage .container-fluid{
        padding-left:22px !important;
        padding-right:22px !important;
    }
    .dashboard-contentPage .page-header{
        margin:16px 0 12px !important;
        padding-bottom:8px !important;
    }
    .dashboard-contentPage .page-header h1,
    .dashboard-contentPage .page-header .text-titles{
        font-size:22px !important;
        line-height:1.25 !important;
        margin:0 !important;
        font-weight:700 !important;
    }
    .dashboard-contentPage .lead{
        font-size:14px !important;
        line-height:1.35 !important;
        margin-bottom:12px !important;
        color:#c9c9c9 !important;
    }
    .dashboard-contentPage .breadcrumb,
    .dashboard-contentPage .breadcrumb-tabs{
        padding:8px 0 !important;
        margin-bottom:12px !important;
        background:transparent !important;
    }
    .dashboard-contentPage .breadcrumb-tabs li{
        margin-right:5px !important;
        margin-bottom:5px !important;
    }
    .dashboard-contentPage .panel{
        margin-top:14px !important;
        border-radius:10px !important;
    }
    .dashboard-contentPage .panel-heading{
        padding:10px 14px !important;
        border-radius:10px 10px 0 0 !important;
    }
    .dashboard-contentPage .panel-title,
    .dashboard-contentPage .panel-heading h1,
    .dashboard-contentPage .panel-heading h2,
    .dashboard-contentPage .panel-heading h3{
        font-size:14px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
    }
    .dashboard-contentPage .panel-body{
        padding:13px 14px !important;
        font-size:13px !important;
    }
    .dashboard-contentPage .form-group{
        margin-bottom:13px !important;
    }
    .dashboard-contentPage label,
    .dashboard-contentPage .control-label{
        font-size:12.5px !important;
        margin-bottom:4px !important;
    }
    .dashboard-contentPage .form-control,
    .dashboard-contentPage select.form-control,
    .dashboard-contentPage input.form-control{
        height:32px !important;
        min-height:32px !important;
        padding:5px 9px !important;
        font-size:12.5px !important;
        border-radius:7px !important;
    }
    .dashboard-contentPage textarea.form-control{
        min-height:76px !important;
        height:auto !important;
        padding:8px 9px !important;
        font-size:12.5px !important;
    }
    .dashboard-contentPage .btn{
        padding:6px 11px !important;
        font-size:12px !important;
        line-height:1.25 !important;
        border-radius:7px !important;
    }
    .dashboard-contentPage .btn i{
        font-size:14px !important;
    }
    .dashboard-contentPage .table-responsive{
        border:0 !important;
        margin-bottom:0 !important;
    }
    .dashboard-contentPage .table,
    .dashboard-contentPage table.dataTable{
        font-size:12px !important;
        margin-bottom:10px !important;
    }
    .dashboard-contentPage .table > thead > tr > th,
    .dashboard-contentPage table.dataTable thead th,
    .dashboard-contentPage .table > tbody > tr > td,
    .dashboard-contentPage table.dataTable tbody td{
        padding:7px 8px !important;
        line-height:1.25 !important;
        vertical-align:middle !important;
    }
    .dashboard-contentPage .dataTables_wrapper{
        font-size:12px !important;
    }
    .dashboard-contentPage .dataTables_wrapper .dataTables_length,
    .dashboard-contentPage .dataTables_wrapper .dataTables_filter,
    .dashboard-contentPage .dataTables_wrapper .dataTables_info,
    .dashboard-contentPage .dataTables_wrapper .dataTables_paginate{
        font-size:12px !important;
        margin-top:6px !important;
    }
    .dashboard-contentPage .dataTables_wrapper .dataTables_filter input,
    .dashboard-contentPage .dataTables_wrapper .dataTables_length select{
        height:29px !important;
        padding:4px 7px !important;
        font-size:12px !important;
    }
    .dashboard-contentPage .dt-buttons .btn{
        padding:5px 9px !important;
        font-size:12px !important;
        margin-left:4px !important;
    }
    .dashboard-contentPage .modal-dialog{
        transform:scale(.92) !important;
        transform-origin:top center !important;
    }
    .dashboard-contentPage .modal-header,
    .dashboard-contentPage .modal-body,
    .dashboard-contentPage .modal-footer{
        padding:12px 14px !important;
    }
    .dashboard-contentPage .card{
        margin-top:14px !important;
        border-radius:10px !important;
    }
    .dashboard-contentPage .card-body{
        padding:12px !important;
        font-size:13px !important;
    }
    .dashboard-contentPage .card-title{
        font-size:15px !important;
    }
    .dashboard-contentPage .alert{
        padding:9px 12px !important;
        font-size:12.5px !important;
        margin-bottom:12px !important;
        border-radius:8px !important;
    }
}
@media (max-width:991px){
    .dashboard-contentPage,
    .dashboard-contentPage.no-paddin-left{
        padding-left:0 !important;
    }
}


/* ===== Menú de usuario Autoalarma V&M corregido ===== */
.auto-user-box{
    position: relative;
    display: flex;
    align-items: center;
}
.auto-user-trigger{
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    max-width: 260px;
    text-align: left;
}
.auto-user-trigger:hover{
    background: rgba(220, 0, 0, .12);
}
.auto-user-text{
    display: block;
    min-width: 0;
}
.auto-user-trigger strong,
.auto-user-box strong{
    display: block;
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.auto-user-trigger small,
.auto-user-box small{
    display: block;
    color: #c9c9c9;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.auto-user-trigger i{
    font-size: 20px;
    color: #fff;
}
.auto-user-dropdown{
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 230px;
    background: #111;
    border: 1px solid rgba(255,255,255,.14);
    border-top: 3px solid #e00000;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.55);
    padding: 8px;
    z-index: 99999;
    display: none;
}
.auto-user-dropdown.auto-user-dropdown-open{
    display: block;
}
.auto-user-dropdown:before{
    content: "";
    position: absolute;
    right: 18px;
    top: -9px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #e00000;
}
.auto-user-dropdown a{
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    color: #f3f3f3 !important;
    font-size: 14px !important;
    line-height: 1.2;
    text-decoration: none !important;
    border-radius: 9px;
    white-space: nowrap;
}
.auto-user-dropdown a:hover{
    background: rgba(224,0,0,.18);
    color: #fff !important;
}
.auto-user-dropdown a i{
    color: #e00000;
    font-size: 18px;
    width: 18px;
    text-align: center;
}

/* =========================================================
   AUTOALARMAS V&M - FIX DEFINITIVO MENÚ USUARIO NAVBAR
   Evita que las opciones salgan en línea y fuerza dropdown vertical.
   ========================================================= */
.dashboard-Navbar.auto-navbar{
    overflow: visible !important;
    z-index: 3000 !important;
}
.auto-navbar-right{
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    max-width: 48% !important;
    position: relative !important;
    z-index: 3100 !important;
}
.vm-user-menu{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 210px !important;
    line-height: normal !important;
    z-index: 3200 !important;
}
.vm-user-trigger{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 210px !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 6px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #fff !important;
    text-align: left !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.vm-user-trigger:hover,
.vm-user-menu.vm-user-menu-open .vm-user-trigger{
    background: rgba(224,0,0,.13) !important;
    border-color: rgba(255,255,255,.10) !important;
}
.vm-user-avatar{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg,#e00000,#870000) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(224,0,0,.22) !important;
}
.vm-user-avatar i{ font-size: 17px !important; color: #fff !important; }
.vm-user-info{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.vm-user-info strong,
.vm-user-info small{
    display: block !important;
    width: 100% !important;
    max-width: 128px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    line-height: 1.1 !important;
}
.vm-user-info strong{
    font-size: 12.5px !important;
    font-weight: 800 !important;
}
.vm-user-info small{
    margin-top: 3px !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: #cfcfcf !important;
}
.vm-user-chevron{
    flex: 0 0 auto !important;
    font-size: 18px !important;
    color: #fff !important;
    transition: transform .18s ease !important;
}
.vm-user-menu.vm-user-menu-open .vm-user-chevron{
    transform: rotate(180deg) !important;
}
.vm-user-dropdown{
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 9px !important;
    margin: 0 !important;
    background: linear-gradient(180deg,#171717 0%,#101010 100%) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-top: 3px solid #e00000 !important;
    border-radius: 13px !important;
    box-shadow: 0 20px 45px rgba(0,0,0,.72) !important;
    list-style: none !important;
    text-align: left !important;
    line-height: normal !important;
    z-index: 2147483640 !important;
    transform: none !important;
}
.vm-user-dropdown.vm-user-dropdown-open,
.vm-user-menu.vm-user-menu-open .vm-user-dropdown{
    display: flex !important;
}
.vm-user-dropdown:before{
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: -9px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 7px solid #e00000 !important;
}
.vm-user-dropdown .vm-user-option,
.vm-user-dropdown a.vm-user-option{
    position: relative !important;
    float: none !important;
    clear: both !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #f5f5f5 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}
.vm-user-dropdown .vm-user-option:hover{
    background: rgba(224,0,0,.20) !important;
    color: #fff !important;
}
.vm-user-dropdown .vm-user-option i{
    width: 19px !important;
    min-width: 19px !important;
    text-align: center !important;
    color: #e00000 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
.vm-user-dropdown .vm-user-option span{
    display: inline-block !important;
    color: inherit !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* Neutraliza el estilo viejo en caso de que el navegador tenga caché parcial */
.auto-user-dropdown:not(.auto-user-dropdown-open),
.auto-user-box .auto-user-dropdown:not(.auto-user-dropdown-open){
    display: none !important;
}
@media (max-width: 1240px){
    .auto-navbar-right{ gap: 9px !important; max-width: 42% !important; }
    .auto-user-divider{ display: none !important; }
    .vm-user-trigger{ max-width: 168px !important; padding-left: 7px !important; padding-right: 7px !important; }
    .vm-user-avatar{ display: none !important; }
    .vm-user-info strong,.vm-user-info small{ max-width: 120px !important; }
    .auto-navbar-brand{ width: 165px !important; }
    .auto-navbar-brand img{ max-width: 165px !important; }
}
@media (max-width: 991px){
    .auto-navbar-right{ max-width: none !important; }
    .vm-user-menu{ display: none !important; }
}


/* =========================================================
   FIX AUTOALARMA V&M - TEXTO BLANCO EN FORMULARIOS/PANELES
   Corrige pantallas como Datos de cuenta, editar, crear y actualizar.
   ========================================================= */
body,
.dashboard-contentPage,
.dashboard-contentPage .container-fluid,
.dashboard-contentPage .container,
.dashboard-contentPage .full-box,
.dashboard-contentPage .panel,
.dashboard-contentPage .panel-body,
.dashboard-contentPage .card,
.dashboard-contentPage .card-body,
.dashboard-contentPage form,
.dashboard-contentPage fieldset{
    color: #f4f4f4 !important;
}

.dashboard-contentPage h1,
.dashboard-contentPage h2,
.dashboard-contentPage h3,
.dashboard-contentPage h4,
.dashboard-contentPage h5,
.dashboard-contentPage h6,
.dashboard-contentPage .h1,
.dashboard-contentPage .h2,
.dashboard-contentPage .h3,
.dashboard-contentPage .h4,
.dashboard-contentPage .h5,
.dashboard-contentPage .h6,
.dashboard-contentPage legend,
.dashboard-contentPage legend i,
.dashboard-contentPage .panel-title,
.dashboard-contentPage .panel-heading,
.dashboard-contentPage .panel-heading *,
.dashboard-contentPage .section-title,
.dashboard-contentPage .breadcrumb,
.dashboard-contentPage .breadcrumb a,
.dashboard-contentPage .breadcrumb li,
.dashboard-contentPage p,
.dashboard-contentPage span,
.dashboard-contentPage small,
.dashboard-contentPage strong,
.dashboard-contentPage b{
    color: #ffffff !important;
}

.dashboard-contentPage label,
.dashboard-contentPage .control-label,
.dashboard-contentPage .form-group label,
.dashboard-contentPage .form-group .control-label,
.dashboard-contentPage .form-group.is-focused label,
.dashboard-contentPage .form-group.is-focused .control-label,
.dashboard-contentPage .form-group.has-error label,
.dashboard-contentPage .form-group.has-success label,
.dashboard-contentPage .form-group.has-warning label{
    color: #e9e9e9 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

.dashboard-contentPage input,
.dashboard-contentPage select,
.dashboard-contentPage textarea,
.dashboard-contentPage .form-control,
.dashboard-contentPage input.form-control,
.dashboard-contentPage select.form-control,
.dashboard-contentPage textarea.form-control,
.dashboard-contentPage .select2-selection,
.dashboard-contentPage .select2-selection__rendered{
    color: #ffffff !important;
    background-color: #101010 !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dashboard-contentPage input:focus,
.dashboard-contentPage select:focus,
.dashboard-contentPage textarea:focus,
.dashboard-contentPage .form-control:focus{
    color: #ffffff !important;
    background-color: #151515 !important;
    border-color: #e00000 !important;
    box-shadow: 0 0 0 2px rgba(224,0,0,.20) !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dashboard-contentPage input::placeholder,
.dashboard-contentPage textarea::placeholder,
.dashboard-contentPage .form-control::placeholder{
    color: #9f9f9f !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #9f9f9f !important;
}

.dashboard-contentPage input[readonly],
.dashboard-contentPage input[disabled],
.dashboard-contentPage select[disabled],
.dashboard-contentPage textarea[readonly],
.dashboard-contentPage textarea[disabled],
.dashboard-contentPage .form-control[readonly],
.dashboard-contentPage .form-control[disabled],
.dashboard-contentPage fieldset[disabled] .form-control{
    color: #dddddd !important;
    background-color: #0d0d0d !important;
    border-color: rgba(255,255,255,.15) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #dddddd !important;
}

.dashboard-contentPage select option,
.dashboard-contentPage datalist option{
    background: #111111 !important;
    color: #ffffff !important;
}

.dashboard-contentPage .help-block,
.dashboard-contentPage .text-muted,
.dashboard-contentPage .text-secondary,
.dashboard-contentPage .small,
.dashboard-contentPage .description,
.dashboard-contentPage .form-text{
    color: #cfcfcf !important;
}

.dashboard-contentPage .panel-body i,
.dashboard-contentPage form i,
.dashboard-contentPage legend i,
.dashboard-contentPage .zmdi,
.dashboard-contentPage .fa,
.dashboard-contentPage .fas,
.dashboard-contentPage .far,
.dashboard-contentPage .glyphicon{
    color: #ffffff !important;
}

.dashboard-contentPage .btn,
.dashboard-contentPage .btn i,
.dashboard-contentPage button,
.dashboard-contentPage button i{
    color: #ffffff !important;
}

.dashboard-contentPage .table,
.dashboard-contentPage table,
.dashboard-contentPage table th,
.dashboard-contentPage table td,
.dashboard-contentPage .dataTables_wrapper,
.dashboard-contentPage .dataTables_info,
.dashboard-contentPage .dataTables_length,
.dashboard-contentPage .dataTables_filter,
.dashboard-contentPage .dataTables_paginate,
.dashboard-contentPage .dataTables_wrapper label{
    color: #f5f5f5 !important;
}

.dashboard-contentPage .panel{
    background: linear-gradient(180deg, rgba(28,28,28,.96) 0%, rgba(18,18,18,.98) 100%) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.dashboard-contentPage .panel-heading{
    background: linear-gradient(90deg,#d00000 0%,#7a0000 100%) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* Corrige títulos negros específicos en pantallas de cuenta/empleados/clientes */
.dashboard-contentPage .panel-body > h1,
.dashboard-contentPage .panel-body > h2,
.dashboard-contentPage .panel-body > h3,
.dashboard-contentPage .panel-body > h4,
.dashboard-contentPage .panel-body > legend,
.dashboard-contentPage form h1,
.dashboard-contentPage form h2,
.dashboard-contentPage form h3,
.dashboard-contentPage form h4,
.dashboard-contentPage form legend{
    color:#ffffff !important;
    font-weight:900 !important;
}