:root{
  --orange:#ff7a00;
  --bg:#2b2e33;
}

*{box-sizing:border-box;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;}
body{margin:0;background:var(--bg);color:#ffffff;overflow-x:hidden;scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;}

/* Video de fondo full body */
#bg-video {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:-1;
    filter:brightness(0.5);
}

/* Header y slider */
.main-header{position:relative; height:50vh; min-height:200px; overflow:hidden; z-index:10;}
.header-slider{position:absolute; top:0; left:0; width:100%; height:70%; z-index:1;}
.header-slider .slide{
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease-in-out;
    display:flex; justify-content:center; align-items:center;
}

/* Texto animado 3D */
.slide-text{
    color:white; text-align:center; font-size:clamp(1.4rem,4vw,3rem);
    text-shadow:0 25px 50px rgba(0,0,0,.8);
    transform:translateZ(30px) rotateX(6deg);
    animation:text3d 6s ease-in-out infinite;
    padding:20px;
    background:linear-gradient(97deg,rgba(0,0,0,0.15), rgba(0,0,0,0.25));
    border-radius:15px;
    z-index:2;
}
@keyframes text3d{
  0%{transform:translateZ(20px) rotateX(0)}
  50%{transform:translateZ(40px) rotateX(6deg)}
  100%{transform:translateZ(20px) rotateX(0)}
}

/* Menú centrado sobre slider */
.main-menu{
    position:absolute;
    top:55%; /* antes estaba 50%, ahora más abajo */
    left:50%;
    transform:translate(-50%,-50%);
    display:flex; gap:12px;
    z-index:7;
}


/* Botones neomórficos */
.menu-btn{
    padding: 10px 18px;
    border-radius: 12px;
    background: linear-gradient(145deg, #2b2e33, #000000);
    box-shadow: 10px 8px 16px rgba(0, 0, 0, 0.12), -8px -8px 16px rgb(251 255 0);
    border: none;
    color: var(--orange);
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.menu-btn:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow: 12px 12px 24px rgba(0,0,0,.14), -6px -6px 12px rgba(255,255,255,.7);
}

/* POSTS */
.fullstack{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:10px;}
.post-full{width:100%; display:flex; justify-content:center; align-items:center; margin:15px 0;}
.post-inner{
    max-width:1200px; width:100%;
    background:rgba(255,255,255,0.40);
    padding:16px;
    border-radius:20px;
    backdrop-filter:blur(1px);
    text-align:center;
}
.post-media img, .post-media video, .audio-player{width:100%; max-width:900px; margin:12px auto; display:block;}

/* Audio player */
.audio-player{display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#ff8c00,#ffa500); border-radius:12px; padding:10px; max-width:700px; margin:12px auto; box-shadow:5px 5px 15px rgba(0,0,0,0.3);}
.audio-player button{background:white; border:none; border-radius:50%; width:40px; height:40px; margin-right:12px; cursor:pointer; font-size:18px; transition:transform 0.2s;}
.audio-player button:hover{transform:scale(1.1);}
.audio-progress{flex:1; height:8px; border-radius:4px; background:rgba(255,255,255,0.3); overflow:hidden;}
.audio-progress-inner{height:100%; width:0; background:linear-gradient(45deg,#fff3,#fff); border-radius:4px; box-shadow:0 0 5px rgba(255,255,255,0.6); transition:width 0.1s linear;}

/* Footer paginación */
.main-footer{text-align:center; padding:12px; background:rgba(255,255,255,0.3); border-radius:10px; margin-top:20px;}
.pagination-btn{padding:6px 12px; margin:0 3px; border:none; border-radius:6px; background:#ff7a00; color:#fff; cursor:pointer; transition: transform 2.2s;}
.pagination-btn:hover{transform:scale(2.1);}
.pagination-btn.active{background:#fff; color:#ff7a00; font-weight:bold;}

/* Responsive */
@media(max-width:768px){
    .post-inner, .post-media img, .post-media video, .audio-player{max-width:90%;}
    .slide-text{font-size:clamp(1rem,5vw,2rem);}
}

/* ---------- DASHBOARD ---------- */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    padding:20px;
}

/* Tarjetas 3D */
.card{
    background:linear-gradient(145deg,#ffffff,#ececec);
    border-radius:15px;
    padding:20px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -5px -5px 15px rgba(255,255,255,0.7);
    transition: transform 0.3s, box-shadow 0.3s;
    perspective:1000px;
}
.card:hover{
    transform: rotateX(5deg) rotateY(5deg);
    box-shadow: 12px 12px 24px rgba(0,0,0,0.15), -6px -6px 16px rgba(255,255,255,0.8);
}

/* Formularios CRUD */
.card form input, .card form textarea, .card form select, .card form button{
    display:block;
    width:100%;
    margin:10px 0;
    padding:10px;
    border-radius:10px;
    border:1px solid #ccc;
}
.card form button{
    background:linear-gradient(145deg,#ff7a00,#ffa500);
    color:#fff;
    font-weight:bold;
    border:none;
    cursor:pointer;
    transition: transform 0.2s;
}
.card form button:hover{
    transform:scale(1.05);
}

/* Lista de publicaciones CRUD */
.full-crud{
    max-height:500px;
    overflow:auto;
}
.post-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    margin:6px 0;
    background:rgba(255,255,255,0.85);
    border-radius:8px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}
.post-row:hover{
    transform:translateX(2px);
}

/* Botones de borrar */
.btn-del{
    background:linear-gradient(145deg,#ff4c4c,#ff0000);
    border:none;
    color:#fff;
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
    transition: transform 0.2s;
}
.btn-del:hover{ transform:scale(1.1); }

/* ---------- GRÁFICAS ---------- */
.graphs-container{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:20px;
}

/* Gráficas de pastel */
.pie-chart-container{
    width:150px;
    height:150px;
    position:relative;
    text-align:center;
}

/* Título de cada gráfica */
.pie-chart-container p{
    margin-top:8px;
    font-size:0.9rem;
    font-weight:bold;
}

/* Gráfica de barras */
.bar-chart-container{
    width:100%;
    max-width:900px;
    margin:30px auto;
    background:rgba(255,255,255,0.9);
    padding:20px;
    border-radius:15px;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.1), -5px -5px 15px rgba(255,255,255,0.7);
}
.bar-chart-container canvas{
    width:100% !important;
    height:350px !important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }
    .graphs-container{
        flex-direction:column;
        align-items:center;
    }
}


/* ---------- GRÁFICAS DASHBOARD ---------- */
.graphs-container{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:20px;
}

/* Contenedor de cada gráfica de pastel */
.pie-chart-container{
    width:150px;
    height:150px;
    position:relative;
    text-align:center;
    border-radius:50%;
    background:rgba(255,255,255,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:5px 5px 15px rgba(0,0,0,0.15), -5px -5px 15px rgba(255,255,255,0.7);
    transform-style: preserve-3d;
    animation: rotate3d 8s linear infinite;
}

/* Animación 3D para gráficas de pastel */
@keyframes rotate3d{
    0%{transform: rotateX(0deg) rotateY(0deg);}
    25%{transform: rotateX(10deg) rotateY(15deg);}
    50%{transform: rotateX(20deg) rotateY(30deg);}
    75%{transform: rotateX(10deg) rotateY(15deg);}
    100%{transform: rotateX(0deg) rotateY(0deg);}
}

/* Título de cada gráfica */
.pie-chart-container p{
    position:absolute;
    bottom:-25px;
    width:100%;
    font-weight:bold;
    font-size:0.9rem;
    text-align:center;
}

/* Contenedor gráfica de barras */
.bar-chart-container{
    width:100%;
    max-width:900px;
    margin:30px auto;
    background:rgba(255,255,255,0.9);
    padding:20px;
    border-radius:15px;
    box-shadow:8px 8px 20px rgba(0,0,0,0.1), -5px -5px 15px rgba(255,255,255,0.7);
    transform-style:preserve-3d;
    animation: float3d 6s ease-in-out infinite alternate;
}
.bar-chart-container canvas{
    width:100% !important;
    height:350px !important;
}

/* Animación flotante ligera */
@keyframes float3d{
    0%{transform: translateZ(0px) rotateX(0deg);}
    50%{transform: translateZ(10px) rotateX(5deg);}
    100%{transform: translateZ(0px) rotateX(0deg);}
}

/* Botones y tarjetas dashboard */
.card{
    background:linear-gradient(145deg,#000000,#2196f3);
    border-radius:15px;
    padding:20px;
    box-shadow:10px 10px 20px rgba(0,0,0,0.1), -5px -5px 15px rgba(255,255,255,0.7);
    transition: transform 0.3s, box-shadow 0.3s;
    perspective:1000px;
}
.card:hover{
    transform: rotateX(5deg) rotateY(5deg);
    box-shadow: 12px 12px 24px rgba(0,0,0,0.15), -6px -6px 16px rgba(255,255,255,0.8);
}

/* Lista de publicaciones CRUD */
.full-crud{
    max-height:500px;
    overflow:auto;
}
.post-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    margin:6px 0;
    background:rgba(3 142 244);
    border-radius:8px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}
.post-row:hover{ transform:translateX(2px);}
.btn-del{
    background:linear-gradient(145deg,#ff4c4c,#ff0000);
    border:none;
    color:#fff;
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
    transition: transform 0.2s;
}
.btn-del:hover{ transform:scale(1.1); }