/* =========================================================================
   VOCHOCLUB CR - CSS MODERNIZADO 2025
   Actualizado desde versión 2012 con propiedades modernas
   ========================================================================= */

/* =========================================================================
   1. RESET Y ESTILOS BASE
   ========================================================================= */

body {
    margin: 0;
    padding: 0;
    background: #1D2528;
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

/* =========================================================================
   2. CONTENEDORES Y BACKGROUNDS
   ========================================================================= */

.bg0001 {
    background: linear-gradient(to bottom, #FFFFFF, #F7F7F7);
    border: 1px solid #BEBEBE;
    border-bottom: none;
    color: #000000;
    cursor: pointer;
    padding: 0 2px 0 5px;
}

.bg0001_strong {
    color: #666666;
    font-weight: 600;
}

.bg0001_bott {
    background: linear-gradient(to bottom, #FFFFFF, #F7F7F7);
    border: 1px solid #BEBEBE;
    color: #000000;
    cursor: pointer;
    padding: 0 2px 0 5px;
}

.bg0002 {
    background: #ddd;
    height: 1px;
}

.CenterText2 {
    color: #555555;
    font-size: 14px;
}

.contCenter {
    background: #FFF;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    padding: 15px;
}

/* =========================================================================
   3. ESTILOS DE CONTENIDO
   ========================================================================= */

.cont1 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    padding: 10px;
}

.cont1 a {
    color: #0066CC;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cont1 a:hover {
    color: #993300;
}

.cont2 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #F7F7F7;
    padding: 15px;
}

.cont2 a {
    color: #0033AA;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cont2 a:hover {
    color: #993300;
}

.cont2 strong,
.cont2 em {
    color: #900;
}

.cont3 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #222;
    background: #EAEAEA;
    padding: 15px;
}

.cont3 a {
    color: #0033AA;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cont3 a:hover {
    color: #993300;
}

.coment {
    color: #900;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* =========================================================================
   4. FORMULARIOS E INPUTS MODERNIZADOS
   ========================================================================= */

input,
textarea,
select {
    background: #f7f7f7;
    border: 1px solid #CCC;
    padding: 8px 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #0066CC;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);
}

input[type="submit"],
input[type="button"],
button {
    background: linear-gradient(to bottom, #0066CC, #004999);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: linear-gradient(to bottom, #0077DD, #0055AA);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#Correo input,
#Correo textarea {
    background: #EEE;
}

/* =========================================================================
   5. SISTEMA DE BORDES DECORATIVOS MODERNIZADO
   ========================================================================= */

/* Reemplazar imágenes con CSS puro */
.eq1, .eq3, .eq5, .eq7 {
    border-radius: 8px;
}

.eq1 {
    border-bottom-right-radius: 8px;
}

.eq3 {
    border-top-right-radius: 8px;
}

.eq5 {
    border-top-left-radius: 8px;
}

.eq7 {
    border-bottom-left-radius: 8px;
}

.eq2, .eq6 {
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
}

.eq4, .eq8 {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}

/* Variantes secundarias */
.eq1_sec { border-radius: 8px 0 0 0; }
.eq3_sec { border-radius: 0 0 0 8px; }
.eq5_sec { border-radius: 0 0 8px 0; }
.eq7_sec { border-radius: 0 8px 0 0; }

/* =========================================================================
   6. NOTICIAS Y GALERÍAS
   ========================================================================= */

.div_noticias {
    float: left;
    padding: 15px;
    color: #666;
    text-align: center;
    width: 200px;
    transition: transform 0.3s ease;
}

.div_noticias:hover {
    transform: translateY(-5px);
}

.div_noticias strong {
    color: #333;
}

#div_galeriaID {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#div_galeriaID ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#div_galeriaID ul li {
    display: inline-block;
    float: none;
    position: relative;
}

.div_galeria {
    padding: 10px;
    color: #fff;
    width: 160px;
}

.div_galeria strong,
.div_galeria a {
    font-weight: 600;
    color: #FF9900;
    transition: color 0.3s ease;
}

.div_galeria a:hover {
    color: #FFCC00;
}

.download_link,
.download_link a {
    color: #E08400;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
}

.download_link a:hover {
    color: #FF9900;
}

/* =========================================================================
   7. FOOTER
   ========================================================================= */

.footer {
    background: linear-gradient(to bottom, #444, #333);
    color: #F7F7F7;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 20px 15px 10px;
}

.footer a {
    color: #3399CC;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #FF9900;
}

.footNoticia {
    padding-left: 15px;
    padding-bottom: 3px;
    margin-bottom: 8px;
}

.footNoticia a {
    color: #3399CC;
    text-decoration: none;
}

/* =========================================================================
   8. UTILIDADES DE VISIBILIDAD
   ========================================================================= */

.inv {
    visibility: hidden;
    display: none;
}

.visible {
    visibility: visible;
    display: block;
}

.vis {
    visibility: visible;
    display: block;
    position: absolute;
    left: auto;
    top: auto;
}

/* =========================================================================
   9. MENÚS
   ========================================================================= */

.menSubOn {
    position: absolute;
    top: auto;
    left: auto;
    z-index: 100;
}

.menSubOff {
    display: none;
    visibility: hidden;
}

.menSubOn_foot {
    background: #1166AA;
    position: absolute;
    bottom: 29px;
    left: auto;
    display: block;
    visibility: visible;
    padding: 4px;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.menSubOff_foot {
    display: none;
    visibility: hidden;
}

.menu {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.menu a {
    color: #504000;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #993300;
}

.menu_foot {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}

.menu_foot a {
    color: #444;
    text-decoration: none;
    font-weight: bold;
}

.menu_foot2 {
    float: right;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    cursor: pointer;
}

.menu_foot2 a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu_foot2 a:hover {
    color: #FF9900;
}

.menu2 {
    float: right;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.menu2 a {
    color: #504000;
    text-decoration: none;
    font-weight: bold;
}

.menUser1,
.menUser2,
.menUser3 {
    background: linear-gradient(to bottom, #555, #333);
    padding: 5px;
}

/* =========================================================================
   10. TABLAS Y ELEMENTOS MEDIOS
   ========================================================================= */

.midtable {
    color: #333;
}

.midtable_tl {
    background: linear-gradient(to bottom, #0066CC, #004999);
    padding: 10px 5px 3px;
    width: 250px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FFF;
    border-radius: 8px 8px 0 0;
}

.midtable_Pri {
    background: #FFFFFF;
    border: 1px solid #DDD;
    padding: 11px;
    width: 248px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-radius: 0 0 8px 8px;
}

.midtable_Pri2 {
    background: #FFFFFF;
    border: 1px solid #DDD;
    width: 248px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    padding: 10px;
}

.midtable_sec {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: #333;
}

.Estilo9 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.padinng_5px {
    padding: 8px;
}

.share_bar {
    float: right;
}

/* =========================================================================
   11. REFERENCIAS Y ENLACES
   ========================================================================= */

.ref,
.ref a {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.ref a:hover {
    color: #930;
    font-weight: 600;
}

.ref strong {
    color: #930;
}

/* =========================================================================
   12. TABLAS Y CLASIFICADOS
   ========================================================================= */

.st01 {
    color: #eee;
    background: linear-gradient(to bottom, #666, #444);
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding: 8px;
}

.Table_Array {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #CFDCE9;
}

.table01 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #F7F7F7;
    margin: 0;
}

.table_buscar_clasif {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #F7F7F7;
    margin: 0;
    padding-bottom: 15px;
}

.table01_2 {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #FFFFFF;
}

/* =========================================================================
   13. ELEMENTOS DE TABLA
   ========================================================================= */

.tbMn {
    background: none;
}

.tbMn2 {
    float: left;
    margin-left: 5px;
    margin-top: 10px;
    width: 330px;
}

.tbMn3 {
    float: left;
    margin-left: 5px;
    margin-top: 10px;
    width: 200px;
}

.tbMn4 {
    width: 23.5%;
    float: left;
    opacity: 0.75;
    margin-left: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tbMn4:hover,
.tbMn4_sobre {
    width: 23.5%;
    float: left;
    opacity: 1;
    margin-left: 10px;
    transform: scale(1.05);
}

.tbMn5 {
    float: left;
    opacity: 0.75;
    margin: 0 2px;
    transition: opacity 0.3s ease;
}

.tbMn5:hover,
.tbMn5_sobre {
    float: left;
    opacity: 1;
    margin: 0 2px;
}

/* =========================================================================
   14. TÍTULOS
   ========================================================================= */

.titRes {
    float: left;
    padding: 3px;
    width: 30px;
    height: 10px;
}

.titulo1 {
    background: #FFF;
    border: 1px solid #CCC;
    float: left;
    padding: 8px 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    border-radius: 4px;
}

.titulo1 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.titulo1 a:hover {
    color: #900;
}

.titulo2 {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #666;
}

.titulo3 {
    background: linear-gradient(to bottom, #0066CC, #004999);
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #FFF;
    padding: 8px;
    border-radius: 4px;
}

.titulo4 {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #000;
}

.titulo4 strong {
    color: #b00;
}

.titulo5 {
    background: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    padding: 8px 5px 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.titulo5:hover {
    background: #d0d0d0;
}

.titulo6 {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding-left: 25px;
}

.titulo7 {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #EEE;
    padding-bottom: 4px;
}

.titulo8 {
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #600;
}

.tl1 {
    background: linear-gradient(to bottom, #F7F7F7, #E7E7E7);
    padding-left: 11px;
}

/* =========================================================================
   15. ELEMENTOS ESPECIALES
   ========================================================================= */

#topbar {
    position: absolute;
    visibility: hidden;
    z-index: 100;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 100%;
    height: 30px;
}

.topTable {
    background: #1D2528;
}

/* =========================================================================
   16. RESPONSIVE DESIGN
   ========================================================================= */

@media (max-width: 768px) {
    .cont1, .cont2, .cont3 {
        font-size: 13px;
        padding: 10px;
    }
    
    .div_noticias {
        width: 100%;
        float: none;
    }
    
    .div_galeria {
        width: 100%;
    }
    
    #div_galeriaID ul li {
        width: 100%;
    }
    
    .tbMn2, .tbMn3 {
        width: 100%;
        margin-left: 0;
    }
    
    .tbMn4, .tbMn4_sobre {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
    
    .menu, .menu2, .menu_foot, .menu_foot2 {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .midtable_tl, .midtable_Pri, .midtable_Pri2 {
        width: 100%;
    }
    
    input, textarea, select {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 13px;
    }
    
    .titulo1, .titulo2, .titulo3, .titulo4, .titulo5, .titulo6, .titulo7, .titulo8 {
        font-size: 13px;
    }
}