/* =====================================================
   muro.css — Muro de Oportunidades
   Dark theme, matching existing app style
   ===================================================== */

/* Override navbar.css main padding-top (196px is for home with tall logo) */
main.muro-main {
  padding-top: 80px;
}

/* ── Page title ───────────────────────────────────── */
.muro-page-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: .35rem !important;
}

/* Separación entre header y filtros */
#filtros-muro {
  margin-top: .25rem;
  margin-bottom: 2rem !important;
  padding-bottom: .5rem;
  border-bottom: 1px solid #1a1e2b;
}

/* Separación entre filtros y grid de cards */
#muro-cards {
  margin-top: .5rem;
}

/* ── Publish button ───────────────────────────────── */
.btn-muro-publicar {
  background: linear-gradient(135deg, #00e676, #00c853);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 99px;
  padding: 10px 24px;
  font-size: .9rem;
  transition: opacity .2s, transform .15s;
}
.btn-muro-publicar:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #000;
}

/* ── Filter pills ─────────────────────────────────── */
.pill-filtro {
  background: #0f1118;
  border: 1.5px solid #1a1e2b;
  color: #9ca3af;
  border-radius: 99px;
  padding: 6px 18px;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  display: inline-flex;
  align-items: center;
}
.pill-filtro:hover {
  border-color: #00e676;
  color: #00e676;
}
.pill-filtro.active {
  background: rgba(0, 230, 118, .12);
  border-color: #00e676;
  color: #00e676;
}

/* ── Tipo badges ──────────────────────────────────── */
.muro-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.muro-badge-oportunidad { background: rgba(40, 167, 69, .18); color: #28a745; border: 1px solid #28a74540; }
.muro-badge-evento       { background: rgba(0, 123, 255, .18); color: #007bff; border: 1px solid #007bff40; }
.muro-badge-vacante      { background: rgba(253, 126, 20, .18); color: #fd7e14; border: 1px solid #fd7e1440; }
.muro-badge-solicitud    { background: rgba(111, 66, 193, .18); color: #9b5cf6; border: 1px solid #6f42c140; }

.muro-badge-externo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(108, 117, 125, .18);
  color: #adb5bd;
  border: 1px solid rgba(108, 117, 125, .3);
}

/* Tiny dot for filter pill */
.badge-tipo {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.badge-oportunidad { background: #28a745; }
.badge-evento      { background: #007bff; }
.badge-vacante     { background: #fd7e14; }
.badge-solicitud   { background: #9b5cf6; }

/* ── Cards ─────────────────────────────────────────── */
.muro-card {
  background: #0f1118;
  border: 1.5px solid #1a1e2b;
  border-radius: 14px;
  color: #e2e8f0;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  overflow: hidden;
}
.muro-card:hover {
  border-color: #00e676;
  box-shadow: 0 4px 28px rgba(0, 230, 118, .1);
  transform: translateY(-3px);
}
.muro-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.muro-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: .4rem;
}
.muro-card-desc {
  font-size: .87rem;
  color: #9ca3af;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.muro-card-fechas {
  font-size: .8rem;
}
.muro-card-footer {
  background: #0b0e14;
  border-top: 1px solid #1a1e2b;
  padding: .6rem 1rem;
}

/* ── Share button ─────────────────────────────────── */
.btn-muro-share {
  background: transparent;
  border: 1px solid #2a2e3a;
  color: #9ca3af;
  border-radius: 99px;
  font-size: .8rem;
  padding: 4px 12px;
  transition: border-color .2s, color .2s;
}
.btn-muro-share:hover {
  border-color: #00e676;
  color: #00e676;
}

/* ── Edit / Delete buttons ───────────────────────── */
.btn-muro-edit {
  background: rgba(0, 123, 255, .12);
  border: 1px solid #007bff40;
  color: #007bff;
  border-radius: 6px;
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.btn-muro-edit:hover { background: rgba(0, 123, 255, .28); color: #007bff; }

.btn-muro-delete {
  background: rgba(220, 53, 69, .12);
  border: 1px solid #dc354540;
  color: #dc3545;
  border-radius: 6px;
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.btn-muro-delete:hover { background: rgba(220, 53, 69, .28); color: #dc3545; }

/* ── Modal ─────────────────────────────────────────── */
.muro-modal {
  background: #0d1018;
  border: 1px solid #1e2236;
  color: #e2e8f0;
}
.muro-modal .modal-header {
  border-bottom: 1px solid #1e2236;
}
.muro-modal .modal-footer {
  border-top: 1px solid #1e2236;
}
.muro-input {
  background: #0f1118 !important;
  border: 1px solid #1e2236 !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}
.muro-input:focus {
  border-color: #00e676 !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .12) !important;
  outline: none;
}
.muro-input option {
  background: #0f1118;
  color: #e2e8f0;
}
.muro-img-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid #1e2236;
  object-fit: cover;
}

/* ── Notification bell dropdown ───────────────────── */
.muro-noti-item .dropdown-item {
  padding: .5rem .75rem;
  border-radius: 6px;
  white-space: normal;
}
.muro-noti-item .dropdown-item:hover {
  background: rgba(0, 230, 118, .08);
}

/* ── Dropdown dark override ───────────────────────── */
#muro-noti-lista.dropdown-menu {
  background: #0d1018;
  border: 1px solid #1e2236;
  min-width: 320px;
}
#muro-noti-lista .dropdown-item {
  color: #e2e8f0;
}
#muro-noti-lista .dropdown-item:hover {
  background: rgba(255,255,255,.06);
}
#muro-noti-lista .dropdown-header {
  color: #9ca3af;
}
#muro-noti-lista .muro-noti-footer a,
#muro-noti-lista .muro-noti-footer button {
  color: #00e676;
  font-size: .8rem;
}

/* ── Empty state ──────────────────────────────────── */
#muro-vacio {
  color: #4b5563;
  font-size: .95rem;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 576px) {
  .muro-card-img { height: 140px; }
  .muro-page-title { font-size: 1.2rem; }
}

/* Tipo label grande en card */
.muro-tipo-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}
.muro-tipo-oportunidad { background: rgba(40,167,69,.15);  color: #28a745; }
.muro-tipo-evento      { background: rgba(0,123,255,.15);  color: #4d9fff; }
.muro-tipo-vacante     { background: rgba(253,126,20,.15); color: #fd7e14; }
.muro-tipo-solicitud   { background: rgba(111,66,193,.15); color: #a67ff5; }

/* Hint de flyer */
.muro-flyer-hint {
  font-size: .78rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-grow: 1;
}
.muro-card:hover .muro-flyer-hint { color: #00e676; }

/* ── Oportunidades anteriores (expiradas) ──────────────── */
.muro-anteriores-wrap {
  border-top: 1px solid #1e2330;
  padding-top: 1rem;
}
.muro-anteriores-toggle {
  background: transparent;
  border: 1px solid #1e2330;
  border-radius: 8px;
  color: #6b7280;
  font-size: .875rem;
  padding: .6rem 1rem;
  transition: background .2s, color .2s;
}
.muro-anteriores-toggle:hover {
  background: #151821;
  color: #9ca3af;
}
.muro-anteriores-toggle[aria-expanded="true"] {
  background: #151821;
  color: #9ca3af;
}
.muro-anteriores-toggle[aria-expanded="true"] .muro-chevron {
  transform: rotate(180deg);
}
.muro-chevron { transition: transform .25s ease; }

.muro-anteriores-count {
  display: inline-block;
  background: #1e2330;
  color: #6b7280;
  border-radius: 99px;
  font-size: .72rem;
  padding: 1px 8px;
  margin-left: .4rem;
  font-weight: 600;
}
.muro-card-expirada .muro-card {
  opacity: .6;
  filter: grayscale(30%);
}
.muro-card-expirada .muro-card:hover {
  opacity: .85;
  filter: grayscale(0%);
}