/* styles.css

/* ===================================================================== */
/* BLOQUE 1 — Variables y tema base                                      */
/* ===================================================================== */
:root{

  --body-bg:#ffffff;
  --body-text:#000000;
  --header-bg:#1a1a1a;
  --button-text:#ffffff;
  --headline-bg:#ffffff;
  --headline-text:#000000;
  --footer-bg:#f5f5f5;
  --footer-text:#555555;
  --footer-border:#e0e0e0;

  --header-height:80px;
  --nav-footer-height:60px;
  --radius-sm:6px;
  --radius-md:12px;
  --shadow-sm:0 4px 8px rgba(0,0,0,.2);
  --shadow-md:0 8px 16px rgba(0,0,0,.2);

  --accent:#ff0000;
  --accent-2:#fc0505;

  --topbar-height: 0px;          
  --mobile-infobar-height: 26px;   
}

/* ===================================================================== */
/* BLOQUE X — Unificación de paleta y estados de Like                    */
/* ===================================================================== */

/* Paleta global consistente para TODAS las secciones */
:root{
  --ink:#111111;          /* texto principal */
  --muted:#666666;        /* metadatos/fechas */
  --bar-bg:#fafafa;       /* fondo barra inferior (footer de la card) */
  --bar-border:#eaeaea;   /* borde barra inferior */
  --brand:#111111;        /* títulos */
  --icon:#666666;         /* color base de íconos */
  --like-red:#e50914;     /* rojo estilo Instagram/Meta */
}

/* Títulos y textos */
h1 { color: var(--brand); }
.headline-title-inline { color: var(--brand); }
.headline-meta .source-line,
.headline-date { color: var(--muted); }

/* Barra inferior consistente */
.headline-footer{
  background: var(--bar-bg) !important;
  border-top: 1px solid var(--bar-border) !important;
}
.source-name{ color: var(--muted) !important; }

/* Íconos y contadores (estado base) */
.like-button i,
.copy-icon { color: var(--icon) !important; transition: color .2s ease; }
.like-count { color: var(--muted); }

/* Estado hover/focus (opcional) */
.like-button:hover i,
.copy-icon:hover { color: var(--brand); }

/* Estado con likes (≥1) o like propio -> rojo sólido SIEMPRE */
.like-button.has-likes i,
.like-button.liked i{
  color: var(--like-red) !important;
}

/* Si querés que el corazón se vea sólido cuando hay likes aunque el usuario no haya dado like,
   forzamos grosor visual (útil si el icono queda como 'regular'): */
.like-button.has-likes i::before{
  font-weight: 900;
}

/* Animación splash de corazón (overlay estilo Instagram) */
.like-splash{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 5;
}
.like-splash i{
  font-size: clamp(72px, 12vw, 120px);
  color: var(--like-red);
  opacity: 0;
  animation: heart-pop .9s cubic-bezier(.2,.7,.2,1) forwards;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}
@keyframes heart-pop{
  0%   { transform: scale(.6); opacity: 0; }
  15%  { transform: scale(1.15); opacity: .95; }
  40%  { transform: scale(1); opacity: 1; }
  75%  { transform: scale(1); opacity: .9; }
  100% { transform: scale(.9); opacity: 0; }
}

/* ===================================================================== */
/* BLOQUE 2 — Reset, tipografía y helpers                                */
/* ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--body-bg);
  color:var(--body-text);
  font-family:'Poppins',sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

@keyframes fadeUp {
  from {opacity:0; transform: translateY(6px);}
  to   {opacity:1; transform: translateY(0);}
}

/* ===================================================================== */
/* BLOQUE 3 — Layout general                                             */
/* ===================================================================== */
.full-page{display:flex;flex-direction:column;min-height:100vh;width:100%}

.page-container{
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1200px;
  margin:calc(var(--header-height) + var(--mobile-infobar-height)) auto 0;
  padding:0 20px var(--nav-footer-height);
}

h1{
  text-align:center;
  font-size:clamp(24px,5vw,32px);
  margin:10px 0;
  font-weight:600;
  font-family:'Bangers',cursive;
  color:var(--body-text);
}

/* ===================================================================== */
/* BLOQUE 4 — Header + Topbar                                            */
/* ===================================================================== */
.header{
  position:fixed;top:0;left:0;width:100%;height:var(--header-height);
  background:var(--header-bg);z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.header-img{width:100%;max-width:340px;height:50px;object-fit:contain}

.social-bar{
  display:flex;justify-content:center;gap:clamp(20px,3vw,30px);
  width:100%;max-width:1200px
}
.social-icon{
  color:var(--button-text);
  font-size:clamp(18px,2.5vw,20px);
  transition:color .3s;
}
.social-icon:hover{color:var(--accent-2)}

.header .header-left{
  position: absolute;
  top: 8px;
  left: 16px;
  display: none;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  line-height: 1.1;
  white-space: nowrap;
  z-index: 1100;
}
.header .ni-date{ font-size: 13px; font-weight: 400; opacity:.95; color:#fff; }
.header .ni-row{ display:flex;align-items:center;gap:3px;font-size:12px;color:#fff; }
.header .ni-sep{ color: rgba(255,255,255,.65); margin:0 4px; }
.header .ni-icon{ font-size:16px; line-height:1; color:#fff; }

.topbar{ display:none; }

@media (max-width:1024px){
  .sidebar .sidebar-menu a[href="/"]{ display:none !important; }
}

/* ===================================================================== */
/* BLOQUE 5 — Site Info Bar  
/* ===================================================================== */
@media (max-width:1024px){
  .header .header-left{ display:none !important; }

  .site-info-bar{
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    z-index: 999; 
    width: 100%;
    background:#ffffff;
    color:#000000;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    line-height:1;
    text-align:center;
    padding:6px 8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-bottom:1px solid #eee;
    box-shadow:0 1px 0 rgba(0,0,0,.03);
  }

  .page-container{
    margin-top: calc(var(--header-height) + var(--mobile-infobar-height));
  }
}

@media (min-width:1025px){
  :root{ --topbar-height: 48px; }
  .header .header-left{ display:flex; }
  .topbar{
    display:flex;
    position:fixed; left:0; right:0; top:var(--header-height);
    height:var(--topbar-height);
    background:#ffffff;
    border-bottom:1px solid #eee;
    z-index:1500;
    align-items:center;
    justify-content:center;
  }
  .topbar .topbar-menu{
    display:flex; gap:10px; list-style:none; margin:0; padding:0 14px;
    align-items:center; overflow-x:auto;
  }
  .topbar .topbar-menu a{
    position: relative;
    display:flex; align-items:center; gap:8px;
    padding:8px 10px 12px;
    font-size:14px; color:#333; transition:color .2s ease;
    white-space:nowrap;
  }
  .topbar .topbar-menu a:hover{ color:var(--accent); }
  .topbar .topbar-menu a.active{ background:transparent !important; color:var(--accent); }
  .topbar .topbar-menu a.active i{ color:var(--accent); }
  .topbar .topbar-menu a::after{
    content:"";
    position:absolute; left:10px; right:10px; bottom:4px; height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transform:scaleX(0); transform-origin:left center; transition:transform .25s ease;
    border-radius:2px; will-change:transform;
  }
  .topbar .topbar-menu a:hover::after,
  .topbar .topbar-menu a.active::after,
  .topbar .topbar-menu a:focus-visible::after{ transform:scaleX(1); }
  .topbar .topbar-menu a:focus-visible{ outline:none; color:var(--accent); }

  .page-container{ margin: calc(var(--header-height) + var(--topbar-height)) auto 0; }

  .topbar .topbar-menu a[href="/"]{ display:none !important; }
}

/* ===================================================================== */
/* BLOQUE 6 — Sidebar                                             
/* ===================================================================== */
.sidebar{
  position:fixed;top:var(--header-height);right:0;
  width:250px;height:calc(100vh - var(--header-height));
  background:#fff;z-index:2000;
  transform:translateX(100%);transition:transform .3s;
  padding:20px; box-shadow:-6px -1px 5px rgba(0,0,0,.3)
}
.sidebar.active{transform:translateX(0)}
.sidebar h2{
  font-family:'Bangers',cursive;font-size:24px;color:#333;
  margin-bottom:20px;text-align:center
}
.sidebar-menu{list-style:none}
.sidebar-menu li{border-bottom:1px solid var(--accent)}
.sidebar-menu li:last-child{border-bottom:none}
.sidebar-menu a,.sidebar-menu button{
  display:flex;align-items:center;width:100%;padding:10px;
  font-size:16px;color:#333;background:none;border:none;cursor:pointer;
  transition:color .3s, background-color .2s;
}
.sidebar-menu a:hover,.sidebar-menu button:hover{color:var(--accent)}
.sidebar-menu i{margin-right:10px;font-size:18px}

.sidebar-menu a.current,
.sidebar-menu a.active{
  background-color:var(--accent);
  color:#ffffff;
  border-radius:var(--radius-sm);
}
.sidebar-menu a.current i,
.sidebar-menu a.active i{ color:#ffffff }
.sidebar-menu a.current:hover,
.sidebar-menu a.active:hover{ filter:brightness(1.05) }

.sidebar-tab{
  position:fixed;top:70%;right:0;width:40px;height:100px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);cursor:pointer;z-index:2100;
  transition:transform .3s, background-color .3s;
  box-shadow:2px -6px 5px rgba(0,0,0,.3)
}
.sidebar-tab:hover{transform:rotate(180deg) scale(1.1)}

@media (min-width:1025px){
  .sidebar, .sidebar-tab{ display:none !important; }
}

/* ===================================================================== */
/* BLOQUE 7 — Lista de titulares                             
/* ===================================================================== */
.headlines-list{
  list-style:none;
  display:flex;flex-direction:column;gap:15px
}
li{display:block;position:relative;overflow:hidden;background:var(--headline-bg)}
.headline-link{
  display:block;position:relative;opacity:1;
  transition:transform .3s, box-shadow .3s
}
.headline-link:hover{transform:scale(1.02);box-shadow:var(--shadow-sm)}
.page-link.visible{ animation: fadeUp .35s ease-out both; }

.headline-card{position:relative;margin:0; overflow:hidden; border-radius:0; will-change:transform;}
.headline-image{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#ddd;border-radius:0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform, filter;
}

.headline-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 28%, rgba(0,0,0,.75) 100%);
  min-height:25%;
  display:flex;align-items:flex-end;border-radius:0;
}
.headline-title{
  color:#fff;font-weight:800;line-height:1.15;
  font-size:clamp(18px,3.5vw,21px);
  text-wrap:balance;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

.headline-footer{
  padding:10px 15px;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--footer-border);
  background:var(--footer-bg);
  border-radius:0;
}
.source-container{display:flex;align-items:center;gap:8px}
.source-logo{height:20px;width:auto}
.source-name{font-size:14px;font-weight:600;color:var(--footer-text)}

.actions-container{display:flex;align-items:center;gap:8px}
.like-container{display:flex;align-items:center;gap:8px}

.like-button{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.like-button i{font-size:20px;transition:color .3s}
.copy-icon,.open-excerpt{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:20px;transition:color .3s}
.like-button:hover i,.like-button.liked i,.copy-icon:hover,.open-excerpt:hover{ color:var(--accent) }
.like-button.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}
.like-count{font-size:14px}

@media (hover: hover) and (pointer: fine){
  .headline-link:hover .headline-image{ transform: scale(1.06); filter: brightness(1.03); }
  .headline-link:hover{ box-shadow: var(--shadow-sm); }
}
.headline-link:focus-visible .headline-image{ transform: scale(1.06); filter: brightness(1.03); }
.headline-link:active .headline-image{ transform: scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .headline-image{ transition:none; }
}

/* ===================================================================== */
/* BLOQUE 8 — Modales                               
/* ===================================================================== */
.modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  justify-content:center; align-items:center; z-index:3000; padding:2vh 2vw; opacity:0;
}
.modal.show{ display:flex; animation: modalBackdropIn .24s ease-out both; }

.modal-content{
  position:relative; width:100%; max-width:min(940px, 92vw); max-height:78vh;
  background:#fff; color:#333; border-radius:var(--radius-md);
  padding:28px 28px 18px; box-shadow:var(--shadow-md); overflow:hidden;
  transform:translateY(6px) scale(.98); opacity:0;
}
.modal.show .modal-content{ animation: modalPanelIn .28s cubic-bezier(.2,.7,.2,1) .04s both; }

.modal-content h2,.modal-content h3{
  font-family:'Poppins',cursive; text-align:center; margin-bottom:18px;
  font-size:clamp(26px, 2.2vw, 36px); line-height:1.1; color:red;
}
.modal-content p{ font-size:clamp(15px, 1.05vw, 18px); line-height:1.55; margin-bottom:14px; }
.modal-content a{ color:var(--accent); text-decoration:none; font-weight:600; }
.modal-content a:hover{ text-decoration:underline }
.close,.modal-close{ position:absolute; top:14px; right:14px; font-size:30px; cursor:pointer; background:none; border:none; color:#333; }

.modal-footer{
  margin-top:14px; display:flex; gap:10px; align-items:center; justify-content:space-between;
  font-size:clamp(14px, .95vw, 16px);
}
.modal-footer,.modal-footer .modal-date,.modal-footer a{ font-size:clamp(14px, .95vw, 16px); line-height:1.4; color:#333; }
.modal-footer a{ color:var(--accent); font-weight:600; }
.modal-footer a:hover{ text-decoration:underline; }
.modal-date{ margin-top:4px; font-size:13px; color:var(--footer-text); }

#excerptBody.clampable{
  font-size:clamp(15px, 1.15vw, 18px);
  line-height:1.45;
  color:#222;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:10;
  line-clamp:10;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
}

@keyframes modalBackdropIn{ from{opacity:0} to{opacity:1} }
@keyframes modalPanelIn{ from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }

@media (max-width:768px){
  .modal{ padding:5vh 0 }
  .modal-content{ max-width:90vw; max-height:90vh; padding:22px 18px 14px; }
  .modal-content h2,.modal-content h3{ font-size:clamp(20px, 5.5vw, 24px) }
  #excerptBody.clampable{ font-size:clamp(14px, 4vw, 16px); -webkit-line-clamp:8; line-clamp:8; }
  .modal-footer{ flex-direction:column; align-items:flex-start; gap:4px; font-size:clamp(12px, 3.5vw, 14px); }
  .modal-footer, .modal-footer .modal-date, .modal-footer a { font-size:clamp(12px, 3.5vw, 14px); }
}

#excerptModal .modal-content .modal-footer .modal-date{
  font-size: clamp(15px, 1.15vw, 18px) !important;
  font-weight: 800 !important;
  color: rgb(255, 0, 0) !important;
}

@media (prefers-reduced-motion: reduce){
  .modal.show{ animation:none }
  .modal.show .modal-content{ animation:none; opacity:1; transform:none }
}

/* ===================================================================== */
/* BLOQUE 9 — Temas por sección
/* ===================================================================== */

body[class] .source-name,
body[class] .like-button i,
body[class] .like-count,
body[class] .copy-icon { color: inherit; }

/* ===================================================================== */
/* BLOQUE 10 — Buscador 
/* ===================================================================== */

/* Paleta base (podés mover esto a :root global si querés) */
#searchModal {
  --paper: #ffffff;
  --paper-elev: #fafafa;
  --ink-900: #0f0f10;
  --ink-700: #2a2a2e;
  --ink-500: #ffffff;
  --ink-400: #8b8b95;
  --border: #e6e6ea;
  --muted: #f3f3f5;

  /* Rojos controlados */
  --red-500: #d71920;   /* rojo marca */
  --red-600: #b9151b;   /* hover/darker */
  --red-050: #fff1f1;   /* tint muy suave */

  /* Mapea a tus tokens existentes */
  --accent: var(--red-500);
  --accent-2: var(--red-600);
  --footer-border: var(--border);
  --footer-text: var(--ink-400);
  --body-text: var(--ink-700);
  --button-text: var(--ink-700);
  --radius-sm: 10px;
}

/* Backdrop más suave con blur */
.modal.solid { 
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
}

/* Contenedor del modal (por si aplicás .modal-content) */
#searchModal .modal-content{
  display:flex; flex-direction:column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.10);
}

/* Input + icono */
.search-input-row{ 
  position:relative; display:flex; align-items:center; gap:10px; margin-bottom:12px; 
}
.search-input-row i{ 
  position:absolute; left:14px; font-size:16px; color:var(--ink-400); pointer-events:none; 
}
#searchInput{
  width:100%; padding:12px 14px 12px 40px;
  border:1px solid var(--border);
  background: var(--paper-elev);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  font-size: clamp(14px, 1.05vw, 16px);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#searchInput::placeholder{ color: var(--ink-400); }
#searchInput:focus{ 
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(215,25,32,0.15);
  background: #fff;
}

/* Hint: de banda roja suave, no bloque saturado */
.search-hint{
  display:flex; align-items:flex-start; gap:8px;
  background: var(--red-050);
  border:1px solid #ffe0e0;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  padding:10px 12px; margin-bottom:10px; font-size:14px;
  position: relative;
}
.search-hint:before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--red-500);
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

/* Recientes (chips) */
.search-recents{ margin-bottom:10px; }
.search-recents .recents-title{ font-weight:600; color:var(--ink-500); margin-bottom:6px; }
.recents-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.recent-chip{
  border:1px solid var(--border); background:#fff; color:var(--body-text);
  border-radius:999px; font-size:13px; padding:6px 10px; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s;
}
.recent-chip:hover{ background:#fff; border-color:#f0c7cb; color: var(--ink-700); }
.recent-chip:focus-visible{ outline:2px solid rgba(215,25,32,.35); outline-offset:2px; }

/* Resultados */
.search-results{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.search-item{ 
  padding:10px 8px; border-bottom:1px solid var(--border);
  border-radius: 10px;
  transition: background .12s ease;
}
.search-item:last-child{ border-bottom:none; }
.search-result{ display:block; text-decoration: none; }
.search-title{ font-weight:700; line-height:1.25; color:#111; }
.search-title mark{ background:#fff4b8; padding:0 .15em; border-radius:2px; }
.search-meta-line{ color:var(--footer-text); font-size:13px; margin-top:4px; }
.search-meta-line .search-source{ color:var(--red-500); font-weight:700; }

.search-item:hover{
  background: linear-gradient(0deg, rgba(215,25,32,0.03), rgba(215,25,32,0.03));
}
.search-result:hover .search-title{ color:var(--red-600); }

/* Meta de paginación */
.search-meta{ color:var(--footer-text); }
.search-pager{ display:flex; align-items:center; gap:6px; }
.search-pager .pager-btn,
.search-pager .pager-num{
  background:#fff; border:1px solid var(--border); padding:6px 10px;
  border-radius:var(--radius-sm); cursor:pointer; font-size:14px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.search-pager .pager-num.active{ 
  background:var(--red-500); color:#fff; border-color:var(--red-500);
}
.search-pager .pager-btn:hover,
.search-pager .pager-num:hover{
  border-color:#f0c7cb;
}
.search-pager button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Botón cerrar/buscar secundario */
.search-button{
  position:absolute; right:16px; top:8px; background:none; border:none;
  color: white; font-size:20px; cursor:pointer;
  transition: color .15s ease, transform .1s ease;
}
.search-button:hover{ color:red; transform: scale(1.04); }

/* Flash focus suave */
.flash-focus{
  animation: flashGlow 2.0s ease-in-out 1;
  outline: 2px solid rgba(215,25,32,.45);
  outline-offset: -2px;
}
@keyframes flashGlow{
  0% { box-shadow: 0 0 0 rgba(0,0,0,0) }
  25%{ box-shadow: 0 0 0 6px rgba(215,25,32,.12) }
  100%{ box-shadow: 0 0 0 rgba(0,0,0,0) }
}

/* Scroll y contenedor */
.search-scroll{
  position:relative; flex:1; min-height:0; overflow:auto; padding-right:6px; -webkit-overflow-scrolling:touch;
}
.search-scroll::-webkit-scrollbar{ width:8px; }
.search-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:8px; }
.search-scroll::-webkit-scrollbar-track{ background:transparent; }
.search-scroll{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.3) transparent; }
@media (max-width:768px){ .search-scroll{ padding-right:2px; } }

/* Ocultos en resultados compactos */
.headline-meta, .headline-excerpt{ display:none; }

/* ===== Top temas (chips) ===== */
#searchTop{ margin-top:10px; }

.search-top{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:10px;
}
.search-top .chip{
  border:1px solid var(--border);
  background:#fff; color:var(--body-text);
  border-radius:999px;
  font-size:13px; padding:6px 10px;
  cursor:pointer; user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.search-top .chip .count{ color:var(--footer-text); margin-left:4px; }
.search-top .chip:hover{ border-color:#f0c7cb; background:#fff; color:var(--ink-700); transform: translateY(-1px); }

/* Accesible con teclado */
.search-top .chip:focus-visible{
  outline:2px solid rgba(215,25,32,.35); outline-offset:2px;
  background:#fff;
}


/* ===================================================================== */
/* BLOQUE 11 — MODO PC 
/* ===================================================================== */
@media (min-width:1025px){
  .page-container{ max-width:1440px; padding-left:24px; padding-right:24px; }

  .headline-overlay{ display:none !important; }
  .headline-meta{
    display:block;
    padding:12px 14px 8px;
    background:#fff;
    border-top:1px solid var(--footer-border);
    container-type:inline-size; 
  }

  .headline-title-inline{
    font-weight:800;
    font-size:clamp(18px, 1.35vw, 22px);
    line-height:1.15;
    margin:0 0 8px 0;
    color:#000;
    text-wrap:balance;
  }

  .headline-meta .source-line{ display:none; } 

  .headline-excerpt{
    text-align:justify; text-justify:inter-word;
    font-size:14px; line-height:1.35; color:#222;
    display:-webkit-box; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
    --excerpt-lines:9; -webkit-line-clamp:var(--excerpt-lines); line-clamp:var(--excerpt-lines);
  }

  .headlines-list > li{
    background:#fff; border:1px solid #e6e6e6; overflow:hidden;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    transition:transform .18s ease, box-shadow .18s ease;
    display:flex; flex-direction:column;
  }
  .headlines-list > li:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10); }
  .headline-footer{ padding:8px 12px; background:#fafafa; border-top:1px solid #eee; margin-top:auto; }
  .source-logo{ height:18px; object-fit:contain; }
  .source-name{ font-size:12px; color:#666; }
  .like-count{ font-size:12px; }
  .like-button i, .copy-icon{ font-size:18px; }

  #excerptModal{ display:none !important; }

  @container (max-width:420px){ .headline-excerpt{ --excerpt-lines:6; } }
  @container (min-width:421px) and (max-width:560px){ .headline-excerpt{ --excerpt-lines:8; } }
  @container (min-width:561px) and (max-width:720px){ .headline-excerpt{ --excerpt-lines:10; } }
  @container (min-width:721px){ .headline-excerpt{ --excerpt-lines:12; } }

  .headlines-list > li:nth-child(8n + 2) .headline-excerpt,
  .headlines-list > li:nth-child(8n + 5) .headline-excerpt,
  .headlines-list > li:nth-child(8n + 7) .headline-excerpt{
    --excerpt-lines:16;
  }

  .headline-link .headline-card, .headline-link .headline-card * { pointer-events:none; }
  .headline-footer, .headline-footer * { pointer-events:auto; }
}

/* ===================================================================== */
/* BLOQUE 12 — Patrón Diario
/* ===================================================================== */
@media (min-width:1025px){
  .headlines-list{
    display:grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap:18px;
  }

  .headlines-list > li{ grid-column: span 4; }

  .headlines-list > li:nth-child(8n + 1){ grid-column: span 8; } 
  .headlines-list > li:nth-child(8n + 3){ grid-column: span 6; } 
  .headlines-list > li:nth-child(8n + 4){ grid-column: span 6; }
  .headlines-list > li:nth-child(8n + 6){ grid-column: span 4; } 
  .headlines-list > li:nth-child(8n + 8){ grid-column: span 12 !important; } 

  .headlines-list > li:nth-child(8n + 1) .headline-image,
  .headlines-list > li:nth-child(8n + 8) .headline-image{ aspect-ratio:21/9; }
  .headlines-list > li:nth-child(8n + 3) .headline-image,
  .headlines-list > li:nth-child(8n + 4) .headline-image{ aspect-ratio:3/2; }
  .headlines-list > li:nth-child(8n + 6) .headline-image{ aspect-ratio:1/1; }
  .headlines-list > li:hover{ transform:translateY(-2px); }
  @media (prefers-reduced-motion: reduce){
    .headlines-list > li, .headlines-list > li:hover{ transform:none !important; }
  }
}

/* ===================================================================== */
/* BLOQUE 13 — Responsivo móvil/tablet                                   */
/* ===================================================================== */
@media (max-width:1024px){
  :root{ --header-height:80px }
  .header-img{ max-width:300px; height:50px }
  .sidebar{ width:220px }
  .sidebar-tab{ width:35px; height:90px; font-size:13px }
}
@media (max-width:768px){
  :root{ --header-height:80px }
  .page-container{ max-width:none; padding-left:0; padding-right:0 }
  .headlines-list{ gap:12px }

  .headline-title{ font-size:clamp(16px,4.2vw,50px); line-height:1.15 }
  .headline-footer{ padding:2px 6px }
  .source-container{ gap:6px }
  .source-logo{ height:14px }
  .source-name{ font-size:10px; font-weight:600 }
  .actions-container{ gap:6px }
  .like-button i, .copy-icon, .open-excerpt{ font-size:13px }

  .sidebar{ width:200px }
}
@media (max-width:480px){
  :root{ --header-height:70px }
  .header-img{ max-width:260px; height:40px }
  .sidebar{ width:235px }
  .sidebar-tab{ width:30px; height:80px; font-size:12px }
}

/* ===================================================================== */
/* BLOQUE 14 — Accesibilidad: menos movimiento                           */
/* ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* === Topbar actions (modo PC) === */
@media (min-width:1025px){
  .topbar .topbar-actions{
    position:absolute;
    right:14px;
    top:0;
    height:var(--topbar-height);
    display:flex;
    align-items:center;
    gap:10px;
    padding-right:8px;
  }
  .topbar .icon-btn{
    background:transparent;
    border:none;
    padding:6px 8px;
    line-height:1;
    cursor:pointer;
    color:#333;
    border-radius:999px;         /* opcional, por si luego querés hover con fondo */
    appearance:none;
    -webkit-appearance:none;
  }
  .topbar .icon-btn i{
    font-size:18px;
    transition: color .2s ease, transform .12s ease;
  }
  .topbar .icon-btn:hover i{
    color:var(--accent);
    transform: translateY(-1px);
  }
  .topbar .icon-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .topbar .icon-btn {
      position: relative;
    }
    .topbar .icon-btn[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px); /* aparece arriba del botón */
      left: 50%;
      transform: translateX(-50%) scale(.95);
      background: rgba(17,17,17,.95);
      color: #fff;
      font-size: 12px;
      line-height: 1;
      padding: 6px 8px;
      border-radius: 6px;
      white-space: nowrap;
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s ease, transform .15s ease;
      z-index: 1000;
    }
    .topbar .icon-btn[data-tooltip]::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(17,17,17,.95); /* “punta” del globito */
      opacity: 0;
      transition: opacity .15s ease;
      z-index: 1000;
    }
    .topbar .icon-btn:hover::after,
    .topbar .icon-btn:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
    .topbar .icon-btn:hover::before,
    .topbar .icon-btn:focus-visible::before {
      opacity: 1;
    }
  }

}

/* Fecha en la línea de fuente (plantilla HTML) */
.headline-date {
  color: #ff0000;
  font-weight: 700;
}

/* Fecha inline (PC, bloque K2 de main.js) */
.date-line .date-text {
  color: #ff0000;
  font-weight: 700;
}

/* Asegurá posición de referencia para el splash */
.headline-card {
  position: relative;
  overflow: hidden; /* por si el corazón se sale */
}

@keyframes likePop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); }
}

/* Corazón del botón en rojo cuando:
   - el usuario ya dio like (clase .liked)
   - o al menos hay 1 like total (clase .has-likes) */
.like-button.liked i,
.like-button.has-likes i {
  color: #ff1e00; /* rojo */
}

.like-button i { transition: color .2s ease; }

.like-button i { transition: transform .15s ease, opacity .15s ease; }
.like-button.liked i,
.like-button.has-likes i {
  color: #ff0400;          
  opacity: 1;
}

.headline-card { position: relative; overflow: hidden; }

/* --- Splash de corazón (doble clic/tap) --- */
.like-splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: likeSplash 800ms ease forwards;
  z-index: 1000; /* <-- añadí esta línea */
}
.like-splash i {
  font-size: clamp(56px, 12vw, 120px);
  color: #e53935;
  opacity: 0.85;
  transform: scale(0.2);
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
}

@keyframes likeSplash {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 1; transform: scale(1.05); }
  40%  { opacity: 1; transform: scale(1); }
  80%  { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ===== FIX LUPA TOPBAR (asegurar contraste y hover bonito) ===== */
@media (min-width:1025px){
  /* fuerza color visible del icono de búsqueda en la topbar */
  .topbar .topbar-actions .icon-btn i,
  .topbar .icon-btn#searchButton i,
  .topbar .icon-btn[data-role="search"] i {
    color:#111 !important;   /* fuerte contraste sobre fondo blanco */
    opacity:1 !important;
  }

  /* realce sutil en hover: fondo circular translúcido y leve lift */
  .topbar .icon-btn{
    border-radius:999px;
    transition: background .16s ease, transform .12s ease;
  }
  .topbar .icon-btn:hover{
    background:rgba(215,25,32,.08); /* rojo muy suave */
    transform: translateY(-1px);
  }
  .topbar .icon-btn:active{
    transform: translateY(0);
  }
}

/* ===== HOVER ELEGANTE PARA CHIPS DEL TOP (modal buscador) ===== */
#searchModal .search-top .chip{
  position: relative;
  overflow: hidden;
  border:1px solid var(--border);
  background:#fff;
  color:var(--body-text);
  border-radius:999px;
  font-size:13px;
  padding:6px 12px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
}

/* “barrido” diagonal de luz */
#searchModal .search-top .chip::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(60deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform: translateX(-120%) rotate(8deg);
  transition: transform .45s ease;
  pointer-events:none;
}

/* hover: levanta, resalta borde y pasa el barrido */
#searchModal .search-top .chip:hover{
  transform: translateY(-1.5px);
  border-color:#f0c7cb;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  color: var(--ink-700);
}
#searchModal .search-top .chip:hover::after{
  transform: translateX(120%) rotate(8deg);
}

/* active: respuesta rápida */
#searchModal .search-top .chip:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}

/* accesible: focus visible sin saturar */
#searchModal .search-top .chip:focus-visible{
  outline:2px solid rgba(215,25,32,.35);
  outline-offset:2px;
}