/* =====================================================
   GENERAL
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f4f7fb;
    font-family:'Segoe UI',Arial,sans-serif;
    color:#2f3640;
}

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

.sidebar{

    position:fixed;

    left:0;

    top:0;

    width:250px;

    height:100vh;

    background:#0d47a1;

    color:#fff;

    overflow:auto;

    z-index:999;

}

.logo{

    padding:30px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.logo h4{

    margin:0;

    color:#fff;

}

.logo small{

    color:#dbe8ff;

}

.menu{

    padding-top:15px;

}

.menu a{

    display:flex;

    align-items:center;

    color:#fff;

    text-decoration:none;

    padding:14px 25px;

    transition:.30s;

}

.menu a i{

    width:30px;

    font-size:18px;

}

.menu a:hover{

    background:#1565c0;

}

.menu .active{

    background:#1565c0;

}

/* =====================================================
   CONTENIDO
===================================================== */

.main{

    margin-left:250px;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

.topbar{

    height:70px;

    background:#fff;

    padding:0 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.content{

    padding:30px;

    width:100%;

}

/* =====================================================
   TARJETAS
===================================================== */



.card-stat{

    border:none;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.30s;

    height:130px;

}

.card-stat:hover{

    transform:translateY(-5px);

}

.card-body{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:100%;

}

.icon-box{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#0d6efd;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

}

.card-body h6{

    color:#777;

    margin-bottom:5px;

}

.card-body h3{

    margin:0;

    font-size:30px;

    font-weight:bold;

}

/* =====================================================
   TABLAS
===================================================== */

.table-card{

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    height:100%;
        margin-bottom: 4%;

}

.table{

    margin-top:15px;
    width: 100%;


}

.table thead{

    background:#eef5ff;

}

.table th{

    border:none;
        padding: 9px 0 9px 0;

}
.table tr{

    margin-top:15px;
}

.table td{

    vertical-align:middle;
 
        padding-top: 23px !important;
            text-align: center !important;

}

.badge-ok{

    background:#198754;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

}

.badge-exp{

    background:#dc3545;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

}

.table .btn{

    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    margin-right: 1px;
    background-color: #f10000;
    color: #fff;
    border-color: #f90a0a;

}

.table .btn i{

    font-size:15px;

}

button{
        background-color: #0d47a1;
    color: #fff;
    padding: 10px;
    border-radius: 20px;
    border: none;
    width: 20%;
    margin-top: 2%;
    margin-bottom: 2%;
} 

/* =====================================================
   GRAFICOS
===================================================== */

canvas{

    width:100% !important;

    height:280px !important;

}

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

@media(max-width:992px){

.sidebar{

    width:220px;

}

.main{

    margin-left:220px;

}

}

@media(max-width:768px){

.sidebar{

    position:relative;

    width:100%;

    height:auto;

}

.main{

    margin-left:0;

}

.topbar{

    flex-direction:column;

    height:auto;

    padding:20px;

}

}




/* ==========================================
   FOOTER
========================================== */

.footer{

    margin-top:40px;

    padding:18px 30px;

    background:#ffffff;

    border-top:1px solid #e8edf5;

    color:#6c757d;

    font-size:14px;

    box-shadow:0 -2px 10px rgba(0,0,0,.05);

}

.footer strong{

    color:#0d47a1;

}

@media (max-width:768px){

    .footer{

        text-align:center;

        padding:20px 15px;

    }

    .footer .col-md-6:last-child{

        margin-top:8px;

    }

}

/*=====================================
FORMULARIOS
======================================*/

.form-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.form-title{

    font-size:24px;

    font-weight:600;

    color:#0d47a1;

    margin-bottom:25px;

    border-bottom:2px solid #f1f3f5;

    padding-bottom:15px;

}

.table-form{

    width:100%;

    border-collapse:separate;

    border-spacing:0 12px;

}

.table-form td{

    vertical-align:middle;

}

.table-form td:first-child{

    width:220px;

    font-weight:600;

    color:#495057;

    padding-right:15px;

}

.table-form input,

.table-form select,

.table-form textarea{

    border-radius:10px;

    border:1px solid #dfe3e8;

    min-height:45px;

    box-shadow:none;
    
    width:100%;

}

.table-form textarea{

    min-height:120px;

    resize:vertical;

}

.table-form input:focus,

.table-form select:focus,

.table-form textarea:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 .15rem rgba(13,110,253,.15);

}

.form-footer{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #ececec;

    text-align:right;

}

.form-footer .btn{

    min-width:140px;

}

@media(max-width:768px){

.table-form,
.table-form tbody,
.table-form tr,
.table-form td{

    display:block;

    width:100%;

}

.table-form td:first-child{

    width:100%;

    margin-bottom:8px;

}

}

/*==================================================
    TOOLBAR CORPORATIVO
==================================================*/

.table-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.table-toolbar h5{

    margin:0;

    font-size:26px;

    font-weight:600;

    color:#0d47a1;

}

.table-toolbar h5 i{

    color:#1565c0;

    margin-right:8px;
     font-size:45px;

}

.toolbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

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

.search-license {
    position: relative;
    width: 100%;
    max-width: 150px;
    margin-left: auto;
}

.search-license input {
    width: 100%;
    height: 42px;

    padding: 0 45px 0 15px;

    border: 1px solid #dee2e6;
    border-radius: 8px;

    background: #ffffff;
    color: #212529;

    font-size: 14px;

    outline: none;

    transition: all 0.2s ease;

    box-sizing: border-box;
}


/* Placeholder */

.search-license input::placeholder {
    color: #9aa0a6;
}


/* Cuando está seleccionado */

.search-license input:focus {
    border-color: #0d6efd;

    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.10);
}


/* Icono */

.search-license .search-icon {
    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #6c757d;

    font-size: 16px;

    pointer-events: none;

    transition: color 0.2s ease;
}


/* Icono cuando el input tiene el foco */

.search-license input:focus ~ .search-icon {
    color: #0d6efd;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 992px) {

    .search-license {
        max-width: 400px;
    }

}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 768px) {

    .search-license {
        max-width: 100%;
        width: 100%;
        margin: 15px 0 0 0;
    }

    .search-license input {
        height: 44px;
        font-size: 14px;
    }

}


/* ==========================================
   CELULAR PEQUEÑO
   ========================================== */

@media (max-width: 480px) {

    .search-license {
        width: 100%;
    }

    .search-license input {
        height: 42px;
        font-size: 13px;
        padding-left: 13px;
        padding-right: 42px;
    }

    .search-license input::placeholder {
        font-size: 12px;
    }

    .search-license .search-icon {
        right: 13px;
        font-size: 15px;
    }

}

/*==================================================
    BOTONES
==================================================*/

.btn-primary{

    border-radius:12px;

    padding:10px 18px;

    font-weight:500;

    box-shadow:0 4px 12px rgba(13,110,253,.18);

}

.btn-primary:hover{

    transform:translateY(-2px);

}

.table .btn{

    width:36px;

    height:36px;

    border-radius:10px;

    padding:0;

    margin-right:4px;

    transition:.25s;

}

.table .btn:hover{

    transform:translateY(-2px);

}

/*==================================================
    TABLAS
==================================================*/

.table{

    margin:0;

}

.table thead{

    background:#f7f9fc;

}

.table thead th{

    border:none;

    color:#44546a;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.4px;

    padding:16px;

}

.table tbody td{

    padding:16px;

    vertical-align:middle;

    border-top:1px solid #edf2f7;

}

.table-hover tbody tr{

    transition:.20s;

}

.table-hover tbody tr:hover{

    background:#f5f9ff;

}

/*==================================================
    BADGES
==================================================*/

.badge-ok{

    background:#d1fae5;

    color:#047857;

    padding:8px 14px;

    border-radius:30px;

    font-weight:600;

}

.badge-exp{

    background:#fee2e2;

    color:#b91c1c;

    padding:8px 14px;

    border-radius:30px;

    font-weight:600;

}

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

@media(max-width:992px){

.table-toolbar{

    flex-direction:column;

    align-items:flex-start;

}

.toolbar-actions{

    width:100%;

    flex-wrap:wrap;

}

.search-box{

    width:100%;

}

}

/*=========================================
BUSCADOR
=========================================*/

.search-box{

    display:flex;

    align-items:center;

    width:100%;

    background:#fff;

    border:1px solid #dce3ea;

    border-radius:10px;

    overflow:hidden;

    height:36px;

}

.search-box i{

    padding:0 30px;

    color:#6c757d;

    font-size:14px;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    height:45px;

    padding:0 80px;

    font-size:14px;

}

.search-box button{

    height:45px;

    border-radius:0;

    padding:0 16px;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:6px;
    
    text-align: center;

}


/*=========================================
MENSAJES DEL SISTEMA
=========================================*/

.alert-system{

    border-radius:12px;

    padding:30px 25px;

    font-size:15px;

    text-align:center;

    animation:fadeIn .3s;

}

.alert-system i{

    display:block;

    font-size:60px;

    margin-bottom:15px;

}

.alert-system h4{

    margin-bottom:10px;

    font-weight:600;

}

.alert-system p{

    margin:0;

    color:#6c757d;

}

.alert-success{

    background:#e8f7ee;

    border:1px solid #b7e4c7;

    color:#198754;

}

.alert-error{

    background:#fdeaea;

    border:1px solid #f5b5b5;

    color:#dc3545;

}

.alert-warning{

    background:#fff8e5;

    border:1px solid #ffe08a;

    color:#856404;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*=========================================
LOGIN
=========================================*/

.login-body{

    margin:0;

    min-height:100vh;

    background:#f4f7fb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:Arial,sans-serif;

}


/*=========================================
CONTENEDOR
=========================================*/

.login-container{

    width:100%;

    max-width:430px;

    padding:20px;

}


/*=========================================
TARJETA
=========================================*/

.login-card{

    background:#fff;

    border-radius:18px;

    padding:40px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    border:1px solid #edf1f5;

}


/*=========================================
LOGO
=========================================*/

.login-logo{

    text-align:center;

    margin-bottom:30px;

}

.login-logo h3{

    margin:0;

    color:#0d47a1;

    font-size:28px;

    font-weight:700;

}

.login-logo span{

    color:#6c757d;

    font-size:14px;

}


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

.user-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}


/* Título */

.user-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
}

.user-header h5 i {
    margin-right: 6px;
}


/* Botón */

.user-header .btn-add-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    white-space: nowrap;

    height: 38px;
    padding: 0 14px;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 500;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 768px) {

    .user-header {
        gap: 10px;
    }

    .user-header h5 {
        font-size: 15px;
    }

    .user-header .btn-add-user {
        height: 36px;
        padding: 0 11px;
        font-size: 12px;
    }

}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 576px) {

    .user-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .user-header h5 {
        font-size: 15px;
        white-space: normal;
    }

    .user-header .btn-add-user {
        width: 100%;
        height: 40px;
    }

}


/* ==========================================
   CELULAR PEQUEÑO
   ========================================== */

@media (max-width: 400px) {

    .user-header h5 {
        font-size: 14px;
    }

    .user-header .btn-add-user {
        font-size: 12px;
    }

}


/*=========================================
CAMPOS
=========================================*/

.login-field{

    margin-bottom:20px;

}

.login-field label{

    display:block;

    margin-bottom:7px;

    color:#495057;

    font-size:14px;

    font-weight:600;

}


/*=========================================
INPUT CON ICONO
=========================================*/

.login-input{

    display:flex;

    align-items:center;

    border:1px solid #dce3ea;

    border-radius:10px;

    background:#fff;

    height:42px;

    overflow:hidden;

}

.login-input i{

    color:#6c757d;

    padding:0 13px;

    font-size:16px;

}

.login-input .form-control{

    border:none;

    box-shadow:none;

    height:40px;

    padding-left:0;

}

.login-input .form-control:focus{

    box-shadow:none;

}


/*=========================================
CAPTCHA
=========================================*/

.captcha-box{

    display:flex;

    height:48px;

    margin-bottom:10px;

}

.captcha-code{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f1f5f9;

    border:1px solid #dce3ea;

    border-radius:10px 0 0 10px;

    color:#0d47a1;

    font-size:20px;

    font-weight:700;

    letter-spacing:6px;

}

.captcha-refresh{

    width:50px;

    border:1px solid #dce3ea;

    border-left:none;

    background:#fff;

    color:#0d6efd;

    border-radius:0 10px 10px 0;

}

.captcha-refresh:hover{

    background:#f4f7fb;

}

.captcha-input{

    height:42px;

    border-radius:10px;

}


/*=========================================
OPCIONES
=========================================*/

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    font-size:13px;

}

.login-options a{

    color:#0d6efd;

    text-decoration:none;

}

.login-options a:hover{

    text-decoration:underline;

}


/*=========================================
BOTON
=========================================*/

.login-button{

    width:100%;

    height:44px;

    border-radius:10px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}


/*=========================================
FOOTER
=========================================*/

.login-footer{

    text-align:center;

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #edf1f5;

    color:#6c757d;

    font-size:13px;

}

.login-footer small{

    color:#9aa5b1;

}


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

@media(max-width:480px){

    .login-container{

        padding:15px;

    }

    .login-card{

        padding:30px 22px;

    }

}


/* ==============================
   BUSCADOR DE LICENCIAS
   ============================== */

.search-license {
    position: relative;
    max-width: 380px;
    width: 100%;
}

.search-license .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
    z-index: 2;
}

.search-license input {
    width: 100%;
    height: 42px;
    padding: 0 15px 0 42px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff;
    color: #212529;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-license input::placeholder {
    color: #9aa0a6;
}

.search-license input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.10);
}

.search-license input:focus + .search-icon {
    color: #0d6efd;
}


/* ==========================================
   PAGINACIÓN - NÚMEROS HORIZONTALES
   ========================================== */

nav .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    list-style: none;
    gap: 4px;
}

nav .pagination .page-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

nav .pagination .page-link {
    width: 36px;
    height: 36px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #dee2e6;
    border-radius: 6px;

    background: #fff;
    color: #495057;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    box-shadow: none;
    transition: all 0.2s ease;
}


/* Hover */

nav .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: #f1f5ff;
    border-color: #0d6efd;
    color: #0d6efd;
}


/* Página activa */

nav .pagination .page-item.active .page-link {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}


/* Deshabilitado */

nav .pagination .page-item.disabled .page-link {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
}


/* Iconos anterior / siguiente */

nav .pagination .page-link i {
    font-size: 12px;
}


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

@media (max-width: 768px) {

    nav .pagination {
        gap: 3px;
        flex-wrap: wrap !important;
    }

    nav .pagination .page-link {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

}


/* ==========================================
   TABLA RESPONSIVE - REGISTRO DE USUARIOS
   ========================================== */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}


/* Evita que las columnas se deformen */

.table-responsive table {
    width: 100%;
    min-width: 700px;
    margin-bottom: 0;
}


/* Encabezados */

.table-responsive table thead th {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
}


/* Celdas */

.table-responsive table tbody td {
    vertical-align: middle;
    padding: 12px 14px;
    font-size: 13px;
}


/* Nombre */

.table-responsive table tbody td:first-child {
    font-weight: 500;
}


/* Correo */

.table-responsive table tbody td:nth-child(2) {
    white-space: nowrap;
}


/* Usuario */

.table-responsive table tbody td:nth-child(3) {
    white-space: nowrap;
}


/* Tipo */

.table-responsive table tbody td:nth-child(4) {
    white-space: nowrap;
}


/* Acciones */

.table-responsive table th:last-child,
.table-responsive table td:last-child {
    width: 170px;
    min-width: 170px;
    white-space: nowrap;
}


/* Botones */

.table-responsive table td .btn {
    margin-right: 3px;
}


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

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c7cdd4;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 992px) {

    .table-responsive table {
        min-width: 650px;
    }

    .table-responsive table thead th,
    .table-responsive table tbody td {
        padding: 10px 12px;
    }

}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 576px) {

    .table-responsive {
        margin-left: -5px;
        margin-right: -5px;
        width: calc(100% + 10px);
    }

    .table-responsive table {
        min-width: 620px;
    }

    .table-responsive table thead th,
    .table-responsive table tbody td {
        font-size: 12px;
        padding: 9px 10px;
    }

    .table-responsive table th:last-child,
    .table-responsive table td:last-child {
        min-width: 150px;
        width: 150px;
    }

    .table-responsive table td .btn {
        width: 32px;
        height: 32px;
        padding: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}


/*=========================================*
* FORMULARIO 4 COLUMNAS
*=========================================*/

.table-form {
    width: 100%;
    margin-bottom: 0;
}

.table-form td {
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #edf1f5;
}


/* ETIQUETAS */

.table-form .form-label-cell {
    width: 16%;
    background: #f8fafc;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.table-form .form-label-cell label {
    margin: 0;
}


/* CAMPOS */

.table-form td:nth-child(2),
.table-form td:nth-child(4) {
    width: 34%;
}

.table-form .form-control,
.table-form .form-select {
    height: 40px;
    border: 1px solid #d9e1e8;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: none;
}

.table-form .form-control:focus,
.table-form .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .08);
}


/*=========================================*
* FOOTER
*=========================================*/

.form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}

.form-footer .btn {
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 8px;
}


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

@media (max-width: 992px) {

    .table-form .form-label-cell {
        width: 20%;
    }

    .table-form td:nth-child(2),
    .table-form td:nth-child(4) {
        width: 30%;
    }

}


@media (max-width: 768px) {

    .table-form,
    .table-form tbody,
    .table-form tr,
    .table-form td {
        display: block;
        width: 100% !important;
    }

    .table-form tr {
        margin-bottom: 15px;
        border: 1px solid #edf1f5;
        border-radius: 8px;
        overflow: hidden;
    }

    .table-form td {
        padding: 10px 12px;
        border-bottom: 0;
    }

    .table-form .form-label-cell {
        background: #f8fafc;
        border-bottom: 1px solid #edf1f5;
    }

    .table-form .form-control,
    .table-form .form-select {
        width: 100%;
    }


    .form-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .form-footer .btn {
        width: 100%;
    }

}