/* =========================================================================
   Plataforma ABM · sistema visual
   -------------------------------------------------------------------------
   Extiende styles.css de Andra, no lo reemplaza. De ahi se heredan Inter, la
   escala tipografica, los radios y el azul #2C5CFF. Aqui se agrega lo que
   introduce el diseño de la Plataforma: la cascara con barra lateral, el color
   por area y los componentes de tablero.

   Regla: mismo diseño para TODAS las secciones. Cualquier modulo nuevo usa
   estos componentes; ninguno inventa su propio look.
   ========================================================================= */

:root {
  /* Lienzo y superficies */
  --pl-lienzo: #f4f4f2;
  --pl-superficie: #ffffff;
  --pl-borde: #e7e5e1;
  --pl-borde-suave: #f0eeea;

  /* Texto */
  --pl-texto: #14161a;
  --pl-texto-medio: #5b6068;
  --pl-texto-tenue: #8b9098;

  /* Color por area */
  --pl-finanzas: #1f9254;
  --pl-finanzas-suave: #eaf6ef;
  --pl-comercial: #2c5cff;
  --pl-comercial-suave: #eaf0ff;
  --pl-operaciones: #e07b28;
  --pl-operaciones-suave: #fdf1e6;

  /* Estructura */
  --pl-lateral: 272px;
  --pl-encabezado: 76px;
  --pl-radio: 14px;
  --pl-radio-sm: 10px;
  --pl-sombra: 0 1px 2px rgba(20, 22, 26, 0.04);
}

/* =========================================================================
   1. CASCARA
   ========================================================================= */
.pl-app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pl-lienzo);
  color: var(--pl-texto);
  display: grid;
  grid-template-columns: var(--pl-lateral) 1fr;
}

/* El velo del menu movil vive DENTRO de .pl-app, asi que tiene que quedar
   fuera del flujo del grid: si contara como celda, correria la barra lateral y
   el contenido una posicion y el layout entero saldria desplazado. Con
   `position: fixed` deja de ser item del grid. */
.pl-velo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 50;
}

/* ---- Barra lateral ---- */
.pl-lateral {
  background: var(--pl-superficie);
  border-right: 1px solid var(--pl-borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.pl-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 24px 22px;
}
.pl-marca svg { color: var(--pl-texto); flex: none; }
.pl-marca__texto { line-height: 1.05; }
.pl-marca__sup {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--pl-texto-tenue);
  font-weight: 600;
}
.pl-marca__nombre {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pl-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pl-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--pl-radio-sm);
  color: var(--pl-texto-medio);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.pl-nav__item svg { flex: none; width: 20px; height: 20px; }
.pl-nav__item:hover { background: var(--pl-borde-suave); color: var(--pl-texto); }
.pl-nav__grupo {
  padding: 15px 12px 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pl-texto-tenue);
}
.pl-nav__grupo:first-child { padding-top: 4px; }
.pl-nav__item.is-active {
  background: #eceae6;
  color: var(--pl-texto);
  font-weight: 600;
}

.pl-usuario {
  margin: 12px;
  padding: 12px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pl-superficie);
  cursor: pointer;
}
.pl-usuario__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--pl-texto);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.85rem;
  flex: none;
}
.pl-usuario__datos { min-width: 0; flex: 1; display: block; text-align: left; }
.pl-usuario__nombre {
  display: block;
  font-size: 0.9rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-usuario__rol {
  display: block;
  font-size: 0.78rem; color: var(--pl-texto-tenue); line-height: 1.3;
}

/* ---- Columna de contenido ---- */
.pl-principal { min-width: 0; display: flex; flex-direction: column; }

.pl-encabezado {
  height: var(--pl-encabezado);
  border-bottom: 1px solid var(--pl-borde);
  background: var(--pl-superficie);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 20;
}
.pl-abrir-menu { display: none; }

.pl-campana {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none; background: transparent;
  color: var(--pl-texto-medio);
  cursor: pointer; position: relative;
}
.pl-campana:hover { background: var(--pl-borde-suave); }
.pl-campana[data-avisos]::after {
  content: '';
  position: absolute; top: 9px; right: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pl-comercial);
  border: 2px solid var(--pl-superficie);
}

.pl-empresa {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  background: var(--pl-superficie);
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
}
.pl-empresa:hover { border-color: #d9d6d1; }
.pl-empresa__icono { color: var(--pl-texto-medio); flex: none; }
.pl-empresa__nombre { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.pl-empresa__accion {
  display: block; font-size: 0.76rem; color: var(--pl-texto-tenue); line-height: 1.3;
}

.pl-contenido { padding: 30px 30px 48px; flex: 1; }
.pl-contenido--ancho { max-width: 1320px; }

/* =========================================================================
   2. ENCABEZADO DE PAGINA
   ========================================================================= */
.pl-titulo-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.pl-titulo-pagina h1 {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.pl-titulo-pagina p { color: var(--pl-texto-medio); margin: 0; font-size: 0.97rem; }

.pl-periodo { display: flex; align-items: center; gap: 14px; flex: none; }
.pl-periodo__texto { text-align: right; }
.pl-periodo__semana { font-weight: 700; font-size: 0.98rem; }
.pl-periodo__fecha { color: var(--pl-texto-medio); font-size: 0.88rem; }
.pl-periodo__boton {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio-sm);
  background: var(--pl-superficie);
  color: var(--pl-texto-medio);
  cursor: pointer;
}
.pl-periodo__boton:hover { border-color: #d9d6d1; }

/* =========================================================================
   3. TARJETAS
   ========================================================================= */
.pl-tarjeta {
  background: var(--pl-superficie);
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  box-shadow: var(--pl-sombra);
}
.pl-tarjeta__cuerpo { padding: 22px 24px; }

.pl-tarjeta__titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
}
.pl-tarjeta__titulo h2 {
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0;
}
.pl-enlace {
  font-size: 0.86rem; font-weight: 600;
  color: var(--pl-texto-medio); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-enlace:hover { color: var(--pl-texto); }

/* =========================================================================
   4. AVANCE POR ETAPAS
   ========================================================================= */
.pl-avance {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  margin-bottom: 22px;
  overflow: hidden;
}
.pl-avance__etapas { padding: 22px 26px 26px; }
.pl-avance__rotulo {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pl-texto); margin-bottom: 22px;
}

.pl-pasos { display: flex; align-items: flex-start; }
.pl-paso { flex: 1; text-align: center; position: relative; min-width: 0; }
.pl-paso__marca {
  width: 30px; height: 30px; border-radius: 50%;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  background: var(--pl-superficie);
  border: 2px solid #d9d6d1;
  color: transparent;
  position: relative; z-index: 2;
}
/* La linea que une los pasos nace del paso anterior. */
.pl-paso + .pl-paso::before {
  content: '';
  position: absolute;
  top: 14px; right: 50%; left: -50%;
  height: 2px; background: #e2dfda; z-index: 1;
}
.pl-paso.es-completada .pl-paso__marca {
  background: var(--pl-finanzas); border-color: var(--pl-finanzas); color: #fff;
}
.pl-paso.es-completada + .pl-paso::before { background: var(--pl-finanzas); }
.pl-paso.es-en_progreso .pl-paso__marca {
  border-color: #e8a838;
  border-right-color: #f2e6cc;
  border-bottom-color: #f2e6cc;
}
/* display:block para que el nombre y el estado no se peguen cuando se pintan
   como spans adyacentes (asi los usa Mi empresa). */
.pl-paso__nombre { display: block; font-size: 0.92rem; font-weight: 600; }
.pl-paso__estado { display: block; font-size: 0.82rem; color: var(--pl-texto-tenue); margin-top: 2px; }

.pl-siguiente {
  border-left: 1px solid var(--pl-borde);
  padding: 22px 24px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.pl-siguiente__rotulo { font-size: 0.84rem; color: var(--pl-texto-medio); }
.pl-siguiente__titulo { font-size: 1.15rem; font-weight: 700; }
.pl-siguiente__texto { font-size: 0.88rem; color: var(--pl-texto-medio); margin-bottom: 14px; }

.pl-boton {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 11px 18px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio-sm);
  background: var(--pl-superficie);
  font-size: 0.9rem; font-weight: 600;
  color: var(--pl-texto); text-decoration: none;
  cursor: pointer;
}
.pl-boton:hover { border-color: #cfccc6; }

/* =========================================================================
   5. TARJETAS DE AREA
   ========================================================================= */
.pl-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.pl-area { border-top: 3px solid var(--pl-color-area); overflow: hidden; }
.pl-area[data-area='finanzas'] { --pl-color-area: var(--pl-finanzas); --pl-suave-area: var(--pl-finanzas-suave); }
.pl-area[data-area='comercial'] { --pl-color-area: var(--pl-comercial); --pl-suave-area: var(--pl-comercial-suave); }
.pl-area[data-area='operaciones'] { --pl-color-area: var(--pl-operaciones); --pl-suave-area: var(--pl-operaciones-suave); }

.pl-area__titulo h2 { color: var(--pl-color-area); }
.pl-area__sub { font-size: 0.85rem; color: var(--pl-texto-tenue); margin: 0 0 18px; }

.pl-metrica { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pl-metrica__datos { min-width: 0; }
.pl-metrica__nombre { font-size: 0.88rem; color: var(--pl-texto-medio); margin-bottom: 2px; }
.pl-metrica__valor {
  font-size: 1.72rem; font-weight: 700; letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pl-delta {
  font-size: 0.86rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--pl-finanzas);
}
.pl-delta.es-abajo { color: #c0392b; }
.pl-metrica__vs { font-size: 0.8rem; color: var(--pl-texto-tenue); margin-top: 3px; }
.pl-chispa { flex: none; }

.pl-filas { margin-top: 18px; border-top: 1px solid var(--pl-borde-suave); }
.pl-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--pl-borde-suave);
  font-size: 0.92rem;
}
.pl-fila:last-child { border-bottom: none; }
.pl-fila__etiqueta { color: var(--pl-texto-medio); }
.pl-fila__valor { font-weight: 600; text-align: right; }
.pl-fila__valor.es-positivo { color: var(--pl-finanzas); }
.pl-fila__valor.es-negativo { color: #c0392b; }
.pl-fila__valor.es-enlace {
  color: var(--pl-texto-medio); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}

.pl-estado {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 18px 24px 22px;
  padding: 13px 15px;
  border-radius: var(--pl-radio-sm);
  background: var(--pl-suave-area);
}
.pl-estado svg { color: var(--pl-color-area); flex: none; margin-top: 1px; }
.pl-estado__titulo { font-size: 0.88rem; font-weight: 700; color: var(--pl-color-area); }
.pl-estado__texto { font-size: 0.84rem; color: var(--pl-texto-medio); }

/* =========================================================================
   6. FILA INFERIOR: KPIs, ACUERDOS, COMITES
   ========================================================================= */
.pl-inferior { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.pl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.pl-kpi { min-width: 0; }
.pl-kpi__nombre {
  font-size: 0.72rem; color: var(--pl-texto-tenue);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin-bottom: 6px; line-height: 1.25;
}
.pl-kpi__valor { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; }
.pl-kpi__meta { font-size: 0.76rem; color: var(--pl-texto-tenue); margin: 4px 0 10px; }
.pl-kpi__semaforo { color: var(--pl-finanzas); }
.pl-kpi__semaforo.es-fuera { color: var(--pl-operaciones); }

.pl-lista { margin-top: 16px; display: flex; flex-direction: column; }
.pl-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pl-borde-suave);
  font-size: 0.92rem;
}
.pl-item:last-child { border-bottom: none; }
.pl-punto {
  width: 8px; height: 8px; border-radius: 50%;
  flex: none; background: var(--pl-finanzas);
  transform: translateY(-1px);
}
.pl-punto.es-en_riesgo { background: var(--pl-operaciones); }
.pl-punto.es-vencido { background: #c0392b; }
.pl-item__titulo { flex: 1; min-width: 0; }
.pl-item__meta { color: var(--pl-texto-tenue); font-size: 0.84rem; flex: none; }
.pl-item__fecha { color: var(--pl-texto-medio); font-size: 0.84rem; flex: none; }

.pl-pie { margin-top: 14px; }
.pl-pie .pl-enlace { color: var(--pl-operaciones); }

/* =========================================================================
   7. ESTADOS DE CARGA Y ERROR
   ========================================================================= */
.pl-cargando, .pl-vacio {
  padding: 44px 24px; text-align: center;
  color: var(--pl-texto-tenue); font-size: 0.92rem;
}
.pl-esqueleto {
  background: linear-gradient(90deg, #eeece8 25%, #f6f5f3 50%, #eeece8 75%);
  background-size: 200% 100%;
  animation: pl-brillo 1.2s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes pl-brillo { to { background-position: -200% 0; } }

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 1180px) {
  .pl-areas { grid-template-columns: 1fr; }
  .pl-inferior { grid-template-columns: 1fr; }
  .pl-avance { grid-template-columns: 1fr; }
  .pl-siguiente { border-left: none; border-top: 1px solid var(--pl-borde); }
}

@media (max-width: 900px) {
  .pl-app { grid-template-columns: 1fr; }

  /* La barra lateral pasa a cajon, con velo. Misma navegacion, no otra. */
  .pl-lateral {
    position: fixed; inset: 0 auto 0 0;
    width: min(88vw, var(--pl-lateral));
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    z-index: 60;
  }
  .pl-app.pl-menu-abierto .pl-lateral { transform: translateX(0); }
  .pl-velo { display: block; }
  .pl-app.pl-menu-abierto .pl-velo { opacity: 1; pointer-events: auto; }

  .pl-encabezado { justify-content: space-between; padding: 0 16px; }
  .pl-abrir-menu {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--pl-borde); border-radius: var(--pl-radio-sm);
    background: var(--pl-superficie); color: var(--pl-texto); cursor: pointer;
  }
  .pl-contenido { padding: 20px 16px 40px; }
  .pl-titulo-pagina { flex-direction: column; align-items: stretch; gap: 14px; }
  .pl-periodo { justify-content: space-between; }
  .pl-periodo__texto { text-align: left; }
  .pl-titulo-pagina h1 { font-size: 1.55rem; }
  .pl-empresa__accion { display: none; }
  .pl-pasos { flex-direction: column; gap: 14px; }
  .pl-paso { display: flex; align-items: center; gap: 12px; text-align: left; }
  .pl-paso__marca { margin: 0; }
  .pl-paso + .pl-paso::before { display: none; }
  .pl-kpis { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 420px) {
  .pl-metrica { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pl-chispa { align-self: stretch; }
}

/* =========================================================================
   9. RUTA ABM · modulos y sesiones
   Mismos tokens que el resto de la plataforma: nada nuevo, solo composicion.
   ========================================================================= */
.pl-modulo { margin-bottom: 18px; }

.pl-modulo__cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; margin-bottom: 18px;
}
.pl-modulo__rotulo {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pl-texto-tenue); margin-bottom: 4px;
}
.pl-modulo__nombre {
  font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px;
}
.pl-modulo__nombre a { color: inherit; text-decoration: none; }
.pl-modulo__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-modulo__desc {
  margin: 0; color: var(--pl-texto-medio);
  font-size: 0.93rem; max-width: 62ch;
}

.pl-modulo__avance { flex: none; width: 190px; text-align: right; }
.pl-modulo__porcentaje { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.pl-modulo__cuenta { font-size: 0.82rem; color: var(--pl-texto-tenue); margin-bottom: 8px; }
.pl-barra {
  height: 6px; border-radius: 99px;
  background: var(--pl-borde-suave); overflow: hidden;
}
.pl-barra span {
  display: block; height: 100%; border-radius: 99px;
  background: var(--pl-comercial);
}

.pl-modulo__entregables {
  border-top: 1px solid var(--pl-borde-suave);
  padding-top: 16px; margin-bottom: 18px;
}
.pl-modulo__entregables ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px;
}
.pl-modulo__entregables li {
  font-size: 0.9rem; color: var(--pl-texto-medio);
  padding-left: 16px; position: relative;
}
.pl-modulo__entregables li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pl-texto-tenue);
}

.pl-sesiones { border-top: 1px solid var(--pl-borde-suave); }
.pl-sesion {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--pl-borde-suave);
}
.pl-sesion:last-child { border-bottom: none; }
.pl-sesion__marca { flex: none; color: var(--pl-texto-tenue); display: flex; }
.pl-sesion__cuerpo { flex: 1; min-width: 0; }
.pl-sesion__titulo { display: block; font-size: 0.94rem; font-weight: 600; }
.pl-sesion__fecha { display: block; font-size: 0.82rem; color: var(--pl-texto-tenue); }
.pl-sesion__estado {
  flex: none; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pl-texto-tenue);
}
.pl-sesion__hueco { flex: none; width: 92px; }
.pl-boton--sm { padding: 7px 14px; font-size: 0.84rem; flex: none; width: 92px; justify-content: center; }

.pl-sesion.es-completada .pl-sesion__marca,
.pl-sesion.es-completada .pl-sesion__estado { color: var(--pl-finanzas); }
.pl-sesion.es-en-progreso .pl-sesion__marca,
.pl-sesion.es-en-progreso .pl-sesion__estado { color: var(--pl-comercial); }
.pl-sesion.es-disponible .pl-sesion__marca,
.pl-sesion.es-disponible .pl-sesion__estado { color: var(--pl-texto-medio); }
.pl-sesion.es-bloqueada { opacity: 0.55; }

@media (max-width: 900px) {
  .pl-modulo__cabeza { flex-direction: column; gap: 14px; }
  .pl-modulo__avance { width: 100%; text-align: left; }
  .pl-modulo__entregables ul { grid-template-columns: 1fr; }
  /* Al apilarse, el titulo se queda con el renglon completo y el estado y el
     boton bajan juntos. Sin el `order`, el boton se colaba junto al titulo y lo
     partia en tres lineas. */
  .pl-sesion { flex-wrap: wrap; }
  .pl-sesion__estado { order: 3; }
  .pl-sesion__hueco { display: none; }
  .pl-sesion .pl-boton--sm { order: 4; margin-left: auto; }
}

/* =========================================================================
   10. MODULO Y SESION
   Mismo sistema: migas, insignias de estado y una retícula de dos columnas.
   ========================================================================= */
.pl-miga {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--pl-texto-tenue);
  margin-bottom: 18px;
}
.pl-miga a { color: var(--pl-texto-medio); text-decoration: none; font-weight: 500; }
.pl-miga a:hover { color: var(--pl-texto); }
.pl-miga span[aria-current] { color: var(--pl-texto); font-weight: 600; }

.pl-insignia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--pl-borde-suave); color: var(--pl-texto-medio);
  flex: none;
  /* En movil el encabezado se apila con `align-items: stretch`; sin esto la
     insignia se estiraba de lado a lado como si fuera una barra. */
  align-self: flex-start;
}
.pl-insignia.es-completada { background: var(--pl-finanzas-suave); color: var(--pl-finanzas); }
.pl-insignia.es-en-progreso { background: var(--pl-comercial-suave); color: var(--pl-comercial); }
.pl-insignia.es-disponible { background: #eceae6; color: var(--pl-texto); }
.pl-insignia.es-proxima { background: var(--pl-operaciones-suave); color: var(--pl-operaciones); }

.pl-encabezado-sesion { display: flex; align-items: flex-start; gap: 20px; }
.pl-rotulo {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pl-texto-tenue); margin-bottom: 6px;
}
.pl-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 0.88rem; color: var(--pl-texto-medio);
}
.pl-meta__punto {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--pl-texto-tenue); flex: none;
}

.pl-detalle { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.pl-columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.pl-objetivo {
  border-left: 3px solid var(--pl-comercial);
  background: var(--pl-comercial-suave);
  border-radius: 0 var(--pl-radio-sm) var(--pl-radio-sm) 0;
  padding: 15px 18px;
  font-size: 0.93rem; color: var(--pl-texto-medio);
}
.pl-objetivo strong {
  display: block; color: var(--pl-texto);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 5px;
}

/* ---- Reproductor ---- */
.pl-video {
  position: relative;
  border-radius: var(--pl-radio);
  background: #14161a;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
}
.pl-video__estado {
  position: absolute; top: 14px; left: 16px;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.pl-video__play {
  width: 72px; height: 72px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid; place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pl-video__play:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.04); }
.pl-video__play svg { width: 30px; height: 30px; }
.pl-video__controles {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.pl-video__tiempo {
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums; flex: none;
}
.pl-video__barra {
  flex: 1; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.pl-video__barra span {
  display: block; height: 100%; border-radius: 99px;
  background: #fff; transition: width 0.2s linear;
}

/* ---- Materiales ---- */
.pl-materiales { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* `min-width: 0` NO es decorativo: una celda de grid no baja de su contenido, y
   el nombre del material lleva `nowrap`. Sin esto, un nombre largo empujaba la
   pista mas alla de la tarjeta y la pagina entera se desbordaba a lo ancho. */
.pl-material {
  min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio-sm);
  background: var(--pl-superficie);
}
.pl-material__insignia {
  width: 40px; height: 40px; border-radius: var(--pl-radio-sm);
  display: grid; place-items: center; flex: none;
  background: var(--pl-borde-suave);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em;
  color: var(--pl-texto-medio);
}
.pl-material__cuerpo { flex: 1; min-width: 0; }
.pl-material__nombre {
  font-size: 0.9rem; font-weight: 600; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-material__meta { font-size: 0.8rem; color: var(--pl-texto-tenue); margin: 2px 0 0; }

/* ---- Implementa en tu empresa ---- */
.pl-implementa {
  border-radius: var(--pl-radio);
  background: var(--pl-texto); color: #fff;
  padding: 24px 26px;
}
.pl-implementa__titulo { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.pl-implementa__texto {
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); margin: 0 0 16px;
}
.pl-implementa ul {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.pl-implementa li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.88);
}
.pl-implementa li svg { flex: none; color: var(--pl-finanzas); margin-top: 2px; }
.pl-implementa .pl-boton {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.pl-implementa .pl-boton:hover { border-color: rgba(255, 255, 255, 0.55); }
.pl-boton--claro { background: #fff; color: var(--pl-texto); border-color: #fff; }
.pl-boton--claro:hover { background: #f0eeea; border-color: #f0eeea; }

/* ---- Barra lateral del detalle ---- */
.pl-datos { margin: 0; }
.pl-datos div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--pl-borde-suave);
  font-size: 0.89rem;
}
.pl-datos div:last-child { border-bottom: none; }
.pl-datos dt { color: var(--pl-texto-medio); }
.pl-datos dd { margin: 0; font-weight: 600; text-align: right; }
.pl-boton--bloque { display: flex; width: 100%; justify-content: center; align-self: stretch; }

/* ---- Pie de navegación ---- */
.pl-navegacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--pl-borde);
}
.pl-navegacion > div { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-boton--principal {
  background: var(--pl-comercial); border-color: var(--pl-comercial); color: #fff;
}
.pl-boton--principal:hover { background: #244fe0; border-color: #244fe0; }
.pl-boton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Sesión cerrada y cierre de sesión completada ---- */
.pl-aviso {
  max-width: 520px; margin: 40px auto; text-align: center;
  padding: 40px 32px;
}
.pl-aviso__icono {
  width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  background: var(--pl-borde-suave); color: var(--pl-texto-medio);
}
.pl-aviso__icono.es-logro { background: var(--pl-finanzas-suave); color: var(--pl-finanzas); }
.pl-aviso__icono svg { width: 28px; height: 28px; }
.pl-aviso h1 { font-size: 1.4rem; font-weight: 700; margin: 6px 0 10px; }
.pl-aviso p { color: var(--pl-texto-medio); margin: 0 0 8px; font-size: 0.94rem; }
.pl-aviso__acciones {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 22px;
}
.pl-aviso__nota { font-size: 0.86rem; color: var(--pl-texto-tenue); margin-top: 18px; }

/* ---- Banner de módulo completado ---- */
.pl-logro {
  border-radius: var(--pl-radio);
  background: var(--pl-texto); color: #fff;
  padding: 22px 26px; margin-bottom: 18px;
}
.pl-logro .pl-rotulo { color: var(--pl-finanzas); }
.pl-logro h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; }
.pl-logro p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 1180px) {
  .pl-detalle { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .pl-encabezado-sesion { flex-direction: column; gap: 12px; }
  .pl-materiales { grid-template-columns: 1fr; }
  .pl-navegacion { flex-direction: column; align-items: stretch; }
  .pl-navegacion > div { justify-content: space-between; }
  .pl-implementa { padding: 20px; }
}

/* =========================================================================
   11. TIRA DE METRICAS, ACUERDOS Y COMITES
   ========================================================================= */
.pl-tira {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 20px;
}
.pl-metro {
  background: var(--pl-superficie);
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  padding: 16px 18px;
  box-shadow: var(--pl-sombra);
}
.pl-metro__valor { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.pl-metro__etiqueta { font-size: 0.82rem; color: var(--pl-texto-medio); margin-top: 2px; }
.pl-metro.es-alerta .pl-metro__valor { color: #c0392b; }
.pl-metro.es-bien .pl-metro__valor { color: var(--pl-finanzas); }

/* ---- Acuerdos ---- */
.pl-acuerdos { margin-top: 12px; }
.pl-acuerdo {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--pl-borde-suave);
}
.pl-acuerdo:last-child { border-bottom: none; }
.pl-acuerdo__punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--pl-finanzas);
}
.pl-acuerdo.es-en_riesgo .pl-acuerdo__punto { background: var(--pl-operaciones); }
.pl-acuerdo.es-vencido .pl-acuerdo__punto { background: #c0392b; }
.pl-acuerdo.es-cumplido .pl-acuerdo__punto { background: var(--pl-texto-tenue); }
.pl-acuerdo__cuerpo { flex: 1; min-width: 0; }
.pl-acuerdo__titulo { font-size: 0.95rem; font-weight: 600; }
.pl-acuerdo.es-cumplido .pl-acuerdo__titulo { color: var(--pl-texto-tenue); text-decoration: line-through; }
.pl-acuerdo__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--pl-texto-tenue); margin-top: 3px;
}

.pl-insignia.es-acuerdo-activo { background: var(--pl-comercial-suave); color: var(--pl-comercial); }
.pl-insignia.es-acuerdo-en_riesgo { background: var(--pl-operaciones-suave); color: var(--pl-operaciones); }
.pl-insignia.es-acuerdo-vencido { background: #fbeae8; color: #c0392b; }
.pl-insignia.es-acuerdo-cumplido { background: var(--pl-finanzas-suave); color: var(--pl-finanzas); }

/* ---- Comites ---- */
.pl-comites { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.pl-comite {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio-sm);
}
.pl-comite.es-pasado { opacity: 0.6; }
.pl-comite__fecha {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--pl-radio-sm);
  background: var(--pl-comercial-suave); color: var(--pl-comercial);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pl-comite.es-pasado .pl-comite__fecha { background: var(--pl-borde-suave); color: var(--pl-texto-medio); }
.pl-comite__dia { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.pl-comite__mes {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 2px;
}
.pl-comite__cuerpo { min-width: 0; }
.pl-comite__nombre { font-size: 0.95rem; font-weight: 600; }
.pl-comite__meta { font-size: 0.82rem; color: var(--pl-texto-tenue); margin-top: 2px; }

@media (max-width: 900px) {
  .pl-tira { grid-template-columns: repeat(2, 1fr); }
  .pl-acuerdo { flex-wrap: wrap; }
  .pl-acuerdo .pl-boton--sm { margin-left: auto; }
}

.pl-metro.es-ojo .pl-metro__valor { color: var(--pl-comercial); }

/* =========================================================================
   12. ENTREGABLES: bandeja, formulario, historial y revision
   ========================================================================= */
.pl-entregables { display: flex; flex-direction: column; }
.pl-entregable {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--pl-borde-suave);
  text-decoration: none; color: inherit;
}
.pl-entregable:last-child { border-bottom: none; }
.pl-entregable:hover { background: var(--pl-borde-suave); }
.pl-entregable__marca { flex: none; color: var(--pl-texto-tenue); display: flex; }
.pl-entregable.es-cambios .pl-entregable__marca { color: var(--pl-operaciones); }
.pl-entregable.es-aprobado .pl-entregable__marca { color: var(--pl-finanzas); }
.pl-entregable.es-en_revision .pl-entregable__marca { color: var(--pl-comercial); }
.pl-entregable__cuerpo { flex: 1; min-width: 0; }
.pl-entregable__titulo { display: block; font-size: 0.96rem; font-weight: 600; }
.pl-entregable__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--pl-texto-tenue); margin-top: 3px;
}
.pl-entregable__meta .es-vencido { color: #c0392b; font-weight: 600; }
.pl-entregable__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--pl-texto); color: #fff;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
}

.pl-insignia.es-entregable-pendiente { background: #eceae6; color: var(--pl-texto-medio); }
.pl-insignia.es-entregable-en_revision { background: var(--pl-comercial-suave); color: var(--pl-comercial); }
.pl-insignia.es-entregable-cambios { background: var(--pl-operaciones-suave); color: var(--pl-operaciones); }
.pl-insignia.es-entregable-aprobado { background: var(--pl-finanzas-suave); color: var(--pl-finanzas); }

/* ---- Formularios ---- */
.pl-campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pl-campo { display: flex; flex-direction: column; gap: 6px; }
.pl-campo--ancho { grid-column: 1 / -1; }
.pl-campo > span { font-size: 0.85rem; font-weight: 600; color: var(--pl-texto-medio); }
.pl-campo input, .pl-campo select, .pl-campo textarea {
  font: inherit; color: var(--pl-texto);
  padding: 10px 12px;
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio-sm);
  background: var(--pl-superficie);
  width: 100%;
}
.pl-campo input:focus, .pl-campo select:focus, .pl-campo textarea:focus {
  outline: none; border-color: var(--pl-comercial);
  box-shadow: 0 0 0 3px var(--pl-comercial-suave);
}
.pl-campo textarea { resize: vertical; }
.pl-campo__ayuda { font-size: 0.78rem; color: var(--pl-texto-tenue); }

.pl-form-acciones {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 16px; flex-wrap: wrap;
}
.pl-form-error {
  margin: 12px 0 0; font-size: 0.86rem; color: #c0392b;
}

.pl-boton--exito { background: var(--pl-finanzas); border-color: var(--pl-finanzas); color: #fff; }
.pl-boton--exito:hover { background: #197a45; border-color: #197a45; }

.pl-estado--cambios { margin: 0 0 18px; background: var(--pl-operaciones-suave); }
.pl-estado--cambios svg { color: var(--pl-operaciones); }
.pl-estado--cambios .pl-estado__titulo { color: var(--pl-operaciones); }

.pl-revisar { border-color: var(--pl-comercial); }
.pl-revisar__nota { font-size: 0.88rem; color: var(--pl-texto-medio); margin: 8px 0 0; }

/* ---- Historial (linea de tiempo) ---- */
.pl-linea { list-style: none; margin: 14px 0 0; padding: 0; }
.pl-evento { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.pl-evento:not(:last-child)::before {
  content: ''; position: absolute;
  left: 15px; top: 32px; bottom: 0;
  width: 2px; background: var(--pl-borde);
}
.pl-evento__marca {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; z-index: 1;
  background: var(--pl-borde-suave); color: var(--pl-texto-medio);
}
.pl-evento.es-revision .pl-evento__marca { background: var(--pl-finanzas-suave); color: var(--pl-finanzas); }
.pl-evento__cuerpo { flex: 1; min-width: 0; padding-top: 4px; }
.pl-evento__cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-evento__persona { font-size: 0.9rem; font-weight: 600; }
.pl-evento__fecha { font-size: 0.8rem; color: var(--pl-texto-tenue); margin-left: auto; }
.pl-evento__texto { margin: 5px 0 0; font-size: 0.9rem; color: var(--pl-texto-medio); }

.pl-adjunto {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--pl-borde); border-radius: var(--pl-radio-sm);
  text-decoration: none; color: var(--pl-texto);
  font-size: 0.86rem; font-weight: 600;
}
.pl-adjunto:hover { border-color: #cfccc6; }
.pl-adjunto__peso { color: var(--pl-texto-tenue); font-weight: 500; }

@media (max-width: 900px) {
  .pl-campos { grid-template-columns: 1fr; }
  .pl-entregable { flex-wrap: wrap; }
  .pl-entregable__avatar { order: 3; }
}

/* En pantallas estrechas la meta se apila; los puntos separadores quedarian
   colgando en su propia linea. Se ocultan y cada dato va en su renglon. */
@media (max-width: 560px) {
  .pl-entregable__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pl-entregable__meta .pl-meta__punto { display: none; }
  .pl-acuerdo__meta .pl-meta__punto { display: none; }
}

/* =========================================================================
   13. PAGINA PROPIA DE UN AREA
   ========================================================================= */
.pl-area-metrica { text-align: right; flex: none; }
.pl-area-metrica__valor {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
}
.pl-titulo-pagina .pl-delta { justify-content: flex-end; margin-top: 6px; }
.pl-titulo-pagina .pl-delta span { color: var(--pl-texto-tenue); font-weight: 500; }

.pl-area-grafica { margin-bottom: 18px; }
.pl-area-grafica[data-area='finanzas'] { border-top: 3px solid var(--pl-finanzas); }
.pl-area-grafica[data-area='comercial'] { border-top: 3px solid var(--pl-comercial); }
.pl-area-grafica[data-area='operaciones'] { border-top: 3px solid var(--pl-operaciones); }

.pl-grafica-caja { margin-top: 14px; }
.pl-grafica { width: 100%; height: auto; display: block; }
.pl-grafica__mes { font-size: 11px; fill: var(--pl-texto-tenue); }

/* El estado del área usa el color del área, como en Inicio. */
.pl-area .pl-estado { background: var(--pl-suave-area); }
.pl-area .pl-estado svg,
.pl-area .pl-estado__titulo { color: var(--pl-color-area); }

@media (max-width: 720px) {
  .pl-titulo-pagina[data-area] { flex-direction: column; align-items: flex-start; }
  .pl-area-metrica { text-align: left; }
  .pl-titulo-pagina .pl-delta { justify-content: flex-start; }
}

/* =========================================================================
   14. MI EMPRESA, RECURSOS, COMUNIDAD Y SOPORTE
   ========================================================================= */
/* ---- Personas (miembros y consultores) ---- */
.pl-personas { margin-top: 8px; }
.pl-persona {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--pl-borde-suave);
}
.pl-persona:last-child { border-bottom: none; }
.pl-persona__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--pl-texto); color: #fff;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
}
.pl-persona__avatar.es-andra { background: var(--pl-comercial); }
.pl-persona__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-persona__nombre { font-size: 0.92rem; font-weight: 600; }
.pl-persona__correo { font-size: 0.82rem; color: var(--pl-texto-tenue); text-decoration: none; }
.pl-persona__correo:hover { color: var(--pl-comercial); }
.pl-persona__rol {
  flex: none; font-size: 0.78rem; font-weight: 600;
  color: var(--pl-texto-medio); text-align: right;
}

/* ---- Material bloqueado (Recursos) ---- */
.pl-material.es-bloqueado { opacity: 0.6; }
.pl-material__bloqueado {
  flex: none; width: 40px; display: grid; place-items: center;
  color: var(--pl-texto-tenue);
}

/* ---- Comunidad: publicaciones ---- */
.pl-posts { display: flex; flex-direction: column; gap: 14px; }
.pl-post {
  display: block; text-decoration: none; color: inherit;
  background: var(--pl-superficie);
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  padding: 18px 20px;
  box-shadow: var(--pl-sombra);
}
.pl-post:hover { border-color: #d9d6d1; }
.pl-post__cabeza { display: flex; align-items: center; gap: 10px; }
.pl-post__autor { font-size: 0.88rem; font-weight: 600; }
.pl-post__fecha { font-size: 0.8rem; color: var(--pl-texto-tenue); margin-left: auto; }
.pl-post__titulo { font-size: 1.05rem; font-weight: 700; margin: 12px 0 6px; }
.pl-post__extracto {
  color: var(--pl-texto-medio); font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.pl-post__pie { margin-top: 12px; font-size: 0.82rem; color: var(--pl-texto-tenue); }
.pl-post__contenido { color: var(--pl-texto-medio); font-size: 0.95rem; white-space: pre-wrap; margin: 0; }

/* ---- Comunidad: comentarios ---- */
.pl-comentarios { margin-top: 12px; }
.pl-comentario { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pl-borde-suave); }
.pl-comentario:last-child { border-bottom: none; }
.pl-comentario__cuerpo { flex: 1; min-width: 0; }
.pl-comentario__cabeza { display: flex; align-items: center; gap: 10px; }
.pl-comentario__texto { margin: 4px 0 0; font-size: 0.92rem; color: var(--pl-texto-medio); white-space: pre-wrap; }
.pl-responder { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; }
.pl-responder textarea {
  flex: 1; font: inherit; padding: 10px 12px;
  border: 1px solid var(--pl-borde); border-radius: var(--pl-radio-sm);
  resize: vertical;
}
.pl-responder textarea:focus { outline: none; border-color: var(--pl-comercial); box-shadow: 0 0 0 3px var(--pl-comercial-suave); }

/* ---- Soporte: FAQ ---- */
.pl-faqs { display: flex; flex-direction: column; }
.pl-faq { border-bottom: 1px solid var(--pl-borde-suave); }
.pl-faq summary {
  cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 0.94rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.pl-faq summary::after { content: '+'; color: var(--pl-texto-tenue); font-size: 1.2rem; }
.pl-faq[open] summary::after { content: '–'; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq p { margin: 0 0 14px; color: var(--pl-texto-medio); font-size: 0.9rem; }

@media (max-width: 560px) {
  .pl-persona { flex-wrap: wrap; }
  .pl-persona__rol { width: 100%; text-align: left; padding-left: 50px; }
  .pl-responder { flex-direction: column; }
  .pl-responder .pl-boton { align-self: flex-end; }
}

/* =========================================================================
   15. MENUS FLOTANTES (selector de empresa y cuenta) + widget de alumno
   ========================================================================= */
.pl-menu-flotante {
  z-index: 80;
  background: var(--pl-superficie);
  border: 1px solid var(--pl-borde);
  border-radius: var(--pl-radio);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.14);
  padding: 6px;
  max-height: 60vh; overflow-y: auto;
}
.pl-menu-flotante__titulo {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--pl-texto-tenue);
  padding: 8px 12px 4px;
}
.pl-menu-flotante__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: transparent;
  border-radius: var(--pl-radio-sm);
  font: inherit; font-size: 0.92rem; color: var(--pl-texto);
  text-decoration: none; cursor: pointer;
}
.pl-menu-flotante__item:hover { background: var(--pl-borde-suave); }
.pl-menu-flotante__item.es-activa { font-weight: 600; color: var(--pl-comercial); }
.pl-menu-flotante__item.es-activa svg { color: var(--pl-comercial); }
.pl-menu-flotante__item.es-salir { color: #c0392b; }
.pl-menu-flotante__cargando, .pl-menu-flotante__vacio {
  padding: 14px 12px; color: var(--pl-texto-tenue); font-size: 0.9rem;
}

/* ---- Widget "continuar sesión" del Inicio ---- */
.pl-continuar {
  display: flex; align-items: center; gap: 18px;
  background: var(--pl-texto); color: #fff;
  border-radius: var(--pl-radio); padding: 20px 24px;
  margin-bottom: 22px; text-decoration: none;
}
.pl-continuar:hover { background: #1e2127; }
.pl-continuar__play {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--pl-comercial); color: #fff;
  display: grid; place-items: center;
}
.pl-continuar__play svg { width: 24px; height: 24px; }
.pl-continuar__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-continuar__rotulo {
  display: block;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pl-comercial);
}
.pl-continuar__titulo { display: block; font-size: 1.15rem; font-weight: 700; }
.pl-continuar__meta { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.pl-continuar__flecha { flex: none; color: rgba(255, 255, 255, 0.7); }
.pl-continuar__barra {
  height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.18);
  overflow: hidden; margin-top: 8px;
}
.pl-continuar__barra span { display: block; height: 100%; background: var(--pl-comercial); }

@media (max-width: 560px) {
  .pl-continuar { flex-wrap: wrap; gap: 12px; }
  .pl-continuar__flecha { display: none; }
}