/* QF Producciones — CSS liviano, sin frameworks, mobile-first */
:root{
  --tomate:#e94f37;
  --tomate-oscuro:#c93a24;
  --amarillo:#ffc93c;
  --gris-fondo:#f5f6f8;
  --gris-texto:#333;
  --gris-claro:#e7e9ec;
  --blanco:#fff;
  --radio:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris-fondo);
  color:var(--gris-texto);
  line-height:1.5;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

header.site{background:var(--tomate);color:var(--blanco);position:sticky;top:0;z-index:10}
header.site .top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
header.site .logo{font-weight:800;font-size:1.3rem;color:var(--blanco);letter-spacing:.5px}
header.site nav{display:flex;gap:14px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{white-space:nowrap;font-size:.9rem;padding:4px 2px;border-bottom:2px solid transparent;color:#ffe8e2}
header.site nav a.activo,header.site nav a:hover{border-color:var(--amarillo);color:var(--blanco)}

main{padding:18px 0 40px}
.titular{margin-bottom:18px}
.titular h1{font-size:1.5rem;margin-bottom:6px}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}

.card{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card img{aspect-ratio:16/9;object-fit:cover;background:var(--gris-claro)}
.card .cuerpo{padding:12px}
.card .etiqueta{display:inline-block;background:var(--tomate);color:var(--blanco);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:8px;text-transform:uppercase}
.card h2{font-size:1.05rem;margin-bottom:6px}
.card p.resumen{font-size:.9rem;color:#555}
.card .meta{font-size:.75rem;color:#888;margin-top:8px}

article.nota{background:var(--blanco);border-radius:var(--radio);padding:18px;max-width:780px;margin:0 auto}
article.nota h1{font-size:1.6rem;margin-bottom:10px}
article.nota .meta{color:#888;font-size:.85rem;margin-bottom:14px}
article.nota .cuerpo p{margin-bottom:14px}
article.nota img{border-radius:var(--radio);margin-bottom:14px}
.fuente{font-size:.8rem;color:#777;border-top:1px solid var(--gris-claro);margin-top:18px;padding-top:12px}

footer.site{background:#1c1c1c;color:#cfd8e3;text-align:center;padding:24px 16px;font-size:.85rem;margin-top:30px}
footer.site a{color:var(--amarillo)}

.vacio{background:var(--blanco);border-radius:var(--radio);padding:30px;text-align:center;color:#888}
.admin-box{background:var(--blanco);border-radius:var(--radio);padding:20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.admin-box h2{margin-bottom:12px;font-size:1.1rem}

/* Tabla de posiciones */
table.tabla-posiciones{width:100%;border-collapse:collapse;background:var(--blanco)}
table.tabla-posiciones th,table.tabla-posiciones td{padding:8px 10px;text-align:center;font-size:.85rem;border-bottom:1px solid var(--gris-claro);white-space:nowrap}
table.tabla-posiciones th{background:var(--tomate);color:var(--blanco);font-weight:600}
table.tabla-posiciones .col-equipo{text-align:left;display:flex;align-items:center;gap:8px;white-space:normal;max-width:220px}
table.tabla-posiciones .escudo{width:22px;height:22px;object-fit:contain}
table.tabla-posiciones .nombre-equipo{font-weight:600}
table.tabla-posiciones .pts{font-weight:800}
@media(max-width:600px){
  table.tabla-posiciones .hide-mobile{display:none}
  table.tabla-posiciones .col-equipo{max-width:130px}
}

/* Resultados / partido destacado */
.partido-destacado{background:linear-gradient(135deg,var(--tomate),var(--tomate-oscuro));color:var(--blanco);border-radius:var(--radio);padding:18px;margin-bottom:18px;text-align:center;position:relative}
.badge-vivo{display:inline-block;background:#fff;color:var(--tomate-oscuro);font-weight:800;font-size:.75rem;padding:3px 10px;border-radius:20px;margin-bottom:10px;animation:pulso 1.5s infinite}
@keyframes pulso{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}
.marcador-grande{display:flex;align-items:center;justify-content:center;gap:20px;margin:10px 0}
.equipo-destacado{display:flex;flex-direction:column;align-items:center;gap:6px;width:110px}
.escudo-grande{width:52px;height:52px;object-fit:contain}
.nombre-equipo-destacado{font-size:.85rem;font-weight:700}
.resultado-destacado{font-size:2.2rem;font-weight:800}
.resultado-destacado .guion{margin:0 10px;opacity:.7}
.estadio-destacado{font-size:.8rem;opacity:.9;margin-top:4px}
.enlaces-inicio{margin-top:12px;font-size:.85rem}
.enlaces-inicio a{color:var(--blanco);text-decoration:underline}

.lista-partidos{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.fila-partido{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--gris-claro)}
.equipo-fila{display:flex;align-items:center;gap:8px}
.equipo-fila img{width:24px;height:24px;object-fit:contain}
.equipo-local{justify-content:flex-end;text-align:right}
.equipo-visitante{justify-content:flex-start;text-align:left}
.nombre-equipo-fila{font-size:.85rem;font-weight:600}
.marcador-fila{text-align:center;min-width:70px}
.marcador-fila .marcador{font-weight:800;font-size:1rem}
.marcador-fila .marcador.vs{color:#999;font-weight:400}
.estado-fila{font-size:.7rem;color:#888;margin-top:2px}
.estado-fila.en-vivo{color:var(--tomate);font-weight:700}
@media(max-width:520px){
  .marcador-grande{gap:10px}
  .equipo-destacado{width:80px}
  .resultado-destacado{font-size:1.6rem}
  .nombre-equipo-fila{font-size:.75rem}
}

/* Admin */
.admin-body{background:#f0f2f5}
.admin-wrap{max-width:960px;margin:30px auto;padding:0 16px}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:9px;border:1px solid #ccc;border-radius:6px;font-size:.95rem;font-family:inherit}
.form-row textarea{min-height:160px}
.btn{display:inline-block;background:var(--tomate);color:var(--blanco);border:none;padding:9px 18px;border-radius:6px;font-size:.9rem;cursor:pointer}
.btn.aprobar{background:#2a9d3f}
.btn.rechazar{background:#c93a24}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.75rem;font-weight:700}
.badge.borrador{background:#f4e3a1;color:#7a5b00}
.badge.monitor{background:#d7e3fc;color:#0b2545}

/* ============ Agregado: EN VIVO badge del header ============ */
.badge-en-vivo-header{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);color:var(--blanco);font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:20px}
.punto-vivo{display:inline-block;width:8px;height:8px;border-radius:50%}
.punto-vivo-rojo{background:#ff4d4d;animation:pulso 1.3s infinite}

/* ============ Agregado: buscador del header ============ */
.form-buscador{display:flex;align-items:center;background:rgba(255,255,255,.15);border-radius:20px;overflow:hidden}
.form-buscador input{background:transparent;border:none;color:var(--blanco);padding:6px 10px;font-size:.85rem;width:140px}
.form-buscador input::placeholder{color:#ffe8e2}
.form-buscador input:focus{outline:none}
.form-buscador button{background:transparent;border:none;color:var(--blanco);padding:6px 10px;cursor:pointer}
.form-buscador-header{margin-left:10px}

/* ============ Agregado: footer enlaces y redes ============ */
.footer-enlaces{margin-top:8px}
.footer-enlaces a{color:#cfd8e3;text-decoration:underline}
.footer-redes{margin-top:12px;font-size:1.1rem;display:flex;justify-content:center;gap:16px}
.footer-redes a{color:#cfd8e3}
.footer-redes a:hover{color:var(--amarillo)}

/* ============ Agregado: carrusel de la portada ============ */
.carrusel{position:relative;border-radius:var(--radio);overflow:hidden;margin-bottom:20px;background:#000;aspect-ratio:16/8}
.carrusel-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.carrusel-slide.activa{opacity:1;visibility:visible}
.carrusel-slide a{display:block;height:100%;position:relative}
.carrusel-slide img{width:100%;height:100%;object-fit:cover}
.carrusel-slide .overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--blanco)}
.carrusel-slide .overlay h2{font-size:1.2rem;margin:6px 0 4px;color:var(--blanco)}
.carrusel-slide .overlay .meta{color:#ddd}
.carrusel-flecha{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:var(--blanco);border:none;width:34px;height:34px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.carrusel-flecha.prev{left:10px}
.carrusel-flecha.next{right:10px}
.carrusel-dots{position:absolute;bottom:10px;right:14px;display:flex;gap:6px}
.carrusel-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.carrusel-dot.activo{background:var(--blanco)}
@media(max-width:600px){.carrusel{aspect-ratio:4/3}}

/* ============ Agregado: layout de dos columnas de la portada ============ */
.diseno-portada{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.diseno-portada{grid-template-columns:2fr 1fr;align-items:start}}
.columna-lateral{display:flex;flex-direction:column;gap:16px}

/* ============ Agregado: caja "EN VIVO" (stream de YouTube) de la portada ============ */
.portada-en-vivo{background:#000;border-radius:var(--radio);overflow:hidden;margin-bottom:18px}
.portada-en-vivo-titulo{display:flex;align-items:center;gap:8px;color:var(--blanco);font-weight:700;font-size:.85rem;padding:10px 14px;background:#1c1c1c}
.portada-en-vivo iframe{width:100%;aspect-ratio:16/9;border:none;display:block}

/* ============ Agregado: miniatura con icono de "play" (notas con video, sin imagen) ============ */
.miniatura-video{position:relative;display:block;aspect-ratio:16/9;background:var(--gris-claro)}
.miniatura-video img{width:100%;height:100%;object-fit:cover}
.miniatura-video i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--blanco);background:rgba(0,0,0,.55);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* ============ Agregado: video embebido dentro de una nota ============ */
.articulo-video{margin-bottom:10px;border-radius:var(--radio);overflow:hidden}
.articulo-video iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.articulo-video-enlace{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#777;margin-bottom:14px}

/* ============ Agregado: botones para compartir la nota ============ */
.compartir-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}
.compartir-fila-abajo{border-top:1px solid var(--gris-claro);padding-top:16px;margin-top:20px}
.compartir-texto{font-size:.85rem;color:#777;width:100%;margin-bottom:4px}
.boton-whatsapp{display:inline-flex;align-items:center;gap:6px;background:#25d366;color:var(--blanco);padding:7px 14px;border-radius:20px;font-size:.85rem;font-weight:600}
.red-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--blanco);font-size:.9rem}
.red-social.red-facebook{background:#1877f2}
.red-social.red-x{background:#000}
.red-social.red-telegram{background:#229ed9}

/* ============ Agregado: tarjetas de ecuatorianos en Champions/CONMEBOL ============ */
.champions-ecuatorianos{margin-bottom:20px}
.champions-ecuatorianos h2{font-size:1.1rem;margin-bottom:10px}
.champions-ecuatorianos-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.champions-ecuatorianos-grid{grid-template-columns:1fr 1fr}}
.champions-ecuatoriano-card{background:var(--blanco);border-radius:var(--radio);padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.champions-ecuatoriano-jugador{font-weight:800;font-size:1rem}
.champions-ecuatoriano-equipo{color:#666;font-size:.85rem;margin-bottom:6px}
.champions-ecuatoriano-resultado{font-weight:800;font-size:1.3rem;color:var(--tomate-oscuro)}
.champions-ecuatoriano-rival{font-size:.85rem;color:#555}
.champions-ecuatoriano-fecha{font-size:.75rem;color:#999;margin-top:4px}

/* ============ Agregado: marcadores en la barra lateral (resultados en vivo mini) ============ */
.marcadores-sidebar{background:var(--blanco);border-radius:var(--radio);padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.marcadores-cabecera{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.marcadores-cabecera h2{font-size:1rem}
.marcadores-liga{font-size:.75rem;color:#888}
.marcadores-jornada{font-size:.75rem;color:var(--tomate);font-weight:700}
.marcadores-lista{display:flex;flex-direction:column;gap:2px}
.marcador-item{padding:8px 0;border-bottom:1px solid var(--gris-claro)}
.marcador-item:last-child{border-bottom:none}
.marcador-fila-mini{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.equipo-mini{display:flex;align-items:center;gap:6px}
.equipo-mini-vis{justify-content:flex-end;text-align:right}
.escudo-mini{width:18px;height:18px;object-fit:contain}
.nombre-mini{font-size:.8rem;font-weight:600}
.resultado-mini{text-align:center;min-width:50px;font-weight:800;font-size:.9rem}
.vs-mini{color:#999;font-weight:400;font-size:.8rem}
.estado-mini{font-size:.7rem;color:#888;text-align:center;margin-top:2px}
.estado-mini.en-vivo{color:var(--tomate);font-weight:700}
.marcadores-vertodo{display:block;text-align:center;margin-top:10px;font-size:.85rem;font-weight:600;color:var(--tomate)}

/* ============ Agregado: caja "F1 EN VIVO" (sidebar, se llena via JS) ============ */
.f1-en-vivo-box{background:#15151e;color:var(--blanco);border-radius:var(--radio);padding:14px}
.f1-en-vivo-cabecera{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.f1-en-vivo-cabecera h2{font-size:.95rem;color:var(--blanco)}
.f1-punto-vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:pulso 1.3s infinite}
.f1-en-vivo-meta{font-size:.75rem;color:#aaa;margin-bottom:10px}
.f1-piloto-fila{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.1)}
.f1-piloto-pos{width:20px;font-weight:800;font-size:.8rem;text-align:center}
.f1-piloto-color{width:5px;height:28px;border-radius:3px}
.f1-piloto-datos{flex:1}
.f1-piloto-nombre{font-size:.82rem;font-weight:700}
.f1-piloto-equipo{font-size:.7rem;color:#aaa}

/* ============ Agregado: cuenta regresiva de la proxima carrera de F1 ============ */
.f1-countdown{background:linear-gradient(135deg,#15151e,#1f1f2e);color:var(--blanco);border-radius:var(--radio);padding:20px;margin-bottom:20px}
.f1-countdown-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.f1-flag-icon{font-size:1.6rem}
.f1-countdown-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:#ff4d4d;font-weight:700}
.f1-countdown-nombre{font-size:1.2rem;color:var(--blanco);margin:2px 0 4px}
.f1-countdown-lugar{font-size:.85rem;color:#ccc}
.f1-countdown-bandera{margin-left:4px}
.f1-countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.f1-countdown-bloque{background:rgba(255,255,255,.08);border-radius:6px;padding:10px 4px}
.f1-countdown-num{display:block;font-size:1.6rem;font-weight:800}
.f1-countdown-label{display:block;font-size:.7rem;color:#aaa;text-transform:uppercase;margin-top:2px}
.f1-countdown-vivo{text-align:center;font-size:1.1rem;font-weight:700;padding:10px 0}
@media(max-width:480px){.f1-countdown-num{font-size:1.2rem}}

/* ============ Agregado: notas relacionadas al final de una nota ============ */
.relacionadas{margin-top:30px}
.relacionadas h2{font-size:1.1rem;margin-bottom:14px}

/* ============ Agregado: numero de posicion en tablas (apoya a .col-pos ya usado) ============ */
table.tabla-posiciones .col-pos{font-weight:700;color:#888}

/* ============ Agregado: ajustes finales de compatibilidad ============ */
.contenido-principal{min-width:0}
.equipo-fila .nombre{font-size:.85rem;font-weight:600}

/* ============ Agregado: logo real en el header ============ */
header.site .logo{display:flex;align-items:center}
header.site .logo img{width:40px;height:40px;display:block}

/* ============ Agregado: respaldo de texto si el logo aun no esta subido ============ */
.logo-texto{font-weight:800;font-size:1.2rem;color:var(--blanco);letter-spacing:.5px}