/* ==========================================================================
   VISTA: Espacio Sináptico (Inicio / Feed del usuario logueado)
   Prefijo `feed-` en TODO (clases y variables) para blindar contra
   colisiones con las hojas de estilo globales ya cargadas en el
   layout. Las reglas que originalmente eran selectores sueltos
   (`body`, `a`, `button`, `figure`) se escaparon bajo `.feed-page`
   para no romper el resto del sitio — ver esa clase más abajo.
   ========================================================================== */

:root {
  --feed-bg-color: #f3f2ef;
  --feed-card-bg: #ffffff;
  --feed-border-color: #dadce0;
  --feed-text-primary: rgba(0, 0, 0, 0.9);
  --feed-text-secondary: rgba(0, 0, 0, 0.6);
  --feed-accent-color: #1B2A4A;
  --feed-accent-color-rgb: 27, 42, 74;
  --feed-highlight-color: #F97316;
  --feed-hover-bg: #ebebeb;
  --feed-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   IMPORTANTE: estas reglas iban originalmente sueltas como `body`, `a`,
   `button`, `figure` (sin clase). Se escaparon bajo `.feed-page` porque
   esta vista es un fragmento dentro del layout de la app, no una página
   HTML independiente — unas reglas sin prefijo aquí habrían afectado
   TODOS los links, botones y figuras del resto del sitio.
   ========================================================================== */
.feed-page {
  background-color: var(--feed-bg-color);
  font-family: var(--feed-font-family);
  margin: 0;
  padding: 24px 0;
  color: var(--feed-text-primary);
}

.feed-page a {
  text-decoration: none;
  color: inherit;
}

.feed-page button {
  font-family: inherit;
  cursor: pointer;
}

.feed-page figure {
  margin: 0;
  padding: 0;
}

.feed-container {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr) 300px;
  gap: 24px;
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  align-items: start;
}

.feed-card {
  background: var(--feed-card-bg);
  border: 1px solid var(--feed-border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.feed-sidebar-left {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}

.feed-profile-link {
  display: block;
  text-align: center;
}

.feed-profile-banner {
  height: 56px;
}

.feed-profile-avatar {
  width: 72px;
  height: 72px;
  margin: -38px auto 12px;
  border-radius: 50%;
  border: 2px solid var(--feed-card-bg);
  position: relative;
  background: var(--feed-card-bg);
}

.feed-profile-avatar img,
.feed-profile-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.feed-profile-details {
  padding-bottom: 12px;
}

.feed-profile-text-link {
  display: block;
  text-align: center;
}

.feed-profile-name {
  font-size: 16px;
  margin: 0 0 4px;
}

.feed-profile-name:hover {
  text-decoration: underline;
}

.feed-profile-headline {
  font-size: 12px;
  color: var(--feed-text-secondary);
  margin: 0 12px 4px;
  line-height: 1.3;
}

.feed-profile-location {
  font-size: 12px;
  color: var(--feed-text-secondary);
  margin: 0 12px 12px;
}

.feed-profile-education {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--feed-hover-bg);
}

.feed-profile-education:hover {
  background: var(--feed-hover-bg);
}

.feed-education-logo {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.feed-education-logo img,
.feed-education-logo svg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.feed-education-name {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

.feed-analytics-card {
  padding: 12px 0;
}

.feed-analytics-link,
.feed-network-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.feed-analytics-link:hover,
.feed-network-link:hover {
  background: var(--feed-hover-bg);
}

.feed-network-label {
  color: var(--feed-text-secondary);
  margin: 0;
  font-weight: 600;
}

.feed-network-cta {
  font-weight: normal;
  margin: 0;
}

.feed-network-count {
  color: var(--feed-highlight-color);
  font-weight: 700;
}


.feed-main-feed {
  display: flex;
  flex-direction: column;
}

.feed-job-prompt-card {
  /* padding lateral ampliado (16px -> 40px) para dejar espacio libre
     al botón de cerrar, que está posicionado en absolute arriba a la
     derecha — antes el título centrado podía llegar a solaparse con
     él en columnas más angostas que las de este mockup original */
  padding: 16px 40px;
  text-align: center;
  position: relative;
}

.feed-job-prompt-title {
  font-size: 16px;
  margin: 0 0 4px;
}

.feed-job-prompt-desc {
  font-size: 14px;
  color: var(--feed-text-secondary);
  margin: 0 0 16px;
}

.feed-job-prompt-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.feed-btn-primary-outline {
  flex: 1;
  padding: 6px 16px;
  border: 1px solid var(--feed-accent-color);
  border-radius: 16px;
  color: var(--feed-accent-color);
  font-weight: 600;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-btn-primary-outline:hover {
  background: rgba(var(--feed-accent-color-rgb), 0.1);
  border-width: 2px;
  padding: 5px 15px;
}

.feed-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--feed-text-secondary);
  transition: background-color .15s ease;
}

.feed-close-btn:hover {
  background-color: var(--feed-hover-bg);
}

.feed-create-post-card {
  padding: 12px 16px;
}

.feed-share-box-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.feed-current-user-avatar figure {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.feed-current-user-avatar img,
.feed-current-user-avatar svg {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.feed-create-post-btn {
  flex: 1;
  border: 1px solid #b2b2b2;
  border-radius: 35px;
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--feed-text-secondary);
  background: var(--feed-card-bg);
  font-size: 14px;
}

.feed-create-post-btn:hover {
  background: var(--feed-hover-bg);
}

.feed-media-actions {
  display: flex;
  justify-content: space-around;
}

.feed-media-actions button,
.feed-media-actions a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--feed-text-secondary);
  background: none;
  border: none;
  border-radius: 4px;
}

.feed-media-actions button:hover,
.feed-media-actions a:hover {
  background: var(--feed-hover-bg);
}

.feed-action-video {
  color: #5f9b41 !important;
}

.feed-action-photo {
  color: #70b5f9 !important;
}

.feed-action-article {
  color: #e16745 !important;
}

.feed-sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.feed-sort-divider {
  flex: 1;
  border: none;
  border-top: 1px solid var(--feed-border-color);
  margin: 0;
}

.feed-sort-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--feed-text-secondary);
  display: flex;
  align-items: center;
}

.feed-sort-btn strong {
  color: var(--feed-text-primary);
  margin-left: 4px;
}

.feed-new-posts-alert {
  text-align: center;
  margin-bottom: 8px;
}

.feed-new-posts-btn {
  background: var(--feed-card-bg);
  border: 1px solid var(--feed-border-color);
  border-radius: 16px;
  padding: 4px 16px;
  font-weight: 600;
  color: var(--feed-accent-color);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feed-new-posts-btn:hover {
  background: #f4f2ee;
}

.feed-post-header-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--feed-hover-bg);
}

.feed-post-context-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--feed-text-secondary);
  margin: 0;
  flex: 1;
}

.feed-tool-btn {
  background: none;
  border: none;
  color: var(--feed-text-secondary);
  padding: 4px;
}

.feed-tool-btn:hover {
  background: var(--feed-hover-bg);
  border-radius: 50%;
}

.feed-post-author-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
}

.feed-post-author-details {
  /* Toma todo el espacio disponible entre el avatar y el botón, y
     se le permite encogerse (min-width:0) para que el texto largo
     haga wrap en vez de forzar el ancho del contenedor */
  flex: 1;
  min-width: 0;
}

.feed-avatar-figure {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.feed-avatar-figure img,
.feed-avatar-figure svg {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.feed-author-name {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
}

.feed-author-degree {
  color: var(--feed-text-secondary);
  font-weight: normal;
}

.feed-author-name-link:hover .feed-author-name {
  color: var(--feed-accent-color);
  text-decoration: underline;
}

.feed-author-headline {
  font-size: 12px;
  color: var(--feed-text-secondary);
  margin: 2px 0 0;
}

.feed-post-metadata {
  font-size: 12px;
  color: var(--feed-text-secondary);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.feed-btn-follow-text {
  /* Antes: position:absolute pisando el texto del headline.
     Ahora: un ítem flex más, hermano de post-author-details, que
     nunca se solapa sin importar cuánto texto tenga la entidad. */
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--feed-accent-color);
  font-weight: 600;
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.feed-btn-follow-text:hover {
  background: rgba(var(--feed-accent-color-rgb), 0.1);
}

.feed-post-text-content {
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.feed-post-text-content a {
  color: var(--feed-accent-color);
  font-weight: 600;
}

.feed-post-text-content a:hover {
  text-decoration: underline;
}

.feed-btn-expand-text {
  background: none;
  border: none;
  color: var(--feed-text-secondary);
  font-size: 14px;
  margin-left: 4px;
  padding: 0;
}

.feed-btn-expand-text:hover {
  color: var(--feed-accent-color);
  text-decoration: underline;
}

.feed-post-media-container {
  width: 100%;
  background: var(--feed-bg-color);
}

.feed-media-figure {
  width: 100%;
  height: 100%;
  aspect-ratio: 0.97 / 1;
}

.feed-media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed-sidebar-right {
  position: sticky;
  top: 24px;
}

.feed-recommendations-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feed-recommendations-title {
  font-size: 16px;
  margin: 0 0 4px 0;
  font-weight: 600;
}

.feed-recommendation-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.feed-rec-logo {
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.feed-rec-logo.feed-square {
  border-radius: 4px;
}

.feed-rec-logo.feed-round {
  border-radius: 50%;
}

.feed-rec-logo img,
.feed-rec-logo svg {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}

.feed-rec-info {
  flex: 1;
}

.feed-rec-name {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
}

.feed-rec-desc {
  font-size: 12px;
  color: var(--feed-text-secondary);
  margin: 2px 0 8px;
  line-height: 1.3;
}

.feed-btn-follow-outline {
  border: 1px solid var(--feed-text-secondary);
  background: transparent;
  border-radius: 16px;
  padding: 4px 16px;
  font-weight: 600;
  color: var(--feed-text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
}

.feed-btn-follow-outline:before {
  content: "+ ";
  margin-right: 4px;
  font-size: 16px;
}

.feed-btn-follow-outline:hover {
  background: rgba(0, 0, 0, 0.05);
  border-width: 2px;
  padding: 3px 15px;
  border-color: var(--feed-text-primary);
  color: var(--feed-text-primary);
}

.feed-rec-view-all {
  color: var(--feed-text-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: -8px;
}

.feed-rec-view-all:hover {
  background: var(--feed-hover-bg);
}




.feed-post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--feed-card-bg);
  border-top: 1px solid var(--feed-border-color);
  border-radius: 0 0 8px 8px; 
}

.feed-actions-left {
  display: flex;
  align-items: center;
  gap: 20px; 
}

.feed-btn-action {
  background: none;
  border: none;
  padding: 6px;
  color: var(--feed-text-primary); 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.feed-btn-action:hover {
  background-color: var(--feed-hover-bg);
}

.feed-btn-action .feed-icon {
  width: 20px;
  height: 20px;
}

.feed-btn-like {
  border-radius: 20px; 
  padding: 6px 12px 6px 6px;
  gap: 8px; 
}

.feed-reaction-count {
  font-size: 15px;
  font-weight: 500;
  color: var(--feed-text-primary);
  line-height: 1;
}

.feed-actions-right {
  display: flex;
  align-items: center;
}

.feed-reaction-badge-blue {
  width: 22px;
  height: 22px;
  background-color: var(--feed-accent-color); 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; 
}

.feed-reaction-badge-blue svg {
  width: 12px;
  height: 12px;
  transform: translateY(-0.5px); 
}