/* ===== GENERAL ===== */

body {
    margin: 0;
    font-family: Segoe UI, Arial;
    /* fondo gris suave con degradado más claro */
    background: linear-gradient(180deg, rgba(60,60,60,0.95), rgba(90,90,90,0.95));
    color: white;
}


/* ===== TOP BAR ===== */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
background:linear-gradient(90deg,#000,#222);
border-bottom:1px solid #333;
}

.logo img{
height:45px;
}

.topbar-user{
font-size:14px;
color:#ddd;
}

.topbar-user a{
color:#fff;
margin-left:15px;
text-decoration:none;
background:#444;
padding:6px 12px;
border-radius:6px;
transition:0.2s;
}

.topbar-user a:hover{
background:#666;
}


/* ===== TABS ===== */

.tabs{
display:flex;
gap:10px;
padding:20px 40px;
border-bottom:1px solid #333;
}

.tab{
background:#222;
border:none;
color:#ccc;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
transition:0.2s;
}

.tab:hover{
background:#333;
color:white;
}

.tab.active{
background:linear-gradient(90deg,#444,#666);
color:white;
}


/* ===== CONTENT ===== */

.tab-content{
display:none;
padding:20px 40px;
}

.tab-content.active{
display:block;
}


/* ===== SUBTABS ===== */

.subtabs{
display:flex;
gap:8px;
margin-top:10px;
margin-bottom:10px;
}

.subtab{
background:#333;
border:none;
padding:6px 12px;
color:#ddd;
border-radius:6px;
cursor:pointer;
}

.subtab.active{
background:#777;
color:white;
}

.subtab-content{
display:none;
}

.subtab-content.active{
display:block;
}


/* ===== BUSCADOR ===== */

#busqueda{
    padding:12px;
    width:350px;
    border-radius:8px;
    margin-bottom:25px;
    background:#1a1a1a;
    color:white;              /* TEXTO EN BLANCO */
}

/* placeholder (texto "Buscar video...") */
#busqueda::placeholder{
    color:#ccc;               /* gris claro visible */
    opacity:1;
}


/* ===== GRID VIDEOS ===== */

.card-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:25px;
}

.card{
background:#1c1c1c;
border-radius:12px;
overflow:hidden;
cursor:pointer;
transition:0.25s;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.card:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(0,0,0,0.8);
}

.card img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.card-body{
padding:10px;
}

.card-body b{
font-size:14px;
color:#fff;
}


/* ===== FORMULARIOS ===== */

input[type=text],
input[type=file]{
background:#222;
border:none;
padding:10px;
color:white;
border-radius:6px;
}

button{
background:linear-gradient(90deg,#555,#888);
border:none;
color:white;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:linear-gradient(90deg,#777,#aaa);
}


/* ===== MODAL VIDEO ===== */

.modal-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-box{
position:relative;
background:#000;
border-radius:12px;
padding:20px;
width:90%;
max-width:1000px;
box-shadow:0 0 30px rgba(0,0,0,0.8);
}

.modal-close{
position:absolute;
top:-15px;
right:-15px;
width:40px;
height:40px;
border-radius:50%;
background:#ff3b3b;
border:none;
color:white;
font-size:20px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.modal-close:hover{
background:#ff0000;
}

.video-wrapper{
position:relative;
padding-top:56.25%;
}

.video-wrapper iframe,
.video-wrapper video{
position:absolute;
inset:0;
width:100%;
height:100%;
border-radius:8px;
}


/* ===== TITULOS ===== */

h2{
margin-top:30px;
color:#ddd;
border-left:4px solid #777;
padding-left:10px;
}

h3{
color:#aaa;
margin-top:10px;
}

.topbar-right{
display:flex;
align-items:center;
gap:20px;
}

.menu-container{
position:relative;
z-index:9999;
}

.hamburger{
width:30px;
cursor:pointer;
}

.hamburger span{
display:block;
height:4px;
background:white;
margin:5px 0;
border-radius:2px;
}

.menu-dropdown{

display:none;
position:absolute;
right:0;
top:40px;

background:#222;

border-radius:8px;

min-width:200px;

z-index:9999;   /* MUY IMPORTANTE */

}

.menu-dropdown a{

display:block;
padding:12px;
color:white;
text-decoration:none;

}

.menu-dropdown a:hover{
background:#444;
}

.menu-dropdown.show{
display:block;
}

.main-content{
padding:30px;
}

.footer{

text-align:center;
padding:20px;
opacity:0.7;

}

/* ===== LOGIN ===== */

.login-wrapper{

display:flex;
justify-content:center;
align-items:center;

min-height:calc(100vh - 140px); /* ajusta header+footer */

}

.login-box{

background:rgba(0,0,0,0.4);

padding:40px;

border-radius:12px;

width:320px;

box-shadow:0 0 20px rgba(0,0,0,0.6);

text-align:center;

}


/* inputs reutilizan tu estilo global */

.login-box input{
    width: 100%;
    box-sizing: border-box;   /* 🔥 clave */
    margin: 10px 0;
}


/* error */

.login-error{
color:#ff6b6b;
margin-bottom:10px;
}





/* link */

.login-link{
margin-top:15px;
}


/* menú desactivado */

.hamburger.disabled{
opacity:0.3;
cursor:default;
pointer-events:none;
}

/* ===== LOGIN PRO ===== */

.login-wrapper{

display:flex;
justify-content:center;
align-items:center;

min-height:calc(100vh - 140px);

/* MISMO FONDO QUE EL BODY */
background: transparent;

}


/* CAJA */

.login-box{

background:rgba(0,0,0,0.35); /* más claro que antes */

padding:40px;

border-radius:16px;

width:320px;

box-shadow:0 0 25px rgba(0,0,0,0.6);

backdrop-filter:blur(4px);

text-align:center;

}


/* INPUTS */

.login-box input{

width:100%;
margin:10px 0;

background:#111;
border:1px solid #333;
color:white;

transition:0.2s;

}


/* EFECTO FOCUS */

.login-box input:focus{

border-color:#888;
outline:none;
box-shadow:0 0 5px rgba(255,255,255,0.2);

}


/* ERROR VISUAL */

.login-error{

background:rgba(255,0,0,0.15);
border:1px solid #ff4d4d;

padding:8px;
border-radius:6px;

color:#ff6b6b;

}


/* BOTÓN PRO */

.login-box button{
    width:100%;
    box-sizing:border-box;
}

.login-box button:hover{

background:linear-gradient(90deg,#888,#ccc);
transform:scale(1.03);

}


/* ANIMACIÓN ENTRADA */

.fade-in{

animation:fadeIn 0.6s ease;

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* CONTENEDOR DE VIDEOS */

#videos{
    padding: 30px 60px;
    max-width: 1400px;
    margin: auto;
}

/* ===== SUBIR VIDEO CENTRADO ===== */
.subir-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 140px);
}

/* CAJA */
.subir-box {
    background: rgba(0,0,0,0.30);
    padding: 40px;
    border-radius: 16px;
    width: 350px;
    max-width: 90%;        /* evita que se salga en pantallas pequeñas */
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    text-align: left;
}

/* FORMULARIO */
.subir-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;             /* separación uniforme entre campos */
}

/* INPUTS Y BOTONES */
.subir-box input[type=text],
.subir-box input[type=file],
.subir-box button {
    width: 100%;            /* ocupa todo el ancho del contenedor */
    box-sizing: border-box; /* padding incluido en el ancho */
    border-radius: 6px;
    padding: 10px;
    border: none;
}

/* BOTÓN */
.subir-box button {
    cursor: pointer;
    background: linear-gradient(90deg,#555,#888);
    color: white;
    transition: 0.2s;
}

.subir-box button:hover {
    background: linear-gradient(90deg,#777,#aaa);
}

/* MENSAJE */
.subir-box p {
    color: #ddd;
    font-size: 14px;
    margin-bottom: 10px;
}
/* CONTENEDOR MIS VIDEOS */

#misvideos{
    padding: 30px 60px;
    max-width: 1400px;
    margin: auto;
}

/* ===== ADMIN PANEL ===== */

.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
    margin-top:20px;
}

.admin-card{
    text-decoration:none;
    color:white;
}

.admin-card-body{
    background:#1c1c1c;
    padding:25px;
    border-radius:14px;
    transition:0.25s;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.admin-card-body:hover{
    transform:scale(1.05);
    background:linear-gradient(135deg,#333,#555);
    box-shadow:0 8px 25px rgba(0,0,0,0.7);
}

.admin-card-body h3{
    margin:0 0 10px;
    color:#fff;
}

.admin-card-body p{
    margin:0;
    color:#bbb;
    font-size:14px;
}

/* ===== ADMIN CONTENEDOR ===== */

#admin{
    text-align:center;
}

/* ===== STATS ===== */

.admin-stats{
    display:flex;
    justify-content:center;
    gap:30px;
    margin:30px 0;
    flex-wrap:wrap;
}

.stat-box{
    background:#1c1c1c;
    padding:20px 30px;
    border-radius:12px;
    min-width:180px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.stat-box h3{
    margin:0;
    font-size:28px;
    color:white;
}

.stat-box p{
    margin:5px 0 0;
    color:#bbb;
}

/* ===== GRID CENTRADO ===== */

.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,260px));
    justify-content:center;
    gap:25px;
    margin-top:20px;
}

/* ===== CARDS ===== */

.admin-card{
    text-decoration:none;
    color:white;
}

.admin-card-body{
    background:#1c1c1c;
    padding:25px;
    border-radius:14px;
    transition:0.25s;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.admin-card-body:hover{
    transform:scale(1.05);
    background:linear-gradient(135deg,#333,#555);
    box-shadow:0 8px 25px rgba(0,0,0,0.7);
}

/* Gestion de videos */

form{
    background:#1c1c1c;
    padding:20px;
    border-radius:12px;
    max-width:700px;
    margin-bottom:30px;
}

form input,
form select{
    background:#222;
    color:white;
    border:none;
    padding:10px;
    margin:5px;
    width:calc(50% - 12px);
}

#preview{
    max-width:200px;
    margin-top:10px;
    border-radius:6px;
}

.btn-volver{
    display:inline-block;
    margin-bottom:20px;
    color:white;
    text-decoration:none;
    background:#444;
    padding:8px 15px;
    border-radius:6px;
}

.login-success{
    background: rgba(0,255,0,0.15);
    border: 1px solid #4dff88;
    padding: 8px;
    border-radius: 6px;
    color: #6bff9e;
    margin-bottom: 10px;
}

/* ===== CARDS REDES Y WHATSAPP ===== */
.social-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    width: 220px;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background: #1c1c1c;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.social-card img {
    width: 32px;
    height: 32px;
    background: transparent;  /* asegura que no haya fondo */
    border-radius: 0;          /* quita bordes redondeados innecesarios */
    object-fit: contain;       /* mantiene proporción dentro del espacio */
    display: block;            /* elimina espacio extra abajo de la imagen */
}

.social-card span {
    font-weight: bold;
}

/* Hover efecto igual que las cards de video */
.social-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}

/* Colores especiales para WhatsApp */
.social-whatsapp-privado {
    background: #25D366;
    color: white;
}

.social-whatsapp-comunidad {
    background: #128C7E;
    color: white;
}

/* ===== LOGO ===== */
.logo a {
    display: flex;
    align-items: center;
    gap: 10px; /* espacio entre logo y texto */
    text-decoration: none;
}

.logo-img {
    height: 60px;   /* ajusta el tamaño del logo principal */
    width: auto;
}

.logo-texto {
    height: 50px;   /* ajusta el tamaño del logo de texto */
    width: auto;
}

.main-content h2{
    border-left: none;
    padding-left: 0;
}


.login-box h2{
    border-left: none;
    padding-left: 0;
    text-align: center; /* opcional, queda mejor en login */
}

/* ===== LOGO DE FONDO ===== */
body::before{
    content:"";
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1);

    width:60vw;
    height:60vw;
    max-width:800px;
    max-height:800px;

    background:url('pictures/logo.png') no-repeat center;
    background-size:contain;

    opacity:0.08; /* 👈 un poco más visible */
    pointer-events:none;

    z-index:-1;
	

    animation:logoFloat 8s ease-in-out infinite; /* 👈 más rápida */
}


@keyframes logoFloat{

    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0.06;
    }

    50%{
        transform:translate(-48%,-52%) scale(1.12); /* 👈 más movimiento */
        opacity:0.12;
    }

    100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0.06;
    }

}

/* ===== FOOTER ===== */

.footer{
    text-align:center;
    padding:25px;
    opacity:0.9;
}

/* contenedor interno */
.footer-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

/* patrocinadores */
.footer-sponsors{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:#bbb;
}

.footer .footer-sponsors img{
    height:18px !important;   /* 🔥 forzado */
    width:auto;
    max-width:70px;

    object-fit:contain;

    opacity:0.85;
    transition:0.3s;

    display:inline-block;
}

.footer-sponsors img:hover{
    opacity:1;
    transform:scale(1.05);
}

.footer{
    border-top:1px solid #333;
}

.footer-sponsors span{
    font-size:13px;
    color:#aaa;
}

/* ===== TARIFAS ===== */

#tarifas{
    text-align:center;
}

/* GRID */
.tarifas-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:30px;
}

/* CARD */
.tarifa-card{
    background:#1c1c1c;
    padding:30px;
    border-radius:16px;
    box-shadow:0 4px 15px rgba(0,0,0,0.5);
    transition:0.3s;
}

.tarifa-card:hover{
    transform:scale(1.05);
    box-shadow:0 10px 30px rgba(0,0,0,0.8);
}

/* DESTACADO */
.tarifa-card.destacado{
    background:linear-gradient(135deg,#333,#555);
    transform:scale(1.05);
}

/* TITULO */
.tarifa-card h3{
    margin-bottom:10px;
    color:#fff;
}

/* PRECIO */
.precio{
    font-size:26px;
    font-weight:bold;
    margin-bottom:5px;
}

.detalle{
    font-size:13px;
    color:#bbb;
    margin-bottom:15px;
}

/* LISTA */
.tarifa-card ul{
    list-style:none;
    padding:0;
    text-align:left;
}

.tarifa-card li{
    margin-bottom:10px;
    padding-left:18px;
    position:relative;
}

/* ICONO */
.tarifa-card li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#4caf50;
}