/* ============================================
   ParkQR - Custom Styles
   Extraido de wucHeadScripts.ascx
   ============================================ */

/* Fix Safari: el click en el icono dentro de un boton no propagaba al boton padre */
button i,
.btn i {
    pointer-events: none;
}

.form-label {
    margin-bottom: 0.1rem !important;
    font-weight: 600;
}

small.text-muted {
    font-style: italic;
}

.break {
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
    margin-left: 4rem !important;
    margin-right: 1rem !important;
}

.app-body {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
    min-height: calc(100vh - 152px) !important;
}

.app-footer {
    margin: 0.6rem 0.5rem !important;
}

.sidebar-profile {
    padding: 10px 13px !important;
}

.datepicker td, th {
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
}

.gvCustom.table thead th {
    height: 46px !important;
    background-color: var(--bs-primary) !important;
    color: white !important;
}

    .gvCustom.table thead th a {
        color: white !important;
    }


.turnoFecha {
    flex-grow: 0 !important;
    flex-basis: 120px !important;
}

.turnoHora {
    flex-grow: 0 !important;
    flex-basis: 80px !important;
}

.turnoSlot {
    flex-grow: 0 !important;
    flex-basis: 120px !important;
}

.dropdown-menu-scroll {
    max-height: 260px !important; /* Establece la altura máxima */
    overflow-y: auto !important; /* Habilita el scroll vertical */
}

#toast-container {
    position: fixed;
    top: 65px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.form-check {
    margin: 0 0 0 0;
    min-height: 2rem;
}

.form-check-input:invalid, .form-check-input.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

.accordion-button-custom {
    padding-top: 8px !important;
    padding-left: 10px !important;
    padding-bottom: 8px !important;
    padding-right: 10px !important;
    background-color: #e9fdea !important;
}

.accordion-item-custom {
    border-radius: 0rem !important;
}


.sidebarMenuScroll {
    height: calc(100vh - 160px) !important;
}

.sidebar-contact {
    margin: 9px 20px 10px 16px !important;
}

    .sidebar-contact i {
        bottom: 4px !important;
        left: 6px !important;
    }

/* TinyMCE */
.tox .tox-promotion {
    display: none !important;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Relación de aspecto 16:9 */
    margin-bottom: 15px; /* Espacio entre el video y el texto */
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.modal-text {
    text-align: center;
    font-size: 16px;
}

/* Spinner de los botones de Loading */
.spinner-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Help Modal Begin */
.modal-dialog-scrollable {
    max-height: 90vh; /* que no ocupe más del 90% de la altura de la ventana */
}

.custom-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 120px); /* Ajusta según el tamaño del header y footer del modal */
}

@media (max-width: 768px) {
    .modal-xl {
        max-width: 95%;
        margin: auto;
    }
}
/* Help Modal End */

/* Dropdown click-only: anula el hover del theme en dropdowns de grilla e items mas espaciados para mobile */
.dropdown.dropdown-click-only:hover > .dropdown-menu {
    display: none;
}
.dropdown.dropdown-click-only > .dropdown-menu.show {
    display: block;
}
.dropdown.dropdown-click-only .dropdown-item {
    padding: 0.6rem 1rem;
}

/* Evitar que table-responsive recorte los dropdowns de acciones */
.table-responsive {
    overflow: visible !important;
}
.table-responsive .dropdown-menu {
    z-index: 1050;
}

/* main.css OVERRIDES */
.app-hero-header {
    padding: .5rem 0.5rem !important;
}

.app-header {
    padding: 0 0.25rem 1px 1.25rem !important;
}

.modal-header-custom {
    background: var(--bs-primary) !important;
    min-height: 50px;
}

#helpContent .table tr:last-child td,
#helpContent .table tr:last-child th {
    border: var(--bs-border-width) solid var(--bs-table-border-color);
}

.bg-soft {
    background-color: #f6f9fb !important; /* Gris muy suave */
}

.badge-fixed {
    width: 70px;
    display: inline-block;
    text-align: center;
}

/* Boton Edit de la Grilla */
.btn-grid-edit {
    min-width: 70px;
}

@media (max-width: 767.98px) {
    .btn-grid-edit {
        min-width: unset;
    }
}

/* Popover más ancho para contenido con placeholders */
.popover {
    --bs-popover-max-width: 380px;
}

.popover-body code {
    font-size: 1em!important;
    
}

/* SignalR: Flash en el header al recibir notificación */
@keyframes headerFlash {
    0% {
        background-color: var(--bs-primary);
    }

    30% {
        background-color: #4a90ff;
    }

    100% {
        background-color: var(--bs-primary);
    }
}

.app-header.header-flash {
    animation: headerFlash 1s ease-in-out;
}

/* SignalR: Pulse en el badge del auto */
@keyframes badgePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

.badge-pulse {
    animation: badgePulse 0.5s ease-in-out 3;
}

/* SignalR: Highlight sutil al refrescar sesion */
@keyframes sessionRefreshPulse {
    0% { background-color: transparent; }
    25% { background-color: rgba(25, 135, 84, 0.2); }
    100% { background-color: transparent; }
}

@keyframes sessionRefreshBtnPulse {
    0% { border-color: #ffffff; background-color: #ffffff; }
    25% { border-color: #198754; background-color: #198754; }
    50% { border-color: #198754; background-color: #198754; }
    100% { border-color: #ffffff; background-color: #ffffff; }
}

@keyframes sessionRefreshBtnIconPulse {
    0% { color: #116aef; }
    25% { color: #ffffff; }
    50% { color: #ffffff; }
    100% { color: #116aef; }
}

.sidebar-profile.session-refreshed {
    animation: sessionRefreshPulse 2s ease-in-out;
    border-radius: 6px;
}

.pin-sidebar.session-refreshed,
.toggle-sidebar.session-refreshed {
    animation: sessionRefreshBtnPulse 2s ease-in-out;
}

.pin-sidebar.session-refreshed i,
.toggle-sidebar.session-refreshed i {
    animation: sessionRefreshBtnIconPulse 2s ease-in-out;
}

/* ── TenantsHealth: badges de estado y links clickeables ── */
.badge-health {
    font-size: 0.75rem;
    min-width: 80px;
    display: inline-block;
    text-align: center;
}

.tenant-link {
    color: inherit;
    transition: color 0.15s;
}

.tenant-link .ri-external-link-line {
    font-size: 0.7rem;
    opacity: 0.4;
    margin-left: 3px;
    vertical-align: middle;
    transition: opacity 0.15s;
}

.tenant-link:hover {
    color: var(--bs-primary);
}

.tenant-link:hover .ri-external-link-line {
    opacity: 1;
}

.license-link {
    transition: filter 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.license-link .ri-pencil-line {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.license-link:hover {
    filter: brightness(1.15);
    transform: scale(1.08);
}

.license-link:hover .ri-pencil-line {
    opacity: 1;
}

/* ── Columnas combinadas mobile (GridView responsive) ── */
.cell-label {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
    line-height: 1;
    margin-top: 4px;
}

.cell-label:first-child {
    margin-top: 0;
}

.cell-value {
    display: block;
}