:root {
    --vm-primary: #0d6efd;
    --vm-bg: #f8f9fa;
    --vm-header-height: 64px;
}

/* Layout base */
body {
    background-color: var(--vm-bg);

}


.container-80{
  margin: 0 auto;
  width: 80%;
}
.app-header {
    height: var(--vm-header-height);
    z-index: 1030;
}

.main-content {
    padding-top: calc(var(--vm-header-height) + 1.5rem);
}

/* Avatar redondo */
.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
}

.avatar-initial {
    display: inline-block;
}

/* Cards barra lateral */
.video-side-card img {
    object-fit: cover;
}

/* Truncado de texto a 2 líneas */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Login */
.login-body {
    background: radial-gradient(circle at top, #ffffff 0, #f5f7fb 40%, #e9ecef 100%);
}

/* Video description */
.video-description {
    max-width: 720px;
}

/* Offcanvas */
.offcanvas.text-bg-dark .list-group-item {
    border-color: rgba(255, 255, 255, 0.05);
}

.offcanvas.text-bg-dark .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Utilidades */
.bg-light-subtle {
    background-color: #f1f3f5;
}

.object-fit-cover {
    object-fit: cover;
}