/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   VARIABLES CSS
   ======================================== */
:root {
    /* COLORES OFICIALES SENA */
    --green-primary:   #39A900;
    --green-secondary: #007832;
    --blue-primary:    #00304D;

    --bg-light: #F6F6F6;
    --white:    #FFFFFF;
    --black:    #000000;

    /* VARIABLES DEL PROYECTO */
    --green-dark:  #007832;
    --green-mid:   #39A900;
    --green-light: #007832;
    --green-hero:  #00304D;
    --green-title: #007832;

    --text-dark:  #000000;
    --text-muted: #555555;

    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.10);
    --shadow-btn:  0 10px 20px rgba(57, 169, 0, 0.30);

    --radius-card: 15px;
    --radius-btn:  30px;
    --transition:  0.3s ease;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* ========================================
   HEADER
   ======================================== */
header {
    background: linear-gradient(135deg, #007832 0%, #39A900 100%);
    color: var(--white);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo span {
    color: #d1dbdd;
}

/* ========================================
   MENÚ DE NAVEGACIÓN
   ======================================== */
.menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    background-color:#39A900;
    padding: 10px;
}

.menu-item {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color var(--transition), color var(--transition);
    font-weight: 500;
}

.menu-item:hover {
    background-color: #2e8603;
    color: var(--white);
}

/* ========================================
   DROPDOWN
   ======================================== */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 190px;
    min-height: 45px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 999;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    overflow: hidden;
}

.menu-item:hover .dropdown-content {
    display: flex;
    flex-direction: column;
    animation: slideDown var(--transition);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   CONTENEDOR DE VIDEO / MEDIA
   ======================================== */
.media-container {
    width: 100%;
    height: 220px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-container video,
.media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   TEXTO DESCRIPTIVO DEL DROPDOWN
   ======================================== */
.dropdown-text {
    padding: 15px;
    text-align: center;
    background: linear-gradient(135deg, #007832 0%, #39A900 100%);
    color: var(--white);
    flex-shrink: 0;
}

.dropdown-text h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.dropdown-text p {
    font-size: 13px;
    opacity: 0.9;
}

/* ========================================
   EFECTO PREVIEW (GIF / IMAGEN)
   ======================================== */
.preview-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    border-radius: 5px;
}

.menu-item:hover .preview-media {
    opacity: 0.3;
}

/* ========================================
   ÁREA DE PREVISUALIZACIÓN PRINCIPAL
   ======================================== */
.preview-area {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #00304D 0%, #007832 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 24px;
    position: relative;
    overflow: hidden;
}

.preview-content {
    text-align: center;
    z-index: 2;
}

.preview-content h2 {
    font-size: 42px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.preview-content p {
    font-size: 20px;
    max-width: 800px;
    margin: auto;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}

/* Variante sin interacción */
.preview-area-not {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #00304D 0%, #007832 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 24px;
    position: relative;
    overflow: hidden;
}

.preview-content-not {
    text-align: center;
    z-index: 2;
}

/* Capa oscura encima de la imagen */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ========================================
   SECCIÓN HERO
   ======================================== */
.hero {
    padding: 80px 40px;
    text-align: center;
    background-color: var(--white);
}

.hero--compact {
    padding: 40px;
}

.hero h1 {
    font-size: 43px;
    margin-bottom: 20px;
    color: #007832;
}

.hero h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto 40px;
}

/* ========================================
   BOTÓN
   ======================================== */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: #39A900;
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-btn);
    font-weight: bold;
    transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.btn:hover {
    background-color: #007832;
    transform: translateY(-3px);
    box-shadow: var(--shadow-btn);
}

/* ========================================
   TARJETAS DE INFORMACIÓN
   ======================================== */
.info-section {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--green-title);
    text-align: center;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.cards {
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 30px;
    box-shadow: var(--shadow-card);
    border-top: 5px solid #39A900;
    transition: transform var(--transition);
}

.cards:hover {
    transform: translateY(-10px);
}

.cards h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--green-dark);
}

.cards p {
    color: var(--text-muted);
    line-height: 1.8;
}

/* ========================================
   VIDEO CENTRADO
   ======================================== */
.video-centrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    gap: 25px;
    padding: 20px;
}

.video-centrado video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.video-centrado video:hover {
    transform: scale(1.02);
}

/* Video destacado (CBC) */
.video-cbc {
    width: 80%;
    max-width: 700px;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    display: block;
    margin: auto;
    transition: transform var(--transition);
}

.video-cbc:hover {
    transform: scale(1.03);
}

/* ========================================
   HERO GRID
   ======================================== */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

.hero-video {
    text-align: center;
}

.hero-video video {
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-card);
    border: 3px solid var(--green-dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    display: block;
    margin: auto;
    transition: transform var(--transition);
}

.hero-video video:hover {
    transform: scale(1.02);
}

.hero-texto {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    padding: 35px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: left;
    border-left: 6px solid #39A900;
}

.hero-texto h3 {
    color: var(--green-title);
    margin-bottom: 20px;
}

.hero-texto p {
    line-height: 1.9;
    margin-bottom: 15px;
}

/* ========================================
   GALERÍA
   ======================================== */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1800px;
    margin: 40px auto;
    padding: 20px;
}

.galeria-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.galeria-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #39A900;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.galeria-item img:hover {
    transform: scale(1.03);
}

/* ========================================
   SEPARADOR
   ======================================== */
.separador {
    width: 100%;
    height: 60px;
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background-color: #00304D;
    color: var(--white);
    padding: 40px;
    text-align: center;
}

footer p {
    opacity: 0.7;
}

/* ========================================
   RESPONSIVE — max-width: 1200px (Tablets grandes)
   ======================================== */
@media (max-width: 1200px) {
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   RESPONSIVE — max-width: 992px (Tablets)
   ======================================== */
@media (max-width: 992px) {
    .hero,
    .info-section {
        padding: 40px 20px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero h2 {
        font-size: 28px;
    }

    .section-title {
        font-size: 30px;
    }

    .video-cbc {
        width: 95%;
    }
}

/* ========================================
   RESPONSIVE — max-width: 900px
   ======================================== */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-texto {
        text-align: center;
        border-left: none;
        border-top: 6px solid #39A900;
    }

    .hero-video video {
        max-width: 100%;
    }
}

/* ========================================
   RESPONSIVE — max-width: 768px (Móvil)
   ======================================== */
@media (max-width: 768px) {
    /* Header */
    header {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
        text-align: center;
    }

    .logo {
        font-size: 20px;
    }

    /* Menú */
    .menu {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        align-items: center;
    }

    .menu-item {
        width: 100%;
        text-align: center;
    }

    /* Dropdown */
    .dropdown-content {
        position: static;
        width: 100%;
        min-width: 100%;
        transform: none;
        left: auto;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .media-container {
        height: 180px;
    }

    /* Banner */
    .preview-area {
        height: 250px;
        padding: 20px;
    }

    .preview-content h2 {
        font-size: 26px;
    }

    .preview-content p {
        font-size: 15px;
    }

    /* Hero */
    .hero {
        padding: 30px 15px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero p {
        font-size: 15px;
    }

    /* Grid CBC */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .hero-texto {
        padding: 20px;
        text-align: center;
        border-left: none;
        border-top: 6px solid #39A900;
    }

    /* Tarjetas */
    .cards-container {
        grid-template-columns: 1fr;
    }

    .cards {
        padding: 20px;
    }

    /* Videos */
    .video-cbc,
    .hero-video video,
    .video-centrado video {
        width: 100%;
        max-width: 100%;
    }

    /* Galería */
    .galeria-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
    }

    .galeria-item img {
        width: 100%;
        height: auto;
    }

    /* Footer */
    footer {
        padding: 25px 15px;
    }
}

/* ========================================
   RESPONSIVE — max-width: 480px (Móviles pequeños)
   ======================================== */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px;
    }

    .hero h2 {
        font-size: 20px;
    }

    .preview-content h2 {
        font-size: 22px;
    }

    .preview-content p {
        font-size: 14px;
    }

    .btn {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    .cards h3 {
        font-size: 20px;
    }
}
/* ========================================
   RESPONSIVE MENÚ + DROPDOWN
   ======================================== */

@media (max-width: 768px) {

    /* Header */
    header {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    /* Menú principal */
    .menu {
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding: 0;
    }

    /* Opciones del menú */
    .menu-item {
        width: 100%;
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid #dcdcdc;
    }

    /* Links */
    .menu-item a {
        display: block;
        width: 100%;
        color: inherit;
        text-decoration: none;
    }

    /* Dropdown */
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        min-width: 100%;
        transform: none;
        left: auto;
        top: auto;
        border-radius: 0;
        box-shadow: none;
        margin-top: 10px;
    }

    /* Mostrar dropdown */
    .menu-item:hover .dropdown-content {
        display: flex;
        flex-direction: column;
    }

    /* Video del dropdown */
    .media-container {
        height: 180px;
        width: 100%;
    }

    .media-container video,
    .media-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Texto dropdown */
    .dropdown-text {
        padding: 12px;
    }

    .dropdown-text h3 {
        font-size: 16px;
    }

    .dropdown-text p {
        font-size: 13px;
    }

    /* Hero */
    .hero {
        padding: 40px 20px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero h2 {
        font-size: 1.6rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Grid CBC */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Tarjetas */
    .cards-container {
        grid-template-columns: 1fr;
    }

    /* Videos */
    .video-cbc,
    .hero-video video,
    .video-centrado video {
        width: 100%;
        max-width: 100%;
    }

    /* Galería */
    .galeria-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .galeria-item img {
        height: auto;
    }

    /* Banner */
    .preview-area {
        height: 280px;
        padding: 20px;
    }

    .preview-content h2 {
        font-size: 28px;
    }

    .preview-content p {
        font-size: 16px;
    }
}

/* Celulares pequeños */

@media (max-width: 480px) {

    .hero h1 {
        font-size: 1.7rem;
    }

    .hero h2 {
        font-size: 1.3rem;
    }

    .preview-content h2 {
        font-size: 22px;
    }

    .preview-content p {
        font-size: 14px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}
.imagenlogogrid img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}
.gridlogo {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    background-color: #39A900;
}

.imagenlogogrid {
    width: 50px;
    height: 50px;
}
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    list-style: none;
    padding: 0 ;
    background: transparent;



}
.menu {
    gap: 60px;
}

.menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 20%;
    height: 65%;
    width: 1px;
    background-color: #329301;
}
.forms-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
}

.formulario{
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    border: 2px solid #1a5f2a;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.formulario h2{
    text-align: center;
    color: #1a5f2a;
    margin-bottom: 25px;
}

.formulario label{
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="number"]{
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.formulario input[type="submit"]{
    width: 100%;
    padding: 12px;
    background: #1a5f2a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

.formulario input[type="submit"]:hover{
    background: #13471f;
}

.video-foro{
    display: flex;
    justify-content: center;
}

.video-foro video{
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    border: 2px solid #1a5f2a;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
/* ==========================
   PANEL ADMINISTRADOR
   ========================== */

.admin-container {
    padding: 30px;
}

.admin-title {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

.admin-table {
    width: 95%;
    margin: auto;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.admin-table thead {
    background: #0d6efd;
    color: white;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    text-align: center;
}

.admin-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.admin-table tbody tr:hover {
    background-color: #e9ecef;
}

.admin-table th {
    font-weight: bold;
}
.card-panel{
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

.btn-panel{
    display: inline-block;
    padding: 10px 20px;
    background: #39a900;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f4f6f9;
}

.dashboard{
    display:flex;
    min-height:100vh;
}

/* Sidebar */
.sidebar{
    width:250px;
    background:#39A900;
    color:white;
    padding:20px;
}

.sidebar h2{
    text-align:center;
    margin-bottom:30px;
}

.sidebar ul{
    list-style:none;
}

.sidebar ul li{
    margin:15px 0;
}

.sidebar ul li a{
    color:white;
    text-decoration:none;
    display:block;
    padding:12px;
    border-radius:8px;
    transition:.3s;
}

.sidebar ul li a:hover{
    background:rgba(255,255,255,.2);
}
/* =========================
   CONTENEDOR GENERAL
========================= */

.table-container{
    width: 95%;
    margin: 30px auto;
}

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

.buscador{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

.buscador input{
    width: 350px;
    padding: 12px;
    border: 2px solid #39A900;
    border-radius: 8px;
    outline: none;
    font-size: 15px;
}

.buscador input:focus{
    box-shadow: 0 0 8px rgba(57,169,0,.3);
}

.buscador button{
    background: #39A900;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: .3s;
}

.buscador button:hover{
    background: #2e8700;
}

/* =========================
   TABLA
========================= */

.admin-table{
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
}

.admin-table thead{
    background: #39A900;
    color: white;
}

.admin-table th{
    padding: 15px;
    text-align: center;
    font-size: 14px;
}

.admin-table td{
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.admin-table tbody tr:hover{
    background: #f5fff0;
    transition: .3s;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

    .buscador{
        flex-direction: column;
        align-items: center;
    }

    .buscador input{
        width: 100%;
    }

    .admin-table{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

}