/* ==========================================
   FEED – Variables and base styles
========================================== */
.feed-modern{
  --bg:#ffffff;
  --bg-elevated:#fff;
  --text:#0f172a;
  --muted:#667085;      
  --ring:#6366f1;        
  --accent:#22c55e;   
  --danger:#ef4444;
  --shadow:0 12px 40px rgba(2,6,23,.08);
  --shadow-soft:0 6px 20px rgba(2,6,23,.06);
}
html[data-theme="dark"] .feed-modern{
  --bg:#0b1020;
  --bg-elevated:#0d1326;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --line:#1f2937;
  --ring:#8b9cfb;
  --accent:#34d399;
  --danger:#f87171;
  --shadow:0 14px 42px rgba(0,0,0,.5);
  --shadow-soft:0 8px 24px rgba(0,0,0,.35);
}

/* ==========================================
   CARD – modernizeed look
========================================== */
.feed-modern .card.card-border{
  border:1px solid color-mix(in oklab, var(--ring) 10%, var(--line));
  border-radius:22px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ring) 5%, transparent),
      transparent 28%),
    var(--bg-elevated);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.feed-modern .card-header{
  background:transparent;
  padding:16px 18px 0;
}
.feed-modern .card-body{ padding:18px; }
.feed-modern .card-footer{ background:transparent; }

.feed-modern .avatar .avatar-img{ width:44px; height:44px; object-fit:cover; }
.feed-modern .card-title{ color:var(--text); font-weight:800; }
.feed-modern [data-date], .feed-modern .small{ color:var(--muted); }

.feed-modern .h1, .feed-modern .h2{
  font-weight:900; line-height:1.12;
  letter-spacing:.2px; color:var(--text);
}

.feed-modern .card-img, 
.feed-modern .rounded.img-fluid,
.feed-modern video.rounded{
  border-radius:18px !important;
  box-shadow:var(--shadow-soft);
}

/* ==========================================
   VOTE chip (arrows with counter)
========================================== */
.feed-modern .vote-chipbar .hstack{
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--ring) 6%, transparent);
  padding:6px 10px;
  gap:10px;
}
.feed-modern .votesCountTotal{ font-weight:800; color:var(--text); }
.feed-modern .text-green{ color:var(--accent) !important; }
.feed-modern .text-danger{ color:var(--danger) !important; }

/* ==========================================
   Action bar (Like / Comment / Share)
========================================== */
.feed-modern .action-bar{
  border:0 !important;
  background:color-mix(in oklab, var(--ring) 4%, transparent);
  padding:8px 10px !important;
  border-radius:14px;
  gap:4px;
}
.feed-modern .action-bar .nav-link{
  border-radius:999px !important;
  padding:8px 12px !important;
  color:var(--muted);
}
.feed-modern .action-bar .nav-link:hover{
  background:color-mix(in oklab, var(--ring) 10%, transparent);
  color:var(--text);
}
.feed-modern .action-bar .nav-link.active{
  background:var(--ring);
  color:#fff;
}

/* ==========================================
   Long text: clamp + gradient (See more / less)
========================================== */
.feed-modern .blogBody,
.feed-modern .recipeBody{
  position:relative;
  overflow:hidden;
  transition:max-height .25s ease;
}
.feed-modern .is-clamped::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:80px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}

/* Botones See More / See Less estilos unificados */
.feed-modern .loadMore, 
.feed-modern .loadLess{
  display:none;            
  margin-top:10px;
  border:1px dashed var(--line);
  color:var(--muted);
  background:var(--bg);
  border-radius:999px;
  padding:8px 12px;
  width:max-content;
  margin-left:auto; margin-right:auto;
  cursor:pointer;
  user-select:none;
  transition:all .2s;
}
.feed-modern .loadMore:hover, 
.feed-modern .loadLess:hover{
  border-color:var(--ring);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}

/* ==========================================
   Comments: cleaner input
========================================== */
.feed-modern .form-control.pe-4.bg-light{
  border-radius:14px;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--ring) 4%, transparent) !important;
}
html[data-theme="dark"] .feed-modern .form-control.pe-4.bg-light{
  background:color-mix(in oklab, var(--ring) 8%, transparent) !important;
}

/* Dropdown del post (3 dots) */
.feed-modern .btn.btn-secondary-soft-hover{
  border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--muted);
}
.feed-modern .btn.btn-secondary-soft-hover:hover{
  border-color:var(--ring); color:var(--text);
}

/* Various details */
.feed-modern .nav-divider a{ color:var(--text); text-decoration:none; }
.feed-modern .nav-divider a:hover{ text-decoration:underline; }

/* RSS / YT also get the new look */
.feed-modern article.card.card-border .h2{ font-weight:800; }

/* ====== CLAMP / SEE MORE (fix visual) ====== */
.feed-modern .blogBody,
.feed-modern .recipeBody{
  position: relative;
  overflow: hidden;
  transition: max-height .25s ease;
  /* Avoid unnecessary “air” in short texts */
  --fadeH: 72px;         /* height of the gradient */
  --btnPad: 56px;        /* space for the button when clamped */
}
.feed-modern .blogBody > *:first-child,
.feed-modern .recipeBody > *:first-child{ margin-top: 0; }
.feed-modern .blogBody > *:last-child,
.feed-modern .recipeBody > *:last-child{ margin-bottom: 0; }

.feed-modern .is-clamped{ padding-bottom: var(--btnPad); }
.feed-modern .is-clamped::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:var(--fadeH);
  background:linear-gradient(180deg, transparent, var(--bg));
  pointer-events:none; z-index:1;
}

.feed-modern .loadMore, 
.feed-modern .loadLess{
  display:none;            
  border:1px dashed var(--line);
  color:var(--muted);
  background:var(--bg);
  border-radius:999px;
  padding:8px 12px;
  width:max-content;
  cursor:pointer; user-select:none;
  transition:all .2s;
}

.feed-modern .is-clamped .loadMore{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:12px; z-index:2;  
  display:inline-block;
}
.feed-modern .loadMore:hover, 
.feed-modern .loadLess:hover{
  border-color:var(--ring); color:var(--text); box-shadow:var(--shadow-soft);
}

.feed-modern .expanded .loadLess{ display:inline-block; margin-top:12px; }

.feed-modern .blogBody img,
.feed-modern .recipeBody img{ max-width:100%; height:auto; border-radius:12px; }

.feed-modern .blogBody p{ margin:0 0 .75rem; }

/* ====== MODAL LECTOR ====== */
.feed-modern .post-reader .modal-content{
  border-radius:22px; border:1px solid color-mix(in oklab, var(--ring) 10%, var(--line));
  background:var(--bg-elevated); box-shadow:var(--shadow);
}
.feed-modern .post-reader .modal-header{ border:0; }
.feed-modern .post-reader .modal-body{ padding:18px; }

.feed-modern .blogBody[data-empty="true"],
.feed-modern .recipeBody[data-empty="true"]{ display:none; }

/* --- RIGHT-SIDEBAR PANEL --- */
.latest-card{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.latest-card .card-header{
  border-bottom: none;
}
.latest-card .card-title{
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
}

/* --- List --- */
.latest-list{
  padding-top: .5rem;
}

/* --- Item --- */
.latest-item{
  position: relative;
  padding: .9rem .9rem .7rem .9rem;
  border-radius: 12px;
  background: #f8fafc; /* slate-50 */
  border-left: 4px solid #d3c9d3;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  will-change: transform, box-shadow;
}

/* makes the entire block clickable and prevents the last link bug */
.latest-link{
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #0f172a; 
  font-weight: 700;
  line-height: 1.25;
}

/* Date */
.latest-date{
  color: #6b7280; 
  display: inline-block;
  margin-top: .35rem;
}

/* Hover */
.latest-item:hover{
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  border-left-color: #83c47e; 
}
.latest-item:hover .latest-link{
  text-decoration: underline;
}

/* Focus accessible for keyboard */
.latest-link:focus{
  outline: none;
}
.latest-item:has(.latest-link:focus){
  box-shadow: 0 0 0 3px rgba(99,102,241,.35);
}

/* Visual separation without losing air */
.latest-item + .latest-item{ margin-top: .6rem; }

/* Responsive small adjustments */
@media (max-width: 576px){
  .latest-item{ padding: .8rem; }
  .latest-link{ font-size: .98rem; }
}

header.fixed-top + main {
	padding-top: calc(3rem + 56px);
	padding-bottom: 1.875rem;
}