/**
 * ======================================================
 * Control de Licencias - Custom Styles
 * Author: JProgramacion
 * Description: Estilos personalizados que extienden theme.min.css
 * ======================================================
 */

/* ─── Campos obligatorios ──────────────────────────────── */
.form-label .req {
    color: #dc3545;
    font-weight: 600;
    margin-left: 2px;
}

/* ─── Page Header ─────────────────────────────────────── */
.main .content {
    padding-top: 4rem;
}
.page-header {
    margin-bottom: 0;
}

/* ─── Login / Background ───────────────────────────────── */
.bg-body {
    background-image: url(../img/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

.navbar-brand-logo {
    min-width: 8.5rem !important;
    max-width: 8.5rem !important;
}

label.error {
    display: none !important;
}

#header {
    padding: 2.5rem !important;
}

@media only screen and (max-width: 600px) {
    #header {
        padding: .5rem !important;
    }
}

#logo-web {
    display: block;
}

#logo-movil {
    display: none;
}

@media only screen and (max-width: 600px) {
    #logo-web {
        display: none;
    }
    #logo-movil {
        display: block;
        width: 50px;
        padding: 4px;
    }
}

.disabled-pointer-event {
    pointer-events: none;
}

/* ─── Header Notifications Dropdown ────────────────────── */
.notif-dropdown {
    width: 22rem;
}

.notif-body-scroll {
    max-height: 20rem;
}

.account-dropdown {
    width: 16rem;
}

/* ─── Dashboard Home ───────────────────────────────────── */
.dashboard-card-scroll {
    max-height: 500px;
    overflow-y: auto;
}

.agenda-time-col {
    min-width: 65px;
}

.agenda-divider {
    width: 3px;
    height: 45px;
    border-radius: 3px;
}

.upcoming-time-col {
    min-width: 50px;
}

/* ─── Reservation Show - PIN Display ───────────────────── */
.pin-display {
    letter-spacing: 8px;
}

.pin-note {
    font-size: 12px;
}

/* ─── Room Edit - Availability Table ───────────────────── */
.avail-col-day {
    width: 180px;
}

.avail-col-active {
    width: 80px;
}

/* ─── Room Edit - PIN Logs ─────────────────────────────── */
.pin-logs-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* ─── DataTables dentro de card-body ──────────────────── */
.card-body .dataTables_wrapper {
    padding: 0.75rem 1rem;
}

/* Oculta la tabla cruda mientras DataTables inicializa */
table.js-datatable:not(.dataTable) {
    visibility: hidden;
}

/* ─── Flatpickr — día de hoy sin seleccionar ───────────── */
.flatpickr-calendar .flatpickr-day.today:not(.selected) {
    color: #3384C6 !important;
    background-color: transparent !important;
    border-color: #3384C6 !important;
    font-weight: 600;
}
.flatpickr-calendar .flatpickr-day.today:not(.selected):hover {
    color: #fff !important;
    background-color: #3384C6 !important;
}

/* ─── Flatpickr — año editable ─────────────────────────── */
.flatpickr-calendar .numInput.cur-year {
    cursor: text !important;
    pointer-events: auto !important;
    border-bottom: 1px dashed currentColor !important;
    padding-bottom: 1px !important;
}
.flatpickr-calendar .numInput.cur-year:focus {
    outline: none !important;
    border-bottom-style: solid !important;
}
.flatpickr-calendar .numInputWrapper:hover span.arrowUp,
.flatpickr-calendar .numInputWrapper:hover span.arrowDown {
    display: block !important;
    opacity: 0.7;
}

/* ─── Badge gris claro reutilizable ────────────────────── */
.badge-gray {
    background-color: #e2e8f0;
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════
   Formulario de Licencias — resaltado visual de campos
   ═══════════════════════════════════════════════════════════ */

/* Labels más definidos */
#formLicencia .form-label {
    font-weight: 600;
    font-size: .8rem;
    color: #344563;
    margin-bottom: .3rem;
    letter-spacing: .01em;
}

/* Inputs y textareas con fondo gris claro y borde más visible */
#formLicencia .form-control,
#formLicencia .form-select {
    background-color: #f5f6f8;
    border-color: #c9cdd6;
    color: #1e2a3b;
    transition: border-color .15s ease-in-out,
                box-shadow  .15s ease-in-out,
                background-color .15s ease-in-out;
}

#formLicencia .form-control::placeholder {
    color: #a0aec0;
    font-size: .85em;
}

/* Focus: fondo blanco limpio + borde primario + sombra tenue */
#formLicencia .form-control:focus,
#formLicencia .form-select:focus {
    background-color: #fff;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    color: #1e2a3b;
}

/* Readonly: fondo gris más marcado, cursor default */
#formLicencia .form-control[readonly] {
    background-color: #e9ebee;
    border-color: #d0d3da;
    color: #6c7a8d;
    cursor: default;
}

/* ─── Tom Select — estilos unificados para el formulario ── */
#formLicencia .ts-control {
    background-color: #f5f6f8 !important;
    border-color: #c9cdd6 !important;
    color: #1e2a3b !important;
    transition: border-color .15s ease-in-out,
                box-shadow  .15s ease-in-out,
                background-color .15s ease-in-out;
}

#formLicencia .ts-wrapper.focus .ts-control {
    background-color: #fff !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12) !important;
}

#formLicencia .ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545 !important;
}

#formLicencia .ts-dropdown .dropdown-input-wrap {
    padding: .4rem .5rem;
    border-bottom: 1px solid #e7eaf3;
}

#formLicencia .ts-dropdown .dropdown-input {
    display: block !important;
    width: 100%;
    padding: .375rem .75rem;
    font-size: .875rem;
    border: 1px solid #c9cdd6;
    border-radius: .375rem;
    outline: none;
    background-color: #f5f6f8;
}

#formLicencia .ts-dropdown .dropdown-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    background-color: #fff;
}