/* Vecindiario - Seccion "Recomendados".
   Hoja additiva, enlazada por recomendados.php y readrecomendado.php.
   Colores neutros (rgba sobre currentColor/tema) para funcionar en claro y
   oscuro sin tocar las 4 hojas del tema. El ajuste fino por tema es el paso 6.
   Acento del sitio: #c4041d. */

.recom-lema { opacity:.8; margin:4px 0 18px; }

/* ---- Meta y etiquetas compartidas ---- */
.recom-meta { font-size:.85em; opacity:.7; margin:3px 0 6px; }
.recom-tags { display:flex; flex-wrap:wrap; gap:6px; }
.recom-tag {
  font-size:.78em; padding:2px 9px; border-radius:999px;
  background:rgba(127,127,127,.14); border:1px solid rgba(127,127,127,.22);
}
.recom-img-ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:34px; opacity:.45; text-align:center;
}
.recom-img-ph small { font-size:11px; margin-top:6px; }

/* ---- Autor de la semana (destacado) ---- */
.recom-semana {
  display:flex; gap:0; text-decoration:none; color:inherit;
  border:1px solid rgba(127,127,127,.22); border-radius:12px; overflow:hidden; margin-bottom:34px;
}
.recom-semana-img {
  flex:0 0 190px; min-height:170px; position:relative;
  background:rgba(196,4,29,.10); background-size:cover; background-position:center;
}
.recom-semana-badge {
  position:absolute; top:8px; left:8px; font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; background:#c4041d; color:#fff; padding:2px 9px; border-radius:999px;
}
.recom-semana-txt { flex:1; padding:16px 18px; }
.recom-semana-nom { margin:0 0 2px; }
.recom-semana-bio { margin:0; line-height:1.5; font-size:.95em; opacity:.85; }
.recom-sem-sep { height:14px; }

/* ---- Filtros ---- */
.recom-filtros { margin:0 0 34px; display:flex; flex-direction:column; gap:16px; }
.recom-filtro { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.recom-filtro-tit {
  font-size:.72em; text-transform:uppercase; letter-spacing:.06em; opacity:.6;
}
.recom-chips { display:flex; flex-wrap:wrap; gap:6px; }
.recom-chip {
  display:inline-block; text-decoration:none; color:inherit;
  font-size:.82em; padding:4px 12px; border-radius:999px;
  background:rgba(127,127,127,.12); border:1px solid rgba(127,127,127,.22);
}
.recom-chip:hover { background:rgba(196,4,29,.14); }
.recom-chip.on, .recom-chip.on:hover { background:#c4041d; color:#fff; border-color:#c4041d; }

/* ---- Rejilla de fichas ---- */
.recom-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px; margin-top:6px;
}
.recom-card {
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid rgba(127,127,127,.22); border-radius:12px; overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.recom-card:hover { border-color:#c4041d; transform:translateY(-2px); }
.recom-card-img {
  height:120px; background:rgba(127,127,127,.10);
  background-size:cover; background-position:center;
}
.recom-card-body { padding:10px 12px; }
.recom-card-nom { font-weight:bold; margin-bottom:2px; }

/* ---- Paginacion / vacio ---- */
.recom-pager { display:flex; justify-content:center; gap:12px; margin:20px 0 4px; }
.recom-pager-btn {
  text-decoration:none; color:inherit; font-size:.9em;
  padding:7px 16px; border-radius:8px; border:1px solid rgba(127,127,127,.3);
}
.recom-pager-btn:hover { background:rgba(196,4,29,.10); border-color:#c4041d; }
.recom-vacio { padding:40px 10px; text-align:center; opacity:.7; }

/* ================= FICHA ================= */
.recom-migas { font-size:.82em; opacity:.7; margin:0 0 14px; }
.recom-migas a { color:#c4041d; text-decoration:none; }

.recom-ficha {
  display:flex; gap:0; border:1px solid rgba(127,127,127,.22);
  border-radius:12px; overflow:hidden; margin-bottom:22px;
}
.recom-ficha-img {
  flex:0 0 200px; min-height:260px;
  background:rgba(196,4,29,.08); background-size:cover; background-position:center;
}
.recom-ficha-datos { flex:1; padding:18px 20px; min-width:0; }

.recom-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.recom-badge {
  font-size:.8em; padding:3px 11px; border-radius:7px;
  background:rgba(127,127,127,.14); border:1px solid rgba(127,127,127,.2);
}
.recom-badge.on { background:rgba(196,4,29,.12); border-color:rgba(196,4,29,.3); }
a.recom-badge-wiki {
  text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:4px;
  background:rgba(196,4,29,.10); border-color:rgba(196,4,29,.3);
}
a.recom-badge-wiki::before { content:"\2197"; font-size:.9em; opacity:.7; } /* flecha salida */
a.recom-badge-wiki:hover { background:#c4041d; color:#fff; border-color:#c4041d; }

.recom-bio { line-height:1.6; margin:0 0 14px; }

.recom-cita {
  margin:0 0 14px; padding:8px 0 8px 16px; border-left:3px solid #c4041d;
}
.recom-cita-txt { display:block; font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-size:1.12em; line-height:1.5; }
.recom-cita-obra { display:block; font-size:.82em; opacity:.65; margin-top:4px; font-style:normal; }

.recom-tiempo {
  background:rgba(127,127,127,.09); border-radius:8px; padding:10px 12px; margin:0 0 14px;
}
.recom-sub { font-size:.72em; text-transform:uppercase; letter-spacing:.06em; opacity:.6; margin-bottom:5px; }
.recom-tiempo p { margin:0; line-height:1.55; }

.recom-gt { display:flex; flex-wrap:wrap; gap:18px; }
.recom-gt-col { flex:1; min-width:200px; }
.recom-pills { display:flex; flex-wrap:wrap; gap:6px; }
.recom-pill {
  font-size:.8em; padding:3px 11px; border-radius:999px;
  border:1px solid rgba(127,127,127,.28);
}

/* ---- Obras ---- */
.recom-h3 { margin:22px 0 10px; }
.recom-obras { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.recom-obra { border:1px solid rgba(127,127,127,.22); border-radius:12px; padding:14px 16px; }
.recom-obra-cab { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.recom-obra-tit { font-weight:bold; }
.recom-obra-anio { font-size:.82em; opacity:.6; white-space:nowrap; }
.recom-obra-arg { font-size:.92em; line-height:1.55; margin:8px 0 10px; }
.recom-obra-pq { background:rgba(196,4,29,.08); border-radius:8px; padding:8px 11px; }
.recom-pq-tit { font-size:.7em; text-transform:uppercase; letter-spacing:.05em; color:#c4041d; font-weight:bold; }
.recom-obra-pq p { margin:3px 0 0; font-size:.92em; line-height:1.5; }

.recom-stars { color:#e0a100; font-size:1.05em; letter-spacing:1px; }
.recom-star { opacity:.4; }
.recom-star.on { opacity:1; }

/* ---- Guia de lectura ---- */
.recom-guia { margin:0; padding:0; list-style:none; counter-reset:recom-paso;
  border:1px solid rgba(127,127,127,.22); border-radius:12px; overflow:hidden; }
.recom-guia-paso {
  counter-increment:recom-paso; display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-top:1px solid rgba(127,127,127,.16);
}
.recom-guia-paso:first-child { border-top:0; }
.recom-guia-paso::before {
  content:counter(recom-paso); flex:0 0 26px; height:26px; line-height:26px;
  text-align:center; border-radius:50%; background:rgba(196,4,29,.12);
  color:#c4041d; font-weight:bold; font-size:.85em;
}
.recom-guia-tit { font-weight:bold; }
.recom-guia-enlaces { display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:2px; }
.recom-guia-link {
  text-decoration:none; color:#c4041d; font-size:.78em; line-height:1.4;
  padding:1px 8px; border-radius:999px; border:1px solid rgba(196,4,29,.3);
  background:rgba(196,4,29,.07); white-space:nowrap;
}
.recom-guia-link::before { content:"\2197"; margin-right:3px; opacity:.7; } /* flecha salida */
.recom-guia-link:hover { background:#c4041d; color:#fff; border-color:#c4041d; }

/* ---- Sin subrayado NUNCA en los enlaces de Recomendados ----
   El tema subraya 'a:hover' de forma global; en tarjetas que son un solo enlace
   (p. ej. "Ultimo recomendado", con nombre + bio larga dentro) queda horrible.
   Mayor especificidad que 'a:hover' del tema, asi que no hace falta !important. */
.recom-semana, .recom-card, .recom-pager-btn, .recom-chip, .recom-guia-link,
a.recom-badge-wiki, .recom-migas a, .recom-filtros a, .recom-grid a,
.recom-ficha a, .recom-obras a, .recom-guia a,
.recom-semana:hover, .recom-card:hover, .recom-pager-btn:hover, .recom-chip:hover,
.recom-guia-link:hover, a.recom-badge-wiki:hover, .recom-migas a:hover,
.recom-filtros a:hover, .recom-grid a:hover, .recom-ficha a:hover,
.recom-obras a:hover, .recom-guia a:hover {
  text-decoration: none;
}

/* ---- Movil ---- */
@media (max-width:768px) {
  .recom-semana, .recom-ficha { flex-direction:column; }
  .recom-semana-img { flex-basis:auto; min-height:150px; }
  .recom-ficha-img { flex-basis:auto; min-height:200px; }
}