/* Fundación Red Social Academia — Chrome del portal privado
   Clon de react-portal/src/App.tsx + Sidebar.tsx + Header.tsx.

   Decisión de mobile: por debajo de 1024px la barra lateral NO se convierte en
   un cajón lateral, se convierte en una tira horizontal arriba. Con seis ítems,
   una tira que se ve siempre gana contra un menú que hay que abrir, y sobre todo
   no depende de que cargue ningún JavaScript. Este archivo no lleva JS.

   Carga solo en la plantilla del portal. */

/* Estructura ---------------------------------------------------- */
.frs-pshell {
  display: flex;
  min-height: 100vh;
  background: var(--frs-papel);
  color: var(--frs-tierra);
}
.frs-ppanel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.frs-pmain {
  flex: 1 1 auto;
  padding: 32px;
  min-width: 0;
}
.frs-pcontenido { margin-bottom: 24px; }

/* Salto al contenido -------------------------------------------- */
.frs-pskip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--frs-umber);
  color: var(--frs-papel);
  font-family: var(--frs-sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--frs-radio-sm) 0;
}
.frs-pskip:focus { left: 0; }

/* Barra de navegación ------------------------------------------- */
.frs-pnav {
  flex: 0 0 256px;
  width: 256px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--frs-umber);
  color: var(--frs-papel);
  border-right: 1px solid rgba(255, 250, 242, 0.05);
}
.frs-pnav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 250, 242, 0.08);
}
.frs-pnav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.frs-pnav-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.frs-pnav-brand-copy strong {
  font-family: var(--frs-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--frs-papel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frs-pnav-brand-copy em {
  font-family: var(--frs-sans);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.45);
  margin-top: 3px;
}
/* En escritorio el usuario vive en el pie de la barra. */
.frs-pnav-user-compact { display: none; }

.frs-pnav-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.frs-pnav-grupo {
  margin: 0;
  padding: 8px 12px;
  font-family: var(--frs-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.4);
}
.frs-pnav-grupo-nota {
  margin: 0;
  padding: 0 8px 8px;
  font-family: var(--frs-sans);
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(255, 250, 242, 0.32);
}
.frs-pnav-sep {
  margin: 24px 4px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 250, 242, 0.08);
}
.frs-pnav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--frs-radio-sm);
  font-family: var(--frs-sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 250, 242, 0.62);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.frs-pnav-item:hover {
  background: rgba(255, 250, 242, 0.05);
  color: var(--frs-papel);
}
.frs-pnav-item.is-active {
  background: rgba(237, 22, 134, 0.16);
  color: var(--frs-papel);
}
.frs-pnav-item:focus-visible {
  outline: 2px solid var(--frs-magenta);
  outline-offset: 2px;
}
.frs-pnav-marca {
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--frs-magenta);
}
.frs-pnav-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: rgba(255, 250, 242, 0.4);
}
.frs-pnav-item.is-active .frs-pnav-icon { color: var(--frs-naranja); }
.frs-pnav-label { min-width: 0; }

.frs-pnav-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #21160F;
  border-top: 1px solid rgba(255, 250, 242, 0.08);
}
.frs-pnav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--frs-magenta);
  color: #fff;
  font-family: var(--frs-sans);
  font-size: 14px;
  font-weight: 700;
  user-select: none;
}
.frs-pnav-datos {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.frs-pnav-datos strong {
  font-family: var(--frs-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--frs-papel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frs-pnav-datos em {
  font-family: var(--frs-sans);
  font-style: normal;
  font-size: 10px;
  color: rgba(255, 250, 242, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frs-pnav-salir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: rgba(255, 250, 242, 0.5);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.frs-pnav-salir:hover {
  background: rgba(255, 250, 242, 0.06);
  color: #fff;
}
.frs-pnav-salir .frs-pnav-icon { color: currentColor; }

/* Encabezado del panel ------------------------------------------ */
.frs-phead {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 20px 32px;
  background: rgba(255, 250, 242, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #EEE3D5;
}
.frs-phead-code {
  margin: 0;
  font-family: var(--frs-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frs-texto-fino);
}
.frs-phead-title {
  /* En el prototipo es un div, o sea Hanken: no hereda la serif de los títulos. */
  margin: 2px 0 0;
  font-family: var(--frs-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--frs-tierra);
}

/* Inicio: tarjetas de acceso ------------------------------------ */
.frs-pinicio { display: flex; flex-direction: column; gap: 24px; }
.frs-pinicio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.frs-pinicio-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--frs-arena);
  border-radius: var(--frs-radio);
  box-shadow: var(--frs-sombra-card);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.frs-pinicio-card:hover {
  border-color: rgba(237, 22, 134, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(33, 4, 30, 0.06);
}
.frs-pinicio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--frs-radio-sm);
  background: var(--frs-arena-soft);
  color: var(--frs-magenta-dark);
  margin-bottom: 4px;
}
.frs-pinicio-icon .frs-pnav-icon { width: 20px; height: 20px; color: currentColor; }
.frs-pinicio-label {
  font-family: var(--frs-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--frs-tierra);
}
.frs-pinicio-desc {
  font-family: var(--frs-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--frs-texto-tenue);
}

/* Academia: el marco sobre la página propia de Tutor ------------ */
/* En esa página Tutor renderiza TODO su dashboard (y carga sus propios assets,
   que es justamente lo que no se podía replicar desde afuera). El theme solo
   pone el marco, así que hay que tapar dos cosas: el header y el pie del sitio,
   y la navegación propia de Tutor —si no, quedan dos menús. */
.frs-portal-tutor .frs-site-header,
.frs-portal-tutor .frs-footer { display: none !important; }

.frs-pmain-tutor { min-width: 0; }

/* La navegación de Tutor es hermana del contenedor de contenido. Se la esconde
   por posición y no por nombre de clase: Tutor ya renombró cosas una vez, y este
   selector sigue funcionando aunque lo vuelva a hacer. */
.frs-portal-tutor :has(> .tutor-dashboard-main) { display: block !important; }
.frs-portal-tutor :has(> .tutor-dashboard-main) > *:not(.tutor-dashboard-main) { display: none !important; }
.frs-portal-tutor .tutor-dashboard-main {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Mobile: la barra pasa a ser una tira horizontal arriba --------- */
@media (max-width: 1023px) {
  .frs-pshell { flex-direction: column; }
  .frs-pnav {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 250, 242, 0.08);
  }
  .frs-pnav-top { padding: 12px 16px; border-bottom: 0; }
  .frs-pnav-user-compact {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .frs-pnav-user-compact .frs-pnav-avatar { width: 32px; height: 32px; font-size: 13px; }
  /* El pie completo con nombre y rol no entra en la tira. */
  .frs-pnav-pie { display: none; }
  /* Los títulos de grupo romperían la tira; los ítems se leen solos. */
  .frs-pnav-grupo,
  .frs-pnav-grupo-nota,
  .frs-pnav-sep { display: none; }

  .frs-pnav-lista {
    flex-direction: row;
    gap: 4px;
    padding: 0 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .frs-pnav-lista::-webkit-scrollbar { display: none; }
  .frs-pnav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    min-height: 44px;
  }
  /* La marca del activo pasa de barra izquierda a subrayado. */
  .frs-pnav-marca {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 3px;
    width: auto;
    height: 2px;
  }

  .frs-phead { padding: 16px 20px; }
  .frs-pmain { padding: 20px; }
}

@media (max-width: 639px) {
  .frs-phead-title { font-size: 18px; }
  .frs-pmain { padding: 16px; }
  .frs-pinicio-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .frs-pinicio-card,
  .frs-pnav-item,
  .frs-pnav-salir { transition: none; }
  .frs-pinicio-card:hover { transform: none; }
}