/* =====================================================================
   custom.css — Refresco visual de Gestor de Licencias
   Se carga DESPUES de sb-admin-2.min.css y solo agrega/sobreescribe.
   No hay pipeline de compilacion SCSS en este proyecto, por eso los
   ajustes de marca/color se hacen aqui en CSS plano en vez de en scss/.
   ===================================================================== */

:root{
    --gl-primary:        #4361ee;
    --gl-primary-dark:   #3247c9;
    --gl-primary-light:  #eef1fe;
    --gl-accent:         #4cc9f0;
    --gl-success:        #2ec4a6;
    --gl-warning:        #f7b733;
    --gl-danger:         #ef476f;
    --gl-ink:            #1f2430;
    --gl-muted:          #7b8299;
    --gl-bg:             #f4f6fb;
    --gl-radius:         0.75rem;
    --gl-radius-sm:      0.5rem;
    --gl-shadow:         0 0.5rem 1.5rem rgba(31, 36, 48, 0.08);
    --gl-shadow-hover:   0 0.75rem 2rem rgba(31, 36, 48, 0.14);
}

body{
    background-color: var(--gl-bg);
}

/* ---------- Marca / Sidebar ---------- */
.sidebar.bg-gradient-primary{
    background-image: linear-gradient(180deg, var(--gl-primary) 0%, var(--gl-primary-dark) 100%) !important;
}

.sidebar-brand-icon i{
    color: #fff;
}

.sidebar .nav-item .nav-link{
    transition: background-color .15s ease;
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link:hover{
    background-color: rgba(255,255,255,.08);
    border-radius: var(--gl-radius-sm);
}

.sidebar-heading{
    letter-spacing: .08em;
    opacity: .75;
}

/* ---------- Tarjetas ---------- */
.card{
    border: none;
    border-radius: var(--gl-radius);
    box-shadow: var(--gl-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.card.kpi-card:hover{
    box-shadow: var(--gl-shadow-hover);
    transform: translateY(-2px);
}

.card-header{
    border-top-left-radius: var(--gl-radius) !important;
    border-top-right-radius: var(--gl-radius) !important;
    background-color: #fff;
    border-bottom: 1px solid #eef0f6;
}

/* Tarjetas KPI de borde de color (usadas en el Tablero) */
.border-left-primary{ border-left: .3rem solid var(--gl-primary) !important; }
.border-left-success{ border-left: .3rem solid var(--gl-success) !important; }
.border-left-warning{ border-left: .3rem solid var(--gl-warning) !important; }
.border-left-danger{  border-left: .3rem solid var(--gl-danger)  !important; }
.border-left-info{    border-left: .3rem solid var(--gl-accent)  !important; }

.text-primary{ color: var(--gl-primary) !important; }
.bg-primary{ background-color: var(--gl-primary) !important; }
.btn-primary{
    background-color: var(--gl-primary);
    border-color: var(--gl-primary);
}
.btn-primary:hover,
.btn-primary:focus{
    background-color: var(--gl-primary-dark);
    border-color: var(--gl-primary-dark);
}

/* ---------- Botones ---------- */
.btn{
    border-radius: var(--gl-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-icon-split{
    border-radius: 50%;
}

/* ---------- Formularios ---------- */
.form-label{
    font-weight: 600;
    color: var(--gl-ink);
    margin-bottom: .35rem;
    display: inline-block;
}

.form-text{
    color: var(--gl-muted);
    font-size: .78rem;
}

.form-control{
    border-radius: var(--gl-radius-sm);
    border-color: #e1e4ee;
}

.form-control:focus{
    border-color: var(--gl-primary);
    box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, .15);
}

.modal-content{
    border: none;
    border-radius: var(--gl-radius);
    overflow: hidden;
}

.modal-header{
    background-color: var(--gl-primary-light);
    border-bottom: none;
}

.modal-section-title{
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gl-primary);
    margin: 1rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--gl-primary-light);
}

.modal-section-title:first-child{
    margin-top: 0;
}

/* ---------- Modales con pestañas (p. ej. Editar licencia) ---------- */
.modal-content .nav-tabs{
    border-bottom: 1px solid #eef0f6;
    padding: 0 1.5rem;
    background-color: var(--gl-primary-light);
}

.modal-content .nav-tabs .nav-link{
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gl-muted);
    font-weight: 600;
    font-size: .85rem;
    padding: .85rem 1rem;
    border-radius: 0;
}

.modal-content .nav-tabs .nav-link:hover{
    color: var(--gl-primary-dark);
    border-bottom-color: var(--gl-primary-light);
}

.modal-content .nav-tabs .nav-link.active{
    color: var(--gl-primary);
    background-color: transparent;
    border-bottom-color: var(--gl-primary);
}

.modal-content .tab-content{
    padding: 1.25rem 1.5rem;
}

.modal-footer.modal-footer-fijo{
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 5;
}

/* ---------- Tablas ---------- */
table.tabla.table-bordered{
    border: none;
}

table.tabla{
    border-collapse: separate;
    border-spacing: 0;
}

table.tabla thead th{
    background-color: var(--gl-primary-light);
    color: var(--gl-primary-dark);
    border-bottom: none;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    white-space: nowrap;
}

table.tabla tbody tr{
    transition: background-color .1s ease;
}

table.tabla tbody tr:hover{
    background-color: var(--gl-primary-light);
}

table.tabla td, table.tabla th{
    border-color: #eef0f6;
    vertical-align: middle;
}

/* Estado vacio de tablas */
.tabla-estado-vacio{
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--gl-muted);
}

.tabla-estado-vacio i{
    font-size: 2rem;
    color: #d9dded;
    display: block;
    margin-bottom: .5rem;
}

/* ---------- Badges de estado / vencimiento ---------- */
.badge-pill{
    padding: .4em .75em;
    border-radius: 50rem;
    font-weight: 600;
}

.badge-estado-activo{ background-color: rgba(46, 196, 166, .15); color: #1a8f78; }
.badge-estado-inactivo{ background-color: rgba(123, 130, 153, .15); color: var(--gl-muted); }

.badge-vencimiento-ok{ background-color: rgba(46, 196, 166, .15); color: #1a8f78; }
.badge-vencimiento-pronto{ background-color: rgba(247, 183, 51, .18); color: #9a6a00; }
.badge-vencimiento-vencido{ background-color: rgba(239, 71, 111, .15); color: #c22a4c; }

/* ---------- Pagina de login ---------- */
.login-wrapper{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #5b7cfa 0%, var(--gl-primary) 45%, var(--gl-primary-dark) 100%);
    padding: 1.5rem;
}

.login-card{
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(20, 24, 40, .25);
    padding: 2.5rem 2.25rem;
}

.login-brand{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.75rem;
}

.login-brand-icon{
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background: var(--gl-primary-light);
    color: var(--gl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}

.login-brand h1{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gl-ink);
    margin: 0;
}

.login-brand p{
    color: var(--gl-muted);
    font-size: .85rem;
    margin: .15rem 0 0;
}

.login-card .input-group-text{
    background-color: #fff;
    border-right: none;
    color: var(--gl-muted);
}

.login-card .form-control{
    border-left: none;
}

.login-card .input-group:focus-within .input-group-text,
.login-card .input-group:focus-within .form-control{
    border-color: var(--gl-primary);
}

.login-card .input-group:focus-within .form-control{
    box-shadow: none;
}

#btnTogglePassword{
    cursor: pointer;
}

.login-submit{
    width: 100%;
    padding: .65rem;
    margin-top: .5rem;
}

/* ---------- Utilidades varias ---------- */
.icon-circle-sm{
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}