/* ═══════════════════════════════════════════════════════════════════════
   Tactical Ops Chile · v3 — Noticias: tarjetas (portada), lector (diálogo) y página noticia.html
   Va junto a v3-noticias.js. Usa los tokens de v3-base.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tarjetas: la primera grande (imagen + texto lado a lado), el resto en grilla de 3 ── */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nw{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.nw:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.nw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s}
.nw:hover::before,.nw:focus-visible::before{transform:scaleY(1)}
.nw .im{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.nw .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.nw:hover .im img{transform:scale(1.04)}
.nw .bd{display:flex;flex-direction:column;flex:1;padding:16px 18px 14px}
.nmeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.nw time{font:700 13px var(--f-c);letter-spacing:.12em;color:var(--o);text-transform:uppercase}
.nt{display:block;font:800 italic 24px/1.05 var(--f-c);text-transform:uppercase;margin-top:6px}
.nw .sub{display:block;margin-top:8px;color:var(--txt-2);font:500 15px/1.45 var(--f-b)}
.nft{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);margin-top:16px}
.nw .bd .nft{margin-top:auto}
.nw .bd .nt+.nft,.nw .bd .sub+.nft{margin-top:16px}
.nst{display:inline-flex;align-items:center;gap:5px;font:700 14px var(--f-c);letter-spacing:.04em;color:var(--txt-3);font-variant-numeric:tabular-nums}
.nst .ico{width:16px;height:16px}
.nst.on{color:var(--r)} .nst.on .ico{fill:currentColor}
.nft .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:800 italic 14px var(--f-c);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);transition:color .2s,gap .2s}
.nft .go .ico{width:16px;height:16px}
.nw:hover .go{color:var(--y);gap:10px}
.cat{display:inline-block;margin-right:8px;padding:1px 8px;font:800 italic 12px var(--f-c);letter-spacing:.1em;text-transform:uppercase;color:#111;background:var(--y);transform:skewX(var(--skew))}
/* destacada */
.nw.big{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr}
.nw.big .im{aspect-ratio:auto;min-height:340px}
.nw.big .im::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--panel))}
.nw.big .bd{padding:30px 32px 22px;justify-content:center}
.nw.big .nt{font-size:clamp(30px,3.2vw,46px);line-height:.95;margin-top:12px}
.nw.big .sub{font-size:16px;margin-top:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nw.big::after{content:"Lo último";position:absolute;top:14px;left:14px;z-index:2;padding:4px 12px;font:800 italic 13px var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--r);transform:skewX(var(--skew))}

/* ── Lector (diálogo nativo de la portada: Esc, foco atrapado y devuelto) ── */
dialog.reader{margin:auto;width:min(94vw,880px);max-height:92vh;padding:0;border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(0,0,0,.7);scrollbar-color:var(--line-2) transparent}
dialog.reader::backdrop{background:rgba(3,4,8,.88);backdrop-filter:blur(6px)}
dialog.reader[open]{animation:rd-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes rd-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
.rd-top{position:sticky;top:0;z-index:4;height:0}
.rd-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;color:#fff;background:rgba(7,9,15,.8);box-shadow:inset 0 0 0 1px var(--line-2);backdrop-filter:blur(6px);transition:color .15s,box-shadow .15s}
.rd-x:hover{color:var(--y);box-shadow:inset 0 0 0 1px var(--y)}
/* Magic UI · Scroll Progress: barra de lectura del diálogo (solo CSS, scroll-driven) */
.rd-prog{position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.rd-prog{animation:rd-prog linear both;animation-timeline:scroll(nearest block)}}
@keyframes rd-prog{to{transform:scaleX(1)}}

/* ── Artículo (lector y página) ── */
.art{background:var(--bg-2)}
.art-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;background:var(--panel)}
.art-img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.art-hero:has(.art-img) .art-cap{margin-top:-120px}
.art-hero:has(.art-img)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 30%,rgba(11,15,24,.6) 55%,var(--bg-2) 100%)}
.art-cap{position:relative;z-index:1;padding:28px 36px 8px}
.art-hero:not(:has(.art-img)){background:linear-gradient(rgba(11,15,24,.72),var(--bg-2)),url(esc/capsula.webp) center/cover no-repeat}   /* sin imagen propia */
.art-hero:not(:has(.art-img)) .art-cap{padding-top:120px}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:700 13px var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)}
.art-meta time{color:var(--o)}
.art-meta>span:not(.cat){display:inline-flex;align-items:center;gap:5px}
.art-meta .ico{width:15px;height:15px}
.art-meta .cat{margin-right:0}
.art-cap :is(h1,h2){font:900 italic clamp(32px,4.6vw,58px)/.92 var(--f-c);text-transform:uppercase;margin:14px 0 0;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.art-cap .sub{margin-top:14px;color:var(--txt-2);font:500 18px/1.5 var(--f-b);max-width:62ch}
.art-cap::after{content:"";display:block;width:84px;height:5px;margin-top:20px;background:var(--grad);transform:skewX(var(--skew))}
.art-in{padding:22px 36px 36px}

/* cuerpo (HTML del editor del panel) */
.prose{color:var(--txt-2);font-size:17.5px;line-height:1.75;max-width:68ch}
.prose>*+*{margin-top:14px}
.prose strong,.prose b{color:var(--txt)}
.prose em{color:var(--txt)}
.prose a{color:var(--o);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--y)}
.prose h2,.prose h3{color:var(--txt);text-transform:uppercase;font-style:italic;font-family:var(--f-c);line-height:1.05}
.prose h2{font-weight:900;font-size:clamp(24px,2.6vw,30px);margin-top:30px;padding-left:16px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;background:var(--grad);transform:skewX(var(--skew))}
.prose h3{font-weight:800;font-size:22px;margin-top:26px;color:var(--y)}
.prose h2+*,.prose h3+*{margin-top:8px}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:26px}
.prose li+li{margin-top:8px}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;background:var(--o);transform:skewX(var(--skew))}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li);position:absolute;left:0;top:0;font:900 italic 18px/1.7 var(--f-c);color:var(--o)}
.prose li[data-list=bullet]::before{content:"";left:4px;top:.62em;width:9px;height:9px;background:var(--o);transform:skewX(var(--skew))}
.prose code{font:700 .92em/1 var(--f-c);letter-spacing:.04em;color:var(--y);background:rgba(255,201,31,.08);box-shadow:inset 0 0 0 1px rgba(255,201,31,.3);padding:2px 7px;white-space:nowrap}
.prose blockquote{padding:16px 20px;background:var(--panel);border-left:4px solid var(--y);color:var(--txt)}
.prose img,.prose iframe{max-width:100%;margin:6px 0}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.prose hr{border:0;height:1px;background:var(--line-2);margin:24px 0}
.art-link{margin-top:24px}

/* ❤️ y compartir */
.art-react{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:34px;padding:18px 20px;background:var(--panel);border:1px solid var(--line)}
.art-react .q{font:800 italic 20px var(--f-c);text-transform:uppercase;width:100%}
.art-react .shr{margin-left:auto}
.lk{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;font:800 italic 16px var(--f-c);letter-spacing:.08em;text-transform:uppercase;color:var(--txt);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);transform:skewX(var(--skew));transition:box-shadow .15s,color .15s,background .15s}
.lk>*{transform:skewX(calc(var(--skew) * -1))}
.lk .ico{width:20px;height:20px;transition:transform .2s}
.lk b{min-width:2ch;padding-left:10px;margin-left:2px;border-left:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.lk:hover{box-shadow:inset 0 0 0 1px var(--r);color:#fff}
.lk:hover .ico{transform:skewX(calc(var(--skew) * -1)) scale(1.12)}
.lk.on{background:var(--r);color:#fff;box-shadow:none}
.lk.on .ico{fill:currentColor}
.lk.on b{border-color:rgba(255,255,255,.35)}
.lk:active .ico{transform:skewX(calc(var(--skew) * -1)) scale(.9)}
.lk-fx{position:fixed;z-index:200;pointer-events:none;line-height:1;will-change:transform,opacity}

/* comentarios: muy pronto */
.art-com{margin-top:20px;padding:20px;border:1px dashed var(--line-2);background:rgba(17,22,36,.6)}
.vid-ext{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:8px 0;background:#c4302b;color:#fff;font:800 15px var(--f-c);letter-spacing:.06em;text-transform:uppercase}
.com-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.com-h h3{display:flex;align-items:center;gap:10px;font:900 italic 24px var(--f-c);text-transform:uppercase}
.com-h h3 .ico{width:22px;height:22px;color:var(--o)}
.com-p{margin-top:8px;color:var(--txt-2);font-size:15px}
.com-f{margin-top:14px}
.com-h h3 small{font:600 15px var(--f-b);font-style:normal;color:var(--txt-3)}
.com-p a{color:var(--y);text-decoration:underline}
.com-l{list-style:none;margin-top:18px;display:grid;gap:14px}
.com-i{display:grid;grid-template-columns:40px 1fr;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.com-i:first-child{border-top:0;padding-top:0}
.com-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2) center/cover;font:900 italic 18px var(--f-c);color:var(--y)}
.com-a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.com-a b{font:800 16px var(--f-c);letter-spacing:.04em;text-transform:uppercase}
.com-a time{font-size:13px;color:var(--txt-3)}
.com-t{margin-top:4px;color:var(--txt-2);font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.com-e{color:var(--txt-3);font-size:15px}
.com-f fieldset{border:0;min-width:0}
.com-f textarea{display:block;width:100%;min-height:84px;padding:12px 14px;resize:none;font:400 16px/1.5 var(--f-b);color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:0}
.com-f fieldset:disabled textarea{cursor:not-allowed;opacity:.6}
.com-b{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.com-b .note{color:var(--y)}
.com-f fieldset:disabled .btn{filter:grayscale(1);opacity:.45;cursor:not-allowed}

/* más noticias */
.art-mas{margin-top:34px}
.art-mas h3{font:900 italic 24px var(--f-c);text-transform:uppercase;margin-bottom:12px}
.art-mas>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{display:flex;flex-direction:column;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:border-color .2s,transform .2s}
.mini:hover{border-color:var(--y);transform:translateY(-2px)}
.mini img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--bg-2)}
.mini span{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.mini time{font:700 12px var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:var(--o)}
.mini b{font:800 italic 17px/1.05 var(--f-c);text-transform:uppercase}

@media (max-width:1080px){
  .news{grid-template-columns:1fr 1fr}
  .nw.big{grid-template-columns:1fr}
  .nw.big .im{min-height:0;aspect-ratio:16/8}
  .nw.big .im::after{background:linear-gradient(180deg,transparent 60%,var(--panel))}
  .nw.big .bd{padding:20px 22px 16px}
}
@media (max-width:640px){
  .news{grid-template-columns:1fr}
  .nt{font-size:22px}
  dialog.reader{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0}
  .art-img{aspect-ratio:4/3}
  .art-hero:has(.art-img) .art-cap{margin-top:-90px}
  .art-cap{padding:20px 18px 4px}
  .art-in{padding:18px 18px 28px}
  .prose{font-size:16.5px}
  .art-react{padding:16px}
  .art-react .shr{margin-left:0}
  .art-mas>div{grid-template-columns:1fr}
  .mini{flex-direction:row}
  .mini img{width:120px;aspect-ratio:4/3;flex:none}
}
@media (prefers-reduced-motion:reduce){
  dialog.reader[open]{animation:none}
  .nw,.nw .im img,.mini,.lk .ico{transition:none}
}

/* ── Bloques de noticia con diseño (2026-10-13): se escriben en el body_html con estas clases (DOMPurify deja class/style).
   El editor Quill del admin no los entiende: esas noticias se editan en modo HTML. ── */
.prose .nt-lead{font-size:1.08em;color:var(--txt)}
.prose .nt-plazo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:linear-gradient(100deg,rgba(232,38,47,.16),rgba(255,138,31,.10) 55%,rgba(255,201,31,.06));border:1px solid rgba(255,138,31,.35);border-left:4px solid var(--o)}
.prose .nt-plazo span{font:800 13px var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:var(--o)}
.prose .nt-plazo b{font:900 italic clamp(20px,2.4vw,26px)/1.05 var(--f-c);text-transform:uppercase;color:var(--txt)}
.prose .nt-plazo small{flex-basis:100%;font-size:14px;color:var(--txt-3);margin-top:-8px}
/* cruces: tarjeta con la foto del mapa (--map) */
.prose .nt-cruces{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prose .nt-cruce{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:38px 14px 14px;min-height:190px;overflow:hidden;text-decoration:none;color:var(--txt);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(7,9,15,.55),rgba(7,9,15,.92)),var(--map,none) center/cover no-repeat,var(--panel);transition:transform .25s,border-color .25s}
.prose .nt-cruce:hover{transform:translateY(-3px);border-color:var(--o);color:var(--txt)}
.prose .nt-cruce::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.prose .nt-fase{position:absolute;left:14px;top:12px;font:800 12px var(--f-c);letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.prose .nt-eq{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.prose .nt-eq img{width:72px;height:72px;margin:0;border-radius:50%;object-fit:cover;background:var(--bg-2);box-shadow:0 0 0 3px var(--ta,#e06a14)}
.prose .nt-eq+.nt-vs+.nt-eq img{box-shadow:0 0 0 3px var(--tb,#3b82f6)}
.prose .nt-eq b{font:900 italic 21px/1 var(--f-c);text-transform:uppercase;overflow-wrap:anywhere}
.prose .nt-eq small{font:700 13px var(--f-c);letter-spacing:.06em;color:var(--txt-3);text-transform:uppercase}
.prose .nt-vs{font:900 italic 30px var(--f-c);color:var(--o);text-shadow:0 0 18px rgba(255,138,31,.45)}
.prose .nt-meta{grid-column:1/-1;text-align:center;font:700 13px var(--f-c);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);padding-top:6px;border-top:1px solid var(--line)}
/* tabla de posiciones */
.prose .nt-tabla-w{overflow-x:auto;border:1px solid var(--line-2);background:var(--panel)}
.prose .nt-tabla{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.prose .nt-tabla th{font:800 12px var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);text-align:center;padding:10px 8px;border-bottom:1px solid var(--line-2)}
.prose .nt-tabla th:nth-child(2){text-align:left}
.prose .nt-tabla td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.prose .nt-tabla tr:last-child td{border-bottom:0}
.prose .nt-tabla td:first-child{font:900 italic 20px var(--f-c);color:var(--o);width:44px}
.prose .nt-tabla td:nth-child(2){text-align:left}
.prose .nt-tabla td:last-child{font:900 18px var(--f-c);color:var(--y)}
.prose .nt-clan{display:flex;align-items:center;gap:10px;font:800 17px var(--f-c);text-transform:uppercase;color:var(--txt)}
.prose .nt-clan img{width:30px;height:30px;margin:0;border-radius:50%;object-fit:cover;flex:none}
.prose .nt-tabla tr.nt-pasa td:first-child{box-shadow:inset 3px 0 0 var(--o)}
.prose .nt-tabla tr.nt-out td{color:var(--txt-3)}
.prose .nt-tabla tr.nt-out td:first-child,.prose .nt-tabla tr.nt-out td:last-child{color:var(--txt-3)}
.prose .nt-tabla tr.nt-out .nt-clan{color:var(--txt-3)}
.prose .nt-tabla tr.nt-out img{filter:grayscale(1);opacity:.6}
.prose .nt-tabla tr.nt-corte td{border-bottom:2px dashed rgba(232,38,47,.55)}
.prose .nt-nota{font-size:14px;color:var(--txt-3)}
/* despedida: clanes que quedan fuera */
.prose .nt-fuera{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prose .nt-fuera div{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--r)}
.prose .nt-fuera img{width:56px;height:56px;margin:0;border-radius:50%;object-fit:cover;filter:grayscale(.85);flex:none}
.prose .nt-fuera b{display:block;font:900 italic 22px/1 var(--f-c);text-transform:uppercase;color:var(--txt)}
.prose .nt-fuera small{font-size:14px;color:var(--txt-3)}
/* tarjeta (imagen 1200×630 de la web) */
.prose .nt-card{margin:18px 0 0}
.prose .nt-card img{display:block;width:100%;height:auto;margin:0;border:1px solid var(--line-2)}
.prose .nt-card figcaption{font-size:14px;color:var(--txt-3);margin-top:8px}
@media (max-width:640px){
  .prose .nt-cruces,.prose .nt-fuera{grid-template-columns:1fr}
  .prose .nt-eq img{width:60px;height:60px}
  .prose .nt-eq b{font-size:19px}
  .prose .nt-tabla{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.prose .nt-cruce{transition:none}}