#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Sidebar hamburger (3 lineas -> X), sin depender de custom.min.js --- */
.hamburger .line {
    width: 100%;
    background: var(--secondary, #464a53);
}

.hamburger.is-active .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Toasts propios (ToastService/ToastHost), sin toastr.js --- */
.app-toast-host {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 1090;
    width: 22rem;
    max-width: calc(100vw - 2rem);
}

.app-toast-host .toast {
    margin-bottom: 0.5rem;
}

/* --- Items de menu deshabilitados ("Proximamente") --- */
.deznav .metismenu li.disabled > a {
    pointer-events: none;
    opacity: 0.45;
}

.deznav .metismenu li .badge-soon {
    margin-left: auto;
    font-size: 0.625rem;
}

/* --- Login split screen --- */
.auth-side-image {
    background: linear-gradient(160deg, #0D99FF 0%, #0b6fc2 100%);
}

/* --- Logo del sidebar: el template trae .nav-header .brand-title a 2.375rem (~38px), pensado
   para un nombre corto - "AlquileresPY" no entra en el ancho del nav-header a ese tamano y se
   superpone con el boton hamburguesa. Se achica el texto y el icono para que entren los dos sin
   pisarse (el selector necesita el mismo prefijo ".nav-header" para igualar la especificidad de
   la regla del template y poder pisarla). --- */
.nav-header .brand-title {
    font-size: 1.35rem;
    white-space: nowrap;
}

.brand-logo {
    overflow: hidden;
}

.nav-header .brand-logo i {
    font-size: 1.35rem !important;
}

/* --- Paginacion (DataTable): .pagination-sm deja los page-link en ~24px de ancho, suficiente
   para un numero de pagina pero no para "Anterior"/"Siguiente" - el texto se desborda y el
   siguiente boton lo tapa visualmente. Se les da ancho libre solo a esos dos. --- */
.pagination .page-link {
    white-space: nowrap;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    width: auto;
    min-width: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* --- Filas "esqueleto" mientras carga una tabla --- */
.skeleton-row td {
    background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    height: 2.5rem;
}

@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --- Modulo de Porteria: avatar por visitante, badges de motivo coloreadas y overlay de escaneo QR --- */
.porteria-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.porteria-badge-motivo {
    font-weight: 500;
}

.porteria-color-visita { background: #E5F3FF; color: #0D6EFD; }
.porteria-color-delivery { background: #FFF3E0; color: #B45309; }
.porteria-color-servicio { background: #E0F7FA; color: #0E7490; }
.porteria-color-proveedor { background: #EDE9FE; color: #6D28D9; }
.porteria-color-mudanza { background: #FCE7F3; color: #BE185D; }
.porteria-color-otro { background: #F1F3F5; color: #495057; }

.porteria-stat {
    text-align: right;
}

.porteria-stat-numero {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: #0D99FF;
}

.porteria-stat-etiqueta {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.porteria-invitacion-ok {
    background: #E9F9EE;
    color: #146C2E;
    border: 1px solid #BFE8CB;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
}

/* Marco punteado sobre el video mientras se busca un QR en el modal de escaneo. */
.porteria-scan-overlay {
    position: absolute;
    inset: 0.5rem;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 0.5rem;
    pointer-events: none;
}

/* --- Modulo de Finanzas: tarjetas de totales por metodo de pago y sus badges a juego --- */
.finanzas-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 0.65rem;
    padding: 0.9rem 1.1rem;
    height: 100%;
}

.finanzas-stat i {
    font-size: 1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.finanzas-stat-valor {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.finanzas-stat-etiqueta {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.finanzas-stat-efectivo i { background: #E9F9EE; color: #1A8A3D; }
.finanzas-stat-transferencia i { background: #E5F3FF; color: #0D6EFD; }
.finanzas-stat-tarjeta i { background: #F3E8FF; color: #7C3AED; }
.finanzas-stat-cheque i { background: #FFF3E0; color: #B45309; }

.finanzas-badge-metodo {
    font-weight: 500;
}

.finanzas-color-efectivo { background: #E9F9EE; color: #1A8A3D; }
.finanzas-color-transferencia { background: #E5F3FF; color: #0D6EFD; }
.finanzas-color-tarjeta { background: #F3E8FF; color: #7C3AED; }
.finanzas-color-cheque { background: #FFF3E0; color: #B45309; }

/* --- Avatares de iniciales y tarjetas de resumen reutilizados en los listados de
   Propietarios/Inquilinos/Contratos/Propiedades (mismo lenguaje visual que Porteria/Finanzas) --- */
.list-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.list-avatar-0 { background: #E5F3FF; color: #0D6EFD; }
.list-avatar-1 { background: #E9F9EE; color: #1A8A3D; }
.list-avatar-2 { background: #FFF3E0; color: #B45309; }
.list-avatar-3 { background: #F3E8FF; color: #7C3AED; }
.list-avatar-4 { background: #FCE7F3; color: #BE185D; }
.list-avatar-5 { background: #E0F7FA; color: #0E7490; }

.list-badge-tipo {
    font-weight: 500;
}

.list-tipo-casa { background: #E9F9EE; color: #1A8A3D; }
.list-tipo-departamento { background: #E5F3FF; color: #0D6EFD; }
.list-tipo-local { background: #FFF3E0; color: #B45309; }
.list-tipo-oficina { background: #F3E8FF; color: #7C3AED; }
.list-tipo-terreno { background: #F1F3F5; color: #495057; }