:root{
    --pos:#2ecc71; --neu:#bdbdbd; --neg:#e74c3c;
    --primary:#7b1fa2; --primary-dark:#4a148c;
  }
  body { color:#2b2b2b; }
  .navbar.is-primary { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
  
  .card { border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.06); overflow:hidden; }
  .tag.is-sentiment { min-width:64px; text-align:center; }
  
  .skeleton {
    background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
    background-size:400% 100%; animation:shimmer 1.2s infinite;
  }
  @keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }
  
  .card-skeleton { height:110px; border-radius:10px; }
  .card-skeleton + .card-skeleton { margin-top:1rem; }
  
  a.truncate { display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .modal-card {
    max-width: 660px;
    max-height: 80vh !important;
  }
  .comments-modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Una historia por fila + metadata */
.story-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-left: 6px solid #ddd;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
  }
  .story-row .thumb { flex: 0 0 120px; }
  .story-row .thumb img {
    width: 120px; height: 90px; object-fit: cover; border-radius: 6px;
  }
  .story-row .content { flex: 1 1 auto; }
  .story-row .domain { margin-top: -0.25rem; }
  .story-row .desc { margin-top: 0.35rem; color: #4a4a4a; }
  .story-row .meta .tag { margin-right: .25rem; }
  .story-row .meta .tag.sentiment { color: #fff; border: none; }
  
  @media (max-width: 480px) {
    .story-row { flex-direction: column; }
    .story-row .thumb { width: 100%; }
    .story-row .thumb img { width: 100%; height: auto; }
  }
  
  /* Comentarios */
  .comments-wrapper { max-width: 820px; margin: 0 auto; }
  .comment .content a { text-decoration: underline; }
  .comment .content p { margin-bottom: .25rem; }