/* =========================================
   1. RESET Y BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background-color: #1a1d24; color: #ffffff; transition: background-color 0.3s ease; }
.solo-movil { display: none !important; }
.solo-pc { display: flex; }

/* =========================================
   2. CABECERA Y BUSCADOR
   ========================================= */
.cabecera-superior { background-color: #11151a; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.bloque-logo img { height: auto; }
.logo-pc { max-width: 220px; }
.logo-movil { display: none; }

.bloque-buscador { display: flex; background-color: #21252d; border-radius: 20px; padding: 8px 15px; width: 350px; transition: all 0.3s ease; }
.bloque-buscador input { background: transparent; border: none; color: white; width: 100%; outline: none; font-size: 14px; }
.bloque-buscador button { background: transparent; border: none; color: #a0aabf; cursor: pointer; font-size: 16px; }

.bloque-usuario { align-items: center; gap: 25px; }
.redes-sociales a { color: #a0aabf; text-decoration: none; margin-right: 15px; font-size: 18px; transition: color 0.3s ease; }
.redes-sociales a:hover { color: #33cc33; }
.btn-contacto, .btn-login { color: white; text-decoration: none; font-size: 14px; font-weight: bold; }
.btn-login { background-color: #0055cc; padding: 10px 18px; border-radius: 4px; transition: background 0.3s; display: inline-flex; align-items: center; gap: 8px; }
.btn-login:hover { background-color: #0044aa; }

/* MENÚ DINÁMICO DE USUARIO AUTENTICADO */
.menu-usuario-cabecera { position: relative; display: inline-block; }
.btn-usuario-toggle { background: #21252d; border: 1px solid #2a303a; color: #ffffff; padding: 6px 14px; border-radius: 25px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: bold; transition: all 0.2s; }
.btn-usuario-toggle:hover { border-color: #0055cc; }
.avatar-cabecera { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.nombre-usuario-cabecera { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-usuario { display: none; position: absolute; right: 0; top: calc(100% + 8px); background-color: #21252d; min-width: 180px; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.6); border: 1px solid #2a303a; z-index: 1100; overflow: hidden; }
.dropdown-usuario.mostrar { display: block; }
.dropdown-usuario a, .dropdown-usuario .btn-cerrar-sesion { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: bold; width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; transition: background 0.2s; }
.dropdown-usuario a:hover, .dropdown-usuario .btn-cerrar-sesion:hover { background-color: #1a1d24; }
.dropdown-usuario .btn-cerrar-sesion { color: #ff4d4d; border-top: 1px solid #2a303a; }
.menu-usuario-movil { display: flex; flex-direction: column; width: 100%; }
.menu-usuario-movil a { padding: 12px 0; font-weight: bold; text-decoration: none; }
.btn-logout-movil { color: #ff4d4d !important; }

/* =========================================
   3. BARRA DE NAVEGACIÓN Y SUBMENÚS
   ========================================= */
.barra-menu { background-color: #1a1d24; border-bottom: 3px solid #ff6600; padding: 0 40px; display: flex; justify-content: flex-end; position: relative; }
.barra-menu ul { list-style-type: none; display: flex; align-items: center; }
.barra-menu ul li { position: relative; }
.barra-menu ul li a { display: block; color: #ffffff; text-decoration: none; padding: 20px 25px; font-weight: 700; font-size: 13px; text-transform: uppercase; border-top: 3px solid transparent; transition: all 0.3s; }
.barra-menu ul li a:hover, .barra-menu ul li a.activo { border-top: 3px solid #0055cc; background-color: #11151a; }

.sub-menu, .sub-menu-nivel2 { display: none !important; position: absolute; background-color: #1a1d24; min-width: 250px; z-index: 1000; box-shadow: 0 8px 16px rgba(0,0,0,0.8); flex-direction: column; }
.sub-menu { top: 100%; left: 0; border-top: 3px solid #33cc33; }
.sub-menu-nivel2 { top: 0; left: 100%; border-top: 3px solid #0055cc; }
.abierto > .sub-menu, .abierto > .sub-menu-nivel2 { display: flex !important; }
.boton-tema { margin-left: 20px; cursor: pointer; padding: 8px 15px; background-color: #33cc33; color: white; border: none; border-radius: 4px; font-weight: bold; }

/* =========================================
   4. MARCADOR EN VIVO
   ========================================= */
.cinta-resultados { background-color: #11151a; border-bottom: 2px solid #21252d; padding: 15px 0; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
.cinta-resultados::-webkit-scrollbar { display: none; }
.cinta-pista { display: inline-flex; gap: 15px; padding: 0 40px; }
.tarjeta-partido { background-color: #21252d; border-radius: 6px; padding: 12px 18px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid #ff6600; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tarjeta-partido .liga-nombre { font-size: 11px; color: #a0aabf; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; }
.equipo-fila { display: flex; justify-content: space-between; align-items: center; }
.equipo-fila span { font-size: 14px; font-weight: bold; color: #ffffff; }
.equipo-fila .goles { color: #33cc33; font-size: 16px; }

/* =========================================
   5. CUERPO, CARRUSEL Y TABLAS
   ========================================= */
.contenedor-principal { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 40px auto; gap: 30px; padding: 0 15px; min-height: 50vh; }
.noticias { flex: 2; min-width: 300px; overflow: hidden; }
.estadisticas { flex: 1; min-width: 300px; background-color: #21252d; padding: 25px; border-radius: 6px; border-top: 3px solid #0055cc; height: fit-content; }
.titulo-seccion { font-size: 20px; margin-bottom: 20px; text-transform: uppercase; border-left: 4px solid #33cc33; padding-left: 10px; }

.carrusel-contenedor { position: relative; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-bottom: 30px; }
.carrusel-pista { display: flex; width: 100%; transition: transform 0.5s ease-in-out; }
.carrusel-slide { position: relative; min-width: 100%; }
.carrusel-slide img { width: 100%; height: 450px; object-fit: cover; display: block; }
.carrusel-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 60px 30px 30px 30px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); }
.carrusel-info .etiqueta-categoria { display: inline-block; background-color: #0055cc; color: white; padding: 5px 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; border-radius: 3px; margin-bottom: 15px; }
.carrusel-info h3 { color: #ffffff; font-size: 28px; margin-bottom: 10px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.carrusel-info p { color: #e2e8f0; font-size: 15px; line-height: 1.6; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.btn-carrusel { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(17, 26, 36, 0.7); color: white; border: none; font-size: 24px; padding: 15px 20px; cursor: pointer; transition: background-color 0.3s; }
.btn-carrusel:hover { background-color: #ff6600; }
.btn-carrusel.prev { left: 0; border-radius: 0 4px 4px 0; }
.btn-carrusel.next { right: 0; border-radius: 4px 0 0 4px; }

.contenedor-widget { width: 100%; overflow-x: auto; }
.tabla-de-volea { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.tabla-de-volea th { background-color: #11151a; color: #a0aabf; padding: 10px 5px; font-size: 11px; text-transform: uppercase; border-bottom: 2px solid #0055cc; text-align: center; }
.tabla-de-volea td { padding: 12px 5px; font-size: 13px; border-bottom: 1px solid #2a303a; text-align: center; }
.td-equipo { display: flex; align-items: center; gap: 8px; text-align: left !important; font-weight: bold; }
.escudo-equipo { width: 24px; height: 24px; object-fit: contain; }
.resaltar-pts { font-weight: bold; color: #33cc33; font-size: 14px;}
.btn-ver-tabla { display: block; text-align: center; background-color: #11151a; color: #a0aabf; padding: 12px; border-radius: 4px; text-decoration: none; font-size: 12px; font-weight: bold; transition: background 0.3s; text-transform: uppercase; }
.btn-ver-tabla:hover { background-color: #ff6600; color: white; }
.tabla-gigante th, .tabla-gigante td { padding: 15px 10px; font-size: 14px; }

/* =========================================
   6. PÁGINA INTERNA (TABS, MURO DE REGISTRO)
   ========================================= */
.cabecera-liga { background-color: #21252d; padding: 25px; border-radius: 6px; border-left: 6px solid #33cc33; margin-bottom: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.cabecera-liga h1 { font-size: 28px; text-transform: uppercase; color: #ffffff; margin-bottom: 5px; }
.cabecera-liga p { color: #a0aabf; font-size: 14px; }

.menu-interno-liga { display: flex; list-style: none; margin-bottom: 30px; background-color: #21252d; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2); flex-wrap: wrap; width: 100%; }
.menu-interno-liga li { flex: 1; min-width: 150px; text-align: center; }
.menu-interno-liga li a { display: block; padding: 18px 10px; color: #a0aabf; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 13px; border-bottom: 4px solid transparent; transition: all 0.3s; }
.menu-interno-liga li a i { margin-right: 8px; font-size: 15px; }
.menu-interno-liga li a:hover { background-color: #11151a; color: #ffffff; }
.menu-interno-liga li a.activo { border-bottom: 4px solid #ff6600; color: #ffffff; background-color: #11151a; }

.tab-contenido { display: none; animation: aparecer 0.4s ease-in-out; }
.tab-contenido.activo { display: block; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.tarjeta-noticia { background-color: #21252d; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.foto-noticia { width: 100%; height: 350px; object-fit: cover; display: block; }
.tarjeta-noticia-contenido { padding: 25px; }
.etiqueta-categoria { display: inline-block; background-color: #0055cc; color: white; padding: 5px 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; border-radius: 3px; margin-bottom: 15px; }
.tarjeta-noticia h3 { color: #ffffff; font-size: 26px; margin-bottom: 15px; }
.tarjeta-noticia p { color: #a0aabf; font-size: 16px; line-height: 1.6; }

.meta-datos-noticia { display: flex; flex-wrap: wrap; gap: 15px; color: #64748b; font-size: 12px; margin-bottom: 12px; font-weight: 600; }
.meta-datos-noticia i { color: #ff6600; margin-right: 5px; }
.botones-compartir { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #2a303a; }
.compartir-texto { font-size: 12px; color: #a0aabf; font-weight: bold; text-transform: uppercase; }
.btn-share { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; text-decoration: none; font-size: 14px; transition: transform 0.3s; }
.btn-share:hover { transform: scale(1.15); color: white; }
.btn-share.whatsapp { background-color: #25D366; }
.btn-share.facebook { background-color: #1877F2; }
.btn-share.twitter { background-color: #000000; }

.galeria-multimedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
.galeria-multimedia img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; transition: transform 0.3s ease; cursor: pointer; }
.galeria-multimedia img:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* CONTENIDO BLOQUEADO (PAYWALL) */
.contenido-bloqueado { position: relative; max-height: 180px; overflow: hidden; margin-top: 15px; }
.muro-registro {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 160px;
    background: linear-gradient(to bottom, rgba(33,37,45,0) 0%, rgba(33,37,45,0.9) 40%, rgba(33,37,45,1) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding-bottom: 20px; text-align: center;
}
.candado-muro { font-size: 24px; color: #ff6600; margin-bottom: 10px; }
.muro-registro h4 { color: #ffffff; font-size: 18px; margin-bottom: 5px; text-transform: uppercase; }
.muro-registro p { color: #a0aabf; font-size: 13px; max-width: 400px; }
.btn-muro { padding: 10px 20px; border-radius: 4px; font-weight: bold; text-decoration: none; font-size: 13px; text-transform: uppercase; transition: transform 0.3s; }
.btn-muro:hover { transform: scale(1.05); }
.btn-muro.login { background-color: #21252d; color: #ffffff; border: 1px solid #2a303a; }
.btn-muro.registro { background-color: #0055cc; color: #ffffff; }

/* =========================================
   7. FOOTER
   ========================================= */
.footer-principal { background-color: #11151a; padding: 60px 40px 0 40px; margin-top: 40px; border-top: 5px solid #21252d; }
.footer-columnas { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 40px; padding-bottom: 40px; }
.footer-col { flex: 1; min-width: 250px; }
.footer-logo { max-width: 180px; margin-bottom: 20px; }
.footer-col h3 { font-size: 15px; color: #ffffff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col p { color: #a0aabf; font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.info-contacto p { margin-bottom: 10px; font-size: 13px; }
.footer-bottom { border-top: 1px solid #21252d; max-width: 1200px; margin: 0 auto; padding: 25px 0; display: flex; justify-content: center; align-items: center; text-align: center; }
.footer-bottom p { color: #64748b; font-size: 12px; font-weight: bold; }

/* =========================================
   8. PANTALLAS DE AUTENTICACIÓN (LOGIN & REGISTRO)
   ========================================= */
.body-login, .body-auth { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #11151a; background-image: radial-gradient(circle at center, #1a1d24 0%, #11151a 100%); padding: 20px; }
.contenedor-login, .auth-wrapper { width: 100%; display: flex; justify-content: center; }
.tarjeta-login, .auth-card { background-color: #21252d; width: 100%; max-width: 440px; padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-top: 5px solid #0055cc; }
.cabecera-login, .auth-header { text-align: center; margin-bottom: 25px; }
.logo-login, .auth-logo { max-width: 160px; margin-bottom: 15px; }
.cabecera-login h2, .auth-header h2 { color: #ffffff; font-size: 24px; margin-bottom: 5px; text-transform: uppercase; }
.cabecera-login p, .auth-header p { color: #a0aabf; font-size: 13px; }
.formulario-login, .auth-form { display: flex; flex-direction: column; gap: 18px; }
.grupo-input, .form-group-auth { display: flex; flex-direction: column; gap: 8px; }
.grupo-input label, .form-group-auth label { color: #e2e8f0; font-size: 13px; font-weight: bold; }
.grupo-input label i, .form-group-auth label i { color: #ff6600; margin-right: 5px; }
.grupo-input input, .form-group-auth input { background-color: #1a1d24; border: 1px solid #2a303a; color: #ffffff; padding: 12px 15px; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.3s; }
.grupo-input input:focus, .form-group-auth input:focus { border-color: #0055cc; }
.btn-ingresar, .btn-auth-submit { background-color: #0055cc; color: white; border: none; padding: 14px; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; text-transform: uppercase; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn-ingresar:hover, .btn-auth-submit:hover { background-color: #0044aa; }
.btn-auth-submit:disabled { background-color: #555555; cursor: not-allowed; }
.pie-login, .auth-footer { text-align: center; margin-top: 25px; border-top: 1px solid #2a303a; padding-top: 20px; font-size: 13px; color: #a0aabf; }
.pie-login a, .auth-footer a { color: #0055cc; text-decoration: none; font-weight: bold; transition: color 0.3s; }
.pie-login a:hover, .auth-footer a:hover { color: #ffffff; }
.link-volver { color: #a0aabf !important; font-size: 12px; margin-top: 8px; display: inline-block; }

.mensaje-error, .alerta-error { background-color: rgba(255, 51, 51, 0.15); color: #ff6666; border: 1px solid #ff4d4d; padding: 10px; border-radius: 4px; font-size: 13px; text-align: center; font-weight: bold; margin-bottom: 15px; }
.alerta-exito { background-color: rgba(51, 204, 51, 0.15); color: #33cc33; border: 1px solid #33cc33; padding: 10px; border-radius: 4px; font-size: 13px; text-align: center; font-weight: bold; margin-bottom: 15px; }
.auth-alerta.oculto { display: none; }

@keyframes temblor { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } }
.temblor { animation: temblor 0.4s ease-in-out; }

/* =========================================
   9. PANEL DE CONTROL (ADMIN) Y WYSIWYG
   ========================================= */
.body-panel { background-color: #11151a; margin: 0; padding: 0; height: 100vh; overflow: hidden; }
.panel-layout { display: flex; height: 100vh; width: 100%; }

.panel-sidebar { width: 260px; background-color: #1a1d24; border-right: 2px solid #21252d; display: flex; flex-direction: column; }
.panel-logo { padding: 25px; text-align: center; border-bottom: 2px solid #21252d; }
.panel-logo img { max-width: 160px; }
.panel-nav { display: flex; flex-direction: column; padding: 20px 0; flex: 1; }
.panel-nav a { padding: 15px 25px; color: #a0aabf; text-decoration: none; font-weight: bold; font-size: 14px; transition: all 0.3s; border-left: 4px solid transparent; }
.panel-nav a i { margin-right: 12px; width: 20px; text-align: center; font-size: 16px; }
.panel-nav a:hover, .panel-nav a.activo { background-color: #21252d; color: #ffffff; border-left: 4px solid #33cc33; }
.panel-nav a.btn-salir { color: #ff3333; margin-top: auto; border-top: 1px solid #21252d; border-left: none; }

.panel-main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; background-color: #11151a; }
.panel-header { background-color: #21252d; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1a1d24; }
.panel-header h2 { color: #ffffff; font-size: 20px; text-transform: uppercase; }
.panel-user { color: #a0aabf; font-weight: bold; font-size: 14px; background-color: #1a1d24; padding: 8px 15px; border-radius: 20px; }
.panel-user i { color: #33cc33; margin-right: 8px; }

.panel-content { padding: 40px; max-width: 1000px; margin: 0 auto; width: 100%; }
.panel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.stat-card { background-color: #21252d; padding: 25px; border-radius: 8px; border-top: 4px solid #0055cc; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.stat-card h3 { color: #a0aabf; font-size: 13px; text-transform: uppercase; margin-bottom: 10px; }
.stat-card p { color: #ffffff; font-size: 32px; font-weight: bold; }

.panel-box { background-color: #21252d; padding: 35px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.panel-box h3 { color: #ffffff; font-size: 18px; margin-bottom: 25px; border-bottom: 1px solid #2a303a; padding-bottom: 15px; text-transform: uppercase; }
.form-panel { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { color: #e2e8f0; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea { background-color: #1a1d24; border: 1px solid #2a303a; color: #ffffff; padding: 14px 15px; border-radius: 4px; font-size: 14px; outline: none; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #0055cc; }
.btn-guardar { background-color: #33cc33; color: white; border: none; padding: 16px; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background 0.3s; margin-top: 10px; text-transform: uppercase; }
.btn-guardar:hover { background-color: #28a428; }

/* TAXONOMÍA (Tags) */
.form-fila { display: flex; gap: 20px; flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 250px; }
.input-con-boton { display: flex; gap: 10px; align-items: stretch; }
.input-con-boton select, .input-con-boton input { flex: 1; }
.btn-add { background-color: #ff6600; color: white; border: none; padding: 0 15px; border-radius: 4px; cursor: pointer; transition: background 0.3s; display: flex; justify-content: center; align-items: center; font-size: 16px; }
.btn-add:hover { background-color: #e65c00; }
.tags-sugeridos-caja { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tag-sugerido { background-color: #11151a; color: #a0aabf; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; border: 1px solid #2a303a; transition: all 0.2s; }
.tag-sugerido:hover { background-color: #0055cc; color: white; border-color: #0055cc; }
.tags-seleccionados-caja { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; min-height: 35px; }
.tag-pill { background-color: #33cc33; color: white; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.tag-pill i { cursor: pointer; background: rgba(0,0,0,0.2); padding: 3px 6px; border-radius: 50%; }

/* EDITOR ENRIQUECIDO */
.editor-enriquecido { background-color: #1a1d24; border: 1px solid #2a303a; border-radius: 4px; overflow: hidden; }
.editor-toolbar { background-color: #11151a; padding: 10px; border-bottom: 1px solid #2a303a; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-toolbar button { background-color: transparent; color: #a0aabf; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; }
.editor-toolbar button:hover { background-color: #21252d; color: #ffffff; }
.editor-toolbar button i { margin-right: 5px; color: #0055cc; }
.editor-toolbar .separador { width: 1px; height: 20px; background-color: #2a303a; margin: 0 5px; }
.editor-area { min-height: 200px; padding: 15px; color: #ffffff; font-size: 15px; line-height: 1.6; outline: none; }
.editor-area:empty:before { content: attr(data-placeholder); color: #64748b; }

/* =========================================
   10. MODO CLARO UNIFICADO
   ========================================= */
body.modo-claro { background-color: #f5f6f8; color: #333333; } 
body.modo-claro .cabecera-superior, body.modo-claro .barra-menu { background-color: #ffffff; }
body.modo-claro .btn-contacto { color: #4a4a4a; }
body.modo-claro .redes-sociales a { color: #888888; }
body.modo-claro .redes-sociales a:hover { color: #33cc33; }
body.modo-claro .bloque-buscador { background-color: #f0f2f5; }
body.modo-claro .bloque-buscador input { color: #333333; }
body.modo-claro .bloque-buscador button { color: #888888; }

body.modo-claro .btn-usuario-toggle { background-color: #f0f2f5; border-color: #e2e8f0; color: #1e293b; }
body.modo-claro .dropdown-usuario { background-color: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
body.modo-claro .dropdown-usuario a { color: #1e293b; }
body.modo-claro .dropdown-usuario a:hover, body.modo-claro .dropdown-usuario .btn-cerrar-sesion:hover { background-color: #f0f2f5; }
body.modo-claro .dropdown-usuario .btn-cerrar-sesion { border-top-color: #e2e8f0; }

body.modo-claro .barra-menu ul li a { color: #4a4a4a; }
body.modo-claro .barra-menu ul li a:hover, body.modo-claro .barra-menu ul li a.activo { background-color: #f0f2f5; color: #0055cc; }
body.modo-claro .sub-menu, body.modo-claro .sub-menu-nivel2 { background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
body.modo-claro .sub-menu li a, body.modo-claro .sub-menu-nivel2 li a { color: #4a4a4a; border-bottom: 1px solid #f0f2f5; }
body.modo-claro .sub-menu li a:hover, body.modo-claro .sub-menu-nivel2 li a:hover { background-color: #f9f9f9; }

body.modo-claro .cinta-resultados { background-color: #ffffff; border-bottom: 2px solid #e2e8f0; }
body.modo-claro .tarjeta-partido { background-color: #f8fafc; border-left: 4px solid #0055cc; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
body.modo-claro .tarjeta-partido .liga-nombre { color: #64748b; }
body.modo-claro .equipo-fila span { color: #1e293b; }
body.modo-claro .equipo-fila .goles { color: #0055cc; }

body.modo-claro .estadisticas, body.modo-claro .tarjeta-noticia { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-color: #e2e8f0; }
body.modo-claro .estadisticas h2, body.modo-claro .tarjeta-noticia h3 { color: #222222; }
body.modo-claro .tarjeta-noticia p { color: #666666; }
body.modo-claro .meta-datos-noticia { color: #94a3b8; }
body.modo-claro .botones-compartir { border-top: 1px solid #eeeeee; }
body.modo-claro .compartir-texto { color: #64748b; }

body.modo-claro .tabla-de-volea th { background-color: #f0f2f5; color: #4a4a4a; border-bottom: 2px solid #0055cc; }
body.modo-claro .tabla-de-volea td { border-bottom: 1px solid #eeeeee; color: #1e293b; }
body.modo-claro .btn-ver-tabla { background-color: #f0f2f5; color: #0055cc; }

body.modo-claro .cabecera-liga { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
body.modo-claro .cabecera-liga h1 { color: #1e293b; }
body.modo-claro .cabecera-liga p { color: #64748b; }
body.modo-claro .menu-interno-liga { background-color: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
body.modo-claro .menu-interno-liga li a { color: #475569; }
body.modo-claro .menu-interno-liga li a:hover { background-color: #f0f2f5; color: #0055cc; }
body.modo-claro .menu-interno-liga li a.activo { border-bottom: 4px solid #0055cc; color: #0055cc; background-color: #f8fafc; }

body.modo-claro .footer-principal { background-color: #ffffff; border-top: 5px solid #e2e8f0; }
body.modo-claro .footer-bottom { border-top: 1px solid #e2e8f0; }

body.modo-claro .editor-enriquecido { background-color: #ffffff; border-color: #e2e8f0; }
body.modo-claro .editor-toolbar { background-color: #f8fafc; border-color: #e2e8f0; }
body.modo-claro .editor-toolbar button { color: #64748b; }
body.modo-claro .editor-toolbar button:hover { background-color: #e2e8f0; color: #1e293b; }
body.modo-claro .editor-area { color: #333333; }
body.modo-claro .muro-registro { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,1) 100%); }
body.modo-claro .muro-registro h4 { color: #1e293b; }
body.modo-claro .muro-registro p { color: #64748b; }
body.modo-claro .btn-muro.login { background-color: #f0f2f5; color: #4a4a4a; border-color: #e2e8f0; }

body.modo-claro.body-auth, body.modo-claro.body-login { background-color: #eef2f6; background-image: none; }
body.modo-claro .tarjeta-login, body.modo-claro .auth-card { background-color: #ffffff; box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-top: 5px solid #0055cc; }
body.modo-claro .cabecera-login h2, body.modo-claro .auth-header h2 { color: #1e293b; }
body.modo-claro .grupo-input label, body.modo-claro .form-group-auth label { color: #334155; }
body.modo-claro .grupo-input input, body.modo-claro .form-group-auth input { background-color: #f8fafc; border-color: #cbd5e1; color: #1e293b; }

/* =========================================
   11. MEDIA QUERIES (MÓVILES)
   ========================================= */
@media (max-width: 992px) {
    .solo-pc { display: none !important; }
    .solo-movil { display: flex !important; }
    .logo-pc { display: none; }
    .logo-movil { display: block; max-width: 140px; margin: 0 auto; } 
    .cabecera-superior { padding: 15px 20px; }
    .btn-buscar-movil, .btn-hamburguesa { background: none; border: none; color: white; font-size: 22px; cursor: pointer; padding: 5px; }
    body.modo-claro .btn-buscar-movil, body.modo-claro .btn-hamburguesa { color: #4a4a4a; }
    .bloque-buscador { display: none; position: absolute; top: 100%; left: 0; width: 100%; border-radius: 0; padding: 15px 20px; z-index: 1001; background-color: #1a1d24; }
    body.modo-claro .bloque-buscador { background-color: #ffffff; border-bottom: 1px solid #eeeeee; }
    .bloque-buscador.mostrar-buscador { display: flex !important; }
    .barra-menu { padding: 0; border-bottom: none; }
    .barra-menu ul { display: none; flex-direction: column; width: 100%; align-items: flex-start; padding-bottom: 20px; background-color: #1a1d24;}
    body.modo-claro .barra-menu ul { background-color: #ffffff; }
    .barra-menu ul.mostrar-menu-movil { display: flex; }
    .barra-menu ul li { width: 100%; }
    .barra-menu ul li a { border-top: none !important; border-bottom: 1px solid #2a303a; padding: 15px 20px; }
    body.modo-claro .barra-menu ul li a { border-bottom: 1px solid #f0f2f5; }
    .sub-menu, .sub-menu-nivel2 { position: static; width: 100%; box-shadow: none; border-top: none; background-color: transparent !important; padding-left: 20px; }
    body.modo-claro .sub-menu, body.modo-claro .sub-menu-nivel2 { background-color: transparent !important; box-shadow: none; }
    .li-boton-tema { padding: 15px 20px; }
    .boton-tema { margin-left: 0; width: 100%; }
    .carrusel-slide img { height: 300px; }
    .carrusel-info { padding: 40px 20px 20px 20px; }
    .carrusel-info h3 { font-size: 20px; }
    .cinta-pista { padding: 0 20px; }
    .footer-principal { padding: 40px 20px 0 20px; }
}

@media (max-width: 768px) {
    .panel-layout { flex-direction: column; height: auto; }
    .panel-sidebar { width: 100%; border-right: none; border-bottom: 2px solid #21252d; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; }
    .panel-nav { display: none; } 
    .panel-logo { padding: 15px 0; border: none; }
    .panel-logo img { max-width: 120px; }
    .panel-content { padding: 20px; }
}

/* =========================================
   WIDGET DEL CLIMA EN CABECERA
   ========================================= */
.widget-clima {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #21252d;
    padding: 8px 15px;
    border-radius: 20px;
    border-left: 3px solid #33cc33;
}
.widget-clima i { font-size: 20px; color: #33cc33; }
.clima-info { display: flex; flex-direction: column; }
.clima-temp { font-size: 14px; font-weight: bold; color: #ffffff; }
.clima-estado { font-size: 11px; color: #a0aabf; text-transform: uppercase; }

body.modo-claro .widget-clima { background-color: #f0f2f5; border-left-color: #0055cc; }
body.modo-claro .widget-clima i { color: #0055cc; }
body.modo-claro .clima-temp { color: #1e293b; }
body.modo-claro .clima-estado { color: #64748b; }

@media (max-width: 992px) {
    .widget-clima { display: none !important; }
}

/* WIDGET MARCADOR LATERAL VERTICAL */
.contenedor-marcador-vertical { display: flex; flex-direction: column; gap: 15px; }
.tarjeta-vertical { width: 100%; min-width: auto; }

/* =========================================
   ESTILOS PARA LA PÁGINA DEL ARTÍCULO
   ========================================= */
.layout-articulo { display: flex; flex-wrap: wrap; gap: 40px; max-width: 1200px; margin: 40px auto; padding: 0 15px; }
.columna-lectura { flex: 7; min-width: 300px; }
.columna-sidebar { flex: 3; min-width: 300px; }

.tarjeta-noticia-premium { background: #1a1d24; border-top: 5px solid #ff6600; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
.cuerpo-articulo-texto { color: #e2e8f0; font-size: 17px; line-height: 1.6; text-align: left; white-space: pre-line; }
.cuerpo-articulo-texto h2 { color: #ff6600; font-size: 22px; margin: 25px 0 8px 0; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #2a303a; padding-bottom: 10px; }
.cuerpo-articulo-texto p { margin-bottom: 16px; }
.cuerpo-articulo-texto strong { color: #ffffff; font-weight: 700; }

.banner-publicidad { background-color: #252a32; border: 1px solid #2a303a; border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 30px; }
.banner-publicidad p { color: #a0aabf; font-size: 12px; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; }

.seccion-relacionadas-bottom { margin-top: 50px; border-top: 2px solid #2a303a; padding-top: 30px; }
.seccion-relacionadas-bottom h3 { color: #fff; font-size: 20px; margin-bottom: 20px; text-transform: uppercase; border-left: 4px solid #33cc33; padding-left: 10px; }
.grid-relacionadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.tarjeta-relacionada { background: #252a32; border-radius: 6px; overflow: hidden; transition: transform 0.3s; display: flex; flex-direction: column; }
.tarjeta-relacionada:hover { transform: translateY(-5px); }
.tarjeta-relacionada img { width: 100%; height: 140px; object-fit: cover; }
.tarjeta-relacionada div { padding: 15px; }
.tarjeta-relacionada a { color: #e2e8f0; text-decoration: none; font-size: 14px; font-weight: bold; line-height: 1.4; transition: color 0.3s; }
.tarjeta-relacionada a:hover { color: #ff6600; }

body.modo-claro .tarjeta-noticia-premium { background-color: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-top: 5px solid #ff6600; }
body.modo-claro .tarjeta-noticia-premium h1 { color: #111a24 !important; text-shadow: none !important; }
body.modo-claro .cuerpo-articulo-texto { color: #222222; }
body.modo-claro .cuerpo-articulo-texto strong { color: #111a24; }
body.modo-claro .cuerpo-articulo-texto h2 { border-bottom: 2px solid #dddddd; }

body.modo-claro .botones-compartir { background-color: #f9f9f9 !important; border-top: 1px solid #dddddd; border-left: 4px solid #33cc33; }
body.modo-claro .compartir-texto { color: #333333 !important; }

body.modo-claro .seccion-relacionadas-bottom { border-top: 2px solid #dddddd; }
body.modo-claro .seccion-relacionadas-bottom h3 { color: #111a24 !important; }
body.modo-claro .tarjeta-relacionada { background-color: #f9f9f9; border: 1px solid #dddddd; }
body.modo-claro .tarjeta-relacionada a { color: #111a24; }
body.modo-claro .tarjeta-relacionada a:hover { color: #ff6600; }

body.modo-claro .banner-publicidad { background-color: #ffffff; border: 1px solid #dddddd; }
body.modo-claro .banner-publicidad p { color: #666666; }