/* ESTILOS GLOBALES */

/* Boton principal con degradado azul */
.btn-gradient {
    background: linear-gradient(90deg, #0d6efd, #3a8dde);
    color: #fff;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(90deg, #3a8dde, #0d6efd);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-gradient:active {
    transform: translateY(1px);
}

/* Inputs con borde azul al enfocar */
input:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.3);
}

/* Cards con animacion suave */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Cards informativas en inicio */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Utilidades de color */
.bg-gradient-primary {
    background: linear-gradient(135deg, #0d6efd, #3a8dde);
}

.letra-azul {
    color: #0d6efd;
}

/* VISTA DE INICIO */

.inicio-hero {
    background: linear-gradient(135deg, #0d1b2a, #1b2a45);
}

.inicio-badge-gradient {
    background: linear-gradient(90deg, #0d6efd, #3a8dde);
}

.inicio-logo-img {
    max-width: 380px;
}

/* VISTA DE REGISTRO */

.registro-main-bg {
    background: linear-gradient(135deg, #0d1b2a, #1b2a45);
}

.registro-container {
    max-width: 460px;
}

.registro-card {
    background-color: rgba(255, 255, 255, 0.95);
}

.registro-title {
    color: #0d1b2a;
}

.registro-input-shadow {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* VISTA DE USUARIOS */

.usuarios-page {
    background: radial-gradient(circle at 5% 15%, #e6f0ff 0%, transparent 42%),
        radial-gradient(circle at 92% 80%, #d8e8ff 0%, transparent 40%),
        #f8fbff;
}

.usuarios-hero {
    background: linear-gradient(120deg, #0d1b2a, #1e3a5f, #2f6fd7);
}

.usuarios-table thead th {
    background-color: #f3f8ff;
    color: #1b2a45;
    font-weight: 700;
    border-bottom: 0;
}

.avatar-mini {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd, #3a8dde);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

/* VISTA DE ERROR */

.error-home-btn {
    border: none;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
}

/* VISTA SUBIR VIDEO */

.subir-video-page {
    background: radial-gradient(circle at 12% 12%, #e8f1ff 0%, transparent 35%),
        radial-gradient(circle at 90% 80%, #deecff 0%, transparent 40%),
        #f8fbff;
}

.subir-video-hero {
    background: linear-gradient(130deg, #0d1b2a, #1e3a5f, #2f6fd7);
}

.video-preview {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #0d1b2a;
}