/* ===========================================================
   portal.css — El Conquistador FM (app PHP)
   Identidad: negro / rojo / verde. Compacto y autocontenido.
   =========================================================== */
:root{
  --rojo:#e10600; --verde:#00a651; --bg:#0a0a0a; --panel:#141414;
  --borde:#262626; --texto:#ececec; --sub:#9a9a9a;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:#000; border-bottom:1px solid var(--borde)}
.header-inner{max-width:1200px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; gap:24px}
.logo img{height:46px; width:auto}
.main-nav{display:flex; gap:4px; flex-wrap:wrap}
.main-nav a{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--sub); padding:6px 11px; border-radius:4px}
.main-nav a:hover{background:rgba(255,255,255,.08); color:#fff}

/* Layout */
.portal-wrap{max-width:1200px; margin:0 auto; padding:24px 20px}
.aviso{color:var(--sub); background:var(--panel); border:1px solid var(--borde);
  padding:14px 16px; border-radius:8px}

/* Encabezados de categoría */
.cat-header{margin:26px 0 12px; border-bottom:2px solid var(--rojo); padding-bottom:6px}
.cat-title{margin:0; font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.03em}
.cat-azul{color:#5b9bd5; border-color:#5b9bd5}

/* Grid Nacional */
.news-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.news-card{background:var(--panel); border:1px solid var(--borde); border-radius:10px;
  overflow:hidden; transition:transform .15s, box-shadow .15s}
.news-card:hover{transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.5)}
.news-card--featured{grid-column:span 2; grid-row:span 2}
.card-thumb{position:relative; aspect-ratio:16/9; background:#000}
.card-thumb img{width:100%; height:100%; object-fit:cover}
.news-card--featured .card-thumb{aspect-ratio:16/10}
.card-cat-badge{position:absolute; top:8px; left:8px; background:var(--rojo); color:#fff;
  font-size:10px; font-weight:800; text-transform:uppercase; padding:3px 9px; border-radius:4px}
.card-body{padding:11px 13px}
.card-body h2{font-size:21px; margin:0 0 6px; line-height:1.2}
.card-body h3{font-size:14px; margin:0; line-height:1.3}
.card-body p{color:var(--sub); font-size:13px; margin:6px 0 8px}
.card-meta{display:flex; gap:8px; align-items:center; color:var(--sub); font-size:11px; margin-top:6px}
.source-badge{background:rgba(0,166,81,.15); color:var(--verde); padding:2px 7px; border-radius:4px; font-weight:700}

/* Dos columnas: Internacional + Deportes */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px}
.news-list{display:flex; flex-direction:column}
.news-list-item{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--borde)}
.news-list-item:hover h3,.news-list-item:hover h4{color:var(--verde)}
.news-list-item--featured{flex-direction:column}
.news-list-item--featured .card-thumb{aspect-ratio:16/9; border-radius:8px; width:100%}
.news-list-item .card-thumb{width:120px; flex-shrink:0; border-radius:6px; aspect-ratio:1}
.news-list-item h3{font-size:15px; margin:8px 0 0}
.news-list-item h4{font-size:13px; margin:0}

/* Lo más leído */
.sidebar-widget{margin-top:30px; background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:16px}
.widget-title{font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.04em; margin-bottom:10px}
.top-news-list{list-style:none; counter-reset:n; margin:0; padding:0}
.top-news-list li{counter-increment:n; border-bottom:1px solid var(--borde); padding:9px 0}
.top-news-list li:last-child{border:0}
.top-news-list a{display:flex; gap:10px}
.top-news-list li::before{content:counter(n); color:var(--rojo); font-weight:900; font-size:18px}
.tn-title{font-size:13px; font-weight:600; line-height:1.35}
.top-news-list time{display:block; color:var(--sub); font-size:10px; margin-top:2px}
.top-news-list a:hover .tn-title{color:var(--verde)}

/* Página de noticia (cuerpo completo) */
.nota{max-width:760px; margin:0 auto}
.nota-cat{display:inline-block; background:var(--rojo); color:#fff; font-size:11px; font-weight:800;
  text-transform:uppercase; padding:4px 11px; border-radius:4px}
.nota-titulo{font-size:34px; line-height:1.15; margin:12px 0 10px}
.nota-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--sub); font-size:13px; margin-bottom:18px}
.nota-figura{margin:0 0 20px}
.nota-figura img{width:100%; border-radius:12px}
.nota-cuerpo{font-size:17px; line-height:1.75}
.nota-cuerpo p{margin:0 0 18px}
.nota-cuerpo h2,.nota-cuerpo h3{margin:26px 0 10px}
.nota-cuerpo img{border-radius:10px; margin:18px 0}
.nota-cuerpo blockquote{border-left:3px solid var(--verde); margin:18px 0; padding:4px 0 4px 16px; color:var(--sub)}
.nota-fuente{color:var(--sub); font-size:13px; border-top:1px solid var(--borde); padding-top:16px; margin-top:24px}
.volver{color:var(--verde); font-weight:700}

/* Botón compartir */
.btn-compartir{background:var(--verde); color:#000; border:0; font-weight:800; font-size:12px;
  padding:6px 13px; border-radius:6px; cursor:pointer}
.btn-compartir:hover{filter:brightness(1.1)}
.share-menu{display:inline-flex; gap:8px; margin-left:8px}
.share-menu a{background:var(--panel); border:1px solid var(--borde); padding:5px 10px; border-radius:6px; font-size:12px; font-weight:700}

/* Footer */
.site-footer{border-top:1px solid var(--borde); margin-top:50px; padding:24px 20px; text-align:center; color:var(--sub); font-size:12px}

/* Responsive */
@media(max-width:860px){
  .news-grid{grid-template-columns:1fr 1fr}
  .news-card--featured{grid-column:span 2; grid-row:auto}
  .two-col{grid-template-columns:1fr; gap:16px}
  .nota-titulo{font-size:26px}
}
@media(max-width:520px){
  .news-grid{grid-template-columns:1fr}
  .news-card--featured{grid-column:auto}
}