/* Planazo — estilos del shell (complementa variables/base/layout de Plan3P) */

/* Marca en texto hasta que haya logo propio */
.nav-logo-texto {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--color-acento);
  text-decoration: none;
}
.nav-modulo-icono { margin-right: 2px; flex-shrink: 0; display: inline-flex; align-items: center; }
.nav-movil-emoji { font-size: 20px; line-height: 22px; }

/* Fix heredado: badge móvil anclado al icono, sin translateX (antes caía sobre el botón vecino) */
.nav-movil-icono-wrap { position: relative; display: inline-flex; }
.notif-badge-movil {
  top: -6px;
  right: -10px;
  left: auto;
  transform: none;
}

/* Menú móvil centrado (antes inline en la MasterPage) */
.nav-movil-lista {
  display: flex !important; width: 100%; height: 100%;
  align-items: center; justify-content: space-around;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.nav-movil-lista > li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; list-style: none; }
.nav-movil-lista > li > .nav-movil-item { width: 100%; }

/* Inicio: tarjetas de módulo */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--esp-4);
}
.hub-tarjeta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-2); min-height: 140px; padding: var(--esp-4);
  text-decoration: none; color: inherit; text-align: center;
  transition: transform .15s ease;
}
.hub-tarjeta:hover { transform: translateY(-2px); }
.hub-icono { font-size: 2.5rem; }
.hub-nombre { font-weight: 700; font-size: 1.1rem; }
.hub-avisos { font-size: .8rem; color: #ef4444; font-weight: 600; }

/* Filtros por módulo (historial de notificaciones) */
.filtros-modulo { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.chip {
  padding: 4px 12px; border-radius: 999px; font-size: .85rem; text-decoration: none;
  border: 1px solid var(--color-borde, #444); color: inherit;
}
.chip.activo { background: var(--color-acento); color: var(--color-texto-inverso); border-color: transparent; }

/* Admin */
.admin-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; }
.form-inline { display: inline; margin: 0; }
.invit-form { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: flex-end; }
.invit-form .campo-grupo { margin: 0; }
.invit-nueva { outline: 2px solid var(--color-acento); }
.admin-tabla code { font-size: 1rem; letter-spacing: .08em; }

/* Icono de modulo con imagen (logo) en lugar de emoji: escala con el tamano de letra */
.icono-modulo-img { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; display: inline-block; }

/* Menu de escritorio: no empuja a la zona de usuario; lo que no cabe pasa a "Mas" (js/app.js) */
.nav-menu { min-width: 0; padding: 0 var(--esp-4); }
.nav-mas { position: relative; flex-shrink: 0; }
.nav-mas[hidden] { display: none; }
.nav-mas-boton { background: none; border: none; cursor: pointer; font-family: inherit; }
.nav-mas-menu {
  position: absolute; top: calc(100% + var(--esp-2)); right: 0; min-width: 200px;
  background: var(--color-fondo-elevado); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--esp-2); box-shadow: var(--sombra-lg);
  display: none; z-index: 60;
}
.nav-mas.abierto .nav-mas-menu { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 768px) { .nav-mas { display: none !important; } }