/* public/global.css */

/* ---------- Base ---------- */
body{font-family:system-ui,sans-serif;background:#fbfbff;color:#222;margin:0;padding:0 1rem;max-width:700px;margin-inline:auto;}
/* body{font-family:system-ui,sans-serif;background-color:#fbfbff;color:#222;margin:0;padding:0 1rem;max-width:700px;margin-inline:auto;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e0dffc'/%3E%3C/svg%3E");} */
header{text-align:center;margin:2rem 0 1rem;}
.logo-link{display:inline-block;width:220px;margin:0 auto 0;text-align:center;}
.logo{filter:none;max-width:220px;width:100%;height:auto;}
/* Black: filter: brightness(0); */  /* Grey: filter: brightness(0.3); */  /* Grey scale: filter: grayscale(100%); */ /* Pale: filter: brightness(0.8) contrast(90%); */ /* More white: filter: invert(100%) brightness(1.2); */
.title-link{text-decoration:none;color:inherit;}
.title-link:hover{text-decoration:none;color:inherit;}
h1{margin:-0.3rem 0 1.5rem;font-size:2rem;}

/* ---------- Paginación ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin:1.5rem 0 2rem;}
.pagination span{font-weight:bold;font-size:1.2rem;}
.pagination a{text-decoration:none;padding:0.4rem 1rem;border-radius:8px;border:1px solid #9244d9;color:#9244d9;background:transparent;transition:all .2s ease;min-width:120px;text-align:center;}
.pagination a:hover{background:#9244d910;}
.pagination a.disabled{opacity:.4;pointer-events:none;}

/* ---------- Posts ---------- */
.post-list{display:flex;flex-direction:column;gap:1rem;line-height:1.6;}
.post-list>*:not(:first-child){margin-top:1rem;}
.post{background:#fff;border-radius:12px;padding:1rem 1.2rem;box-shadow:0 2px 6px #0001;transition:transform .2s ease,box-shadow .2s ease;}
.post:hover{transform:scale(1.02);box-shadow:0 4px 12px #0002;}
.post h2{margin:0 0 .4rem;font-size:1.3rem;}
.post small{color:#aaa;font-size:.85rem;margin-bottom:.2rem;display:block;}
.post p{line-height:1.75;margin-top:.5rem;}

/* ---------- Footer ---------- */
footer{margin-top:3rem;padding:2rem 1rem;text-align:center;font-size:.85rem;color:#777;}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1rem;}
.footer-links a{text-decoration:none;color:inherit;}

/* ---------- Misc ---------- */
.subtitle{margin-top:-1rem;margin-bottom:2rem;font-size:1rem;color:#666;font-weight:400;}
.read-more{display:inline-block;margin-top:1rem;padding:0.4rem 1rem;border-radius:8px;border:1px solid #9244d9;color:#9244d9;background:transparent;transition:all .2s ease;text-align:center;text-decoration:none;font-weight:normal;font-size:.95rem;}
.read-more:hover{background:#9244d910;}

/* ---------- Telegram Banner ---------- */
.telegram-banner{
  background:#fff;
  border:2px solid #a07cff;
  border-radius:12px;
  padding:1rem 1.2rem;
  box-shadow:0 2px 6px #0001;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  flex-wrap:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  margin-inline:-2rem;   /* ❚ mismo ancho exacto que las .post          */
  width:auto;            /* ❚ quitamos el 100 % que lo hacía “más corto” */
}
.telegram-banner:hover{transform:scale(1.02);box-shadow:0 4px 12px #0002;}

.telegram-banner .telegram-left{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1;
  min-width:0;
}
.telegram-banner img{width:48px;height:48px;flex-shrink:0;border-radius:12px;}
.telegram-banner strong{font-size:1.1rem;color:#111;display:block;margin-bottom:.25rem;word-break:break-word;}
.telegram-banner p{font-size:.95rem;color:#555;margin:0;word-break:break-word;}
.telegram-banner span{font-weight:bold;color:#a07cff;}

.telegram-banner .telegram-button{
  display:inline-block;
  width:auto;
  background:#a07cff;
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  font-size:.9rem;
  transition:background .2s ease-in-out;
  white-space:nowrap;
  box-sizing:border-box;              /* 🆕 incluye padding en el ancho */
}
.telegram-banner .telegram-button:hover{background:#8d64f5;}

/* ---------- Partner Banner ---------- */
.partner-banner{
  background:#fff;
  border:2px solid #ffb400;
  border-radius:12px;
  padding:1rem 1.2rem;
  box-shadow:0 2px 6px #0001;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
  flex-wrap:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
  overflow:hidden;
  box-sizing:border-box;
}
.partner-banner:hover{transform:scale(1.02);box-shadow:0 4px 12px #0002;}

.partner-left{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1;
  min-width:0;
}
.partner-left img{width:48px;height:48px;flex-shrink:0;border-radius:12px;border-radius: 50%;}
.partner-left strong{font-size:1.1rem;color:#111;display:block;margin-bottom:.25rem;word-break:break-word;}
.partner-left p{font-size:.95rem;color:#555;margin:0;word-break:break-word;}

.partner-button{
  display:inline-block;
  width:auto;
  background:#ffb400;
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  font-size:.9rem;
  text-align:center;
  transition:background .2s ease-in-out;
  white-space:nowrap;
  box-sizing:border-box;              /* 🆕 igual que Telegram */
}
.partner-button:hover{background:#e49e00;}

/* ---------- Breakpoints ---------- */
@media(min-width:768px){
  .post{margin-inline:-2rem;}
  /* mismo ancho que las cards (compensamos el borde de 2 px) 🆕 */
  .telegram-banner{margin-inline:calc(-2rem - 2px);}
  .partner-banner {margin-inline:-2rem;}
}

/* ------------ Mobile ≤ 600 px ------------ */
@media(max-width:600px){
  .telegram-banner,
  .partner-banner{flex-direction:column;align-items:stretch;}
  .telegram-banner .telegram-left,
  .partner-left{gap:1rem;margin-bottom:.6rem;}
  .telegram-banner .telegram-button,
  .partner-button{
    width:100%;
    text-align:center;
  }
}

/* ------------ Mobile ≤ 480 px ------------ */
@media(max-width:480px){
  .pagination{gap:.5rem;}
  .pagination .nav-btn{font-size:0;padding:.35rem .6rem;min-width:auto;}
  .pagination #prevBtn::before{content:"Prev. Day";font-size:.85rem;color:inherit;}
  .pagination #nextBtn::before{content:"Next Day";font-size:.85rem;color:inherit;}

  .telegram-banner,
  .partner-banner{padding:1.1rem .9rem;margin-inline:0;}
  .telegram-banner .telegram-left,
  .partner-left{gap:.8rem;margin-bottom:.8rem;}
}